JUDY LAU
MULTIMEDIA DESIGNER
Farewell Cake Ordering App
This UX case study was an individual project. Aimed to design an app to create an integral platform which list a wide range of farewell gifts /cake located in HK. Workers can browse and select the shop according to their needs more easily.
Challenge: The store informations of a wide range of farewell gifts/ cakes located in HK is scattered in different social media platform. Workers often get frustrated when thinking what to buy for farewell.
Solution: Our app will let users select farewell gifts quickly and easily which will affect workers who are planning their last day gifts by allowing them choose according to cost, delivery date & services, product type, feedbacks of the shop.
​
User Research
Lack of Reviews
Lack of feedbacks and comments of the farewell cakes/ gift shops. Not sure if the product quality are good or not.
INTERVIEW INSIGHT #1
Time Conflicts when purchase
Some of the shop will need to order few weeks in advance, considering the limited of time, they have to look for another options.
INTERVIEW INSIGHT #2
Price Considerations
Since the amount to prepare for farewell cakes/ gifts is large. User want to find gifts with affordable price but also presentable.
INTERVIEW INSIGHT #3
Scattered Gift Informations
User need to search, gather ideas & choose the right gift across different platform. This take user time during the process.
INTERVIEW INSIGHT #4
Building Empathy
PERSONAS
Using the qualitative data from the interviews results, I created a user persona - Christy (worker, 29) to better empathize with my main user groups and prioritize goals according to their needs.
USER JOURNEY MAP
After define the user personas, the goal for her is to find a nice and affordable farewell gifts for last day. Users actions breakdown into 5 steps. From planning her farewell gifts budgets to searching product and finally wait for delivery. This will empathy with user needs and put oneself in their shoes.
Storyboard - Big Picture & CloseUp
To visualize the user’s journey through, I mapped out each step of the user’s interaction with the product or service and create storyboard in CloseUp version. While big picture focuses on the user experience, help to understand the entire user experience of the product, different challenges, potential pain points, and types of interactions the user will encounter.
Wireframing, Prototyping & Usability-Testing
Digital Wireframes & Lo-fi Prototype
With paper wireframes, the basic structure of the app could easily be iterated for lo-fi prototype. Without much effort, adjustments could be made before going into the much more costly digital implementation.
*Demo and Links For the App lo-fi prototype
App: https://www.figma.com/file/bvtgcrysWd2OMBwczagC6n/GoogleUx_Project3_GoodbuyCake?type=design&node-id=71%3A419&mode=design&t=pr7QQdKFziqPCyi2-1
Usability Studies
The study type was a unmoderate usability study with 5 participants invited. Each participant will complete the study without moderator, duration of test last for 20-30 minutes. By testing the lo-fi prototype, here is the findings and insights.
INTERVIEW INSIGHT #1
The add to cart function confused user. When they click the cake sets (1 boxes with 20 cupcakes) to select the number, even if they didn't select up to 20 cakes. They can still proceed the order.
INTERVIEW INSIGHT #2
User want to know how many days needs for order in advance info when they viewing in the shop lists page. And to view shop menu or price before they clicked order in the shop.
INTERVIEW INSIGHT #3
In the order screen, users wish to view the quantity they choose for every product columns rather than just showing number in the "view order" button at the bottom.
High-Fidelity Prototype, Mockups & Accessibility
Visual Design Sticker Sheet
The visual design was developed by iterating from mood boards and finally to creating a first version of the style guide - sticker sheet for hi-fi prototype proces.
Mockups & High-Fidelity Prototype
Based on the insight from usability studies, I applied design changes and iterate my user flow, making it more concise and straight forwards.
Feature 1: Filter the relevant shops by entering user's last day and delivery location.
1. App will open pop-up window for user select their last day first.
2. Then, user will select the delivery locations. After selection, app homepage will show available shops.
Feature 2: Search for specific gift categories and view the shop review, photos and make order in advance
1. When user click the filter, they can sort the products and select the gift categories they wants. User who are gluten intolerance/ vegan can choose from special requirements.
2. Then, the app will show the shop lists according to the filter. For each shop, it will show how many days needed to make an advance order.
3. User open and view the shop products photo, customer review and other infos. The shop will show availability to other before specific date. User can click made order in advance.
Feature 3: Add order to cart and make payment.
1. User can select available products in order screen e.eg add cup cake set to cart.
2. User click "view order" proceed to cart page. They will choose and confirm the delivery date, time, locations, total fees, finally they will make payment.
Final Design
*Links For the app hi-fi prototype in Figma
App: https://www.figma.com/proto/VqAHm0EsjJWQlgi10oKjYE/GoogleUX_Project1%262_CampingStore?type=design&node-id=222-873&t=Eib7RF4XeB95xQZW-1&scaling=min-zoom&page-id=126%3A225&mode=design
Accessibility Considerations
By using the Figma contrast and accessibility tools, make sure the color contrast meeting the standard so the user who have visual disability is also considered when design.
Considering user may use their phone under different situation, interaction by dragging the screen left and right will help them move backward and forward in the app. Not only pressing the backward button on the left top
By adding meaningful heading and label, it allow screen reader to recognised the info and also, help user who have difficulty in reading text, they can see only few words at a time and know the purpose of each section
Learnings
#1 Include interview participants with different needs
It is important to talk with your potential users with variety of background, like some of them are vegan or have gluten intolerance may concern about the gifts choices that normal people will easily ignored. Putting different users into design consideration make it more inclusive.
#2 A good design system help to speed up your works
Using Figma, I created a sticker sheet for design process. Since the design needs a lot of iteration process, it is easy to mess up my work and being inconsistent to other screen. I learned to build element and component in Figma which I will make iteration in sticker sheet and this changes will applied to all of my linked pages, following a clear style guide saved a lot of time for me.
#3 Prioritization matters in design
In a limited amount of time, the most common problems that prevent users from completing their goals has to be tackled first. The minimal viable product or our first baby might not be perfect in features, but we can keep iterating and plan future steps.