ear goals mock up
Tags:  Website Design| Client E-commerce Website
Role
Tools
Team

-Solo Designer -
Product Design
Visual Design  
Prototyping
User Research
Usability Testing

Figma
Invision Freehand
Maze Remote Testing
Google Suite (Docs, Sheets, Slides, Forms)
Notion

Client - Miea Hicks
Mentor -  Guidance/ Feedback
Thinkful Cohort 13 - Feedback
 & Critique

TL;DR
Shopping online can be one of the most overwhelming emotional experiences… and not always in the best way. During a 4-week design sprint, I designed an e-commerce website for an online jewelry retailer, Eargoals. The site accomplishes two major wins for Miea Hicks the store owner: it's a place where users can purchase merchandise with an intuitive checkout flow and grow a connection with the EG brand.
View prototype
feminine jewelry website mock up

The Problem

Customers want to buy Eargoals jewelry collections, however, the third-party online platform Etsy which was used to sell unique earrings is not robust enough for users to engage with the brand and purchase directly from the seller.

The Audience

Users are typically female (she/her) or
non-binary (they/them), or friends and family gifting to them. They are between
18-35 years old, young professionals, and college students.

The Solution

MVP
The product is a prototype of a website that will generate sales. It creates avenues for good social impact and provides information about the brand; and how people can engage with them while being accessible to a larger virtual audience.

Laptop and tablet  web design

Let’s confirm that the solution did that by  walking through the process to the final product in the next section.

Process

Competitive Analysis

Simultaneously, I performed a competitive analysis on key competitors. Here is some high level insights of a few that helped make decisions on what the website UI should include and what to stay away from in order to satisfy user’s needs and goals.

Competitor - Caitlyn Minimalist Competitor - Awe Inspired
[Introducing primarily Persona]

This is Taylor

Your avid shopper archetype
smiling black girl with gold earrings
Discover/Research

The following insights have driven the final state of the Eargoals website:

User persona of a avid online shopper archetype

Motivations

She’s driven by supporting local black-owned businesses. Enjoys to follow and engage with fun brands that she is passionate about and is all about supporting women in their goals and aspirations.

Frustrations

She finds it hard to navigate some of her favorite local brands' websites and believes that the check out process is the most time consuming and confusing portion of the buying experience. She also hates long lines and becomes impatient, thus prefers to shop online.  

information architecture

User Stories

High Priority
As a returning user, I want to be able to buy directly from the seller/owner Miea Hicks, so that I can support the #Eargoals Brand.
As a new user I want to check out merchandise from the website, so that I can get it sent to my door and not have to go to a physical location
As an avid shopper, I want to be able to have a style guide so that I can see what pairs well with other brands I love.

User Flows

The main three flows show how the user will get through a few key goals they might have. First the checkpoint flow, second connecting with the community and lastly getting in touch with the brand.  View these as they helped in illustrating the paths to make available on the site.

User flow 1 User flow 2

Paper Prototype with early research

Before settling on this wireframe and creating a digital prototype I wanted to simulate how it might work using a paper prototype model that allowed me to visualize how it could look in a mobile version. This is important because striving to make sure that the website is responsive is the next step for an ecommerce website. Although creating a mobile digital prototype is out of scope for delivering a website for the client,  it ensures that when resources are available there will be room to adjust the design for mobile.

Sketches of prototype

Wireframes

The deliverable that was the important step to creating a clickable prototype was the wireframe. In this stage it was important to ensure it was clear that the website was accomplishing the clients wants and primary users needs.

Wireframe things Wireframe shop all

Brand

Brand Development

Brand Personality
It was really important to ensure the EG brand was set to be a trendy but also staple brand that people will keep running back to. The client wanted to create a brand that was memorable and youthful but also simple and clean in it’s online presence. My research and testing was vital to the success of the use of typography and color for the website and Art Director, Joelle Mitchell handled the Logo and color selection.

Moodboard
This communicates the visual mood of the EG brand. It creates fun and excitement around the brand and pulls people in to check out the amazing selection of jewelry available on the website.

EG - Moodboard

Color Palette
The color selection process wasn’t done in a silo, the client had an art director that picked out these colors. After being sent these, I did some AB testing to understand how the color placement would be perceived with users.
Color psychology:
Light Pink - (Primary Color) Represents femininity and happiness
Muted Black - A modern classic c that keeps the text and info easy to view and understand
Purple - Royalty and elegance
Mint Green - is a style and trending color that is complementary to pink and purple.

Typography - (For the website)
Fun and youthful and accessible for web typeface was chosen for this project website by myself. The logo typeface was selected by Art Director (Joelle Mitchell, VA)    

Style Guide
Shows the full range of the color palette, logo, typography, its usage, and overall style of the app as a fun brand that keeps you in style.


Eg - Style Tile

prototype

This is a working low fidelity prototype. View to see the homepage and checkout process which the research shared is the most important step in cutting out frustrations for users.

Usability testing with results

I used the Maze Remote User Testing platform to conduct usability testing. This was helpful in gathering qualitative and quantitative data. Additionally, I took more feedback by following up with a user interview via Zoom for one of the test participants. (due to time constraints I was only able to select one person for user interviews)

I tested 3 main components to ensure the site’s functionality:
Ease of Use
Checkout flow
Clarity of content organization

Positive feedback from testers:

We got some great feedback and helped us move forward with the design and adjust to make the prototype even better.  

"It is a very user friendly site!"

"Love the look! Super simple and liked the "collections" of products before you saw the complete gallery”
"Nice and simple, intuitive and great checkout flow"
"Seems well thought out and simple to use"


Further Development gathered after testing.
Implement some of the check-out suggestions from testers.
Ensure there are Error Prevention screens that indicate if people are straying away from their intended path.
Include testimonials on the homepage.
Create an Item Overview for those who want to buy quickly.

conclusion

Final Thoughts

After every project, it's important to take a step back and look at the big picture. Reflecting on what went well and what didn't go so well is vital to growth as a designer. I find that nothing is in its “finished state”. Good design solves problems for the current state but as time goes on there will be new needs, frustrations, and more to tackle head-on.

As it stands today, I believe that the website creates an easy flow for users to be converted to customers. It solved the initial problem and clients' needs equally. The lesson I learned throughout the design process from discovery to delivering the solution was that feedback is essential. Feedback is a necessary step as designers, and we should spend more time gathering a plethora of it. Not only to gather insights from the target audience and the client, but it's just as important to share work with other fellow stakeholders early in the process. This will cut down much of the redesign before getting too deep into the design stages.

Lastly, through the various iterations and feedback loops, I learned What makes a successful e-commerce site is the intentionality of design. Making the site easy for users to scan quickly, make informed purchases, and tell the unique story of the Eargoals brand.

Citi|Razorfish >
Case study