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

accessible buttons

Edit Features

accessible Help

Round 2 High Fidelity Prototype

User Flow

Cart, and Confirmation

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

Giving the call to action buttons space so Users can determine its proximity

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

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

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

Adding different kinds of stores. Grocery, clothing, electronics. Maybe having an app that can offer more variety of items can benefit everyone.

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.

Page updated

Google Sites

Report abuse