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.
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
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.
I kicked off the project by interviewing Nicole. This would help me find her product goals and set my focus on the overall project.
Working to keep in line with my goals for the first week, building the user flows, and the user journeys maps were next.
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.
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.
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.
Building on my sketch guidelines, the wireframes were focused on creating a clean interface with all the key elements easy to find.
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.
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.
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.
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.
