Mana Café
The goal
Streamline group ordering by inviting group members to contribute on an app.
The problem
Ordering for a group can be a time-consuming process filled with potential for errors and miscommunication.
Mana Café needed an app to facilitate its growing need of accommodating customers with large orders.
Understanding the user
User research | Personas | Problem statements | User journey maps
User research
Usability studies were conducted to evaluate the effectiveness of the app.
While it was assumed that group or collaborative ordering would be a difficult concept for users to grasp in an app setting, the findings collected from the studies showed otherwise. The main area for refinement showed up in how a group order could be started. Standard shopping cart UI and the UI required to display the details of an in-progress group order proved too big of a leap for most people to overcome mentally.
Pain points
Creating a Group Order
Difficulties arose when people tried to create a group order after adding something to their own cart.
There was not clear way to know how a group order connected to their own cart or if it did in the first place.
Buttons
Buttons displayed on the bottom of the screen showed up to users as non-tappable elements or tooltips.
Most preferred to tap the close button (x) on the top left of the page instead of tapping on something that looked static.
Readability
Many portions of text, especially button text, were difficult to read and caused users to guess and second guess themselves before tapping on an element to proceed forward in their intended path.
Personas
User journey maps
By creating two relevant yet contrasting personas, a clear path to solving the main problems for the end-users could be formed through journey mapping.
Starting the Design
User Flow | Paper wireframes | Digital wireframes | Low-fidelity prototype | Usability studies
User Flow
Paper Wireframes
Creating paper wireframes of the future ordering app allowed for the creative freedom to brainstorm many kinds of ways to display important data and action-items for end-users.
Digital Wireframes
Based on feedback and findings from the user research, digital wireframes were created to further conceptualize a meaningful, working design.
While it would be nice if no distinction had to be made between app or non-app users, it became apparent that differentiating between the two types would provide those facilitating the order with the most informed choice given the time-constraints and dimensions of any given group order.
Low-fidelity prototype
Conducting a usability study necessitated the creation of low-fidelity prototypes. We used the primary flow of starting and completing a group order.
Usability studies
We realized people need to be guided through collaborative ordering, because it is a relatively novel concept.
Round 1 findings
- The “Added item to cart” screen/pop-up could be more clear or could be eliminated
- Bottom buttons that fill in the screen need to change in order to present themselves as actionable more clearly.
“Group ordering” is now Collaborative Ordering
- We renamed “group order” to “Collaborative order” and cleaned up the wireframe to better show the dynamic of group ordering (b)
- We also made the “add friends to group order” button more clear (a)
Adding friends just got easier
- We added a new “Quick add” section which features larger profile photos for faster recognition and a larger tappable area (a)
- We added a header “From my contacts” to clear up any confusion that was caused by the “Invite” versus “Add to order” buttons (b)
- We increased the size of the “Invite” buttons to allow for easier tapping and inviting (b)
Refining the design
Mockups | High-fidelity prototype | Accessibility Considerations
Mockups
Instead of bringing the user to the typical “cart” screen after adding a product to the cart, we decided to function the app in such a way as to bring the user to a more group-ordering-centered cart to facilitate a more consistent flow and cater to the user’s main goal of using the app. This eliminated friction to add a user, since the cart-page already looks like a group order is in progress.
Our usability studies indicated most people had trouble understanding what was going on when an item was added to the cart. Using good UX principles, we elevated the corresponding buttons using drop-shadows and made everything super clear and legible, as per accessibility standards.
High-fidelity prototype
The final high-fidelity prototype features a more streamlined flow for a relatively new concept (in-app group-ordering) and meets people’s expectations for button-dynamics. It also takes into consideration accessibility requirements, and prominently displays buttons to engage users clearly and
considerately.
View the High-Fidelity Prototype
Round 2 Usability findings
- Most people are unsure what Group or Collaborative ordering is, because it is an unfamiliar concept currently in today’s world
- People need to know clearly what a button does before they click on it.
- People want the app to be an all-inclusive ordering system and not require extra work on their part.
Instead of bringing the user to the typical “cart” screen after adding a product to the cart, we decided to function the app in such a way as to bring the user to a more group-ordering-centered cart to facilitate a more consistent flow and cater to the user’s main goal of using the app.
This eliminated friction to add a user, since the cart-page already looks like a group order is in progress.
Our usability studies indicated most people had trouble understanding what was going on when an item was added to the cart.
Using good UX principles, we elevated the corresponding buttons using drop-shadows and made everything super clear and legible, as per accessibility standards.
Accessibility Considerations
We modified button contrast to improve legibility between the button text and the button backgrounds. We updated the color of typography to improve readability. Text size now better reflects accessible interface requirements and standards.
Moving forward
Takeaways | Next steps
Takeaways
Impact
Mana Café made group ordering (a relatively common idea) into a realistic collaborative experience on an app. One quote from peer-feedback: “It’s super easy!”
What I learned
Iterating on design through user research and feedback is crucial to understanding key audience-centric concepts and developing a solution that exceeds expectations.
Next steps
Refine the group-ordering terminology. Create a way for users to create group orders without needing to first add something to their cart. Conduct more usability studies to understand what else could be improved--especially during the group-ordering process. Refine the design system and branding. Conduct more usability studies to understand the effect brand has on emotion and behaviors.
View Case Study Deck.
Let's connect!
Thank you for taking the time to review my work! If you would like to get in contact with me or see more, my contact information is listed below.
Email: zachary@dewfire.com
Thank you!