Top Pot’s visually cluttered website has poor information architecture which hinders their ability to deliver value to users. This conceptual redesign seeks to clarify key points of conversion and reorganize content into an intuitive format.
The Current Website
Current Sitemap
The current website’s information architecture is broad and shallow. Most of the content is separated into single-topic pages with long-form text or links out of the website. The color coded sitemap above illustrates how related content is separated across the site and highlights an underutilized footer.
Target Audience and User Goals
I defined the target audience as Seattle residents aged 20 to 55 that are readily employed or students and have the desire to participate socially in their communities. This audience was informed by Top Pot’s marketing materials, locations, and current website content.
User Personas
I developed two user personas to capture both habitual and irregular (one time) users. Habitual users represent those that regularly order food in bulk for coworkers or events. One Time users are those that sporadically purchase food and do not have established preferences for where they purchase from.
On-Site User and Employee Interviews
I wanted to hear from customers in-store to learn about the values that lead to purchase conversions. These values would be key to highlight in the website and would inform the information architecture. In speaking with employees, I hoped to gain a greater sense of what Top Pot Doughnuts values most about its own business.
Key Findings
Larger emphasis on coffee and beverage options in-store vs. online
Social media used as advertisement in-store, particular emphasis on celebrity fans of Top Pot
Customers use paper form to order for pick-up but would prefer a method of placing orders online
Competitive Analysis
Competitive Matrix
Feature Comparison
Key Features to Include in Redesign
Interactive Locations Map and Photos/Illustrations of Locations
Online Ordering Form with Multiple Options for Ordering
Merchandise Purchase Option
Open Card Sort
I conducted an open card sort with three participants within my target audience. Participant choices revealed a need for deep levels of information in few categories. Information participants rated as of little importance in their purchase decision was able to be moved into a secondary footer navigation.
New Sitemap
I condensed the site’s content and integrated the paper ordering process into the Top Pot website. I emphasized social media accounts to a greater degree due to their percentage of Top Pot’s marketing attention. I arranged the location listings around an interactive map to improve the user’s ability to easily locate the closest cafe.
Word Cloud
I created a word cloud based upon my audit of the existing website, competitive analysis, and user interviews. As the primary distinguishing factor from competitors, the “hand-forged” aspect of Top Pot was essential to maintain. Vintage elements and a feeling of quality were emphasized by consumers and the site’s existing content.
Mood Boards
I generated three distinct mood boards based upon the word cloud and existing website. Shown above is the board that best captured the elements needed to maintain Top Pot’s distinct personality. An emphasis on vintage style, location, art-deco line work, and unique illustration was included to inspire the visual design.
User Testing
Paper Prototypes
Wireframes
I developed multiple iterations of each screen on paper and completed user tests to ensure that the interface was intuitive. I created wireframes based upon paper prototype tests and conducted an additional round of user tests to further refine the user interface.
Mobile and Desktop Designs
The new design features brighter colors on a cream background with art-deco style line work to direct the users eye and hearken back to a feeling of nostalgia. The redesign’s key feature is the online ordering process, which takes the paper form from user interviews and transforms it into a familiar shopping experience that users can now conveniently access.
Desktop Order Process
Mobile Ordering Process
The screens above illustrate the responsive nature of the new website. Changes in content layout and interactions create a unique, intuitive experience for users based on their preferred device. Common mobile gestures and reduced screen size were accounted for to ensure that mobile users were able to quickly access the desired information.
This conceptual redesign of Top Pot’s website offers users much needed clarity, organization, and access to features they expect. With responsive design, this site accommodates users planning ahead for purchase and those immediately seeking information on Top Pot’s locations and services.