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.
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 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.
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.
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.
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.
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.
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.
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.
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
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.
![Index - img[changed]-03.png](https://static.wixstatic.com/media/0b67d6_a5a62f8131a64cdd848059c9a145e96b~mv2.png/v1/fit/w_1790,h_1790,q_90/0b67d6_a5a62f8131a64cdd848059c9a145e96b~mv2.webp)
