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.

Agency:
Copacino Fujikado
‍
‍Client:
Internal
‍Year:
2020
‍Tools Used:
‍Pen & Paper, Sketch, InVision, Adobe Photoshop

Copacino.com, circa 2017

Background

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:

The visual identity should be light, open, and friendly, while putting the focus squarely on the work of the agency
Add some personality and whimsy through copy and small details, but don't go overboard!
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.

Development

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. Laoreet non curabitur gravida arcu ac tortor dignissim. Mus mauris vitae ultricies leo integer. Dictumst vestibulum rhoncus est pellentesque elit. Faucibus interdum posuere lorem ipsum dolor sit amet. Tellus orci ac auctor augue. Duis at consectetur lorem donec massa sapien. Adipiscing vitae proin sagittis nisl rhoncus.

Iterations and Revisions

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.

Pretium lectus quam id leo in vitae turpis. Pretium vulputate sapien nec sagittis. Consequat nisl vel pretium lectus quam. 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.

Launch

Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Leo a diam sollicitudin tempor id eu. Morbi non arcu risus quis varius. Eu turpis egestas pretium aenean pharetra magna. Eu lobortis elementum nibh tellus molestie. Vitae justo eget magna fermentum iaculis. Scelerisque viverra mauris in aliquam sem fringilla ut. Euismod elementum nisi quis eleifend quam. A scelerisque purus semper eget duis at tellus at urna. Eleifend donec pretium vulputate sapien nec sagittis. Laoreet id donec ultrices tincidunt. Lectus urna duis convallis convallis tellus id interdum velit. Pharetra et ultrices neque ornare aenean euismod. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Risus in hendrerit gravida rutrum quisque non tellus. Imperdiet proin fermentum leo vel. Aliquet nibh praesent tristique magna sit amet.

Conclusion

Aliquam sem fringilla ut morbi tincidunt augue. Vitae aliquet nec ullamcorper sit amet risus nullam eget felis. Ullamcorper morbi tincidunt ornare massa. Nunc faucibus a pellentesque sit amet porttitor. Pulvinar neque laoreet suspendisse interdum consectetur. Lacus luctus accumsan tortor posuere. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sem nulla pharetra diam sit amet.

Next Steps

Leo a diam sollicitudin tempor id eu. Nunc sed id semper risus in hendrerit gravida. Facilisis volutpat est velit egestas dui id. Mattis enim ut tellus elementum sagittis vitae et leo. Arcu risus quis varius quam quisque id diam vel quam. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Nec nam aliquam sem et tortor consequat id. Tellus orci ac auctor augue.