Responsive Web Design
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
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.
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
GOAL: Understand the current trends and audience in the yoga studio space
DELIVERABLES: Market Research, Competitive Analysis, 1-on-1 Contextual Inquiry Interviews
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.
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
GOAL: Identify the target audience of the business and their needs, wants, frustrations, and goals
DELIVERABLES: Empathy Map, Persona, POV Statements + HMW Questions
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.
Users choose studios based on class quality
Users want to see what classes are available
Users visit yoga studios to improve themselves
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
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.
GOAL: Brainstorm ideas for website information organization, flows, and features
DELIVERABLES: Product Roadmap, Sitemap, Task Flow, User Flow
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.
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.
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.
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.
GOAL: Create mid-fidelity responsive wireframes for each screen
DELIVERABLES: Sketches, Mid-fidelity Wireframes
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.
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.
GOAL: Create interactive mid-fidelity desktop prototype and obtain usability feedback through testing
DELIVERABLES: Interactive mid-fidelity Desktop Prototype, Usability Testing
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:
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
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
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.
GOAL: Iterate on the designs based on usability feedback and create hi-fidelity mockups
DELIVERABLES: Affinity Map, Branding, Hi-Fidelity Wireframes + Prototype, UI Kit
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.
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
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:
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.
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.
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