Designing my first e-commerce website

Overview

Michelle Chen
Aug 16 · Unlisted

During my summer internship at Shrimpton Agency, I had the opportunity to take on Jo+Co as a client. Jo+Co is a new gender-neutral, vegan nail polish brand based in Los Angeles. They are scheduled to launch their products and site in late September 2019. For this project, I was tasked to create a youthful and energetic brand for Jo+Co as well as design a brand new e-commerce website for Jo+Co, a gender-neutral, vegan nail polish brand based in Los Angeles. Below details my design process for creating Jo+Co’s website.

Website Design

UX Techniques Used: Competitive/Comparative Analysis, Mind Mapping, User Personas, Site Map, User Flows, Wireframing, Prototyping, Usability Testing

The primary goal of the website was to allow customers to purchase products online and learn more about Jo+Co’s brand. The site needed to reinforce Jo+Co’s core business values: youthful, creative, and all-inclusive. The site also needed to distinguish Jo+Co from other e-commerce retailers by emphasizing its chemical-free formula, sustainable packaging, and unique target audience. The site needed to enable customers to complete the three main tasks: search, discover and purchase, utilizing an online checkout system.

The primary business goals for this website included:

  • Product listing page
  • Product detail page
  • Having clear ways of locating specific products
  • Having an efficient way of purchasing one or more products
  • Guiding customers towards new or popular products

User Research

User Personas

Who are we designing this website for? Since the client had already defined 3 user personas, each with specific needs and pain points, I identified the main user needs I wanted to address in the website while also looking at the needs of Jo+Co.

Three user personas defined by my client

The primary needs I defined were:

  1. Clear product organization for a flowing shopping experience
  2. Product search to easily find products
  3. Helpful product suggestions that allow customers to compare products with each other
  4. Customer brand relationship to establish trust
  5. Detailed product information to ensure customers select the right product for them
  6. Efficient checkout process to save users time and allow for easy purchase of products

Competitive/Comparative Analysis

In this stage, I identified three main competitors in the vegan, cruelty-free nail polish industry and three main indirect competitors in the general nail polish market. The direct competitors I looked at were Ella+Mia, Nailmatic, and Piggy Paint. The indirect competitors that I analyzed were Essie, OPI, and Revlon. My goal was to compare common features across these sites and identify potential opportunities for Jo+Co to create a distinct brand. From the comparative analysis, I learned how different websites organized their nail polish colors and the overall layout they used for the websites.

Comparing different features across from direct and indirect competitors

Mind Mapping

Since the primary goals of the business and user needs/goals were already defined by the client, mind mapping helped me to organize all that information into more defined ideas. I was able to establish connections and hierarchy amongst those ideas.

My mind map to help me organize all the information into defined topics

Information Architecture

Site Map

Since Jo+Co only sells chemical-free, non-toxic nail polish, three things should be emphasized: its nail polishes, its ingredients, and its story. There was no need to categorize the products since there was only one product type. With Hick’s Law in mind, I created a site map to define the overall structure of the website. Given three choices (not including the searching and viewing shopping cart), users are given clear but restricted options.

Site map to organize the different categories for the website

User Flows

To define the steps that users might take through various pages and actions on the website in order to complete their goal, I made a user flow for the personas. By making the user flows, this enabled me to focus on what each of the users needed to accomplish and how to deliver that experience when designing the website.

The user persona I addressed in the user flow below was Beatrice. Beatrice’s main goal was to go to the website to find a couple of different shades of nail polish as a present for her grandson. Beatrice’s user flow shows how she might go on the website to find the nail polish colors that are suitable for her grandson and the several paths she could take to successfully purchase those colors.

Beatrice’s User Flow

Development Phase

Sketching

After organizing all the insights I gained from the research I did, I began to design the website. With the help of the user flows, I began to sketch several of the site’s main screens and quickly drew up several concepts for the website layout. To test whether site solutions addressed both the user and business needs, I asked for feedback from my team members.

Some initial sketches of the Homepage and PLP

Notes from Feedback

  • Think about the hierarchy of homepage: establish what kind of product you are selling for users that have never heard of Jo+Co → important announcements and products → introduction to Jo+Co’s backstory
  • Established categories: shop all, our story, ingredients
  • Sign in function is not needed

Wireframing

From the feedback I received based on the sketches, I began to design the initial wireframes using Figma. In the wireframes, I made sure to pay attention to the hierarchy of features to best address user needs.

Homepage and PDP Wireframes

Prototyping

1. Homepage

The overall goal of the homepage was to allow users easily locate and find products so the design had to be clean and simple and had to include global and secondary navigation. To allow users that know what products they are looking for easily find those products, I included a search bar. The new arrivals or popular products section was key to allowing users a quick way to discover products that they might like. Since an important aspect of Jo+Co is the importance of their story and what ingredients are used in their formula, an “our story” and “ingredients” section was also featured on the homepage. These sections gave a brief summary and linked to separate pages with further information. In the footer, I placed important links that users might need to find out additional information about the company. This section also included a subscribing option to build on the customer-brand relationship and inspire loyalty so that customers feel more incentive to repurchase products from Jo+Co.

2. Product Listing Page

Once the user selects the Shop option they are brought to a page that lists all available products. One of my user personas, Jessie, knew what colors she wanted so going into this page directly and scrolling through would be a quick and easy way to complete her goal on the site. When looking at the comparative analysis between the different sites, I saw that the majority of the websites included a breadcrumb trail to help the user identify where they are within the website. When I was designing the PLP, I decided against including a breadcrumb trail because there is the only type of subpage that the user can get to after looking at all products. Therefore, the user saw how they got there and do not need the explanation of how deep they are embedded in sub-views.

3. Product Detail Page

The product detail page was designed to ensure users find the product that fits their needs. Since this is a new brand, I did not include a product reviews section at this stage. However, in the future, once the company expands its customer base a product review section should be added to allow for user input and help users make more informed decisions when purchasing. To make the checkout process simple and efficient, a cart summary appears every time a user adds an item to the cart or when the shopping bag icon is moused over. Once the preview of the cart is shown, users can directly click on the checkout button to begin checking out.

4. Additional Screens

I created an Order Completion Page so that users can see what stage of the order process the user is in and that they should review their information being confirming their order.

The two other key pages that I designed are the About Page and Ingredients Page to show how they differentiate from other nail polish brands such as Essie or Revlon. These pages included hand-drawn icons and content about the inception of Jo+Co to reinforce their brand values of youthfulness, creativity, and all-inclusivity. To move forward, I wanted to communicate my ideas to my team members. During our feedback session, I was able to gain valuable insight about improvements I could make to the wireframes.

Order Summary
About page
Ingredients page

Notes from Feedback

  • Condense “our story” and “ingredients” section on the homepage
  • Eliminate the need to even go PDP for efficiency by adding prices to “add to cart” buttons and inserting telling visuals
  • Shorten completing order process → 3 steps can be frustrating for users

Usability Testing

After incorporating the feedback I received, I worked through the wireframes to insert real visual content because I wanted to create a prototype that felt real to users. This would allow me to evaluate how users would engage with the proposed website solution and validate whether it was addressing the primary user needs. I conducted a usability test with 10 participants and asked them to complete three different scenarios to put themselves into the shoes of my user personas. These three scenarios were:

  1. You need to buy a birthday gift for your daughter but you aren’t sure what she would like. Show me how you would find a product for her.
  2. Show me how you would find out more about what ingredients go into Jo+Co’s nail polishes. After this, you want to sign up Jo+Co’s newsletters and loyalty program.
  3. You have a specific nail polish shade in mind that you want to buy. Show me how you would find it.

Key Insights:

  • Users were able to easily navigate the website and locate products
  • Users took a long time to find the newsletter sign up
  • Interesting observation: 8/10 participants got to the “our story” page via the “learn more” button on the homepage

Final Design

At this point, with user feedback, I was able to modify my designs and incorporate the visual style and branding of Jo+Co.

Homepage
About section on homepage
Product detail page
Product listing page

Visual Elements & Animation

With the brand values of creativity and youthfulness in mind, my team and I discussed ways to make the website more interactive and entertaining. Using interaction design, we were able to bring our hand-drawn icons to life. For example, the icons would hide behind product images and on hover, they would jump out to inform the user of their current mouse state. We also wanted to incorporate playful interactive buttons.

What’s Next?

After the final designs were approved by the clients, they were sent into development. The site is currently scheduled to be launched in September.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade