Overview
Challenge:
Create a solution to help students sell their products produced in class; you should use Augmented reality to ensure the best experience possible for future clients.
Role: Product Designer.
Duration: 9 Weeks.
Tools Used: Figma, Notion and Miro.
Deliverables: Persona, Scenario Mapping, Prototype, Hi-fi Wireframes.
Problem
The Advanced Chocolate and Confectionery Artistry graduate certificate at the Humber college offers students an opportunity to develop high-level skills in pastry arts with practical classes. The products made in this class can be sold, and the students can make more products on demand.
The Goal:
My goal was to design a clean and easy-to-use app that lets users order bakery products from Humber's certificate students quickly and easily at their convenience.
Design Process
source: https://www.nngroup.com/articles/discovery-phase/
Discover
Understanding the User:
I conducted a competitive analysis and interviewed 20 people who have some experience ordering goodies and food via apps to understand the needs, behaviours and motivations of the users I’m designing for.
My research identified four (3) pain points:
Product fidelity
Lack of personalization
Ease of use
Creating the solution:
As part of the ideation process, I created a User persona, a User Journey Map and a Task flow diagram to make a visual representation of the steps a user would take to reach their end goal. This also helped identify all the screens to be included in the design.
Persona
After the research phase, I decided to create a user persona to represent a typical user of the service. This process helped me to visualize a user, understand their behaviour and feelings, and imagine how to fulfill their needs.
User Journey Map
Task Flow Diagram
After deciding the functionalities we need to include in the app, I created a Sitemap diagram. This diagram helps hierarchically structure all the content that should be included in the application.
Wireframes
To establish the basic structure of the app and map out its functionalities, I started creating low-fidelity wireframes with the main interactions.
I was focused on making an intuitive design, as straight to the point as possible aiming to provide an easy and fast way to make donations.
User Testing (Stage: Wireframe)
I built a prototype using the wireframes created aiming to test with potential users and reveal possible usability issues at this early stage.
The tests were done remotely.
Main outputs:
The insights were very valuable. Overall the results were very positive. The main improvement opportunities were:
The insights were very valuable. Overall the results were very positive. The main improvement opportunities were:
- Change the AR button and add hints.
- Add information about the student who made the cake.
- Add illustrations
UI Design & Prototype
Based on the feedback gathered during user testing, I started designing the final screens and then turned them into a colour prototype.
User Testing (Stage: high-fidelity)
With the high-fidelity prototype ready, I did a second round of tests. The tests were done with 5 users.
As before, I prepared tasks the users had to perform. Both tests were conducted in person following a document with several tasks to be performed by the user.
All the users finished their tasks within less than 2 minutes.
Prototype
Here you can find the complete flow used to validate the design.
Results & Takeaways
Building this design project from scratch with no previous knowledge was a big challenge. I learned to understand the needs of users and the importance of user testing.
It was a very enriching experience to hear user feedback from the research phase to user testing. This experience challenged my ability to put myself in the shoes of the users to create the best experience for them, which in many cases, to my surprise, was very different from my personal assumptions.