UX/UI design and Squarespace build with CSS/HTML customization for a yoga instructor’s new website
Background
My client recently had a career change from a corporate job to yoga instructor. She expressed wanting a simple yet professional website for her yoga brand and services.
Objective
Create a competitive website with a clean aesthetic to showcase her training background, teaching credentials, and upcoming class schedules/rates.
Project Duration
3 Weeks at 15 hours / week.
Week 1: Research & Create UX / Week 2: Develop UI / Week 3: Site Build
Phase 1: Research
Competitive Landscape
Since the client is NYC Manhattan based, I researched individual NYC yoga instructor websites who teach in Manhattan and Brooklyn (since many Brooklynites travel to Manhattan for classes).
I found that all of the instructor’s sites include:
A page telling their story of why they started their yoga practice.
A page reviewing the types of classes, schedule, and cost.
Links to their Instagram and blog.
Phase 2: Define
User Persona
I didn’t create a detailed user persona breakdown but after reading testimonials from NYC yoga students on individual yoga instructor sites, yoga studio sites, and ClassPass I found that there’s a wide demographic of NYC based people who would be interested in learning about my client’s services and taking her classes.
*It’s important to note that the general demographic for yoga students in NYC differs from other parts of the United States.
Site Map
When initially meeting with the client, she had already provided a detailed breakdown of how she wanted to organize her content. She was adamant on sticking to her plan and the pages she expressed seemed in alignment with her overall objective so I agreed to create a site map based off of her plan.
For the page’s title, we discussed considering “Classes” but “Practice Together” was chosen based on the clients preferences.
Pages: Home / About / Practice Together / Contact
User Flow
I didn’t create a user flow diagram because it is very simple.
The most likely user flow is as follows:
Home > About > Practice Together > Contact
Phase 3: Design
Black & White Wireframes
After developing the site map I sketched the initial wireframes and digitized them using Figma. Overall the client was looking for a sleek yet friendly look and they were adamant about using as many of their personal yoga photos as possible. I provided a few different wireframe options and we decided on the below.
Visual Exploration & Development
After finalizing the black and white wireframes with the client it was time to define the brand’s voice & mission. The client gave a lot of initial direction but as a designer I worked with them to specify parts of the UI that weren’t already design friendly/up to web accessibility standards.
UI Kit
I created the UI kit based off of a mood board that the client provided, it was a great base to work off of! I just made a few adjustments for the typography and color palette (mostly for accessibility and brand continuity reasons). I explained my line of thought to the client and they happily agreed with my new choices.
Color Wireframes
With the UI kit complete I was able to create the color wireframes. I came up with a variety of ideas that inspired a couple rounds of revisions. Ultimately, the client chose the color wireframes that best aligned with their brand vision.
Building the Squarespace site
I chose to use Squarespace because it was important for the client to have control of editing the text. Since it’s a new business their classes, rates, etc. will need to be updated more often than a well-established business. Giving the client the capability to change their messaging is why I chose to create their site using Squarespace. The HTML/CSS customization for the desktop was quite simple but for the mobile & tablet it proved to be more time consuming. The client didn’t have the budget for me to make the mobile & tablet versions absolutely perfect but I did my best with the time allowance. Although Squarespace is known for their responsive adaptability it doesn’t always translate when there is a large amount of HTML/CSS customization. The client was fine with the responsive outcome because we had discussed it at the beginning of the project.
Phase 4: User Testing
The client needed to set a tight deadline so unfortunately there was not time for proper user testing. That being said the site’s live results have been successful thus far -- there’s been a significant amount of views and class bookings since the site’s launch.
Phase 5: Conclusion & Next Steps
Overall this project was a success! The client was very happy with the UX & UI. Additionally, the communication between myself and the client was clear and consistent. Good communication between designers and clients is always important and the client's interest in the UI made it particularly imperative.
For now there are no plans to continue working on this project but the contract states that the client may reach out for updates (for an already set additional fee).
Thank you.