Responsive Web Design

Project Details

CLIENT: Worlds Yoga

TIMELINE: June 2019 (2 weeks / 80 hours)

DELIVERABLES: Responsive Website, Branding

TEAM: Self + feedback provided by my design mentor and others

ROLE: UX/UI Designer

TOOLS: Sketch App, InVision, Pencil, Paper

Background

Worlds Yoga is a local and independently owned yoga studio located on the East Bay in Fremont, California. They offer a variety of yoga classes and teacher training for individuals interested in practicing the mindful and physical ancient artform. The business has an existing non-responsive website but wants to update it to be user-friendly across various devices and simpler to navigate for new users

Goals

  • To design a responsive website experience for Worlds Yoga's current and potential new customers

  • To further develop Worlds Yoga's branding while remaining in line with their current strategy
     

This is a speculative project and I am not affiliated with Worlds Yoga

Process

01. Empathize

GOAL: Understand the current trends and audience in the yoga studio space
DELIVERABLES: Market Research, Competitive Analysis, 1-on-1 Contextual Inquiry Interviews

 

MARKET RESEARCH 

I first began by searching online for demographic and industry research statistics about the yoga industry. At the same time, I browsed the existing information that is on the business's current website in order to better understand their business strategy. With so many yoga studios popping up as it becomes increasingly popular, creating a new responsive website would serve the business well in retaining its current customers and attracting new customers within the competitive space

wy_case_study_market_research.png

COMPETITIVE ANALYSIS

Given that the competition is increasing consistently, it was important to analyze other direct and indirect competitors within the space. I looked at websites of other nearby competitors to identify any patterns of success or opportunities for improvement. The analysis helped provide information on yoga studio customer expectations and how Worlds Yoga could effectively position itself amongst competitors. I found that the information available currently on their website is plentiful and very informative, however, further enhancing the information architecture and responsiveness would allow the site easier accessibility by current and future customers.

1-ON-1 CONTEXTUAL INQUIRY INTERVIEWS

I chose to conduct 1-on-1 contextual inquiry interviews with a total of 5 Worlds Yoga students to learn more about their behaviors and experience with the studio. The interview was structured around collecting information on their discovery of the business and experiences at the studio and the current website. Additionally, I visited the studio as a customer and made observations about the environment, people, and ethos. All of this helped me better understand the existing customers of the studio as well as how they engage with the business.

Number of participants: 5
Gender: 5 females
Age range: 50 - 65

Level: 3 Advanced / 2 Beginners

02. Define

GOALIdentify the target audience of the business and their needs, wants, frustrations, and goals
DELIVERABLES
: Empathy Map, Persona, POV Statements + HMW Questions

EMPATHY MAP
After speaking with the studio customers, I created an empathy map to visually organize my findings from each interview into various groupings. This helped me observe patterns more easily identify what the needs of users were.

​INSIGHTS

  • Users choose studios based on class quality

  • Users want to see what classes are available

  • Users visit yoga studios to improve themselves

​NEEDS

  • To learn about class offerings

  • To easily access updated class information

  • To determine which places have services  that will help them achieve their self-improvement goals

PERSONA

Taking the synthesized insights gathered from my interviews and empathy map, I crafted a persona named Luna Davis. Luna represents Worlds Yoga's target customer as someone who is new to the studio and interested in learning more about yoga practice and the studio. Through personifying the interview findings and providing additional context, we can ensure that all design decisions are made with the target user in mind.

POV STATEMENTS + HMW QUESTIONS

Having defined the target user of the yoga studio, I then moved on to creating point-of-view (POV) statements framing the user's needs. These statements helped inform our "How Might We" (HMW) questions by better defining what user problems we would need to solve for through our design. 

03. Ideate

GOALBrainstorm ideas for website information organization, flows, and features
DELIVERABLES
Product Roadmap, Sitemap, Task Flow, User Flow

PRODUCT ROADMAP
I then leveraged the HMW questions generated to brainstorm a huge spectrum of ideas and narrowed them down to several that would be prioritized and incorporated into the website's design. The selective process involved considerations about the practicality of a feature, impact on users, and amount of impact a feature could have per individual user. Given that our brainstorming yielded so many ideas, the roadmap helped focus our resources on identifying key features that would solve Luna's needs.

SITEMAP

Having identified the key features we would incorporate into our design, I then focused on constructing a sitemap to visually represent how the content could be laid out for users to intuitively navigate the website.  A quick site audit was conducted to help understand opportunities where existing information could be restructured to further simplify site navigation for users. 

USER FLOW

In order to better understand the various ways users could potentially navigate the site's pages, I mapped out two user flows with our persona, Luna, referring back to the information I gathered from the contextual inquiry interviews during research. Breaking down each flow into sequential steps helped inform the relationship each page should have in order for the website UI to be intuitive to users.

TASK FLOW

Next, I focused on further expanding a specific flow to identify the specific steps and decisions a user would take to learn more about Worlds Yoga and their offerings. This flow gave me a more detailed look inside the thought process of a user completing the task to understand how to prioritize content. 

04. Design

GOAL: Create mid-fidelity responsive wireframes for each screen
DELIVERABLES
: Sketches, Mid-fidelity Wireframes

 

SKETCHES
Before jumping into the digital design of the product, I first began by using pencil and paper to sketch out potential ideas for the basic layout and architecture of several pages. I took inspiration from other fitness and yoga studio websites as well as common design patterns noted during the competitive analysis in the research phase.

Screen Shot 2019-06-24 at 10.21.47 AM.pn

MID-FIDELITY WIREFRAMES

Using the low-fidelity sketches as my foundation, I used Sketch to mock up mid-fidelity of the desktop, tablet, and mobile designs for the website. With the use of greyscale coloring and content positioning, I was able to assess the visual hierarchy and overall layout of each responsive page.

05. Prototype

GOAL: Create interactive mid-fidelity desktop prototype and obtain usability feedback through testing
DELIVERABLES
Interactive mid-fidelity Desktop Prototype, Usability Testing

MID-FIDELITY PROTOTYPE
Using the mid-fidelity wireframes created earlier, I developed an interactive desktop prototype using InVision. This helped me to conduct usability testing without content that could distract users during the test and take focus away from the design's basic layout and visual hierarchy. To view the mid-fidelity prototype please click below:

USABILITY TESTING
Objectives:

  • Test to see if users can accomplish given tasks successfully

  • Identify areas of difficulty and opportunities for improvement from mid-fi wireframes

  • Evaluate the usability of the website design thus far


Tasks:

  • Locate studio hours and address information

  • Find where you would be able to learn more information about yoga and the various styles

  • Find information about the studio's staff and mission

  • View pricing information 


Results:
I used the mid-fidelity prototype to conduct usability testing with 6 participants at a local coffee shop and was able to make observations and take notes on their behaviors and interactions. The tests provided helpful information to guide what design changes and iterations would need to be done prior to developing higher fidelity mockups of the design.

06. Iterate

GOALIterate on the designs based on usability feedback and create hi-fidelity mockups
DELIVERABLES
: Affinity Map, Branding, Hi-Fidelity Wireframes + Prototype, UI Kit

AFFINITY MAP
To extract insights and design recommendations from the various usability test interviews, I crafted an affinity map which helped me understand the usability of the current design direction so far. Overall, I was able to find several pain points and insights that helped me identify what changes should be made for the next iteration.

​INSIGHTS
 

  • Users had difficulty figuring out that the homepage was scrollable and had additional content below the hero image
     

  • Users had difficulty looking for location and hours information on the website because it was buried deep in the homepage or contact page
     

  • Users felt the layout of information for yoga styles in the class description made it difficult to read
     

  • Users found nav bar links and site architecture to not be structured in the most intuitive way when looking for crucial information
     

  • Users had difficulty reading the studio’s pricing information and glossed over key information and terms due to confusion

RECOMMENDATIONS (Highest Priority ↔ Lowest)
 

  • Add a downward arrow on the hero image to show users how they can navigate additional homepage content
     

  • Bubble up the location and hours information into a separate tab in the main navigation
     

  • Trim down the yoga intro in class descriptions, move the yoga styles further up in the page, and try to show more class styles in each row
     

  • Switch pricing information to be its own main navigation link with the schedule ( under a new “classes” nav link along with class descriptions)
     

  • Equalize membership card pricing and bold new student promotion price

BRANDING

In order to bring the mid-fidelity wireframes to life, I created a brand style tile that is cohesive and consistent with the current guidelines of World Yoga's current branding direction. I opted with keeping the existing logo and colors since their styling was consistent with current trends and desired attributes. I then created a mood board leveraging the logo to inspire new imagery and typography. Based off of yoga philosophy and the studio's mission, belief, and approach I wanted the branding to feel welcoming, natural, and calming.

HIGH-FIDELITY WIREFRAMES + PROTOTYPE

Using the brand style tile created, I applied it to the responsive mid-fidelity wireframes to bring the designs to life. I then used the high fidelity wireframes with styling and branding applied to update my prototype to reflect the changes with real content. To view the styled high-fidelity interactive prototype on InVision please click below: 

UI KIT

While working on the finalized designs, I curated a UI kit to organize the various visual elements and patterns used throughout the website as a reference guide for future use.

Reflection

The project proved to be fairly straightforward given that its main goal was to provide information for current and prospective customers, and was interesting in that the customers consisted of such a broad age range. Working through this project helped me learn how to develop a brand strategy for an industry that has apparent audience expectations. 
 

 


Next Steps
 

  • Collaborate with engineers to handoff final mockups and developing the website

  • Conduct further usability testing with hi-fidelity prototype and collect usability findings

  • Iterate on designs based on synthesized feedback and update UI kit accordingly

© ALVIN KUANG 2019