Icey Coffee

Mobile Ordering App

Project Duration

July 2023 - October 2023

Role

UIUX Designer

Responsibilities

• User research

• Wireframing

• Prototyping

• Conducting usability studies

• Accounting for accessibility

• Iterating on designs & branding

Tools

Figma, Procreate, Adobe Illustrator

Elevate your everyday with a cup of coffee

Icey Coffee is a mobile ordering app designed to enhance the coffee-buying experience for a diverse range of customers, including busy office workers and students. Our mission is to provide swift, convenient service, offering a delectable selection of beverages and food.

Project Overview

Background

Students and office workers frequently encounter time constraints that pose a significant barrier to placing their orders in-store while waiting in line. These time limitations often stem from the demanding schedules of students juggling classes, assignments, and extracurricular activities, as well as from the hectic workdays of office professionals balancing meetings, deadlines, and daily tasks.

As a result, the need for a more efficient and convenient solution becomes evident, one that accommodates their fast-paced lifestyles and ensures a seamless ordering process.

The Problem

Students and office workers often face time constraints that prevent them from waiting in line to place their orders in-store.

The Goal

Develop a mobile ordering app that allows users to conveniently place orders in advance for pick-up.

User Research

I conducted interviews and created empathy maps to gain a deep understanding of the users I'm designing for and their specific needs. Through extensive research, a prominent user pain point that emerged consists of working adults who are looking for an efficient ordering system to bypass in-store queues.

User Pain Points

Persona

Paper Wireframe

In my initial paper wireframe sketches, I primarily emphasized the essential features, spanning from the homepage to the item selection and checkout process, along with the order status page.

Low Fidelity Prototype

Building upon the paper wireframe, I developed a digital wireframe and transformed it into a low fidelity prototype for usability testing. The low fidelity prototype maps out the user's journey for placing an order in the shop, covering the steps from login, navigating the homepage, selecting items, proceeding through the checkout process, and tracking order status.

Usability Study

Overall, after conducting two rounds of usability studies, I identified various aspects of the app that could be enhanced. The first round of the study guided the development of the wireframe and low-fidelity prototype, while highlighting common user issues during testing. The second round of the study pinpointed areas for improvement in the high fidelity prototype, aiming to create a more user-friendly and accessible app.

Digital Wireframe

Following the usability study, I refined the digital wireframe, enhancing both the layout and functionality. The central concept of this app revolves around an intuitive menu interface, ensuring easy navigation and effortless order placement through simple scrolling.

Design

Icey Coffee
Mobile Ordering App

Onboarding

An onboarding space featuring adorable illustrations that highlight the service's key features.

Sign in

Effortless login and swift account creation for new users.

Homepage

You can view upcoming events and the latest promotions, as well as discover the most popular drinks ordered by people.

Ordering

Easily navigate the menu with simple layouts and categories, swiftly add items, and customize your drinks.

Search

You can search for the items you desire, and easily access your recent searches as well as popular searches made by others.

Shopping Cart

You can effortlessly modify the items in your cart to tailor your order to your preferences. Whether it's adjusting the quantity, customizing ingredients, or making any other changes, the cart is designed to be user-friendly.

Payment

You have the flexibility to either schedule a pick-up time or opt for the standard pick-up option. Additionally, you can expedite the payment process by using your saved payment method or easily adding a new one for your convenience.