Website redesign

Yoga with Di mockup on desktop and mobile application

PROJECT

Branding and responsive website redesign

ROLE

UX/UI Designer

DURATION

80+ hours

TOOLS

Figma, Google Doc, Google Sheets, Zoom, Whimsical, Maze

YEAR

2022

Background

Diana Salvador is a yoga practitioner with over 10+ years of personal practice. Di completed her teacher training 3 years ago and resides in Rocakway Beach, NY. Diana specializes in Vinyasa and sees wellness as a long-term priority. She connects movement, breathe, and the mind to sync the body back into alignment. Diana is ready to update the Yoga with Di website utilizings a modern approach to help showcase her offerings and make her website more accessible.

PROBLem

As Yoga with Di continues to develop their offerings and practices, they find themselves lacking a consistent and streamlined design. Diana recognizes that many of her clients book her classes on their mobile device and while her site is accessible, it is not responsive. Their website redesign aims to provide a more cohesive approach to their style and branding while maintaining a responsive design.

challenge

Design a modern responsive website for Yoga with Di with a minimalistic and welcoming style that matches their branding.

View prototype

EMPATHIZE

Competitive Analysis

To better understand the business of yoga studios and online fitness platforms, market research and competitive analysis is performed. Comparing successful competitor websites gave me a basic understanding of the current trends and features to focus on implementing into my client’s website.

KEY TAKEAWAYS

VIRTUAL + IN-PERSON: Attendance in virtual classes is increasing each week, but many feel in-person classes are better for their mental health than a digital routine at home
EASY TO USE: Ease of use is important, no information overload, needs to have clean UI and easy to use.
FEATURES: Being able to book directly on the site and having an simple booking process is key.

USER INTERVIEWS

Both remote and in-person user interviews were conducted to gain insight into the thoughts and personal experiences of booking yoga classes online. The goal of user interviews in this early stage of research is to find out what users really want, need, and dislike in the process.

WANts and needs

50% of users practice yoga weekly
56% of participants book fitness classes through their phone’s web browser
Word of mouth is the most effective way to find new yoga or fitness classes
Participants mention the importance of websites providing information such as reviews, location and pricing

Pain points

Users experience too many steps when booking a yoga or fitness class
Participants mention the class or instructor not being what they were expecting
Pricing can be a factor in determining if a user will or will not book a class

The data from the research shows that users prefer to book their yoga and fitness classes online, with a strong majority of the time through mobile web browser. The general purpose of visiting yoga studio or practitioner websites is to find more details to make their decision such as services offered, class schedules, images and pricing. General frustrations come from not finding a class or instructor in their budget or one that they resonate with, and information not being readily available.

DEFINE

USER PERSONA

Who exactly was I designing for? I needed to create a user persona to help me define my audience. Meet Laura, she is a fun, adventurous woman who is looking to incorporate more yoga into her life.

IDEATE

Sketches & Wireframes

I began my design process by doing a sprint of sketches to cycle out as many layouts as possible by hand. Picking favorite components from sketches, I created wireframes using Figma.

View wireframes

DESIGN

MOOD BOARD

This step was a powerful way to give visuals to the product. Utilizing references for inspiration and motivation, a mood board was created as a way to give users and stakeholders agreement and validation of what was themes were discussed. I used Pinterest to gather images and inspiration for text, color schemes, icons, and imagery.

ITERATION

Iteration is a big part of my design process. What I may feel strongly about at the beginning with design choices might not execute the way that I hope or envision so back to the drawing board we go. From each repetition or exploration of the design that I do, I learn something that I can use for the next iteration.

STYLE GUIDE

The style tile was designed to keep the website’s branding cohesive. The signature peach and blue color palettes create a soft primary/secondary combination. A modern san serif font, Loew was chosen to keep the website looking clean and inviting.

UI KIT

After finishing the prototype, all design components are kept on the UI KIT. All details such as color palette, fonts, header styles, buttons, logos, to pop up modals and input forms were included for easy hand off.

High fidelity wireframes

Using all design components created from the style tile and UI kit, the high fidelity wireframes were created. The pages essential to the completion of the user flow are first priority, and other pages come after.

View prototype

TESTING

USABILITY TESTING

Testing was conducted remotely by 12 testers using maze.co app. Following the usability testing plan, we first instruct the testers of their task and then observe to gather data.

TASKS

Users are able to complete assigned tasks with little to no friction
User is able to navigate the prototype easily
Understand the user’s thought process as they navigate the website
Find potential struggle and confusion points that may occur during the process

FINDINGS

100% completion rate of prototype
4.5/5 score on easy navigation
4.8/5 on trustworthiness of site
A few users noted confusion in the prototype since not fully functional
A few users wished for a “Book a private” button rather than having to contact Yoga with Di to inquire about privates.

Overall, participants were able to complete the assigned task and many particularly enjoyed viewing the website. Some of the users experienced confusion involving the book a private task and mentioned a button would be more effective than the contact form, and this came up consistently enough during testing to warrant priority for changes.

CONCLUSION

TAKEAWAYS

During this project, I discovered the need to implement more testing and iteration after design. The importance of all types of user feedback helped to point the prototype in a more user-centric direction. That being said, I would have liked to test my design and prototype more extensively.

If given more time and resources to complete the project again, I would do more usability testing and iterations for a better end product.