AR / UI DESIGN
Magic Mirror
Role
Branding • UI Design • Interactions • Prototyping
Tools​
Figma
Photoshop
Illustrator
Dimension
THE CHALLENGE
How might we make people more aware of their health and help them set easy, realistic fitness goals?
People across the globe are obsessed with health and fitness, yet find it confusing setting and reaching healthy realistic goals. A recent study showed that 9 in 10 Americans have no idea what and how they should eat to slim down and get healthier. Because of an overload of information, people have no idea what their personal goals should even be.
THE SOLUTION
A mirror using Augmented Reality would help solve this issue. This intelligent tool would give the user customized recommendations based on their unique body type, and let them know their progress, as well as allow for live projections according to body metrics such as skeletal muscle, body fat, bone mass, and more.
Someone looking into this mirror would be able to see their body transform before their eyes to help them set the right goals.
​
The mirror would work with an intelligent scale to read and interpret the user's data.
For returning users, they would scan their finger (a technology already used by most gyms) for their profile to be found in the database.
​
At the end of the session, the user will be offered the option to receive data via Bluetooth to their phone, and stats would be saved in Apple Health for iOS users, or CommonWealth for people using Android. There is also the opportunity of the Gym's App offering a copy of the data in the user's profile screen.
THE PROCESS
The Design Thinking Process was used to develop this project.
Empathized through research, Defined the problem, Ideated with sketches and wireframes, Prototyped, Tested through exploratory tests, and back to Ideating.
USER FLOW
The mirror is meant to be used in a gym setting. The goal was then t make it simple and straightforward for short use, and invite further discussion with trainers.
WIREFRAMES
From the user flow, I then moved on to pen and paper to start developing the look and feel of the interface. This step was crucial to ensure that the user flow was coherent.
The low fidelity wireframes were then translated into mid-fidelity to further develop the visual design.
FONTS AND COLORS
I picked dynamic colors and a geometric sans-serif font to give the interface a modern and energetic feel.
Aa
Poppins
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
#95FBFD
#0A6A6B
#111F24
#FF9716
#FE4646
#9AEB33
LOGO DESIGN
The logo is meant to emulate a heartbeat line ( shaped as a M) on a mirror, to symbolize the idea that vitals are shown on it.
​
The name was inspired by the "Magic Mirror on the wall"...instead of telling us who's the fairest of them all, it'll help the user reach their best self.
​
HIGH-FIDELITY WIREFRAMES
USER TESTING
Preliminary explorative tests pointed out to a opportunities that would better the product. Because the Magic Mirror is intended to be used in a public setting (the gym), testers were concerned about privacy.
For this reason, a X button was then added to be accessible from any screen. It would allow the user to quickly exit their stats when needed.
Pre-Test
A drag motion would take the user to the "End" screen
Post-Test
The "End" screen was removed in favor of the X button
A timed logout screen was also added for the same concerns, in case the user gets distracted and stops using the mirror.
Beside is the latest main user flow.
​
More user testing will give way to more opportunities to improve the product.
