Platform| Web
Project Date| July 2020  
Type | Course Project
Role| User Researcher, Visual Designer,
Information Architect, Interaction Designer


Online shopping is bigger than it has ever been. There is nothing like the convenience of being able to go from Instagram to a full online store to make a secure and painless purchase of that special something you've been eyeing-up on your morning commute.

When I reached out to my roommate Nicole to help build her jewelry website my mind was set that building an E-commerce site would be way too easy of a project. I was wrong, somewhat. Half wrong. So many people shop online and you would think the steps people take would all be the same. Just like how everyone has a different style I’ve learned that online shoppers all take slightly different journeys.

Coyotewillow Silver is a jewelry brand started by my roommate Nicole. Just like many other artists in the bay area she doesn’t have an online presence to sell her wares.

The Issue
Honing her craft in silver jewelry as a hobby for the last several years, Nicole has amassed a large collection of pieces she feels are ready for the marketplace. Her hobby is transforming into a small business and she needs to make the leap to the professional online marketplace.
The Solution

Create an e-commerce site that helps Nicole sell her products while also giving customers the ability to find more information about her, and tips on making the perfect jewelry purchase

My Process

Since starting my design journey my process for most projects has followed a linear path. I’ve learned that design sprints are used to help bring products to market faster. For this project, I wanted to test the waters of the design sprint method. This would push me to think outside the box and quickly bring something tangible to Nicole. 


The Kickoff and Goals

I kicked off the project by interviewing Nicole. This would help me find her product goals and set my focus on the overall project.

1. What would success look like for you?
A. To have something up and running that matches my brand and style.
2. How would you think a user would describe this product?
A. Very clean, something that’s easy to navigate. Gives me the information that is needed. 
Picking a Target
To narrow down how I would solve the project’s problem, I use a “how might we” method. This helped me focus on a few key pain points.
Making the Maps

Working to keep in line with my goals for the first week, building the user flows, and the user journeys maps were next. 

Checkout user flow
User Journey would give me a baseline of a user’s touch points and feelings

Since no users were interviewed I had rely on the information given to me by Nicole to focus more on a target audience or proto-persona.

Competitive Analysis

I wanted to keep Nicole involved in the project as much as possible. Since this project is focused on bringing a product out that matches her vision I felt the need to dig deeper into her online shopping experience. I used the UI of places she shops as inspiration to help guide me on building the best layout for her website. 

Home page of jewelry sites she shops on.
Item page of jewelry sites she shops on.
Sketch Solution 
Using the insight I gained from the competitive analysis and client interviews I rounded the first week off with the final layout sketches for the project.

Sketching & Wireframes


Design sprints are a strange concept if you're a new designer. Unlike a typical linear design process, you might be setting up interviews with potential users by the end of the first week or start of the second.  

No users are on the books for another week, so for the start of week 2, I worked on the storyboard. Writing out the steps for how a user test flow might look and following that up with sketches. These sketches  would act as a guide to make it much easier to build the prototypes. 

Step by step of a users flow
Closer detail of item page
Closer detail of payment page

Building on my sketch guidelines, the wireframes were focused on creating a clean interface with all the key elements easy to find.

Home screen iteration before user testing
Home screen during first mockup


Testing Users

Each time I design a new page I find myself thinking that I’ve analyzed all the ways users could fall off track. I'm always reminded that users aren’t designers and we can never predict what they'll do or say. Since we were in a COVID lockdown all 4 of my users were tested virtually during week 3 and were given 2 scenarios.

Scenario 1
You’re shopping online for a ring as a gift for someone. I want you to search for a ring to buy. And then complete the checkout process. For this task, you already know what size ring you will need to buy (size 0)
Scenario 2
You’re browsing online for a ring as a gift for someone, but you don’t know what size you need to buy. I want you to search for two ways on the site for tips on how to find what size you might want to buy

Adjustments during testing

Add button was given added stated to help testers recognize that item was added to the cart.
Elements were giving a disabled state to give tester better visual feedback


During the start of week 4, I spoke with Nicole again and asked if she ever thought about colors and typography. As designers we know that color and typography can help guide the user during their journey. 

She had an idea of some of the colors she wanted to use for the overall look, but no set font outside of the one used for the store name. After making some adjustments to the 3 base colors I was given, and selecting a typeface I was able to finalize the overall look and feel. 

The Josefin San typeface was selected because it has a light penmanship look and an elegant feel
Colors inspired by the stone formations of the desert, sunsets, and turquoise.
Used the 60/30/10 rule to give my color usage balance.
Text color was tested to meet WCAG level AA guidelines.

One analogy that I’ve fallen back on when explaining to someone unfamiliar with UX and UI is “toast and jam” With UX we survey, interview, and test to make the toast. While the UI we spread the colors, typography, and visuals aka the jam. 

All the research collected at beginning of this design sprint at the end helped me build a clean, simple, and intuitive interface.

Preference Test

After watching a couple users struggle to find the shop button I knew that the home page needed a refresh. After building 2 new pages that used a call to action buttons to push users to Nicole’s products, I used a preference test to decide on the final build. 

First version of home page.
Iteration 1
Final version of home page with header font change


My Thoughts
Being the sole designer and having no real project leader I found myself questioning every step. I have to remember no product is really ever complete, it’s always changing, what doesn’t work now could work in the future. Remembering that our users help guide us on what works best for them. Their feedback during testing is what helps us build the best possible products. On the last note, I have to trust the research. Reminding myself to let the research guide me on what’s best for the project helps keep me on track.
Next Steps
This is a big step for Nicole’s jewelry business and I want to be there for the bulk of this journey. I’ll be working with Nicole on finding the best possible hosting for her site. I’ll also touch base with her on how she can make changes to push more sales on her site.