iPhone with simpatiGO App on Screen
Design Brief
simpatiGO Food & Beverage Search/Recommendation App
Context
  • Class Project
Timeline
  • 4 Weeks
Roles
  • User Stories
  • Comparative Analysis
  • Process Flows
  • UI Design
  • Wireframes
  • Visual Design
  • Logo and Icon
  • Design
  • Prototype
Tools
  • Taiga
  • Trello
  • Draw.io
  • Photoshop
  • Illustrator
  • XD

Overview

simpatiGO is a restaurant, cafe, and bar search app that provides curated, location-based recommendations compatible with the user’s profile of tastes and requirements paired with their current needs.

As a final class project, our team of two was tasked with coming up with an idea for an app and progress through the UX Design process, culminating in a mockup and final presentation.

Problem

When we search for a restaurant, café, or bar, we all have specific tastes and preferences for what makes a place attractive. Sometimes our search requirements express our typical likes and needs, and sometimes they’re particular to an occasion, like a business dinner; often, the two sets of preferences overlap to define our requirements.

Solution

There are several apps where you can search for a restaurant, café, or bar, but the reviews and recommendations aren’t necessarily from users that share your same ideas for what might make those places ones you’d want to visit.

simpatiGO would resolve the search problem by providing curated search recommendations based on:

  • the user’s standard preferences, as defined in a user profile
  • occasion-specific preferences that the user enters at the time of the search
  • ratings and comments from
    • other users with similar profiles
    • the user’s social media contacts
    • other search apps that include keywords associated with the preferences

UX Design Process

Design Approach

The class used the Five Elements of Style (or 5-Planes) approach for projects.

Image Credit: Garrett, Jesse James. Elements of User Experience, The: User-Centered Design for the Web and Beyond. N.p.: Pearson Education, 2010.

Strategy

Product Objectives

Design a restaurant, cafe, and bar search app that provides curated, location-based recommendations compatible with the user’s profile of tastes, requirements, and affinity groups, paired with their current needs.

Research

Comparative Analysis

The team looked at many of the search and recommendation apps that offer a similar experience. We noted the things we liked and disliked in each and compared our ideas versus their implementations, when available.

Below: Some of the apps that we reviewed.

User Stories

We created User Stories to help define the target audience and to inform the features that our app would need to meet their needs.

Below: A sampling of the User Stories developed for the app.

Aside: At this point, I want to point out that this class project was intended to be done by a team of four students, but two of our teammates dropped out the day after the class divided into teams. As a result, and in consultation with the course instructors, we decided to reduce the scope of work we could complete for the project. This decision included eliminating the fleshing out of the process flow for defining the user profile and affinity groups.

Also, as my remaining teammate was employed full-time and involved in a large project at work, and since I had the time, I took on the task of most of the development from this point on, with him providing input and reviews.

Scope

Functional Specification

Once we had a good idea of the features our app would need, we met to discuss the functionality we wanted the app to have and to define and limit the scope to an appropriate scale.

Above: Artifact of brainstorming session working out functionality and scope.

Content Strategy

Technology Research

I researched the APIs of the two major players in the search/recommendation sector, Yelp and Google, to confirm that our plans to parse and aggregate businesses’ amenities and customer reviews would work.

Below: Artifact of brainstorming session working out functionality and scope.

I also used the APIs to build our list of search options.

Above: A sample of the simpatiGO filters list derived from the APIs.

Structure

Experience Flows

With the feature set and scope defined, I began working out the experience flows, first in Trello and then in Draw.io.

Below: Trello cards created as we began to map the Experience Flows.
Aside: Before we landed on the app name simpatiGO, we code-named the app “where’s my peeps?”.
Above: I relied on draw.io to map the various User Experience paths users would take.

My teammate and I met to review and make changes to the process flows through several iterations.

Above: A marked up print out of the Experience Flows diagrams.

Skeleton

Usability Testing

We conducted usability testing with seven of our classmates serving as test subjects.

Above: Usability Testing in process.

Scenarios

For the tests, we defined three scenarios for the test subjects to execute.

Wireframe Prototype

I developed a working wireframe prototype that included functionality to mimic the steps the user would follow to execute the scenario.

Above: One of the spreadsheets I developed mapping out the steps for for executing a Usability Testing scenario. The spreadsheet details the steps, required interactions, and development notes.
Below: The Adobe XD wireframes with Prototype links for Scenario #1.

Initial Impression Survey

After following the scenarios, we asked test subjects to complete an Initial Impression Survey.

Below: The Initial Impression Survey.

Survey Results

Below: A sampling of the comments we received from the test subjects.

Positive Feedback:

Building the filters gave me a feeling of satisfaction.

I wanted to see more.

The restaurant on the screen matches the scenario criteria.

I liked building the list.

I liked the hearts.

Pain Points:

I was unsure where to go.

 

Suggestions:

Add more color.

What about crowd sourcing the filtering process so that I can find a place with friends?

We calculated results of the Initial Impression Survey ratings using a SUS (System Usability System) Calculator.

The simpatiGO SUS score was 70.5.

Above: Our calculated SUS scores.

Usability Key Findings

Filtering selection was not prominent on the page

Users attempted to swipe at the restaurants displayed instead of trying to filter.

Lack of feedback when selecting filters

Multiple users were unable to recognize immediately that the filter was applied.

Lack of Color - mentioned by all users.

Surface

Visual Design

Given the compressed 4-week design period, I was working on and iterating the visual design throughout the process.

Color Scheme

I tried out several color schemes before we decided on the option that was right for the app.

Above: Color scheme options we considered.

Logo Design

Before I began working on the logo design, we decided that it should be a text treatment.

Since the typeface was critical to the design, I worked with several different fonts before choosing Avenir Next.

Above: Part of the Illustrator file in which I tested out different approaches to the logo typography.

This font exercise and final choice led to the idea for the stylized “GO” for the app name. And that inspired me to add the heart and magnifying glass handle graphics — a great way to relay the app’s key functionality differentiator visually.

Above: Part of the Illustrator file where I worked out the heart and magnifying glass graphics.

Finally, I came up with and added the tag line, in the Super Clarendon font, to further emphasize the app’s differentiating qualities.

User Interface Design

The final app design incorporated our decisions on the color scheme and the lessons we learned in the usability testing.

Filters Sheet

The final design of the filters sheet incorporated several things to address the concerns we heard from our test subjects. I changed the filters sheet to only cover part of the screen and made it semi-transparent so that users could see the changes to the map and restaurants strip as filters were applied and moved the filter well to the top of the sheet to increase its visibility. I also eliminated the photographic backgrounds to reduce visual clutter and maintain consistency across the filter well icons.

Below: Final design of the filters sheet.

Results Screen

I made visibility of the filter well permanent so that the user could quickly bring the filters sheet back onscreen to make changes. Also added the heart shapes to the pins with variable fills to reflect the “place you’ll love” confidence score.

Below: Final filter results screen.

Recommendation Information Screen

My final UI design task was designing the information screen for recommendations.

Below: Final information screen.

Final Prototype

For our final class presentation, I completed a click-through prototype of the following search scenario.

Scenario

  • You want to find a restaurant for an anniversary dinner party for 10 in an unfamiliar city.
  • The honorees love American and Seafood cuisines.
  • You can afford a more expensive restaurant but aren't a millionaire.
  • You want to find an elegant place that's appropriate for a dinner party and not a date.
  • Many guests haven't seen each other in a while and are looking forward to catching up over dinner, so you want to avoid noisy restaurants.

Click through the prototype below, using the click
indicator to navigate the scenario.

Conclusion

Positive Feedback

The audience for our final presentation of the app included our classmates and instructors, but also UX industry experts and recruiters. They responded very positively to both the concept and design of simpatiGO, with several people expressing that they hoped we would pursue development of the app for release or wished the app was already available.

Lessons Learned

My previous UI design experience was for applications targeted to a professional audience and not the general user. Our pro users (graphic, print, and web designers) could be assumed to understand the ubiquitous gestures, interactions, and language common across multiple applications.

The experience of performing the usability testing on simpatiGO opened my eyes to the reality that today's typical app user doesn't have that same base of knowledge and that the UX designer must design gestures and interactions from a different perspective than I had in the past.

Final Thoughts

Because we had to limit the scope of work due to the size of our team, the completed work was mostly a reworking of functionality available in other search/recommendation apps.

The parts of simpatiGO that make it different are the user profile, social network linking, and recommendation scoring features. It was disappointing not having the time to flesh out those features.