Dynamic Coffee Roasters
The Brief: Redesign a Website for Dynamic Coffee Roasters
Role: UX/UI Researcher and Designer (Group Project)
Timeline: Two Week Sprint
THE PROJECT
For this project, I worked on a team of three people to help redesign a website for Dynamic Coffee Roasters, located in Pittsburgh, Pennsylvania. Dynamic imports and roasts coffee grown on small farms in Honduras, and offers coffee classes at their “school of coffee” in Pittsburgh.
Their original website contained minimal content that did not meet users’ needs; their coffee classes were not featured, and there was no option to purchase products online. Our team met with the stakeholders to discuss their vision for the new site, and to identify the top priorities within our given time frame.
Objectives for website redesign
Offer online sales for wholesale and retail customers
Highlight the company’s values and mission
Bring attention to their coffee classes
Understanding dynamic’s values and mission
Typically, coffee farmers must rely on third parties to process and sell their coffee before receiving payment. This can take many months and creates extra financial hardship on farmers who are already struggling to stay afloat. Small farms produce around 60% of the world’s coffee supply, however, at least half of those farmers are living in poverty, with another 25% of those farmers living in extreme poverty. It is estimated that coffee farmers are generally paid about 1% of the retail value of their product (fairtradeamerica.org).
This issue is personal for some of Dynamic Coffee Roasters’ cofounders and stakeholders who have ancestral connections to coffee farming in Honduras. Family farms, and lineages have been lost due to exploitation in this industry.
Dynamic was created as a response to this common narrative; the company was built on shared affinities of this place, its people and its coffee. They have close working relationships with their partner farms, and engage in direct trade by purchasing entire crops upfront.
Ux & secondary REsearch
After meeting with the stakeholders and identifying the main goals of the redesign, we began the research process to better understand what users want and need from a coffee website.
METHODOLOGY:
NINE USER SURVEYS
SEVEN INTERVIEWS
COMPETITOR ANALYSIS
A FEW HIGHLIGHTS FROM WHAT WE LEARNED:
of respondents reported that companies’ values influence where they shop
Responses to the question: “What comes to mind when you think of coffee?”
Responses to the question: “What do you expect to see on a coffee website?”
The target audience for this website includes potential and existing wholesale and retail customers. To explore what each type of customer would need in order to have a positive user experience on the website, we created two user personas. Chloe Davis represents a retail customer, and Franz Schneider represents a wholesale customer.
Note: The quotes in the user personas are actual reviews from customers of Dynamic Coffee.
WHO IS THE TARGET AUDIENCE?
USER PERSONAS:
Chloe Davis: Retail Customer
Franz Schneider: Wholesale Customer
MARKET ANALYSIS
We reviewed websites from local competitors (in Pittsburgh), as well as coffee roasters across the nation, to assess existing approaches to advertising / selling coffee online. What we found is a wide array of designs, some bold and colorful, and some more subdued. Each website evoked different feelings, and there was a mixture of focal points ranging from monthly coffee subscriptions, to the ambiance of brick and mortar locations.
Our team identified what we perceived as strengths and weaknesses in the different approaches, and used that insight in our own proposed solutions to creating a user-friendly, user-centered website that aligns with the stakeholders’ requirements.
Customers are interested in the background, values, and mission of companies they support
Users expect / want to see coffee featured on a coffee website
There is a desire to learn about the origin of the coffee as well as its properties such as flavor profile, grind style, etc.
Users want an easy way to peruse products and make purchases
Users are interested in the what and the why; why should they choose this product, what makes it special, what benefits are gained from choosing this option, etc.
Certain ideas and feelings are evoked when people think of coffee; one of the repeating themes that emerged centered around nature / being transported to different locales
KEY TAKEAWAYS:
THE PROBLEM & PROPOSED SOLUTIONS
PROBLEM STATEMENT
Dynamic’s original website was not meeting the basic needs of users due to the lack of informative content and inability to make purchases, resulting in a potential loss of customers and revenue.
OUR HYPOTHESIS
We believe that by updating Dynamic’s website to include background information about the company, their values, and mission statement, highlighting their class offerings and products, and offering online sales, user engagement will increase, and more revenue will be generated.
Constraints
One of the stakeholders’ requirements was to adhere to their existing branding. We were asked to utilize the established color scheme and company logo shown below:
While most of Dynamic’s branding is cohesive, we did have concerns over some of their packaging (pink and purple) lacking compatibility with their overarching color theme of dark green and orange. We were also concerned that straying outside of the expected color scheme could impair easy brand recognition. However, altering the existing packaging (or any other established branding) was outside of the scope of this project. This guideline was an important factor to consider as we developed ideas for the new website design.
ideation
CONTENT OUTLINE
MID-FI
HOME PAGE
CLASSES
CHECKOUT
WHOLESALE ACCOUNT
APPROACH
Highlighting Dynamic’s values and mission was a top priority for the stakeholders, and was in alignment with what users want, which is to be informed about who they are supporting and why.
When we asked the stakeholders why people should buy their coffee, and what sets them apart from their competitors, they shared heartfelt tales of the plights of coffee farmers struggling to survive - including their own ancestors. They told us about their connections to the land and the people of Honduras; Dynamic differs from the norm in the world of coffee roasters / retailers in that they visit their partner farms regularly, and have formed close relationships with the farmers and their families.
Dynamic’s drive to sell coffee was described as an altruistic mission to support the sustainability of coffee farming in Honduras, and to tip the scales financially in the farmers’ favor. Their passion was almost palpable, and clearly needed to be at the center of our storytelling. We told these stories throughout the website by using their own photos of their partner farms, farmers, and families.
PROTOTYPE
Note: One of the stakeholders shared his favorite quote with us (the first two lines) - I added the last line.
SCREEN RECORDINGS OF PROTOTYPE
ABOUT US (plays on a loop)
HOME PAGE (plays on loop)
FIGMA PROTOTYPE
If you would like to check out the prototype in Figma, click the button below!
User Testing
METHODOLOGY
We utilized the website Maze (a remote, unmoderated testing tool) to conduct usability tests; ten users attempted to complete the three tasks shown below:
Navigate to the Shop page
Navigate to the Wholesale Account page
Click on Purchase History
RESULTS
Task 1: 80% of users navigated to the Shop page directly, and 20% navigated to the page indirectly.
Task 2: 30% of users navigated to the Wholesale Account page via the expected path, 60% of users navigated to the page via unexpected paths, and 10% did not complete the task.
Task 3: One person dropped out before task 3; out of the nine users who attempted the task, 100% directly navigated to the Purchase History section.
NEXT STEPS
The usability tests indicate that users could benefit from a more straightforward way to navigate to the Wholesale Account page; I would add a dropdown menu under the Wholesale menu item with two options: Wholesale Inquiry Form and Wholesale Account.
It would be beneficial to conduct additional user tests including:
In-person observations of users engaging with the product in order to obtain qualitative data
A/B tests to explore different design ideas
accessibility auditing and necessary remediation
stakeholders’ response
Our team got enthusiastic, positive feedback from the stakeholders; they loved seeing their personal photos being featured throughout the design! We handed our work off to their developer who began building the new site.
I had a lot of fun working on this project! I really enjoy writing, and it is an honor to see that some of my writing appears verbatim on the new website! An example is shown below:
CHECK OUT THE LIVE WEBSITE!
Click the button below: