Case Study: Cafe Apps Design

Azizi F
Bootcamp
Published in
4 min readJun 15, 2022

--

This application is an application for ordering coffee, chocolate, drinks, and even snacks in a cafe. which cafe is dedicated to coffee lovers busy people who don’t have time to drink their favorite coffee. In this project, customers can order coffee very quickly. because the tool to call is at hand. and also consumers can see which place/table is comfortable to occupy. because this application displays all the spots on the table.

The User or Audience

Most of the consumers of this cafe are students and college students, who were they have very busy schedules. there are also office workers sometimes often stop by to taste our coffee. even up The vice-principal of the school also regularly stops here 3 times a day. so I decided to make this application easy to use by students in particular SMA/SMK and above.

Goal

The Goal of This Application Are:
1. Students / Students can still excel in school even though the time spent in our cafe
2. still able to socialize well.
3. Consumers can easily know where to order coffee with Original seed.
4. Teach consumers how to mix good coffee.
From the above objectives, this application will provide facilities for achieving all of the above objectives.

Challenge

  1. many consumers have busy lives, between school work and unbalanced socialization.
  2. Consumers have a busy schedule.

The core of the problem above is time management. then in this application so that it can help consumers stay awake, there will be a coffee feature time. which will remind coffee time between loose times can be determined by the consumer/member.

Roles and Responsibilities

  1. Project Manager. this is the UI/UX Mobile Apps Project. So, I take it. First, we interview the client, ask questions and make a design.
  2. Designers. Of course, I am the designer of this project.

Scope and Limits

I made this project, it might take a long time, because of unstable internet connection problems. and also the windows I use are windows 8, so I can’t use adobe xd. So I looked for another alternative application.

My limited knowledge of UI/UX issues is also an obstacle. because I’m still new in exploring this UI/UX. I even know that UI/UX is still new in this 3rd semester’s lecture.

Making process

Need analysis

From the data above, we can analyze and conclude it into one conclusion. Requirements for this design.
1. Of course they want a design that is clean, tidy, and easy to use.
2. The CTA button will be the color of the mocha according to the color of the mocha coffee. not too light and not too dark. Of course, we also use this mocha color as our main color.
3. In order to simplify the design, I also need information from them such as what menus they have, their slogans, their events, and of course the prices of their products.

Flow & Sitemap

To make it easier for any elements that need to be made, first I made a sitemap. to find out which elements have and have not been created. it also makes our design flow more organized.

Order Flow
Sitemap
Required Elements
Required Elements

Design Reference

very often when I create something it’s still blank at first. in this case, we need to find design inspiration that we will sample. In my design inspiration, I only look for 1 or 2 designs that seem to fit the design I’m going to make. here I usually collect it on the mood board.

Mood Board

Wireframing

After the inspiration data has been collected, then I create a wireframe with a style that matches the design requested by the client.

Wireframe

Final Design

Final

What do you think
I really need your feedback
Thank you

--

--