Luz Yoga
Time: 2 weeks
Role: UX/ UI Designer
Team: 2 members
Luz Yoga is a mobile website that sells ethically-made, eco-friendly yoga straps that are hand made from the Wayuu tribe.
Luz Yoga is all about:
creating ethically-made yoga straps
being eco-friendly
giving back to the community
sharing the Wayuu Tribe story
The Framework
This is my UXUI design process inspired by Design Thinking and Lean UX. In these phases, I am conducting field and desk research, understanding my customer, breaking down and visualizing ideas, experimenting with prototypes, entering feedback loops and then ultimately building and launching Luz Yoga.
Learn
The learn phase of UX design unpacks the brief, inspires us, and allows us to empathize with users and get to the heart of overlapping needs of the business and user, as a result solving a problem.
Competitive Audit
A UX Audit involves assessing competitor sites to see how they design for their user needs. We audited more than 10+ sites to find inspiration and what competitors are lacking.
What Worked
What Did Not Work
Inspiration: We found users are familiar with seeing a primary CTA button on the first module of the homepage.
Inspiration: Users also enjoyed a progressive bar to know how long it will take to check out.
Our competitors overwhelmed users with too many items in the sub-nav. They also overwhelmed users with the sight of the fab button covering the CTA button.
Social Listening
Social listening helps us to understand more about our target audience through social media.
Takeaway : Users want a yoga strap that is easy to travel with, yet tired of the yoga materials on the market that are harmful to the environment.
Survey Results
118 users took our survey.
When analyzing our results, we were able to better understand user needs and expectations. These results also gave us a better understanding of persona pain points and that will inspire our design choices.
Data
“Most yoga mats are made from PVC (Polyvinyl Chloride). The chemical used to make PVC is known to cause cancer in humans, according to the World Health Organization’s International Agency for Research on Cancer,”-Urban Wellness Magazine.
CNN Style- “Fashion is responsible for up to one-fifth of industrial water pollution..where wastewater is commonly dumped directly into rivers and streams.”
“Carcinogenic chemicals, dyes, salts and heavy metals not only hurt the environment, but pollute essential drinking water sources,”-CNN Style.
Define
In the define phase, we identify our goals, objectives, and strategy for the UXUI.
So what’s the problem?
The current state of the yoga market has focused primarily on selling yoga straps to the yoga community in order to make yogis’ lives simpler. The yoga straps in today’s market do not sell eco-friendly, ethically made products. These yoga straps fail to make unharmful materials to the earth and to give back to poor communities. Our new yoga strap will address this gap by selling yoga straps made with clean materials that are eco-friendly to the environment and ethically made. Our focus will be to have a greener planet and to give back to communities such as the Wayuu Tribe.
Persona
After research, I created a persona based on the data we found in our surveys. I will use this persona to help inspire us for the design phase.
Information Architecture
Information Architecture is the blueprint of the design structure. This organization helps users navigate complex sets of information.
Design
Sketches
Wireframes
Mood board
This mood board was created to provide ideas, concepts and the general direction I wanted to take for the design of my mockups.
Mockups
Experiment
Test Plan: Thoughts on Hamburger Menu
Test Plan: A/B Testing on Hamburger Menu Mockups
Test Plan: Thoughts on Homepage
The User Testers
Iterate
Hamburger Menu
3/5 users chose Mockup V2 in the A/B testing; so I decided to keep Mockup V2 as the final product. Also, in the first version wireframe, users felt the font size overwhelming to the eye , so I adjusted the font size to be smaller in the final mockup version.
Versions of Hamburger Menu
Homepage
Our user testers felt that the homepage was boring; so in our mockup version, I created modules with attention grabbing text to allure users.
Versions of Homepage
Design System
The design system is created to keep consistency with typography, icons, colors and the sizes of the buttons.