- Class Project
- 4 Weeks
- User Stories
- Comparative Analysis
- Process Flows
- UI Design
- Visual Design
- Logo and Icon
- Illustrator XD
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.
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.
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 class used the Five Elements of Style (or 5-Planes) approach for projects.
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.
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.
We created User Stories to help define the target audience and to inform the features that our app would need to meet their needs.
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.
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.
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.
I also used the APIs to build our list of search options.
With the feature set and scope defined, I began working out the experience flows, first in Trello and then in Draw.io.
My teammate and I met to review and make changes to the process flows through several iterations.
We conducted usability testing with seven of our classmates serving as test subjects.
For the tests, we defined three scenarios for the test subjects to execute.
I developed a working wireframe prototype that included functionality to mimic the steps the user would follow to execute the scenario.
After following the scenarios, we asked test subjects to complete an Initial Impression Survey.
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.
I was unsure where to go.
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.
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.
Given the compressed 4-week design period, I was working on and iterating the visual design throughout the process.
I tried out several color schemes before we decided on the option that was right for the app.
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.
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.
Finally, I came up with and added the tag line, in the Super Clarendon font, to further emphasize the app’s differentiating qualities.
The final app design incorporated our decisions on the color scheme and the lessons we learned in the usability testing.
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.
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.
My final UI design task was designing the information screen for recommendations.
For our final class presentation, I completed a click-through prototype of the following search scenario.
Click through the prototype below, using the click indicator to navigate the scenario.
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.
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.
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.