Capitol Supermarket

Website Design + Rebranding

Return to Portfolio

The Client

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 Challenge

The owners want to revamp their website in order to appeal to new customers and showcase the wide selection of affordable foods an products.

A. Research Goals

  • Define users’ motivations, needs, and frustrations when shopping in-store and while browsing the website.
  • Understand what makes a customer’s grocery shopping experience satisfying.
  • Understand industry standards and what services/offerings give local grocery stores a competitive edge in Washington.
  • Identify areas of improvement for the Capitol Supermaket website.

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.

Findings

  • Most independent grocery stores do not have e-commerce websites, even if they are a chain. E-commerce does not seem to be a necessary feature, and users find value in non-ecommerce grocery sites. There are usual several main pages: Home, About, Contact, and sometimes events and/or promotions
  • All of the competitor companies have responsive websites. Capitol Supermarket will need a responsive website with high quality photos and active social media to be competitive in the DC local grocery market
  • Brand identity goes a long way in separating small grocery stores that sell similar things. Union Kitchen Grocery and Yes Market have similar products but one has a reputation for being more inclusive even though the prices are just as high. Brand identity will be crucial to revamping Capitol Supermarket and diversifying its customer base.

B. Primary Research - Interviews

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.

Research Assumptions:

  • Customers expect e-commerce options on a grocery store website.
  • Customers care about the values of the store and its owners.
  • Affordability and quality are the most important factors for residents when choosing where to buy groceries.
  • Customers live primarily in the same neighborhood as Capitol Supermarket.
  • Customers choose Capitol Supermarket for its affordability and convenience.

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:

  • Customers need to know that Capitol Supermarket sells high quality products.
  • Customers need engagement with the company and its employees.
  • Customers need to see the unique identity and brand of the company.
  • Customers need to know they’ll find what they’re looking for on the Capitol Supermarket website.

C. Persona Creation

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.

D. Define & Ideate

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.

E. Task Flow and Sitemap

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.

F. Low-Fidelity Wireframes

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.

G. Mid-Fidelity 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.

H. Responsive 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. Usability Testing

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.

Tasks:

  1. View the page for the upcoming wine tasting event and confirm your attendance.
  2. View a recipe, and navigate to the nutritional facts section.
  3. Head to the Goya Malt drink product page, and see if Capitol Supermarket has them in stock.

Affinity Mapping

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.

Findings:

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.

Recommendations:

  1. Create sub-filters for the international product filter.
  2. Create large clickable areas of links on the prototype.
  3. Add a feature that shows the number of people attending and a viewable attendance list

J. Branding

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.

K. High Fidelity Wireframes

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.

Top