Website Design + Rebranding
Capitol Supermarket was established in April 1976 by a hard working Korean-American family with 3 decades of experience in the grocery business selling a variety of food, including international products.
The owners want to revamp their website in order to appeal to new customers and showcase the wide selection of affordable foods an products.
I analyzed some of Capitol Supermarket's competitors in the grocery industry. I uncovered the strengths and weaknesses of the business's direct competitors Streets Market and Union Kitchen Grocery. In addition, I performed a competitive analysis on Yes! Organic Market and H-Mart which are indirect competitors of Mirror.
Empathizing with the target audience is a crucial step in the design thinking process, so it was essential to go out in the field and interact with real customers. I spent a day at Capitol Supermarket chatting with customers about their motivations, needs, and frustrations while shopping there and other grocery stores in the area.
After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic.
Clustering interview responses allowed me to discover trends and patterns from which insights could be constructed. Through this process I identified several user needs:
Next, I used all of the qualitative data i gathered during the research process to create Adam, my persona. Adam spent his childhood living in many countries and cultivated a passion for cooking international cuisines. He seeks to find the freshest authentic ingredients he can for his dishes.
Now that I had empathized with target users and identified their needs, I needed to define the solution. I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I had identified common areas, I could decide what product features were necessary for the prototype.
I created a high-level list of site features to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.
I completed a task flow and user flow to imagine the ways a user might navigate through the site to achieve their goals. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user.
Based on those, I created a site map which laid out the structure and organization of the content on the site.
I began the process of wireframing with sketches of variations of the website landing page. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketch I chose served as a guide for my digital wireframes.
I created a mid-fidelity prototype of the desktop site in Sketch. I created a UI requirements document to outline all of the features and elements I wanted to incorporate into the design.
At this point in the design process, I needed to think about how I wanted the site to look on different screen sizes. It was essential that the website would present as well on tablet and mobile devices as it did in desktop size. I created responsive wireframes for Capitol Supermarket's key pages and began to flesh them out.
I asked 4 participants to test out the prototype's usability. The participant pool was comprised of people between the ages of 18 and 65. Two participants met me in person to complete the usability test, while two others did so remotely via Skype. The participants were given three different scenarios, each with a task to complete.
I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which I reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way of determine what needed to be changed immediately and what could be saved for later.
Overall, users navigated through the website without difficulty. 100% of users referred to the tasks as either simple or easy. Confusion most often stemmed from issues choosing filters for uncommon products or technical issues with the InVision app. More usability tests will have to be conducted on other site features such as the reviews section placement and the grocery list feature once it’s complete.
At this point in the process, i began thinking about how the website would look and feel to visitors. I came up with a series of descriptive words that captured the essence of the Capitol Supermarket brand: lush, modern, colorful.
With these adjectives in mind, I created mood boards on Pinterest where I collected pins of typography, logos, and color schemes that aligned with my vision for Capitol Supermarket.
I began brainstorming ideas for a logo, aided by the inspiration I found on Pinterest. I wanted to maintain some elements of the current logo in a way that projected a more current, professional image.
The result was a new logo image of the Capitol Building-a simplified, more contemporary version . The image was changed to green, a color that evokes thoughts of freshness and positivity.
The logos were added to the Style Guide and UI Kit, a comprehensive collection of all site components and UI patterns. Both documents are constantly changing as the website and brand grow.
I applied the branding to my mid-fidelity wireframes. With all of the visual details added, they were fully fleshed out.
While the usability test feedback was mostly positive, the prototype is not perfect. I plan on fleshing out the rest of the pages of the prototype, especially the shopping cart and filter features. I plan to continue the iterative cycle of testing and updating the prototype. I will use Zeplin to hand off the design to the developer team when I have made all improvements to the prototype.