Re-designing and building a responsive website from scratch for a local nonprofit yoga studio to meet updated branding, business and organization goals
end-to-end responsive website • e-commerce • blog • fitness and wellness
Overview
Responsibilities
Project Management
Research
Design
Prototyping
Usability Testing
Web Development
Tools
Notion
Miro
Figma
Adobe Photoshop
Zoom
Wix
Introduction
Jiaren was the first 501(c)(3) nonprofit yoga studio in Santa Clara, CA and needed a website overhaul to meet their updated business and organization goals. I reached out to help with their re-design to ensure their users were involved in every step, as well as completely build their website from scratch using Wix, so that they could independently maintain it moving forward.
Project Type
Volunteer work for a small local business and nonprofit
Timeline
Jul 2021 - Mar 2022
Process
01
Discover
Research & Empathize
02
Design
Define & Ideate
03
Validate
Prototype & Test
04
Build
Implement & Launch
01
Discover
Methods
Client Collaboration
Project Plan
Tools
Notion
Summary
I spoke with the business owner to find out what was and wasn't working with their current website, what their goals were and what they wanted to keep, change, and remove for their new website. This information helped me define the problem statement and develop a project plan.
Project Parameters
Business and Organization Goals:
-
Drive users to book classes/services
-
Provide information (classes/services, pricing, about Jiaren, etc.)
-
Sell retail (equipment and apparel)
-
Connect with community through blog and social media posts
Primary Pain Point: users struggle to find the class schedule
Additional Notes:
-
Link to waiver form must be prominent (required for all new students)
-
Add info about new services, membership discounts, nonprofit partnerships
-
Create connection between yoga studio and Jiaren Cafe
-
Add Careers pages
-
Update visual style to match new brand and logo
-
Add new professional photos and Instagram gallery
02.0
Design
Methods
User Stories
Information Architecture
Wireframing
Tools
Miro
Figma
Adobe Photoshop
Summary
After discussing the project details with the business owner, I defined the primary problem statement from their main goals and pain points. I explored the website's various functions through user stories. These helped me design its information architecture. I then ideated solutions in low fidelity for later testing.
Problem Statement
How might we help students feel informed enough about Jiaren Yoga to book class and join the community?
Pains
Difficulty finding class schedule
Lack of info about Jiaren
Lack of drive to build community
Gains
Easy access to class schedule
Available info about Jiaren
Increase sense of community
User Stories
I broke down all of the possible/relevant actions that a user could take into the most atomic level using Epics, starting with the phrase, "As a [user type] I want to..." to specify the need and ending with, "...so I can..." to specify the goal.
This minute level of detail allowed me to see each step in the user's journey to achieve a specific goal. This would also help in designing the website's information architecture below.
Click / tap image to magnify
Click / tap image to magnify
Information Architecture
I used the epics from the user stories to design the website's architecture. I compiled a flow chart to visually show the steps that users will take to complete their goals. I included links to external services that Jiaren's owner wanted to continue using to run her business, such as Vagaro, the scheduling/booking software for their classes.
Wireframing
Each step of the flow was translated into low-fidelity mockups to explore how the solutions would practically look and feel. Screenshots of the external websites were also added to make the prototype a more complete experience for usability testing in the next stage.
I knew I would eventually build this website using Wix, which had decent mobile design functionalities. Therefore I also transformed the desktop designs into mobile versions using as many of the same assets as possible, since Wix's tools worked this way as well.
03.0
Validate
Methods
Rapid Prototyping
Moderated Usability Testing
Tools
Figma
Zoom
Miro
Summary
I created a rough prototype for usability testing to see if the designs were on the right track while the project was still in its early stages. Conducting tests while the designs were still low in fidelity helped reduce attachment to ideas. It also allowed for major changes and quick iterations as necessary.
Low-Fidelity Usability Testing
Participants
I conducted moderated usability testing both in-person and remotely through video chat with 5 participants. Some participants considered themselves yogis and were students of Jiaren Yoga, while others were not related to the studio at all. However, all participants were familiar with event-booking and other common website patterns.
Goals
Test the effectiveness of the design in achieving these goals (through specific tasks):
-
Find info on Jiaren's classes and services, including descriptions and prices.
-
Book a spot in class or make a service appointment.
-
Purchase Jiaren's retail products.
-
Find info about Jiaren's business and other ventures, such as the cafe and nonprofit work.
-
Find info about working at Jiaren.
Synthesis
I compiled the findings from each task of the usability tests into tables with recommended solutions.
Click / tap image to magnify
“Between 'Services' and 'Shop', I was thinking ... I'll try 'Services' first ..., but for 'Shop', I usually equate that with pricing as well, so I thought ... it could be in that [page too].”
- Martin O
“I find it a little weird that clicking on the Services [link] in the front [page] brings you straight to [the] 'Memberships & Packages' [tab in Vagaro], not the 'Services' [tab].”
- Kevin O
Key Findings
All tasks were performed successfully by all users with little to no problems. All issues were generally low in severity and required only small improvements. These were the key features to improve:
Top Navigation:
-
Many testers expected to find an obvious link for pricing here (the words 'Services' and 'Shop' were too closely related, making the task of finding prices vague).
-
The inconsistency of the 'Services' link taking users to 'Memberships & Packages' in Vagaro rather than 'Services' caused confusion.
-
Some testers had trouble noticing the "Book a Class" CTA button.
Shop:
-
Product pages needed more visibility on the fact that they were pick-up only (Jiaren does not ship their products).
-
Adding color options and/or a "related products" section to product pages would reduce the number of clicks/taps needed to explore similar products.
Cafe:
-
The 10% yogi discount could have more visibility by adding a slide to the hero banner carousel on the Home page.
-
The CTA in the cafe section of the Home page should be changed to link to its About Us page rather than the order menu, to offer more detailed info about the cafe and provide more visibility on the latte art and coffee classes.
02.1
Design
Methods
Style Guide
High-Fidelity Mockups
Tools
Figma
Summary
I created a minimal style guide inspired by the logo I was provided. I used the guide to help create the first round of high-fidelity mockups. I also incorporated changes based on the key findings from usability testing.
Style Guide
I developed a visual theme for the website using Jiaren's existing logo and company values as guides. I easily created a color palette from the logo's colorful rainbow, which also reflected the company's values. Rounded corners helped express warmth and friendliness. Since we did not have access to the original font that inspired the logo, I chose a similar font that still contained soft playful curves for both the header and body text.
Company Values
Inclusive • Empowering • Nurturing • Mindful
Primary
#F49273
Background
#FDEAD5
Secondary A
#FDCF91
Text
#1F2833
Secondary B
#4EA7A3
Gray
#EEEFEE
Header / Asap
SemiBold
Body Text / Asap
16 pt • Regular
High-Fidelity Mockups
The style guide informed many visual design decisions throughout the high-fidelity mockups. The owner of Jiaren provided some existing high-quality photographs for some of the pages. For others, I sourced photos and copy from their current websites. For any content that did not yet exist, I collaborated with the owner for their creation.
I implemented a few small improvements as a result of the usability tests. The most significant change was in the top navigation menu, where I switched the word "Services" to "Pricing". This was to help clarify where to find the most important information for most users (the cost of services), as well as differentiate it from the retail section of the website.
I also added a general search function to the navigation menu, to ensure users have a quick and easy way to find what they need.
I added a note to the product page that it was for pick-up only and no shipping. This was to help control the user's expectations (since most e-commerce is expected to ship) and provide this important information early on in the purchasing flow, before the user completed their order.
I also wanted to encourage more discovery and exploration of their retail products by adding a "related products" section to the product page. This could have also been done with color chips/options, but Jiaren's owner did not like this idea due to their limited number of products. She preferred to make each color option its own listing in order to make the catalogue seem fuller.
Again, I used all the same assets from the full desktop mockups to create their mobile versions as well.
Development Note
I know the importance understanding what can and cannot be built, so that time is not wasted on creating something that cannot be implemented. Though I am not a developer myself, from the beginning of the project I intended to build the final product using the website builder, Wix.com. Therefore I spent time re-familiarizing myself with its features to ensure I made design adjustments that were within the platform's capabilities.
After some exploration of Wix, I noticed that the tab feature of the price chart on the Home page that I had originally designed was going to be complicated and clunky to build. I decided to remove the tabs completely from the design and simply display both charts on top of each other down the page.
If I was working with an actual developer from the beginning, I would have involved them in the wireframe design process to ensure this limitation was caught as early as possible to save time on having to make changes like this.
03.1
Validate
Methods
Prototyping
Moderated Usability Testing
Tools
Figma
Zoom
Miro
Summary
I created a prototype from the high-fidelity mockups for the next round of usability testing. I tested the same tasks and experiences from the first round to gauge the effectiveness of the high-fidelity changes. I then compiled the test results again into a table with general thoughts, issues and recommended solutions.
High-Fidelity Usability Testing
Participants
I recruited 5 testers (2 male and 3 female) for this round of remotely moderated usability testing. All of them proclaimed to have active lifestyles and had experience booking fitness classes through websites and/or mobile apps.
Goals
-
Gauge impressions of the color palette.
-
Pay special attention to the effectiveness of the pinkish orange as the primary color (such as for CTA buttons on top of the beige background).
-
-
Same as the previous round, test the effectiveness of the design in achieving these goals (through specific tasks):
-
Find info on Jiaren's classes and services, including descriptions and prices.
-
Book a spot in class or make a service appointment.
-
Purchase Jiaren's retail products.
-
Find info about Jiaren's business and other ventures, such as the cafe and nonprofit work.
-
Find info about working at Jiaren.
-
Synthesis
I compiled the findings from the usability tests into tables with recommended solutions.
Click / tap image to magnify
“I [would] like to see more visual [distinction] that would catch my attention... Maybe I can't find things because I'm a lazy reader... I would [also] like to see the font a little bit bigger. ”
- Andrea Q
“All the different [service] options are a little overwhelming at first. It's just a lot to take in, and I'd have to go through each individual one to figure out which one was best for me... There's a lot of information here. Maybe make [things] a little more visual, so I could get [the info] more quickly instead of having to read?”
- Braden B
Key Findings
General Thoughts:
-
Colors were very well-received and made people feel like the website was fun, happy, inviting, friendly, and calm.
-
Pinkish orange color was successful as the primary color for major buttons (everyone found them easily).
-
-
Testers emphasized lazy reading - text was overall too small, too much in quantity, and too overwhelming (not enough visual hierarchy).
Business Priorities:
-
Testers found it interesting how many different things Jiaren was involved in (yoga, wellness, cafe, etc.), but it sometimes caused issues.
-
Wellness services made the price chart overwhelming, which could be minimized to focus on the yoga.
-
Most users expected a link to the Cafe visible in the top navigation menu, not hidden under "About Us".
-
Most other issues either required small adjustments or were lower priority, such as:
-
Changing some heading text for more clarity
-
Adding icons and reducing body text for better scannability
-
Adding tutorials (videos or photos) to product pages
- Adding a contact form to the Careers page for easy job applications
“I like the colors... When I first saw the website, I immediately thought, 'Oh this seems like a very friendly place to go do yoga. It looks like a happy place.' I felt like it was something that I would want to look at more, because the colors were very inviting... [It seemed] like a nice community of people.”
- Crystal Z
04
Build
Methods
Web Development
Tools
Adobe Photoshop
Wix
Summary
I discussed solutions for the issues found during the usability testing with the studio owner. Then I built a fully functional, responsive website based on the high-fidelity designs, adjusted to include the improvements that we discussed. After we worked out other business logistics, such as domain transfers, the website was finally launched.
Design Changes
Building the Website
To save time and effort, the studio owner and I agreed that a second round of high-fidelity design and usability testing were unnecessary for the changes that needed to be made. Therefore, I dove straight into building the website and incorporated the changes and improvements along the way.
I used Wix to build the website due to my familiarity with the platform and the ease of which I could teach Jiaren's owner how to use the platform on her own (empowering her to continue maintenance without my help after I finished the project).
Improved Visibility and Visual Hierarchy
I increased the base font size across the website from 16px to 18px. I also made changes for scannability in many text areas by:
-
Increasing heading sizes to further distinguish them from body text
-
Adding color to more important text
-
Adding icons for visual interest and to support certain phrases or categories of info
-
Shortening body text and breaking it into bullet points wherever possible
Adjusting Priorities and Navigation
Taking testing feedback into account, the studio owner and I agreed that removing the wellness pricing, on top of simplifying their yoga pricing options, made everything more minimal and concise. Additionally, we decided to move the Cafe link to the top level of the navigation menu for more visibility and bring more potential business to it, while the Careers link was nested into About Us, since it would only interest a small fraction of website visitors compared to the Cafe page.
Final Takeaways
The most important lesson I learned from this project was how helpful research and testing can be for even the simplest-seeming products. At face value, all the yoga studio needed was a website that provided information about their services - everything else (the merchandise, blog, etc.) was secondary, especially since they still wanted to use their third-party system, Vagaro, for booking classes. I could have gone straight to designing and building a modern, updated version of what they already had.
However, because I wanted to do research and testing out of curiosity (and a bit of due diligence toward my craft), I was able to learn how complicated the website could be when all of Jiaren's other businesses and organizations were taken into account. I had to find a balance between prioritizing the info about the yoga studio while honoring the studio owner's wishes to also include Jiaren's other various ventures.
“I didn't realize how much this place offers, because there's the cafe, the shop... I was a little surprised by it... Since there are so many features, I like how it's broken down in an easy way, so there's not much clutter going on.”
- Crystal Z
“I really love that they have different [things going on]. They have a lot. They have a community. I could see myself going.”
- Andrea Q
Next Steps
Since the website is now live and its maintenance has been handed off to Jiaren's owner, my part in the project has ended. However, while I was building the website, there were times when I found myself limited by Wix's editing tools. There were a few parts of the website where I was unable to design exactly how I wanted it to look and behave, and I was forced to simply let Wix do with it what it wanted. This experience has increased my desire to learn at least a little bit of frontend development, so that one day I would be able to build my own websites from scratch, rather than relying on a website builder like Wix.
