The Problem

My challenge was to understand the target market of users who have used mobile order and payment apps, analyze the competitive landscape of these app categories, and design a product that shared the experience between mobile device and wearable.

Some questions that will be addressed through the process:

  • What is the target market?
  • What pain points are users hitting while making mobile orders?
  • What pain points are users hitting while making mobile payments?
  • What are the pain points when trying to split a tab or bill multiple ways?
  • Will solutions be able to be reflected in a wearble?
  • Can users place more than one order at a time>

My Role

As product, UX, UI designer, my involvement spanned all stages of the design process: research, strategy, design, and user testing.

Defining product design concept, information architecture and creating wireframes. Making decisions around content, design, and product strategy that are informed by metrics and research.

Design research. Planning and conducting design research, organizing workshops with stakeholders to discuss research findings and synthesize solutions, validate design decisions through usability studies.

Product strategy. Planned and led brainstorm sessions with stakeholders to create shared understanding of business and user needs, coordinated product strategy and prioritized product backlog based on business goals.

  • Sketch
  • Adobe XD
  • Invision
  • PowerPoint
  • Adobe Illustrator
  • Photoshop
  • Google Forms
  • usertesting.com
  • usabilityhub.com

My UX Process

I follow IDEO's Human-Centered Design and the
Lean UX Design Thinking process.


I use the the below research methods as I feel this process is the best way to accumulate quantitative & qualitative data on users and competitors in most industries. This in turn informs my design with a research & evidence based solution.

  • 1 Research

    Usability Tests
    Depth Interviews
    Online Surveys
    Competitive Benchmarking Analysis

  • 2 Analysis

    Affinity Diagram
    Customer Journey Map
    Personas

  • 3 Design

    Flow Diagram
    Defining Navigation
    Sketching
    Wireframing

  • 4 Prototype

    Low, Medium and High Fidelity Prototypes
    Interactive Prototype
    Finalize Design and Strategy

  • 5 Test

    Usability Tests
    Depth Interviews on Prototype
    Iteration

THE PROCESS
1
Research

For the research phase of the project I used the following methods: Usability Tests, Depth Interviews and Online Surveys

I determined my target market by sending a survey screener across social media, interviewing a select few about their venue experiences, and gleaning mobile payment insight from the following sources:

image

Data gleaned from mobile payment reports.

Personas

I organized my data by creating personas that I could refer back to throughout the design process ensuring that I was designing for essential user needs and goals and to reduce the risk of feature bloat in my products.

image User personas reflecting the data from the research 01
image User personas reflecting the data from the research 02
image User personas reflecting the data from the research 03

THE PROCESS
2
Analysis - Features

My interviews revealed that respondents wanted quick access to venues and their order menus. Users were frustrated with apps built with too many extra features. Feature bloat created mental havoc for the user and pulled the focus away from these primary users needs.

Users wanted a simpler way to select drinks and submit their order. Respondents had trouble reading through lengthy drink menus. Small buttons and text made it difficult to add drinks and review the order before submission and brightly-backlit screens were harsh on the eyes.

Users also wanted better explanation and flexibility in how they could split bills with friends in a group. Splitting a bill was a primary feature of competitor apps, but the process confused the user or the app didn’t offer an option to split the bill by line item (Velocity app).

The following features would be implemented into the mobile app:

  • Easy sign-on and login
  • Easily add friends or guests to split a tab or bill.
  • Easily order drinks and split a tab or bill.
  • Have more than one drink order at a time.

Competitor Research - Benchmarking

In addition to user research, I created a competitor analysis of the following apps: Tabbed Out, Velocity, and Orderella. Tabbed Out highlighted user incentives through their loyalty/ rewards program, but the UI was inconsistent — color of the menu bar and use of the color blue, requiring the user to learn new representations for tasks. Orderella suffered from similar inconsistencies. However, it utilized an onboarding experience to explain its key features, answering popular questions and increasing confidence of a potential user. Velocity had the most appealing and delightful design. But it also had the most feature bloat of the three competitors and limited itself to four- and five-star venues that were “hard-to-reserve.”

I decided to strip out the best features from each app that would solve the needs of my users and incorporate them into my product designs.

image
image

After poring through all the data, I concluded that the products would be designed with the following features:

  • The ability to search for nearby venues
  • Discovery by geolocation - nearby participating establishments
  • Drink pre-order notification based on menus of participating establishments
  • In-app checkout
  • Real-time order tracking
  • Split-tab calculator
  • Auto-closeout based on geolocation
  • Auto-applied promo codes
  • Tip preset for minimum gratuities
  • Preferred-drink preset
  • Discount / Perks / Rewards (DPR)

THE PROCESS
3
Design

My design process would include User Stories and a Flow Diagram

User Stories

Based on the motivations in my user stories, I generated a list of user personas to help define the main tasks of users.

I then created user flows in Sketch to break down the complex user stories and visualize the paths of action users take to achieve their goals.

This stage of the design process was critical in identifying the areas of cognitive overload and redundancies.

image User Stories
User Stories ↗

User Flow

Next step in my design process was to define the navigation style that I thought would accommodate the users flow through the app. Here I could call upon my earlier research and mobile app experience.

image User Flow Diagram - Navigation

THE PROCESS
4 and 5
Prototype and Design

In creating my wireframes, I focused on reducing confusion of the entire application, balancing the amount of content, visual balance, and user-friendly UI. To reach these goals, I stripped away extraneous features users were less interested in. 

In my user flows, I recognized areas where the flows could be simplified through automation. Automating secondary actions would provide a more delightful and seamless experience for the user. Areas benefiting from automation included the promo-discount application and default tip amount in the User-closeout flow. 

Branding

Simultaneously, I began designing the brand identity and visual design systems.

The logo is built up using three visual concepts representing the following brand attributes: Personal, time sensitive, and effortless. The result is a strong, balanced mark that is recognizable at any size.

The color system is fresh, inviting, and lively. The palette is inspired by the idea of a group of young professionals enjoying a fun night out.

My type system uses Karla for headlines and Lato for body content. Karla has a quirky professionalism, a duality that resembles the modern spirit of the working world. Lato is modern and its light weight makes it easier for the user to navigate through a venue’s drink menu.

image Identity mark on white - light backgrounds
image Alternate mark on dark backgrounds
image Visual Systems
image Color Palette, type Scale

Wireframes and Design

For this project, I used Sketch for the wireframes and design. 

In creating my wireframes, I focused on reducing confusion of the entire application, balancing the amount of content, visual balance, and user-friendly UI. To reach these goals, I stripped away extraneous features users were less interested in. 

In my user flows, I recognized areas where the flows could be simplified through automation. Automating secondary actions would provide a more delightful and seamless experience for the user. Areas benefiting from automation included the promo-discount application and default tip amount in the User-closeout flow. 

image Lo-fi Wireframe
image Hi-fi Mockup

More Testing

I conducted a user test on my lo-fi wireframes and received invaluable feedback in areas of the process that I had blindly overlooked. Users, particularly those with Android devices, disliked my current labeling system for unassigned friends and informed me how that system was typically reserved for message notifications. My solution was to remove this system and replace the avatar placeholder icon with one that was more semantic.

image Lo-fi Mockup
image Hi-fi Original
image Hi-fi Final

Iterations of the labeling system for unassigned friend profiles

Payment Process

Payment process (split by line item): Original flow (top), final iteration (bottom)

image Payment Process - Lo-fi and Hi-fi

Venues - Card Content

For the venues, I leveraged Usability Hub’s Preference Test feature and tested card content layouts to help me finalize a solution. Users appreciated the larger image because they could ‘see’ the venue. I took this feedback and made the image a focal point of the cards in my list view.

image From left: card content layouts, discovery screen (map view) with preferred card design, discovery screen (list view)

Menu Items

I also explored the presentation of menu item options focusing on space and button size. I reduced the opacity of option buttons to direct the user’s attention towards adding the drink to the order. Button sizes were increased for users to scan, understand, and take action.

image Single menu item expanded to display options (from left): lo-fi wireframe, hi-fi mockup (original), hi-fi mockup (final iteration), hi-fi-mockup (final iteration) with options selected.

Apple’s Human Interface Guidelines

I adhered to Apple’s Human Interface Guidelines and principles to design the watch app. I also conducted user interviews of Apple watch users to get an understanding of how they used the watch. Watch users utilized their wearable most frequently for notifications and quick access to data. I used this information to create the following screens:

image s
image
image

Prototype and More User Testing

I created the prototype and wrote a script for user testing (Final Usability Test Script ↗). The script focused on venue discovery, drink order, and tab closeout.

A benefit of engaging users early and often was that I was able to tease out most of the issues and confusions before testing the prototype. However, this round of user testing uncovered issues concerning the copy, particularly within notification messages and CTAs (Call To Action) in the closeout screens. During and after tests, users suggested alternative words and phrases that would better help them understand what was being asked of them. I received satisfactory test results after incorporating these changes.

image Closeout notification screen alerting user of unassigned friends. (from left): lo-fi wireframe, hi-fi mockup (original), hi-fi mockup (final iteration).

Conclusion

What I learned

This project taught me to:

  • Build a list of terms and determine usage. In this project, I was confusing users by using several forms of ‘bill’ and ‘friends’ freely throughout the app. Terms like these should be defined earlier in a project to reduce confusion in later stages and in testing.
  • Save some suggestions for future releases. Users will always have ideas for additional features. At times, I found myself exploring ways to incorporate these nice-to-have features and losing sight of the project goals. If I hadn't established goals at earlier stages of the project, I wouldn't have them to reference back to and could easily have been designing forever. Instead, I learned that it’s better to keep the product lightweight, get something out there, and work these nice-to-have features into a future release.
  • Treat the users as the experts.During tests, users brought up some interesting scenarios I hadn’t yet thought of (ex. What happens if I want to create additional orders before I’ve received my first order?). I didn’t have an answer. So I asked the user what they thought would happen and they provided an amazing solution. “Two orders max at any time.”
  • If possible, test, test and test some more. I used usertesting.com for my user tests because it allowed me to instantly test my design through the Invision-Usertesting partnership. However, when users became stumped by a question or confused by the limitations of the unfinished prototype, I was unable to provide them alternative tasks, without skewing results, to salvage the remainder of their test time. I also used actual kidney patients and medical health care professionals for testing.
  • Request feedback for future development. DuI was thinking of the nice-to-have features and wondered if I might be missing other ‘essential’ features that could be first added into future designs. I learned that the best apps don’t leave this to chance and will add a screen to the end of transactions to ask for feedback. By doing this, the brand and application are better prepared to continue prioritizing feature lists to give users what they want, when they want it.
image Thank You!