Journey
of the App
Project Overview
Pear and the Pickle
The Pear and the Pickle is a small local cafe that serves breakfast and lunch. The goal of the project is to design a simple and intutive App for mobile ordering which includes nutritional information for menu items.
My Role
UX Researcher/Designer creating the App from conception to final product
Responsibilities
Conduct competitor analysis, identify unique market position, conduct user interviews, create user profiles, create paper and digital wireframes, create low and high fidelity prototypes, conduct usability studies, incorporate accessibility features, and iterate on designs
The Opportunity
Covid Restrictions have changed the way business is done. Pear and the Pickle is seeking a mobile App to provide services to their customes but what should the App include?
User Research Summary
Same Great Design, Totally Different Reasons!
I conducted interviews, created empathy maps, then user profiles. Two distinct user profiles emerged distinguished in part by age. I assumed that older and younger users would differ greatly in their comfort level with technology. This was somewhat true. Research revealed that users were transitioning from the familiarilty with website navigation to the applications mobile Apps provide. The design would have to include elements of both websites and Apps to ensure that user confidence in operating the App remained high. The unexpected overlap included mention of the following words:
customization, intuitive design, simplicity.
Those words embodied different meanings for different users. The work then became to understand the meanings through usability studies and then design accordingly.
User Research: Pain Points
Nutrition
Nutritional Information is important but it is not the first thing users want to see.
Can't See
The phone surface is small. Text heavy Apps with small type make it difficult to see and interact.
Security
Financial Information stored on Apps can be hacked!
Intuitive
It is frustrating to try to figure out how the App works!
Charles Persona
Problem Statement
Charles is an established businessman with moderate technology skills who needs a simple nutritional App to help him select foods that adhere to his dietary requirements because living a healthy lifestyle depends upon knowing what is in your food.
Journey Map
"Apps take up space and financial information is personal"
--- Users are happiest when customization is flexible and user selected.
Starting the Design
Paper Wireframes
Ideations for the home page evolved in response to market and user research. Early on a competitive advantage was identified. Pear and the Pickle has a social media following. so it was natural to include social meda connection on the APP.
Digital Wireframes
Users expect multiple navigation options. The overall view provided by the App Map reminds users of a website and the bottom navigation icons give flexibility to key locations.
Low Fidelity Prototype
Users wanted multiple entry points and high flexibility to customize user paths. Icons at the top and the bottom take users to key locations and buttonns customize a specific user path.
Usability Studies Parameters
Study Type
Moderated
Time
30 minutes
Location
Users' Homes
Participants
Range in age from mid-twenties to 70.
Usability Studies: Findings
Customization
Profile, Favorites, Payment Information all make ordering easier but users need to choose their own customization features.
Nutrition Facts
Information about food ingredients is imporant but it has to be user selected and reportend according to industry standards.
Category Functions
Category names need to reflect their purpose. Vendors means a story so call it a store.
Interaction
Interaction messages ensure the App is working properly. Customizations and editing options build trust when purchasing.
Refining the Design
Mockups: Home Screen
Users wanted interactivity, access to site map, and a launch pad to reach other sections.
The second usabilitiy test was enhanced with:
Graphics
Horizontal Picture Scrolling Frames
Buttons for Features
Social Media Icons
Top Navigation Bar
Mockups: Nutrition Facts
Users want to know....on their terms!
Users expect:
- Industry Standard Reporting
- Photos
- Minimal Clicking
- User Selection
Additional Frames
Scrolling pictures, Profile with Order History and responsive interactions build trust.
High Fidelity Prototype
Users value confirmation of their actions but without the feel of "extra clicking" so overlays were added.
Accessibility Considerations
Typography
Older and younger users both emphasized the need for larger print in simply styles for easy reading. Key information is shown in bold and minimal text is used.
Color Selection
and Photos
High contrast color selection with larger buttons outlined for easier identification and greater functionality. Photos of food items were labeled for screen readers.
Labeled Icons
Icons are larger with high contrast colors set on a white background and contain text labels to support screen readers.
Key Take Aways
Impact
A small business has joined the mobile ordering market which has grown in popularity. Customers now have a friendly, fast and flexible mode for ordering take-out food. from a local cafe.
What I Learned
Test early and often! Usability studies drive design decisions. Designing tasks and asking questions that translate to actionable items are key for successful product development. Each design iteration required me to think differently and learn the tools more deeply.
Next Steps: The Journey Continues
Consistency
Repeat patterns so users know what to expect from each item, each screen, each interaction. 3-D images, scrolling, buttons all need to have consistency in look and function.
Functional Design
"Everything has a function or better yet: multiple functions."
New Favorites
Sometimes users change their minds and need a quick way to delete or replace an old favorite.
Most Recent Update
A project never feels quite finished. This is the most current iteration which includes updates in consistency and usability. My next goal is to buiild more images so that I can create a prototype that allows the user to order from different places such as the order history from the profile and also a scrolling picture menu that directs the user to their desired selection in the menu..