Jo+Co

Branding and E-Commerce Site Design



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. 


Website Design


To read the whole process, check out detailed design process.

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

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. My goal was to compare common features across these sites and identify potential opportunities for Jo+Co to create a distinct brand. 


Mind Mapping


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

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.

Development Phase

Sketching

After organizing all the insights I gained from the research I did, I began to design the website. To test whether site solutions addressed both the user and business needs, I asked for feedback from my team members.



Wireframing

Prototyping


Pages included in order: homepage, PLP, about, ingredients, PDP, order summary

Usability Testing

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. See final designs below. 










Michelle Chen ✌️             
Behance.   Dribbble.   LinkedIn.   Medium.  
Let’s connect!
michelle03029@gmail.com