ly hero 2.png

Luz Yoga

 
 
 

Time: 2 weeks

Role: UX/ UI Designer

Team: 2 members

 
Tools: Adobe XD and Keynote

Tools: Adobe XD and Keynote

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.

 
Tools: Sketch

Tools: Sketch

 
 

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

Tools: Sketch

Tools: Sketch

 
Tools: Sketch

Tools: Sketch

 

What Did Not Work

Tools: Sketch

Tools: Sketch

 

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

Tools: Sketch

Tools: Sketch

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.

Screen Recording 2021-04-16 at 11.41.00 AM.gif
 
Tools: Sketch

Tools: Sketch

 
 

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

Tools: Sketch

 

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.

Tools: Sketch


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.

Tools: Adobe XD

 

Mockups

 
Tools: Adobe XD

Tools: Adobe XD

 
 
M-Pain Point 2.png
 
Tools: Adobe XD

Tools: Adobe XD

Tools: Adobe XD

Tools: Adobe XD

Tools: Adobe XD

Tools: Adobe XD


Experiment


Test Plan: Thoughts on Hamburger Menu

 
 
 
The font is really overwhelming.
— Tester 1
 
 
Tools: Adobe XD

Tools: Adobe XD

Test Plan: A/B Testing on Hamburger Menu Mockups

Tools: Adobe XD

Tools: Adobe XD

 
 
I kind of don’t like the search bar being see through only because I’m afraid of what I’m typing into it not being legible.
— Tester 2
 

Test Plan: Thoughts on Homepage

 
 
 
This is kind of boring. I want some words to shout out to me.
— Tester 3
Tools: Adobe XD

Tools: Adobe XD

 

The User Testers

usertestLY.gif
christinatest.jpg
miketest.jpg
 
altesterLY.jpg
 

Iterate


Hamburger Menu

Version 1

Version 1

 
Final Version Mockup

Final Version Mockup

 

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

Tools: Adobe XD

Tools: Adobe XD

 

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.

Version 1

Version 1

 
Final Version Mockup

Final Version Mockup

 

Versions of Homepage

Tools: Adobe XD

Tools: Adobe XD

Tools: Adobe XD

Tools: Adobe XD

 

Design System

Tools: Adobe XD

 
 

The design system is created to keep consistency with typography, icons, colors and the sizes of the buttons.


Launch


 

User Flow and Annotations

Hamburger Menu Flow

 

Tools: Adobe XD and Overflow

 
 

Add Item to Bag Flow

Tools: Adobe XD and Overflow

 

Checkout Flow

Tools: Adobe XD and Overflow

 

Mockups

mockup2.2.png
 

What’s Next?

Stay tuned! Our developers are currently in the makes of creating Luz Yoga the desktop version.

Previous
Previous

Smart Agenda

Next
Next

Redesigning Buzzfeed