Michelle Chen.
Work.   Play.   About.    Resume.



 

JO+CO 

Branding & E-Commerce Website Design










OVERVIEW
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 by the end of 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. 








Balancing what the client and user wants and needs, and technical constraints.



THE GOAL

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. 

BUSINESS OBJECTIVES

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

Personas



Three user personas defined by the client

PRIMARY USER NEEDS

  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


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

Organizing all the information into defined topics






INFORMATION ARCHITECTURE

Navigating through an experience should be fun and productive. 





SITE MAPPING

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 of 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 several paths she could take to successfully purchase those colors.



DEVELOPMENT

Ideas aligned with Jo+Co’s brand identity and user needs.





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

Validating decisions through a feedback loop with users and internal testing.

We 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.


INSIGHTS + IMPROVEMENTS

  • 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 homepage

With user feedback, we were able to modify my designs and incorporate the visual style and branding of Jo+Co.



JO+CO WEBSITE

Fun, eco-friendly nail polish for everyone.










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