Vertex Coffee Roasters
Project Overview
Vertex Coffee is a sustainable café in Ann Arbor known for its community and environmental focus. However, the existing website lacks an online ordering feature, and its inconsistent branding and visual hierarchy dilute the café’s identity. I redesigned the site to strengthen Vertex’s brand presence and navigation, while adding online ordering and featured sections to optimize the user experience.
Heuristic Analysis
Using Nielsen Norman’s usability heuristics as a framework, I explored the original site by looking at the menu and reserving a table to see what worked well and what caused friction. Throughout this heuristic evaluation, I highlighted opportunities for improvement.
Flexibility and Efficiency of Use
The website doesn’t have a mobile ordering option, which prevents customers from skipping lines, reordering favorites, or scheduling pickups. Additionally, there’s no way to filter or search the menu.
Opportunities for Improvement: Implement a mobile ordering feature + search/filter feature
Aesthetic and Minimalist Design
Some pages (like the menu) feel too plain and text-heavy. The home page layout is clean but could use clearer visual hierarchy.
Opportunities for Improvement: Add more imagery and a clear hierarchy that guides users to CTAs.
Summary
The website makes it difficult for users to recognize menu items without images, doesn’t support ordering or customizing drinks online, and doesn’t indicate which page users are on. Several opportunities of improvement include...
Adding images and a featured section for menu items
Implementing online ordering with search and filter options
Prototyping active states in the navigation bar
Creating a unified design system
Competitive Analysis
I conducted a competitive analysis of RoosRoast, as it's a café with a similar brand revolving around sustainability and community engagement. This analysis helped me understand how a competing café engages customers online, helping guide improvements for Vertex’s website.
Analysis: RoosRoast’s website stands out for its consistent design, detailed menu with images, and online ordering options that make it easy for customers to browse and buy. However, its navigation can feel cluttered, with too many subcategories to click through. Vertex’s website is easier to navigate but feels plain in comparison. This shows an opportunity for Vertex to keep its simple structure while adding more images, clear branding, and online ordering to create a more engaging experience.
Low Hanging Fruit Matrix
After identifying key usability issues and outlining potential solutions, I needed a way to determine which opportunities would create the most impact with the least effort. I created a Low-Hanging Fruit Matrix to evaluate each potential feature by Business Impact, Customer Value, and Implementation Effort.
Sketching + Crazy 8's
To begin ideating, I did a Crazy 8’s sketching exercise to explore different ways to redesign the menu page, since that needed the most improvement. I experimented with layouts such as adding a featured drinks section, implementing search/filter options, incorporating images, and including brief descriptions.
After reflection, I decided that search and filter options were unnecessary given Vertex’s concise menu, and that descriptions weren’t needed since the drinks were self-explanatory. These sketches helped me narrow down the most effective design elements to carry forward into wireframes.
Branding
Now that I had an idea of how to refine the website’s structure, I worked on revamping Vertex’s branding. I created a design system that would effectively communicate their brand personality.
Home Page: After vs. Before
The original homepage had no clear CTAs, and the hero text was difficult to read. My homepage includes a featured section so users don't miss out on trending, seasonal drinks and a clear action button to guide them to the online ordering system. I additionally added an events section, since they're known for hosting community events.
Screen 2: After vs. Before
I constructed a clear textual hierarchy and categorized sections in the menu page, helping users quickly identify drinks. I additionally added high-quality images to make the menu more visually engaging and help users connect each drink to its appearance. Lastly, I made each menu item interactive, so users can click on a drink, view a brief description, add it to their order.
Additional Screens
Once I implemented the online ordering feature, I also designed product detail, cart, checkout, and confirmation pages to create a seamless end-to-end ordering experience
Mobile Screens
Next, I adapted the design for mobile to ensure a responsive experience across devices.
Interactive Prototype
I created an interactive prototype for usability testing in order to understand how users interact with the website when placing an order.
Usability Testing
Using the interactive prototype I created, I began to test my design on UserTesting.com to measure its usability. I tested both my website and the original Vertex website.
Task: Please place an order for a 12 ounce iced lavender matcha to pick up right now. (I just asked users to identify this drink on the original website, since it doesn’t support online ordering).
I prompted follow up questions after the users walked through both sites such as:
What, if anything, did you find difficult/easy about completing this task?
What was your first impression of the home page?
How easy or difficult is it to find what you’re looking for on the menu page
Test Summary:
Method: Unmoderated Usability Testing
Participants: 3
Average Time (for my redesign): 2 minutes
Task Completion Rate: 100%
Affinity Map
I created an affinity map to categorize participants’ feedback and identify commonalities.
What Worked:
3/3 participants praised my redesign’s order flow, menu organization, and visual design
3/3 participants were able to complete the task of ordering a matcha
3/3 participants said they find online ordering to be much more convenient.
What Could Be Improved:
⅓ participants said to improve button feedback on hover and click → Make the “Order Now” button more visually responsive by implementing a clearer hover state, so users can clearly receive feedback on their actio
⅔ participants said to include a cart icon in the navigation bar. This way, users who add something to their cart have an easy way to return to the cart and proceed to checkout.
⅓ participants said to add a footer with key business information → Include contact details, address, and privacy policy to mirror common website conventions and provide key info.
Iterate
I added a footer, cart icon, and clearer hover states to my final prototype, as recommended by users.
Accessibility Improvements
To ensure my prototype was inclusive and usable for all users, I ran my design through an accessibility checker. Some of my buttons and images with text lacked sufficient color contrast, which I corrected to improve legibility. I also added alt text for images to support screen reader users.
Developer Handoff Annotations
Lastly, I added developer annotations to ensure handoff would be as smooth as possible. For example, I clarified what should happen when an item is out of stock or when a user clicks into an input field. I also specified hover states, error messages, and responsive behavior to make the design’s functionality clear and consistent.
Reflection + Next Steps
Throughout this project, I became more familiar with translating business goals into design decisions that prioritize user needs. Working closely with Vertex’s brand identity and sales objectives taught me to design with intent, whether it be highlighting seasonal promotions to implementing an online ordering flow . These choices helped ensure that every interaction not only looked appealing but also supported measurable outcomes like customer retention and purchase frequency.
My next step would be to hand off the prototypes to developers and track metrics to evaluate the redesign’s impact on customer engagement and revenue.