Brief/Target Audience

Find a company or restaurant who currently lack an online presence and interview a representative of the brand about the goals and values. Design an app with the purpose of furthering their goals whilst maintaining any established design and styles they already have.

Boba Bear’s Target audience ranges from 13 to 27.

Tools

-Figma

-HTML5

-SCSS

-Javascript

-Illustrator

-Photoshop

Boba Bear is a Korean style cafe based in the Christchurch Entex building within the city center and served a wide variety of tea drinks, fried chicken, and waffles. Based on the brief for this assignment I chose to design an app on mobile devices that would provide Boba Bear with a way to deliver their goods and allow people to order directly form the app to their location.

Ground Work

Starting with an interview with the branch Manager at Boba Bear, I established the goals of the company and who the target audience is. Boba Bear are a family focused chain that also target a young adolescent market with a goal to share Korean culture through food.

With the goals in mind, I took inspiration from their existing branding and social media pages. Their social media pages didn’t have much content to work with other than pictures of food and their logo.

EABF9F

1E212D

Wire frames & Concepts

Below are my initial ideas for the UI shown in a wire frame which is later developed into a low detailed version.

Coming from Korean inspired desert, the waffles are not what a western community would envision as a waffle if ask to imagine one but more of a cone shape when rolled up, like a big ice-cream cone filled with various other foods sweet and savory.

Because Boba Bear wanted to become more in tune with a New Zealand audience, and NZ is very influenced by American culture, I decided to style the waffle icon in a traditional western style to help people who are new to the Boba Bear experience understand visually.

Wire Frame

Low Fidelity

FFFFFF

Creative Process

Here’s a mood board comprised of images from Boba’s own social media. With these I drew inspiration for the designs and feel of what Boba Bear were all about. Using their menu’s food and drink colours I came up with a colour palette. A very dark blue for tapioca, a light brown for tea’s, a light green for matcha, and white to contrast and use as background colour.

39E291

Keeping up with the menu as inspiration, I experimented with visual guidance within the app. Given their logo is quite cartoon like I thought it fitting to have some cartoon icons as menu options.

Logo & Icon Design

High Fidelity Concepts

After the color palette and smaller assets were made, I came up with a more complete idea, filling in the Low fidelity design with colour, text and imagery.

Concept Development & User Testing

The next step in development was User testing. Using my Tutor as a proxy client and the assistance of class mates allowed me to see how my design would work and if outside eye’s could pick up on things I’ve missed or they think I should change.

During my concept stage I neglected to think of a way to add quantity of food which was the first and only major issue with the design I had come up with. Given the app was being designed for phones as well it was suggested to decrease the size of the padding around the edges of each item.

a “Details” option was also added for those who wish to check the dietary information and a “Add note” for people to personalize their order.

Aside from the changes brought up, user’s felt the rest of the design served its purpose and was easy to understand so remained mostly the same with some minor tweaking to maintain basic design principles.

First Concept

Altered Concept

Previous
Previous

City Guide

Next
Next

Gorillaz Live