Sweet Tooth
Native Mobile Bakery App featuring Augmented Reality
Role
UI/UX
Research
Competitive Analysis
Information Architecture
Wireframe
Prototypes
User Testing
Tools
Miro
XD
Stager
SparkAR
iOS Human Interface Guidelines
Year
November - December 2021
6 week project
Problem
An app did not exist before this time. I was to design an app that serves to solve the problem of having an e-commerce app platform that will allow users to search through catalog items, view product details, add items to a cart, purchase products, and view other products from Humber's Advanced Chocolate and Confectionery Artist program with ease.
Goal
The goal of the design is to focus on the buyer. Specifically, how to make it easy for a buyer to search through a catalog of items, view product details, add items to cart, purchase products, and view other products from select bakers.
Solution
While developing the app, my main focus was on customer experience. Specifically, making their experience with the brand positive and targeting what is important to them throughout their shopping experience to make it seamless and positive, with the end goal of producing sales.
The Design
Process
Research
Researched and analyzed popular e-commerce apps, such as Amazon, Sephora and Starbucks and native app competitors for design, similarities and differences as well as the overall customer shopping and purchasing experience.
Competitive Analysis
Used competitive analysis, such as expert reviews, heuristic evaluation, poems and Guerilla.
User Persona & Customer Journey Mapping
Created user persona and customer journey maps to guide the design.
Design Sprints
Performed design sprints and brainstorming exercises such as Crazy 8's and "How Might We" to generate ideas and layout of the app.
"How Might We" collaborative exercise
Information Architecture & Task Flow
Created an information architecture in Miro. This technique helped me to visually display the information and content that was needed for each screen. This also helped me determine the right organization and task flow.
Sweet Tooth's Information Architecture
Sweet Tooth's Task Flow
Branding Elements
Brainstormed a bakery name, created a logo and designed a style tile.
.png)
Animation & Interactions with
Augmented Reality
We were provided to use one of the 3D cake models and make a scene in Adobe Stager. In Stager, I was able to play with the lighting, materials and bring in other 3D objects to create my scene. Once, happy with the finale scene, I exported my model and brought it into Spark AR.
In Spark AR, the goal was to animate the scene from Stager for when the user looks at an image with their device they would be able to interact with it, which enhances the users' experience.
To achieve the animation and integrations, I created various patches in Spark AR.
The patches allow the user to automatically see the cake scale in, cake rotation, tap to view the logo while pulsing, sound, tap and hold for confetti to drop and if the user wants to have a closer depth, they can pinch the screen to view the cake larger.
Here is the final AR animated scene.
Native App
Wireframes
