Overview

Project for CalArts, UX/UI Specialization. Create an app for an original idea which includes browsing, purchasing, and checkout features. The project would need to include both mobile and desktop experiences. The app also needed to feature a customization option of some kind.

Goals

Goals of this program were to showcase proficiency in creating wireframes, prototypes, user testing, implementing feedback and more. Students were also tasked with creating a user-flow that included on-boarding, product browsing and finalizing purchases.

Portable Central and Eastern European Food

UX/UI Study Case

About Chut

In Russian, Czech, or Slovak – Translates as “a small bite” or a “taste”. The goal of this app was to order food for delivery or pickup. The food was to be central and eastern european cuisine which could be chosen from a set of pre-defined meals, or customized based on users tastes.

The Challenge

This project was designed to be built from the ground up. Designers were asked to create strategies, user profiles, wireframes, prototypes, original concepts, pattern libraries and mood boards.

Design Toolkit

Design Process

The first step of the design process involved desk research and concept creation to develop an idea of what was to be created. wanted to have a solid foundation for an idea with plenty of information early on in the process, before having any wireframing or prototyping.


After analyzing “competitor apps”, I began to conceptualize the solution, focusing on user flows and wireframe to give me a way to try different ideas.
From this, From this, I went to the production mode, designing the interface considering design principles such as contrast, hierarchy and feedback; brand attributes and user interactions.


Once the interface was ready, I took feedback from two other fellow designers in order to understand the experience gaps.
I then worked to retweak the designs as necessary before moving on to the final prototype.

Concept

Chut aims to bring a fresh take on portable central and eastern european food for students and urbanites who are looking for an inexpensive and quick bite. The app was aimed at 20-30 somethings, but would also speak to those with adventurous tastes who were outside of the target range.

User Flow

The main point of the flow is to ensure that the functionality is always visible to the user, but not in an obstructive way. I decided to keep icons simple while using animations and hierarchy to my advantage which urged the user to continue through the process. The overall emphasis on this project relied on the cart, which needed to remain simple but able to customize items in addition to having the ability to choose pre-configured options. 

Rather than a single screen which would present the user with all of their options, a customization route was designed to break down the choices into six screens which would present more focused options.

Sitemap

Wireframes

Wireframes were designed to organize the information and structure before moving on to create visual design cues and interactions.

User Interface

Splash Screen & Search

While most applications might use a soft fade or other animation effects during transitions, I opted to make the transitions immediate and without fluff so that the expediency and speed of the take-out surface would be allowed to flourish. The only place that such effects were to be used, would be in the main menu area and would only be used in a way that added to the presentation of the food.

Colors

In order to keep things light and playful without sacrificing the upscale vibe, I chose to keep things centered around a bright green color to represent the freshness and quality of the food. An off-black and white were chosen to compliment the green while signaling the upscale feel of the restaurant that elevated the food from the street to fine dining.

Artboard 1 copy

Type

In order to keep with the upscale dining theme, I opted for a traditional serif and sans pairing that didn’t break convention and would be easily recognizable to users.

User Personas

Additionally, we were tasked with creating personas to better understand who might use the app, and what their specific needs might be. These are the highlights of those personas.

Rebecca Greene (29) Customer Service Representative

– Customer Service Representative for an apparel company.
– Loves trying new foods during lunch break
– Enjoys exploring new cities on the weekends
– Married for 2 years.
– “I’d love to grab something quick and cheap. I’ve got
tons of orders to process.”

Motivated by
Time
Money
Quality
Distance

Zeke Bailey (22) University Student

– Student at the local university.
– Lives in the dorms.
– Enjoys bar hopping on the weekends.
– Likes to explore the city with other students.
– “I need to grab a quick bite before my next class. I’m tired
of the cafeteria.”

Motivated by
Time
Money
Quality
Distance

Jarrod Smith (36) University Professor


– Has a Masters from the University
– Enjoys traveling in the Summer
– Enjoys seeking out new experiences in order to learn
– Married for 8 years.
– Is a ‘Foodie’
– “I have papers to grade and I’ve only got 30 minutes
for lunch.”

Motivated by
Time
Money
Quality
Distance

Checkout Process