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
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 website. New 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?
​
Using The Abby Method's 10 principles, our team conducted a heuristic analysis on the entire existing website to assess what the major problems were, and begin to formulate possible recommendations.
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
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
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
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
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 Kai, a 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
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
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.
​
Straight-forward navigation makes it easy to find important info on services; Success Stories provide credibility and value​
Clear onboarding process uses plain language and places an emphasis on trust, qualifications & professionalism​
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.
WIREFRAMES & MOCKUPS
1
HEADER & FOOTER NAVIGATION
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
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
Original Copy
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)
1
1
Mid-Fi
2
2
2
2
3
Hi-Fi V1
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)
1
Original
2
Hi-Fi V1
3
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
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
1
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
A 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
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
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