back

jennifer purcell

UX/UI

PRODUCT

GAMING

DESIGN

resumecontact

Omakase

Product Design,
Branding & Mobile App

June 2020
Go To Final Design

Project Background

Between May and June 2020, I worked on Omakase through a subsidiary assignment. Our team of two were in direct contact with the founder, and were given existing wireframes. We had been tasked with providing product branding, high fidelity screens for a mobile platform, and a prototype covering at least one full user flow.

My Roles

Individual

  • Illustrations
  • Animations
  • Interactive Prototyping
  • Features Video

As a Team

  • User Interviews & Testing
  • UX Design & Iterations
  • Branding & Visual Styling
  • Design Systems

Product Details

Omakase (pronounced “Oh-ma-kah-see”) is a Japanese word meaning “leave it to us” (also used in sushi restaurants to indicate “Chef’s choice”) and is the perfect word to describe what this website/app will do: it lets the user leave the burden of researching events and activities to the app. Put another way, their app surfaces activities and events in a given city to logged in users based on their indicated preferences.

The Problem

Omakase is intended to solve the problem of finding things to do in a given locale in a one-stop, easy-to-use tool without requiring research. It would focus exclusively on Houston at first and then expand outward as the company grows.

What we were given

  • Low Fidelity Wireframes
  • Low Fidelity Iterations
  • Directional Input From The Client
  • Competitive Analysis
  • Initial User Interview Summaries

Where We Started

Branding

Omakase didn't have any initial branding or direction to follow, aside from the low fidelity wireframes.
We needed to first establish the visual direction of the brand, and hence how the app would be visually built following.
  • Logo Design & Iterations
  • Colour Profiles & Themes
  • Illustration Style & Feel

Brand Sketches & Iterations

After the initial meeting with the client we narrowed down a general direction to start working torwards a brand, starting with logos.

Logo Sketches

Illustration Sketches

User Testing: Logos

During the branding process we surveyed potential users regarding a few directions we had been considering. The most essential of these, was the logo. We surveyed peers and the general public, and the results made it pretty clear. With this information it was then easy to approach the client and show why this big decision had been made in this direction.

Logo Iterations

With "In Service" chosen we then explored all the different ways it could be presented in Omakase.
The "In Service" logo was the final decision.

Mobile App

Going from the provided low fidelity wireframes, we then went forward with applying our brand styling to the app itself using Adobe Xd.

Drafts

We took our first drafts through a user testing process in two rounds.

User Testing: Prototype

The final round of user testing before our delivery deadlines was done between our second and final prototype drafts. We utilized a mixture of quantitative surveys sent to peers and the public, and more in depth qualitative interviews and prototype testing with a group of users organized for us by the client.

Quantitative Data

During this process, we setup surveys through Google and Slack, and focused on three areas with a 1-5 ranking of difficulty/pleasantness. Ease of use, iconography recognition, general aesthetics, and readability. We decided to focuse more broadly in our surveys to get large amounts, easily obtained, and quick turnarounds of the data we needed.

Ease of Use

Iconography

Aesthetics

Readability

Very Easy/Pleasant
Somewhat Easy/Pleasant
Neutral
Somewhat Difficult/Unpleasant
Very Difficult/Unpleasant

Qualitative Data

With our interview process, we used Google Meet to have video and screen share to monitor their process through the prototype. We had been given users by our client as part of the contract, though many of those were no-shows. Based on our contingency plan for this, we sourced more through our peers, and ended up with about eight users tested.

Key Positives

  • "Feels relaxing and easy"
  • Overall the aesthetics were strongly approved of by those we talked with.
  • "Smart way to have suggestions for events you might like..."
  • The event details screen was strongly recieved and overalll well liked, with 7/8 users mentioning it as a strong point.

Needed Improvement

  • Filter tab/button was not easily recognized as such, with about 3/4 of users not understanding how to use it.
  • Our bottom navigation had issues of recognition. 1/4 of users had issues with "My Plan", the friends feed, and "Favorites."
  • In logging in through a third party, the drawer system was not easily recognizable as such. 5/8 users struggled with that process.

Iconography Drafts

One key thing taken away from user testing the draft phases, was recognition of iconography. The initial illustrations I did failed to convey a clear purpose to the user.

First Draft of Category Icons

Final Draft of Category Icons

Draft Change Progressions

With the testing, we went through three main sprints for high fidelity drafts. Between our first and second drafts we saw the most change, as the first was done directly from the provided low fidelity wireframes. Moving from first to second draft, many UX changes to flow and the presentation to information was made. Once we had done testing for the second draft prototype, changes to the third, and then the final, drafts were mostly about polish and increased user flow efficiency.

Final Design

Prototype

The prototype I built and tested through Xd, with an almost completely interactive user flow. There are multiple login methods available to do, onboarding process, filtering by location and date, category selections, etc...

User Flow

  • Login through email and password, third party apps, or create an account through the onboarding process.
  • Use bottom nav to check initial statuses.
  • Set your location for Houston, TX.
  • Expand the categories of Music and Dining.
  • Set your filter for by date, through either the top or bottom filter tab.
  • Go to the Sunflower Festival, and explore what the event page has to offer before booking tickets.
  • After that Process feel free to check your bottom nav sections again for confirmations, and exploring the ticket display system.
View Prototype

Features

  • Full Login Flow, Including Third Party Logins
  • Onboarding Procedure
  • Animated Tabs for Location & Filters
  • Illustrated Categorical Icons Sorting
  • Simple & Accesible Colour Theme
  • And Much More...
Video was made using Adobe Xd and Premiere

Next Steps

Takeaways & Going Forward

From our final user tests, and hand-off conversations, there were still a few places that needed more attention.
  • The microinteractions were not the smoothest, and if not remedied from a developer standpoint, would need revisiting.
  • In our last user tests it was also apparent that text hierarchy wasn't as clear as intended.
  • The Alerts and Friends screens were never fully realized and could definitely benefit from some direct focus.

If I had More Time

I would to have spent more time in the microinteractions, really working on the polish and pop of the final user flows and experience. I also would have loved to spend more than the 3 weeks we had on Omakase in general. It's an interesting concept and was really fullfilling to work on. That would allow us to really make a full social experience tie in with it, and then also address all the ways that alerts and group notifications can be tied into the overall design. Especially experimenting with the main concept of things being catered for you, and how that can be pushed even further into group and personal events.
Back To Top

Ⓒ Jennifer Purcell 2023.