A Simpler Blend: How I Simplified Westrock Coffee Company’s Checkout Process for a More Brew-tiful Shopping Experience
UX Design · Redesign · Prototyping
Redesigning Westrock Coffee Company’s website to enhance the discoverability and appearance of its shop hub and simplify its checkout process to increase conversion.
TIMELINE
5 weeks
(Feb 2023 - Mar 2023)
TOOLS
Figma
Adobe Photoshop
Discord
TEAM
1 UX Designer
(Solo Project)
ROLE
UX/UI Designer
Project Lead
Pictured above: Final mockup of the Westrock Coffee Company redesign of the homepage (left), Shop for Business page (right), and the cart page with item (right, top) or no item (right, bottom)
BACKGROUND
Overview
As the modern saying goes – “a coffee a day keeps the grumpy away.” Who doesn’t love a good cuppa joe? And what better way to get that coffee than through a company like Westrock Coffee Company. Westrock Coffee Company is a leading provider of coffee, tea, and extracts throughout the world as they supply caffeinated goods to customers across five continents with their operations accounting for more than 20 million cups of coffee daily.
The purpose of this case study is to analyze the overall usability of Westrock Coffee Company’s e-commerce website and identify any improvements that can be made to the provide a smoother and more satisfying shopping experience to its customers.
Problem
Before the redesign, and as it stands currently, Westrock Coffee Company’s homepage contains a plethora of design miscues that make navigating through its website confusing to its users.
This website redesign seeks to accomplish the following:
How can the website be redesigned to ensure that users can better navigate to the shop and find the products they are searching for much more quickly and efficient to increase conversion?
Solution
In the end, the solution was to redesign the Westrock Coffee Company’s homepage, shop hub, and cart page to contain consistent design elements, better visual cues, and a clearer content hierarchy to make navigating easier for its users.
As you will see, I completely redid these pages to be more straightforward in terms of navigation and provided clear design elements to make the process from landing to checkout much smoother.
Process
Pictured above: Flowchart of my design process
EMPATHIZE
User Research and User Testing
The redesign journey begins with a usability test to determine the biggest pain points of Westrock Coffee Company’s current website design. The goal of the usability test was to answer the following question:
Which areas of the website are the most troublesome for users in terms of navigation?
To determine this, three users from different backgrounds were chosen to participate in the usability test.
Pictured above: Background information of the three users who participated in the usability test
The three users were first asked a few evaluation questions to understand their previous experiences using e-commerce websites. They were then tasked to navigate to Westrock Coffee’s homepage and look through the site. Once they have finished looking, they were all asked to try and purchase coffee from both the business and retailer storefronts. The users were instructed to Think Aloud while working through these tasks while sharing their screen. After completing these tasks, the users were presented with a few post-task questions to express their overall experience using the site. The feedback was then categorized and used to justify the three problems in this case study.
Pictured above: Process flow for the usability test that was conducted
DEFINE
Usability Problem #1
Inconsistent design elements such as multiple variations of the navigation bar and cart page
Westrock Coffee’s website exhibits a major lack of consistency with its design elements. In its current website, there are 3 different navigation bars presented to the user and 2 different cart pages which vary if you are checking out in the business or retailer section of the shop.
Based on the results from the usability test, all three of the users struggled with these changes in design elements. One user remarked:
“I am still on the same site right?”
When checking out the product from the business checkout section, another user mentioned:
“If it weren’t for the logo at the top, I wouldn’t have known I was still on the same website.”
Pictured above: Showcasing the differences in the navigation bars in the “Shop for Business” page (top, green boxes) and the homepage (bottom, orange boxes)
Why is this a problem?
This is a major design flaw since it violates Jakob Nielsen’s Usability Heuristic #4 which asserts that consistency and standards are two crucial elements in creating applications that make sense to the user. The lack of consistency in Westrock Coffee’s website adds to the user’s cognitive load, causing them to put more time and effort into learning the site which can lead to usability issues and confusion, resulting in users to leave the site before making a purchase.
Usability Problem #2
Reduced discoverability of interactive elements and linked webpages
The website’s flat design style lacks clear signifiers to indicate most of its clickable elements. In addition to this, the clickable area size for buttons is not consistent throughout the website with some spanning the entire container while others are reduced to only the text portion of the button element.
The usability testing revealed that all three users were highly prone to recognizing buttons without signifiers resulting in a significant amount of misclicks while they navigate through the site. A few key comments include:
“These are buttons?! I thought these were visual graphics!”
“Why is the clickable area so small for these buttons? I hate that I have to position my mouse directly over the text to click on it.”
When browsing through the “Shop for Business” page, the same user who didn’t notice the buttons before asked:
“I can click on these, right? These are actual buttons this time, right?”
Pictured above: The buttons that can be found in the homepage and their clickable area outlined in the red rectangle
Why is this a problem?
The Nielsen Norman group claims that interactive components must retain sufficient cues to suggest clickability since users tend to resent sites that force them to go on a scavenger hunt for these clickable elements. Not having clear signifiers is also another factor that can add to a user’s cognitive load as they must discern the meaning behind each of the design elements which can lead to frustration when an element does not work as expected.
Usability Problem #3
Unfocused content and visual hierarchy accompanied by lackluster visuals
Westrock Coffee’s “Business” storefront lacks an established content and visual hierarchy. Several unrelated elements are grouped together like the “Best Sellers” items being placed right below the “Cart” list while less important content like the company information is more emphasized than the actual content which are the products themselves. This in addition with utilizing stock photos for product images creates a confusing and unappealing visual design.
From the results in the usability test, the lack of a clear content hierarchy contributed to all three users taking significantly longer to complete their tasks and find what they were looking for. Referring to the Best Sellers list that one was located to the side, one user exclaimed:
“I got confused for a second. I thought those items were in my cart.”
Pictured above: The Best Sellers are located right below the item list for your cart
The usability testing also revealed how low-quality stock photos negatively affects users’ perceptions of products. A user expressed:
“I’d like to see the actual products and not some generic looking photo.”
Pictured above: A few examples of the stock-like images that Westrock Coffee Company uses for their shop page
Why is this a problem?
Having a well-structured content hierarchy is important since it captures the attention of the users by making the content easy to scan and helps them find the information that is relevant to what they are searching for. By not having a defined content hierarchy, users will have a harder time finding the information they want from the site which in this case are the actual products being sold.
In addition to this, the “Business” storefront webpage also infringes on the Gestalt Principle of Proximity which states that we tend to perceive elements that are closer to each other to belong to the same group or category. In the case of the “Best Sellers” being placed directly below the “Cart” list, users can confuse the items on the “Best Sellers” as part of their checkout list.
IDEATE
User Story
Before coming up with solutions to these usability problems, I decided that it was important to establish the user story most important to focus on based on the results from the usability testing. The one that I decided would be most important for this iteration is:
As a user, I want to be able to purchase the top-selling drink for my company.
Solution to Problem #1
Create one universal navigation bar for the website and design one add to cart page
The navigation bar that is currently utilized in the “Investors” and “Shop for Business” pages will be replaced with the navigation that is used throughout most of the site. A cascading dropdown menu will also be added to incorporate the menu options from the removed navigation menu. Users will also be redirected to one add to cart page regardless of whether they are shopping for a business or themselves.
Pictured above: An illustration showcasing the solution outlined for Problem #1
Why is this a solution?
Jakob’s Law states that people spend most of their time on sites other than yours, which means that they bring their expectations from other sites when they visit your site. Perhaps one of the biggest expectations that users bring with them when visiting websites is that all the pages are similar in terms of layout, structure, and design. By having the same navigation system and add to cart page, users will no longer feel disoriented and confused each time they encounter a different navigation bar in the site. Keeping the navigation system consistent also reduces the user’s cognitive load since they do not have to repeatedly familiarize themselves with different navigation bars..
Furthermore, even though many e-commerce sites use mega menus for their navigation systems, a cascading dropdown menu is more beneficial for this website since it only contains a handful of links. Because of this small amount, adding a cascading dropdown menu system will not overwhelm users with too many choices and will instead improve the website’s navigability by helping users find what they are looking for easier and more efficiently.
Solution to Problem #2
Incorporate visual signifiers to improve button discoverability
Hover effects will be incorporated to make the buttons more discernible. To take into account responsive design in the next iteration of this process, buttons will also have drop shadows for better visual cues. The clickable area will also be adjusted and expanded to the size of the entire button. Optimal spacing between each of the buttons will also be incorporated.
Pictured above: An illustration showcasing the solution outlined for Problem #2
Why is this a solution?
Visual signifiers are crucial for button elements since they convey clickability to users by indicating affordances in the interface. Underlining text and zooming in on photos on mouse hover, darkening the photo, and adding drop shadows are all standard signifiers for buttons. Most users are already accustomed and familiar with these visual cues since they are widely used across numerous webpages. Alongside this, adding a bit more context in the preceding paragraph helps users better discern buttons throughout the site. This reduces the amount of frustration they experience since they are no longer required to scavenge for them while browsing.
Synergistically, adjusting the clickable area size of the buttons and optimizing the spaces between them improves the clickability. Users will be able to click on buttons with ease since the clickable area is the size of the container. Increasing the spaces between them, on the other hand, reduces the amount of wrong button presses. These improvements, along with the visual signifiers described above, create a smoother navigational workflow between the user and the site and improves the site’s online conversion rate since users can find and purchase products with significantly less effort required on their end.
Solution to Problem #3
Provide clear content and visual hierarchies and replace the images with web-optimized product photos
The content hierarchy of the “Shop for Business” webpage will be redesigned so that the actual products being sold are at the forefront of the page by repositioning certain sections and removing extraneous content. A visual hierarchy will also be established so that the best selling categories will have larger buttons for better user accessibility. Lastly, the stock photo-like images will be replaced with high-quality, web-optimized photos that showcase Westrock Coffee Company’s products in their truest form.
Pictured above: An illustration showcasing the solution outlined for Problem #3
Why is this a solution?
The average span of an average online user is relatively short. Reorganizing the content in the “Business” storefront so that the products are better emphasized lessens the possibility that uses will bounce from the storefront after a few seconds of browsing. It makes the site’s content clear and purposeful and makes it easier for users to scan and find the product or products they are searching for. This increase in visibility in conjunction with high-quality, brand-specific product photos can help boost sales considerably since approximately 75% of online shoppers tend to buy with their eyes according to a study reported by Tim Jefferson of Retail Technology Review.
User Flow
With the user story in mind and the solutions established, it was time for me to create a user flow.
Pictured above: The user flow to accompany the user story that was established
PROTOTYPE
Wireframe
Key Design Decisions
After finalizing the user flow, it was time to get started on the wireframe for the redesign. Since this is the first wireframe iteration, I decided to go with a mid-fi wireframe to communicate important design elements without having to fuss over every single detail. Before showcasing the finished wireframe, I want to point out a few important design choices I made in addition to the solutions I presented to help improve the website’s design further:
The logo was moved from the center to the left. Based off the research done by the Nielsen Norman group, 89% of users are more likely to remember logos that are shown on the traditional left side of the group. This also helps result in fewer misclicks when users want to access the homepage.
A cart item counter was added. This is to address the remark that one user mentioned when they thought they had an item in their cart by mistake.
Footer was reworked to incorporate better grouping. This way, users can help find information on the footer faster and aligns with the Gestalt Principle of Proximity.
Pictured above: The wireframe for the homepage (left), Shop for Business page (middle), and the cart page (right)
Mockup
Colors
Since Westrock Coffee Company already has an existing brand, I decided to keep the website’s primary colors the same. The unique magenta shade already sets them apart from their competitors who seem to use more earthy tones for their primaries. I did, however, put greater emphasis on the goldenrod-like shade and used it as the complementing primary color to established magenta for two reasons. First, the Westrock Coffee packaging already uses this color so many customers already associate this color with the brand. And second, the combination of the deep magenta and deep goldenrod evokes a feeling of warmth and friendliness (like a sunset) which suits the brand.
Pictured above: The moodboard used for the mockup
UI Inspiration
In terms of UI inspiration, I actually took some time to familiarize myself with the Westrock Coffee Company business. After reading through several articles and perusing through their various social media pages, it became apparent that Westrock Coffee Company is a community-driven business with a deep respect for the farmers they work alongside with. Seeing how involved they are with the community is what led me to redesign their site in the form of a modern community flyer choosing typography that best showcases that theme.
Prototype
Interested in trying out the prototype? Check it out for yourself!
REFLECT
Next Steps
So, what’s next for this project? The first thing would be to conduct usability testing on the prototype and make adjustments based on the user feedback. After receiving the feedback, I would also want to make adjustments to a few design elements (especially the color palette) to increase accessibility to all users. I would also want to incorporate responsiveness to the mockup to account for all the mobile users of the site.
Lessons Learned
I know this case study is far from perfect. As a budding UX designer, this was my first taste of the work that’s associated with the profession. But despite the rather steep learning curve that comes with learning new software, conducting my first usability test, and having to applying design thinking through every step of the process, this was the experience that solidified my passion and interest in design. So what did I learn from this experience?
Being organized is the key to being kind to your future designer self
I consider myself to be a fairly organized person in general. But admittedly, there were a few instances where I was running short on time, and I wasn’t as organized as I could have been – especially with my Figma workspace. Because of this, the phase between wireframing and creating my mockup took significantly longer than what it should have been. I know better now, though – and no longer afraid of turning things into components in Figma!
No design will ever be truly perfect
As a bit of a perfectionist, this was something I struggled learning when doing this. There were times when I found myself revisiting certain aspects a ridiculous amount of times because I needed it to be perfect. As a designer, it’s important to know when to move on to the next thing and not get stuck feeling like everything has to be perfect before moving on. This is why iterations exist in UX design.
Thank you for reading! Looking for more?
Check out some of my other case studies!
“Job-pping” Made Easy: How I Created A Centralized Job Hub to Streamline the Job Search Process
UI Design · Brand Design
Coming soon!
Thinking of U-ser: How I Designed a Seamless E-commerce Experience Utilizing User Critique for a Smoother Checkout Flow
UX Design · Brand Design · Prototyping
Coming soon!
Game-Changer: How I Designed and Coded a Responsive Video Game News Site to Make Gaming News More Accessible to Gamers
Responsive Design · Brand Design
Coming soon!