Copacino Fujikado Website Redesign

Web Design, Wireframes, Prototyping
Project Overview
While working at Copacino Fujikado, a Seattle-based advertising agency, I took on a leading role in conceptualizing, designing, and producing an all-new website as part of an overall brand refresh. As part of this project, I  conducted competitive research, created wireframes for key pages in desktop and mobile layouts, created a low-fidelity prototype to demonstrate the structure and navigation of the site, and collaborated closely with our developer partners to ensure the final product closely matched our team's vision.
Copacino Fujikado

Tools Used:
Pen & Paper, Sketch, InVision, Adobe Photoshop, circa 2017

The last major redesign of CF's website was launched in late 2016, shortly before I joined the company. While the design was visually striking, by 2020 it felt dated and heavy. In addition, the site infrastructure made it extremely difficult to create new pages and content, which meant that new work wasn't getting showcased.

With the agency undergoing a leadership transition in 2019, the time was ripe for an overall brand refresh, including a completely new site. My role as a Digital/Interactive Designer and web design subject matter expert, as well as my first-hand experience with the challenges of the existing site, made me a natural fit to take a leading role in the design and development of the new website.
Competitive Research
I began my design process by conducting competitive research to get a sense of what other creative agencies were doing with their web presence. Looking at both local and national competitors, I started gathering examples and noting what aspects of their designs worked well and what could be improved on. Because the launch of the new site was part of a larger brand refresh, during this process I also collaborated with the Art Director leading the rebranding efforts to create a cohesive presentation of our competitor's branding and web presences.

A sampling of local and national competitor's web presences

After presenting our findings and initial creative direction, we engaged in a freeform conversation with senior management about what  they thought worked and what didn't. Throughout this discussion, I asked questions and presented examples to help the creative and executive teams align on what the new site should look and feel like. To help ensure that we stuck to this shared vision, I wrote out a few guiding principles for the rest of the design and development process:

  1. The visual identity should be light, open, and friendly, while putting the focus squarely on the work of the agency
  2. Add some personality and whimsy through copy and small details, but don't go overboard!
  3. Case studies and other content should be written and structured in a way that's easy to replicate, so that we can show new work ASAP

With a thorough understanding of the vision and goals of the project, I began fleshing out the design of the site itself.

The Design Process
Habitasse platea dictumst vestibulum rhoncus est pellentesque. Pretium quam vulputate dignissim suspendisse in est ante in. Ut lectus arcu bibendum at varius vel pharetra. Senectus et netus et malesuada fames. Hendrerit gravida rutrum quisque non. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Potenti nullam ac tortor vitae purus faucibus ornare. Sagittis nisl rhoncus mattis rhoncus. Imperdiet nulla malesuada pellentesque elit. Morbi non arcu risus quis varius quam quisque. Urna nec tincidunt praesent semper feugiat nibh. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Fermentum et sollicitudin ac orci phasellus egestas. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum.

Purus gravida quis blandit turpis cursus in hac. Diam maecenas ultricies mi eget mauris pharetra et ultrices. Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Ultricies integer quis auctor elit sed vulputate mi. Diam maecenas sed enim ut sem viverra. Sed tempus urna et pharetra. Commodo quis imperdiet massa tincidunt. Eget egestas purus viverra accumsan in nisl nisi. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Sed felis eget velit aliquet sagittis id.

View prototype demo