top of page

Humber's dessert store - Native App

A mobile app delivers delicate desserts from students in Humber's Confectionery Program to the local community.

Project Overview

Students in Humber's Chocolate and Confectionery Artistry Program design and produce exquisite bakeries, but their works usually remain to trade inside the campus. I created an app that promoted the products were from the Humber students and extended the school's dessert store to the nearby neighbourhood.

Index - img-05.jpg

DURATION

7 Weeks

PROJECT TYPE

MY ROLE

Visual Design

Research

User Experience

Prototyping

Mobile app, IOS

TOOL

Figma

SCOPE

Solo Project

Project Context

This project aims to showcase and sell bakery products from students. It expands the school's dessert store's customers range outside the campus by creating a platform for nearby communities to browse, order, and receive bakeries from students.

Design process.png

DESIGN OUTCOMES

Humber's dessert app recommends products based on users' personal dietary habits and preferences. Users can follow favourite bakers and save products.

Personalize home page

Home screen shows your points collecting progress, Humber Confectionery program's newest trend, and products based on your preferences.

Search & Filter

Users can search desserts directly by type or dietary habits. By applying the filter to search results, users can narrow down choices and save time digging on apps.

Product screen

You can find the ingredient charts, who makes the product, and other users' comments with images.

Order progress & past order

After users submit the order, users can review the order details and track the progress. If users have any questions and problems with the order, they can contact staff or cancel the order. Past order allows users to re-order items with the same previous choices.

Initial problem

What problem am I trying to solve?

"How to make customers outside near the campus have a stable channel to purchase and receive artistry bakery or confectionery products from Humber's students?"

Customers general have many different types of concerns when purchasing food from an independent food online platform that they have never stepped into the physical store.

Following this, I list some key insights from research to the problem I aim to solve.

01

Hesitant between products

Some users have many concerns before they select the desserts. Such as worrying the favour is not what they like or are the ingredients contain any allergens.

02

Lack of trust in the product images

For users selecting desserts for special occasions, the exterior appearance of the product is the most important. Since the products are from Humber's students, it is natural for customers to question products' quality.

03

Desire to communicate with sellers

On some occasions, users would like to leave notes to the seller to make special requests. If the order has any problems, the user would need a channel to communicate with the seller through the platform.

Research

Persona & Journey Map

I created a provisional persona of a potential app user who represents the user from communities near the Humber campus. The persona and journey map help me understand: Why they would purchase barking from the app & What problems they might face while completing the entire process.

Scenario.png
Journey map.png

Design opportunities

1. "What should I choose?"

How to help user find right products for the user?

- Suggesting products on the home page based on user past order habits.

- Ask users preferences while registration, such as favourite types of desserts, flavours etc.

- Popular/Best selling products from students.

- Order past items from home page or order same past order.

- Help users browser through the store by food or dietary categorizes.

2. "Did I fill all the right information?"

If users make mistakes, can they correct them by themselves?

- Auto fill address and payment information from past.

- Have "Change" buttons everywhere on the checkout process.

- User can cancel order before order ship, or can connect to store on the order page.

3. "Is this item good? Is this student baker reliable?"

How to allow user make decision base on their own judgment?

- Rating star on each items.

- Allow user to read other's review and images.

- Remind user to rate items after the order complete.

- Allow user to write a review to a past order.

Research

Competitive Analysis

I searched and selected five native apps to observe how other companies integrate brand characteristics, customer communities, and service features into their apps. This allows me to study the weakness and strengths of these native e-commence mobile apps, so I can learn while designing dessert apps for Confectionery Program.

Research.jpg

Usability Heuristics

Usability heuristics identify design issues within apps' user interfaces and learn what makes these apps easy to use. Then, I always look back to the result to help me plan the wireframe in the later design stage

Research

Key Takeaways

After the research, I found Starbucks and Nike mobile apps have overall best performance in the Expert Review and Heuristic Evaluation.

Nike and Starbucks build brand community in their mobile app.

Two brands' native app designs bond themselves to their brand identity, a sense of belonging to the brand. Although other apps also attempt to create local communities, they fail to the cognitive overloads.

Personalized setting simplify user's actions

Starbucks and Nike's app both use users' personal information to simplify the action in the purchasing process, such as automatically filling shoe size and quick access to the last order.

Summary insights.png

Ideate

User flow

Fundamental task: Browser, select desired products, checkout and final receive products.

Creating the user flow charts allowed me to pull all ideas together and convey my concept to others. Furthermore, it was used as guidance for me to make a wireframe in the next step.

task flow.png
Task Flow Diagram.png

IDEATION

Wire-framing

Based on the decision made before, I followed IOS guidelines to digitalize my sketches into UI wireframes. Then test the wireframe with others to discover some adjustments that need to make.

Mid-wireframe.jpg
Final-img.jpg

Final Design

Final outcome

Humber's dessert app delivers all kinds of exquisite bakeries from students in the Chocolate and Confectionery Artistry Program. Users could pick up or have the order delivered from home at required times.

 

Each feature highlights a unique aspect of the app experiences. In addition, it calls out which design goal it adheres to. 

Final design
Follow baker1.png
Follow baker2.png

Feature:

Following favourite makers and saving products

Help user to select desired products

Users could order products from familiar bakers, so they would not need to worry about the quality of the products. By following the reliable baker, users could try the newest products without hesitating.

This feature also enhances the sense of the Confectionary program as a community and provides each user with a personalized home page. Meanwhile, the feature also saves users' time and helps them locate their loved food.

Feature:

Reviews and rating on each item

Adding reliability to students' works

Rating star tag is on each corner of the product. Users can view others' comments and images of the product they received, as well as post their own reviews after the order is completed. The review and rating feature can clear some users' concerns to make better decisions.

Other users' feedback and images really help to clear some users' concerns to allow them to make decisions, such as judging a baker's modelling and seasoning ability.

rating1.png
rating2.png
review.png
person1.png
person3.png
person2.png

Feature:

Personalization

Reduce necessary actions & Emphasize user's belonging

Users can collect points by their order and earn rewards. According to the user's selection during the registration, the app recommends will products fit the user. Past orders can be easily repurchased through the order again section or from the past order page.


By giving users a personalized experience, the users could feel the connection and the belonging with the Humber community, which encourage users to order through the platform.

Feature:

Searching by dietary habit

Categories narrow down user's search range helps them to discover desired products

Users can search specific items by using keywords or search a general category of foods with the icon buttons on the screen. Search filter could also help users search for food by their dietary habits. 

dietary2.png
dietary1.png
Porduct -add 1.png
Order history- in progress 1.png
final-write review 1.png
person2.png

Feature:

Communication with seller

Communicate with seller and allow user to correct mistakes by themselves

Users can leave a note on each item when placing the order. Although the app will auto-fill the checkout form, the user can manually change each column information.


In the end, if users still have problems with the order, they can cancel or contact the seller directly. After the order is complete, the user still has the chance to contract with the platform to solve problems.
 

Final Design

Visual Langauge & Style Guide

Styletile.jpg

Reflection

Due to the limited time, I didn't conduct enough research and test the prototype with only a few people. In the earlier stage, if I had enough time, I could gain more information to dig into the user's needs from in-depth interviews with real persons other than the hypothesis. Also, I would enrich and develop a brand identity for the app and give it a proper name.


However, through this project, I learned a lot of IOS mobile design patterns by comprehensively analyzing UberEATS, Nike and Starbucks's mobile interfaces, including the fonts, line space, button design etc.

bottom of page