Creating an interactive mobile platform with diverse yoga content.
YOGA-MOCKUP
The Challenge

Deliver an interactive yoga platform that will allow users to access practices as well as theoretical lessons specially customized for different types of users.  

Participants

Sprint 1: Laura Flores & Belen Moran
Sprint 2: Belen Moran

Role

User Researcher, User Writer, Strategist, Interaction Designer

Tools

Figma

Timeline

2 weeks: 1 week for each sprint (80 hours)

The Company

We designed the original product for Fun People Inc., an educational company that offered in-person courses for adults in diverse subjects. What they needed back then was a way to provide an engaging online experience for people who couldn’t attend the courses physically. For this, they requested a mid-fi design of a flow that would represent this experience.

Now, they want the yoga course to have its own brand and to become independent from the Fun People Inc., part implying a full rebranding process for this area of the company, giving birth to OM.

OM-logo-brand
01. Empathize

Initially, when developing the product, we performed several interviews and a survey. To develop a new flow that included the Theory section, we decided to carry out a survey. Since, after testing the first product, we noticed customers were confused about the sections in the platform.

In the beginning, we had “Lectures” and “Practices” as sections to distinguish the theory from the practice. After carrying out a second survey, the results showed that, according to users, the proper way of naming the content should be: Theory and Practice.

Results from Surveys and Interviews about Users' characteristics:
  • Middle-aged female.
  • Expressed having a lack of time.
  • Seeking for a personalized experience (would ideally want to receive private feedback).
  • Willing to pay up to 100 euros for the course.
  • Would like the content to be distributed in a ratio (2:3- Theory: Practice).
Jane-OM-1
Persona Development
  • Jane a 38-year-old American woman who is apart-time worker and an MA student.
  • Has a tight budget and schedule, but is willing to invest in her wellbeing. 
  • Wants her practice to be accessible and integrative. 
02. Define

Before developing the first product, we defined our HMW (how might we) and carried out a serious competitive audit which was reviewed in the second sprint.

This HMW, together with the competitive audit’s conclusions led us to our initial product’s differential elements: 

1.

The access of theoretical content behind the discipline itself (yoga courses don’t usually offer it).

2.

One-on-one feedback, a personalized service.

In the second sprint of the design process, I tried to focus specifically on the first key point (the development of the theoretical content), bearing in mind our users’ needs and wants.

In order to create the screen designs of this section, I carried out a second competitive audit.

This thorough analysis lead towards the decision of organizing content in a similar way to Blinkist (one of our indirect competitors). The idea was to apply their concept to our yoga course considering that our users expressed needing a time-efficient product.

03. Ideate

Regarding interaction design, a user flow was developed in each sprint. After coming up with each of them, these were connected considering the several paths that personas with similar characteristics as Jane's would typically follow when visiting the app. 

Merging the flows implied that some screens were deleted, and others were created or retouched. 

MID-FI's
3-OM-MIFIS
HI-FI's
OM-HIFI
Style Guide
Screenshot-2022-01-04-at-19.08.42
Screenshot-2022-01-04-at-20.04.49
Screenshot-2022-01-04-at-19.06.45
Annotated Flow

Showing Jane's Journey

overflow-actualizado-1
04. Test

Before launching the final product, I conducted usability testing by designing a checklist that included all the information and goals I was looking to achieve to corroborate the product’s functionality. I recruited participants that fitted the persona that I’ve been using throughout the design process.

Key Insights from Usability Testing
  • Reduce the content from the Theoretical section (Hick’s Law). 
  • Categorize content using a suitable hierarchy (create sections for the readings.
  • Add "Trending Topics".
05. Prototype

Next Steps

Redesign and test the class booking section, as well as the personal feedback since it is a key component of the product. Even though I tried to create two main flows that users would pick without a doubt (since they are taking the course due to its particularity of including theory and practice), I do think that to portray OM’s uniqueness a third flow exploring the one-on-one experience of tutors with students also needs to be developed. Personal feedback was one of the differential aspects of the product.

Learnings

It was challenging selecting the flows. I learned that with limited time it is necessary to prioritize and narrow your choices considering what users need first. The order of the development of the different paths should be determined by our users and the only way to figure that order out is by asking. Interaction with users is fundamental during the whole design process. This is the only way we can manage to iterate and deliver something consistent and coherent with reality. 

My Work

SKOACHDesktop

OMMobile

CATWALKDesktop & Mobile