top of page
WLW_mockup3.png
WLW_mobile mockup_flat.png
when love works logo.png

UX DESIGN 

CONSULTANT

Client: When Love Works  - B2C Coaching Services 

Responsive Web Redesign

Winter 2020

ROleS

UX Researcher & Designer

UX Writer

Client Relationship Manager

UX TEAM

Molly Winter Stewart

Dominik Rawle

Susan Choi

Carl Anthony Vital

TIMELINE

2.5 week Agile sprint

METHODS

Stakeholder Interviews, Heuristic Audit, Competitive Analysis, Site Maps,

Task Flows, Surveys, User Interviews, Affinity Maps, Persona, User Journey, Feature Prioritization, Design Studio, Paper Prototype, Wireframes, Mockups, Usability Testing, Content Writing,

Spec Doc

TOOLS

Sketch, InVision

SUMMARY

Together with a team of 3 other UX designers, I partnered with When Love Works, a small business in NYC that provides online personal growth and relationship coaching to clients across the United States. We developed a research plan and designed a new responsive website to improve navigation, flow, and interactions to align with the brand’s user-base. Independently, I led work to implement a content strategy and wrote new copy to clarify brand messaging for new users and help increase site traffic and engagement. 

Ultimately, this strategy realigned the brand’s online presence with the value of their work, creating a clear path for new clients seeking this type of help to feel comfortable and confident in their decision to invest in a relationship with this business.  

INVISION PROTOTYPE

The Business

TRYING To Understand

the BUSINESS

EVALUATING

EXISTING DATA & BUSINESS GOALS

To understand where the business currently stands, my team met with clients to learn about the brand and their goals.

We took note of the ways that users were already connecting with the brand to bring back later during feature prioritization. 

Understanding that stakeholders felt the website might not be providing the same opportunities for new users to reach out helped us decide that a website audit was an important place to take our research next.  

Majority of current business is through direct referrals, not the websiteNew users often attend events first.

Stakeholders want to

make the website more user-friendly

Stakeholders want to increase online traffic & engagement to generate more business

HEURISTICS:

What's working WELL?

WHAT'S NOT? 

​

We found that the predominant issue was that users could very easily feel lost and confused when searching for information on services and the brand.  

MEETS BEST PRACTICE

MAJOR

PROBLEM

MEDIUM PROBLEM

MINOR PROBLEM

FINDABLE

CLEAR

COMMUNICATIVE

USEFUL

VALUABLE

DELIGHTFUL

​

ACCESSIBLE

CREDIBLE

CONTROLLABLE

LEARNABLE

N/A

N/A

Assuming that users seeking this type of personal help may already be feeling vulnerable, we knew that it was important for our design decisions to help them feel confident in their ability to find and access critical information on services and providers quickly and easily.  

We knew from heuristics that this was a challenge, but we also wanted to know what happened when real users engaged with the site, and how they felt about it

CAN USERS COMPLETE BASIC TASKS ON THE CURRENT SITE? 

To evaluate how the existing website was serving users in real-time, we conducted a baseline test comprised of 4 tasks we developed based on our previous assumption that new users  may feel vulnerable, and would want to feel safe, secure, and informed as they searched the site

Find essential information on services & providers 

Find points of value & credibility 

noun_confusion_2900892_edited_edited.png

Testing with users further validated the results from our heuristic analysis that users often felt lost, confused, and dissatisfied on the site, and spent a long time trying to complete simple tasks, like finding essential information. 

50

2/5

2/5

TASK SUCCESS RATE

SATISFACTION SCORE

EASE - OF - USE SCORE

TIME ON ALL TASKS

%

9min

KEY TAKEAWAYS ABOUT THE BUSINESS & HOW THEY INFORM DESIGN FOCUS

There is very little sense of place, and essential info as well as valuable extras like the brand's podcast are hard to find

The site feels cluttered and overwhelming.

Language used to describe services is full of insider terms and jargon, with no context or familiarity for a new user. 

IMPROVE FINDABILITY

IMPROVE UNDERSTANDING

question mark.png

Conducting a website audit and talking to stakeholders provided clear data on 2 areas we might need to focus on in our redesign, but what about the user? 

Who are they?

Do they need the same things?

What is important to them? 

What else can we learn to help drive our decisions? 

User experience needs to champion the needs and pain points of the user - so we interviewed them to learn more. 

TRYING TO Understand

the USER

The User

FOCUSING OUR CONVERSATIONS WITH USERS:

Why does this BRAND matter? 

To better understand the needs and experiences of our users, we interviewed 8 clients of the business, and 2 individuals sourced through a screener survey who had used similar services.

Our interview questions focused on the following topics:

using the

When Love Works

website

relationship with the

When Love Works brand

experience with similar coaching services 

KEY TAKEAWAYS ABOUT THE USEr & HOW THEY INFORM DESIGN FOCUS

users are ready to invest in these services, but crave detail and info that is easy to find and understand

users are self-aware,

but struggle with not knowing how to make changes

IMPROVE FINDABILITY

IMPROVE UNDERSTANDING

users love the brand - they see immense value in the coaches and programs

users need a comfortable, supportive, and transparent community

users want to know that coaching "works" before deciding to use services 

ALIGN VALUE

& MESSAGING

noun_goal_117084.png

In synthesizing data about the business and the user, we were able to see the same 2 themes emerge across both sets of data as areas to focus on in design, but it was during user interviews that a critical 3rd theme emerged:

 

Users find value in the brand and their work... but the website wasn't showing it. 

 

This was where it became clear to our team that we had 3 clear improvement goals to focus on to provide users with a better experience, and help generate new business. 

With these insights & improvement goals in mind, we developed a PERSONA and PROBLEM STATEMENT to maintain a clear vision of the When Love Works user and the problem we wanted to help them solve as we moved into our design phase. 

ADVOCATING FOR THE USER:

MEET KAI

To maintain a clear vision of who we were solving for during our process, we took the insights from our user interviews and developed Kaia personification of the When Love Works user seeking out help online.

​

View the full persona here.

"I thought I had a lot of healthy relationships, but that's not always true."

NEEDS 

- guidance
- clarity on services
- events to attend
- in-person connection
- community

pAIN POINTS

- doesn't know where to start on self-work
- is not sure what services are available
- can't find events online
Image by Hunter Newton

PROBLEM STATEMENT

How might we help users like Kai find the guidance he needs to better understand himself, and make shifts towards improving his relationship dynamics going forward?  

DESIGNinG A SOLUTION

Designing A Solution

HOW ARE OTHER BRANDS

HELPING MEET USER NEEDS?

To help inform our feature prioritization, we conducted a competitive analysis to find out how 2 similar brands were helping users find & understand information, and recognize brand value. 

​

relationship hero vector logo.png

Straight-forward navigation makes it easy to find important info on services; Success Stories provide credibility and value​

Relationship Hero - success stories.png
talkspace vector logo.png

Clear onboarding process uses plain language and places an emphasis on trust, qualifications & professionalism​

Talkspace_onboarding.png

By making information easy to find through clear navigation, aligning brand value and building trust through client testimonials and coach bios, improving understanding by providing a clear picture of the onboarding process, and introducing a site-wide content strategy favoring plain language, we were confident that users would feel confident making the decision to invest in the brand. 

​

Seeing how each of these features met the needs of our users by our achieving our 3 goals for improvement led to our decision to add them the list of features to include our redesign.  

FEATURE PRIORITIZATION

By combining insights from stakeholder interviews, user research, and business research, we were able to develop a list of features to include that met our 3 improvement goals, ensuring that we stayed user-focused during our design sprint.  

1

HEADER & FOOTER NAVIGATION

2

ONBOARDING

3

CONTENT STRATEGY + ORGANIZATION

- About Us Page

- Workshops & Sessions Page

4

5

TESTIMONIALS PAGE

PODCAST & EVENTS PAGES

6

REFERRAL FEATURE

ALIGN VALUE & MESSAGING

IMPROVE FINDABILITY

IMPROVE UNDERSTANDING

WIREFRAMES & MOCKUPS

1

HEADER & FOOTER NAVIGATION

WLW_Top Navigation workshops.png
Hi-Fi Bottom Nav.png

Final Hi-Fi

Clear page titles in the primary navigation give the user a sense of place and logical flow, providing immediate visual cues on where to find specific information on the brand. Secondary information is listed in the footer, along with social media channels and additional resources for the user that provide extra value. 

2

ONBOARDING

Homepage on-boarding.png

Final Hi-Fi

An easy-to-follow onboarding process with colorful iconography and plain language is included on the homepage to help the user understand the process of signing up for coaching services. Expectations are more clear, and new users can feel more confident that they know how everything works.

3

CONTENT STRATEGY & ORGANIZATION

ABOUT US PAGE

WLW_bios original.png

Original Copy

ABOUT US_V2.png

Final Hi-Fi

Using content from our first stakeholder interview, a new "About Us" page was written to replace the original website bios, letting the user know they are in good hands and that the business is credible with a clear mission, history, and leaders.​

WORKSHOPS & SESSIONS PAGE 

(Services Page)

Programs_mid-fi.png
1
1

Mid-Fi

WORKSHOP & SESSIONS_V1.png
2
2
2
2
3

Hi-Fi V1

WORKSHOP & SESSIONS_V2.png
3

Final Hi-Fi

1

During testing of our mid-fidelity design using labeling from the original website, users were confused about how different services were related, if at all. We decided to hold a second interview with stakeholders to ask more questions to better understand each service offering, so we could help users better understand the services. 

2

 This ultimately resulted in our re-naming the page title in the navigation bar, and creating 3 distinct, hierarchical groups to show service offerings by type in our high-fidelity designs.

3

Program names were too low-contrast for users to see during our first round of hi-fi usability testing, so we changed them to a red CTA and moved them below the image, making the interaction and subsequent path to a solution more obvious.

WORKSHOPS & SESSIONS PAGE 

(Details Page)

His Toolbox original content.jpeg
His Toolbox original content.jpeg
1

Original

WORKSHOP & SESSIONS HIS_V1.png
2

Hi-Fi V1

3
Workshop & Sessions_HIS_V2_CLICK.png
3

Final Hi-Fi

1

Insider terms and jargon were eliminated from original program descriptions and replaced with a description and highlights that use plain language that is easily understood by a new user. 

2

Users indicated that the modal used in our mid-fidelity design was too small for information that was so critical... 

3

...so we gave each program a full page with plenty of breathing room, keeping a Sign Up CTA and details on dates, pricing, and requirements visually separate in a red box, but in close proximity to the description to show the content is are related. 

4

TESTIMONIALS PAGE

TESTIMONIALS_V2.png

Final Hi-Fi

A cleaner Testimonials Page can be easily accessed from the navigation or the homepage, giving the user more confidence that coaching sessions really work, and that this brand is credible and valuable.

5

PODCAST & EVENTS PAGES

6

REFERRAL FEATURE

EVENTS_V2.png
1
HOMEPAGE_V2.png
2
1

Final Hi-Fi

Final Hi-Fi

We learned early from stakeholders that events and referrals were already successfully driving business, we learned from interviews that users need connection to a supportive community, and we learned from our website audit that none of these were easy to find on the original website. 

1

Events & the podcast - both valuable sources of connection and support for users outside of coaching sessions - were added to primary navigation and the homepage, making them easy to find. 

2

referral feature & CTA was added to the homepage, providing a quick and easy way for users to invite friends to explore the brand, and also help the business by increasing traffic to the new site. 

Prototype

PROTOTYPE

InVision-Icon-01.png

To see how our final desktop prototype aligns the brand's value and message with their online presence, and helps the user feel comfortable and confident in their decision to invest in the brand and their services, watch the video below, or try it in InVision.

Next Steps

NEXT STEPS

Short term

  • Create new registration & payment portals for services

  • Integrate “My Account” login for returning users - a place to buy a series & book a session

  • Continue review and testing of new naming conventions for services (“His/Hers, & “Toolbox”)

  • Develop and strategize additional content for the website

LONG term

  • Continue research & design for future development of a WLW app

  • Research the market for Professional Development opportunities

bottom of page