JON YUEN COACHING

Responsive website re-design.

Jon Yuen is an independent movement coach who was looking to redesign his already existing website. He offers online coaching and courses and writes a monthly newsletter. We worked together to create a site that aligned with his message and branding while at the same time enhancing user experience, making the site easier to navigate and understand Jon’s offerings.

ROLES

I assumed the following roles in redesigning this website:

  • User Experience (UX) Designer

  • User Interface (UI) Designer

  • Visual Designer

DELIVERABLES

Interaction Design:
Responsive website

UX/UI Design:

  • One-on-one interviews

  • Personas

  • User journeys and task flows

  • Site map

  • Low-fidelity wireframes

  • Usability tests and findings

PROJECT SPECS

Duration: 3 Weeks (100 Hours)

Tools:

  • Figma

  • Optimal Workshop (Research)

  • Squarespace

DESIGN GOALS

  • Understand Jon’s offerings and current audience.

  • Research and review analytics on his current website.

  • Deliver an active, responsive website via Squarespace.

KEY METRICS

  • Increase % of newsletter subscribers.

  • Increase the visibility of online courses and newsletter call-to-action.

  • Decrease the time to find articles, information, services, newsletters, etc.

PROCESS OVERVIEW

01
RESEARCH

GOALS

  1. Learn about how other coaches (within and outside the movement space structure their sites and services)

  2. Review analytics from his old site to better understand how people get to the site and where they mostly spend their time.

  3. Uncover people’s experience working with Jon and get a better understanding of Jon’s perceived “brand” through the eyes of others and how that lines up with his perspective.

  4. Test the original website to see how users navigated and experienced it.

METHODOLOGIES

  1. One-on-one interviews allowed me to gather qualitative information about people’s experiences with the original site and their thoughts on Jon, himself.

  2. Market research allowed me to better understand the movement coaching space and how other coaches go about offering their products and services.

  3. Website & Instagram analytics gave me valuable data on demographics and a history of user behavior while on the site.

Assumptions

  1. Most people learn about Jon through Instagram.

  2. Since most of Jon’s reach is through Instagram, his website should be mobile-first.

  3. Most of Jon’s target audience consists of people looking for a non-traditional approach to fitness and movement.

Research Insights

  1. 60% of Jon’s site visits are on mobile devices.

    • Designing for mobile was crucial as I went through this process.

  2. People want to trust their sources of information, feel connected with a potential coach, and know exactly what they are signing up for.

  3. Jon’s original site caused a bit of confusion when users navigated to find out more about his coaching.

“How Might We” Questions

  1. How might we express Jon’s character and tone of voice through his website so that visitors can get an accurate read on who he is as a person and coach?

  2. How might we better describe Jon’s offerings in a delightful and succinct manner?

USER PERSONA:

After synthesizing all my research I was able to create a user persona and kept this person at top of mind throughout the rest of the design process.

02
INFORMATION ARCHITECTURE


I worked with Jon to understand what were the important pages of the website that needed to be obvious to get to. It also helped that he simplified his services and pricing model. Because of that, I got rid of the “Store” page which was confusing users who thought he had physical products he had for sale. As you can see below I simplified things by “flattening” the structure of the site.

SITEMAP

This was an essential part of the process regarding user experience. Based on some of the research done, navigating Jon’s original website was confusing for users. Some felt that the navigation didn’t feel intuitive. Some pages had sidebar navigation while others didn’t.

03
INTERACTION DESIGN

WIREFRAMES

Lo-Fi Wireframes

I knew I was going to be limited by Squarespace’s capabilities, so I decided to learn a bit more about how things work within Squarespace before creating any wireframes. Because of this, I didn’t focus on sketching wireframes knowing I wouldn’t be able to implement them. After gaining a better understanding I created low fidelity wireframes to test.

04
UI DESIGN & ITERATIONS

Given Jon’s attention to detail in his aesthetic style, it was important to find the right visual direction that would relay the type of coach he is. After a few conversations and iterations, we were able to settle on some visuals and the overall style of the website to have a vintage, elegant website that read like a book.

When it came it iterating and testing, there was a nice combination of user testing on the UX side of things and stakeholder feedback on the UI side of things. As an example, see below the progression of the design of the homepage.

  • The image on the left is the original homepage. Testing revealed that navigating the site was a bit confusing (Sitemap section to see changes made) and the homepage, while it displayed everything Jon had to offer the experience, felt a bit too cluttered.

  • The middle image is version one and, while not completed, it gave the general visual direction I was taking. User testing went well but I did get feedback (from users and Jon) that it didn’t feel like I was getting to the heart of Jon’s brand.

  • The image on the right is the final version. Jon and I regathered after the first version to really hone in on the visual direction. V1 felt too flashy, so we simplified and after some creative jamming, we wanted the site to feel more like reading an old book. We used some visuals and textures that would help bring it together.

HIGH FIDELITY PROTOTYPE

LESSONS
LEARNED

  • This was my first project where I came to understand how to find a balance between what’s best for user experience while at the same time navigating what a stakeholder wants out of a project.

  • A mid-fidelity prototype would have saved me a ton of time from creating a complete high-fidelity prototype only to have it completely revamped.

  • My design process changed knowing that this project would be delivered and finalized on Squarespace.

•fin•