A Mobile Ordering App Experience
Project Overview
The Product: A Dedicated Mobile Ordering App
the Product is a mobile ordering app that gives alternatives to items that are unavailable
Project Duration: 🕰️
6 months
The Problem:
I noticed some mobile ordering apps that didn't notify customers of unavailable items till there order was completed
The Goal:
the goal was to provide users with Alternatives to similar items that are sold out. So users could easily replace items that are unavailable with in short notice.
MY Role & Responsibilities
My Role: User Experience Designer
My Responsibilities: User Research, Story Boards, Empathy Maps, Wire Frames, Prototypes, Usability Studys
Understanding the User
User Research Summary:
I started my research looking for participants who order out using their smart Phone. I conducted interviews and learned users would feel frustrated after being told the item was unavailable after placing their order. Research showed users wanted quick solutions to find items needed, and accessible help for quicker check out, or help navigating the app.
User Pain Points
Product
Missing items from order.
Process
Unable to determine if items are available or not.
Support
Online support availability for any questions, or concerns
Process
Supported help when using the app for the first time
Persona: Madonna V
Problem Statement
V is a full time worker for a media company with a tight schedule. who needs reliable help when ordering online with in their time constraint. because they need a way to confirm the product they are buying with the little time they have available.
Persona: Madonna D
Problem Statement
D is a mother of two who always has their hands tied. who needs an app that can guarantee the items she ordered are available. because looking for alternatives or, that exact item elsewhere takes time away from daily goals
User Journey Map
My goals Mapping the users journey was to better understand how to design the app, and iterate on features that can improve the user journey.
Flow Chart
After inspecting the users journey ordering online from their location and situation I Created a flow chart for the main user flow.
Paper Wire Frames
My thought process was to sketch various solutions and features for each screen. Then I highlighted featers that I thought would be ideal for each screen. I would use the highlited features for a refined paper wireframe for my main user flow.
Refined Wireframes
By combining features I thought were important to include in each screen. I refined each screen for the main user flow
Digital WireFrames
After refining my paper wireframes I made Digital versions to be able to conduct a usability study.
Alternatives
I made a Call to action button for alternative items. so if an item is unavailable , or low in stock the alternative button can be present. displaying a pop up window for the alternative items.
Accessible Help
I included a help button on each screen in case the user gets stuck in the main user flow. I included a live chat support, Phone Number, and a search matrix of related topics.
Low Fidelity Prototype
User flow consists of selecting location first in case locations have different menus. Service, then payment method, then menu, and check out. Low Fidelity Prototype - Mobile Ordering App
Usability Study Findings
I Conducted two Usability Studies to help guide my design thinking. Findings from the first Usability Study help guide my Wire Frame designs to my Mock Ups. The second study was conducted using a high-fidelity prototype and revealed aspects of the mockups that needed refining
Round 1 Low Fidelity Prototype
1
accessible buttons
2
Edit Features
3
accessible Help
Round 2 High Fidelity Prototype
1
User Flow
2
Cart, and Confirmation
3
Sub Menu
Refining The Design
Mock Ups
High-Fidelity Prototype
Accessibility
Proximity
Before
Users Would click on the whole card. card details, and button lacked space to determine exact proximity
After
I made space between the item card, and the call to action button. Giving users an easier way of determining exact proximity of button
Process
Before
Users Were Unsure were they were in the user flow. The Progress bar I Included at the top of the screen lacked guidence.
After
I added symbols and icons to the progress bar for cleare direction in the app. Each screen will be represented with its title and icon in progress bar.
Mock Ups
High Fidelity Prototype
I created a High fidelity prototype to represent an actual mobile ordering app. you can access the prototype form the link provided High Fidelity Prototype/Mobile Ordering App
Accessibility Considerations
1
Giving the call to action buttons space so Users can determine its proximity
2
Visual location of navigation. I was able to include symbols and signs that give the user a better sense of where they are in the user flow
3
During my usability study participants accesed the help feature looking for specific help. I had included language, a tutorial how to use the app, and to change color, light or dark mode
Going Forward
Key Take Aways
What I Learned
Key Take Aways
Participants thought including alternative items was thoughtful. Having alternatives ready in case an item is unavailable for the worst-case scenario. The user felt it would lessen the stress of looking for an item last minute.
What I learned
I learned a lot of valuable insight from this project while conducting research and creating designs. Using the following methods gave me a better understanding of the user journey. Empathy Maps, StoryBoards, and Usability Studies. These methods inspired me to Design a product that incorporated more accessibility features for the user.
Next steps
1
Re-iterating UI Design. I wasn’t satisfied with some button styles and color combinations.
Further education in art to explore more possibilities.
Research more design Systems
2
Adding different kinds of stores. Grocery, clothing, electronics. Maybe having an app that can offer more variety of items can benefit everyone.
3
Next I would like to continue working on guided prompts in the design. A lot of users where confused in the beginning of the process. Having an introduction to show users how the app functions might help users feel more confident.