UX Designer, Website Development
2020
After completing my User Experience certificate, I was eager to get started!
A friend had started their own coffee business and was at the point where they needed to get the website up and running. It was the perfect opportunity to try out my new skills, and have something to build out my portfolio.
Brand Guidelines
I wanted the website to feel relevant. References to hip hop culture from the ’90s and a neutral color scheme built from ocean and island tones.
User Research
I conducted research through user interviews and card sorting. What I found told me that users really cared about the ethical elements of their morning cup and they were willing to spend more.
User Personas
I found out that the GVOC user wanted to know about where their coffee comes from and the health benefits. They were willing to spend more money on their morning coffee if they knew it was good for them AND for the planet. I made 2 User Personas to help guide me in building the Information Architecture.
Information Architecture & User Testing
Now that I had a good idea of who I was designing for, I got to work on building the Information Architecture or Sitemap. We had a lot of information that we wanted to share about the brand mission and values, while still making it easy to sign up for a recurring order of coffee.
I used an initial sitemap to complete card sorting tests and made a few changes based on the findings. Our users cared about the mission of the company, but their main goal was to complete their transaction as quickly as possible. I knew that meant the site had to feel seamless and setting up a recurring order had to be easy to navigate.
Wireframes & Prototypes
I love to sketch and as a visual learner, I often turn to pen and paper to solve problems.
I always start with a physical sketch to create a low-fidelity wireframe, before moving to Sketch to create a medium-fidelity wireframe with some functionality. Finally, I create high-fidelity fully functional prototypes on Figma.
Low> Medium > High Fidelity
Feedback!
Nothing is more valuable than feedback from users so I made sure to test the prototype with a handful of users before we launched the site.
This helped define the final visual style of the website, in small ways like button styles and color schemes. I realized that the checkout process took a few more steps than we needed and I was able to identify where I could make changes that would impact the user’s ability to pay and leave the site.
