Aubi & Ramsa
Redesign
Project Overview
Group Project
2 Week Sprint
Roles
-Heuristic Evaluator
-Wireframe
Tools
-Figma
-InVision
Case Study Scenario
You represent the UX Design team at Emerge Technology, a growing strategy, design, and technology agency based out of New York. Your team has decided to submit a response to an RFP, in order to win the opportunity to work with a major tech company. As part of this effort, a design challenge has been issued that asks submissions to evaluate the usability of an existing digital product by conducting a heuristic evaluation.
​
Aubi & Ramsa
Infused Ice Cream Bar
Aubi & Ramsa is a luxe liquor-infused ice cream and sorbet bar. They are based in the Design District of Miami, Florida and have expanded to New York, Las Vegas, Tampa, Hollywood Fl, Nashville TN, and Austin Tx.
You can also purchase for delivery online.
10 Usability Heuristics for User Interface Design
Jakob Nielsen
1) Visibility of system status
2) Match between system and the real world
3) User control and freedom
4) Consistency and standards
5) Error prevention
6) Recognition rather than recall
7) Flexibility and efficiency of use
8) Aesthetic and minimalist design
9) Help recognize and recover from errors
10) Help and documentation
Scoring
The heuristics are scored in a scale of 0-4
Proto Persona
Our team created a proto persona in order to empathize with users that visit the Aubi & Ramsa website.
Task Flow
Our team created a task flow for Margarita, who wants to purchase alcoholic ice cream for delivery. She has to take these steps to achieve her goal.
Scoring and Finding Issues
As a group we went through the task flow and found several usability issues that would hinder Margarita from completing her task of purchasing ice cream online. We identifies issues based of heuristics and came up with possible solutions
Prioritization Matrix
We created a prioritization matrix, with the high priority at the top and low priority at the bottom. We addressed each heuristic fail by providing a solution and redesigning screens as you'll see the before and after designs.
.png)
Style Guide For Redesign
As our team redesigned the screens, we maintained the existing brand colors and typography. We wanted to stay true to Aubi & Ramsa's brand identity.
.png)
.png)
Usability Issues & Redesigned Screens
Landing Page
Heuristic Failure #10: Help and Documentation
The navigation bar is hidden in the hamburger menu and as a result the original design lacks clear steps to help the user to move forward.
Before and After
Final Redesign- Landing Page
Labeling
Heuristic Failure #2: Match Between System and Real World
.png)
It failed to speak the users' language with the landing page giving misleading and vague context for purchasing the product.
In order to follow real-world conventions, making information appear in a natural and logical order is important.
Before and After
.png)
Final Redesign- Labeling
Product Display Page
Heuristic Failure #10 and 6: Help and Documentation and Recognition Rather than Recall
.png)
Our team found the product display page fails two heuristics. Aubi and Ramsa's website fails to give the user a way to complete their task, and in fact, complicates the purchasing process. It limits the user to only view the product without the ability to purchase it on the same page.The user has to view the product page, then travel to the shop page while remembering what ice cream flavor they intended to add to their cart.
Before and After
.png)
Final Redesign
Purchasing Process
Heuristic Failure #5: Error Prevention
.png)
Our first-time user Margarita added 3 out of 4 pints to select, but goes to the home page to decide between buying the small product. Because she didn't select all four pints and add to cart, her cart was automatically erased. A good error message can prevent this problem from occurring in the first place.
Before and After
.png)
Final Redesign
Check out
Heuristic Failure #3: User control and freedom.
.png)
The user doesn't have the option to back out of a process or undo an action, such as editing the bundle once it's added into the cart.
Currently, the only marked exit of the check out page is to "delete" the cart entirely.
Before and After
.png)
Final Redesign
.png)
.png)
