In redesigning the Top Pot Doughnuts website and brand, I aimed to bring to the hand-crafted, nostalgic quality of the company into the digital realm while also bringing it up-to-date with responsive design.
About the Project
Top Pot Doughnuts is a successful, Seattle-based business that serves coffee and doughnuts made in-house. However, this well-known local business has a website and visual identity that could use a refresh. Under the guidance of Andy Stewart, a Senior Designer at Turnstyle Studio, I took on the challenge.
Website Redesign
Understanding the Audience
To begin the website redesign process, I learned what I could about Top Pot’s customer base through visiting its various locations and reading Yelp reviews. Using this knowledge, I composed a handful of user personas to direct my design work. Below, I’ve included two examples that cover much of the customer base: locals and tourists.
Tourist
Haley is only in town for a short period of time and heard about Top Pot through word of mouth. She visits the website to learn more and find a location nearby.
Local
Jackson is a busy parent on the hunt for a nearby coffeeshop with a neighborhood feel. He’s hoping to find a place that’s good where he can become a regular.
Restructuring the Website Content
Once I had a better sense of the people who would be visiting the website, I restructured the site content, focusing on the organization of the navigation.
The new design includes a map to display all the locations at once and a unique page for each, which would include photos, hours, and contact information. My hope was that this new addition would not only allow people to more easily find their nearest Top Pot and get the info they need to visit, but it would also highlight the unique personality of each location and ideally inspire people to explore different ones.
Site Map
Use the site map key in the bottom left corner to better understand the information included in this image.
Creating the Website Skeleton
Once the website’s navigation had been mapped, I created several wireframes. With these in place, I considered different entry points (such as users who would be linked to the menu via Yelp) and the unique needs and expactations of each persona I’d created earlier. Anywhere they could have gotten stuck, I made adjustments.
Wireframes
Above are two examples of wireframed pages, showing the homepage as well as a page for one of Top Pot’s unique locations.
Creating the Visual Identity System
I explored a couple different visual identity systems. Both remain true to Top Pot’s underlying brand values—which I learned about through watching and reading interviews with the founders—by retaining the nostalgic quality of a company that sells hand-made goods, namely the doughnuts that Top Pot creates using vintage machines.
Style 1
Style 2
Illustrated Elements
To add a more custom look, I created illustrations and used them on different parts of the site. These also worked well in replacing lower-resolution photographs, which would no longer work in the updated design.
Doughnuts
Icons
The Finished Design
In applying the refreshed visual identity to the wireframes I created, I did my best to integrate texture and made the design almost seem tangible.
Design
The Experience
Rebranding and redesigning the Top Pot Doughnuts website was an exercise in experimenting with an old school, local company. It was a fun experience and ultimately helped me recognize my inclination to more contemporary brands that exist primarily in the digital world.
