Serina Murphy
UX/UI Designer | Digital Artist

Fear Free® Member Home Page

Overview

Fear Free® is an online educational platform that allows users to acquire Fear Free certifications in order to improve pet emotional welfare, enrichment, and reduce fear, anxiety, and stress. This project is part of a bigger company initiative to boost revenue through membership renewals, as well as user engagement and awareness of Fear Free tools and content.

Fear Free® Member Home Page

The Problem: So Much To Do, So Little Time

When users sign up with Fear Free, they are greeted with their own personalized home page as a Fear Free member. However, the current home page causes users to miss vital aspects of their membership benefits and performing key tasks:

1. Start and resume courses;

2. Engage with additional courses and content;

3. Renew before membership expires.

The overwork and short staffing of the pandemic has affected veterinarians as much as it has other doctors and nurses, and dealing with the constant moral dilemmas and emotional output is driving many to burn out. Therefore, there is little to no extra time available to try to troubleshoot any confusion our home page may cause leading to a poor user experience and loss in engagement.

The Solution: Personalized Dashboard

Our goal is to provide a fully responsive, easy-to-navigate website (fearfreepets.com) that improves content awareness & consumption. Using the member home page dashboard gives users a convenient way to navigate their purchased courses and beneficial tools/resources with an all-in-one place tool. The platform also highlights upcoming expiring certifications with a personalized data table of courses and allows for easy renewal.

My Role

Sole UX/UI Designer collaborating with WebDev, Education, Customer Experience, and Marketing teams.

Process

  • Design Research

  • Empathizing

  • Ideating

  • Designing

  • Usability Testing

  • Evaluating

Tools

  • Figma/FigJam

  • Mural

  • Typeform

  • Lookback

Fear Free® Member Home Page
Research
Fear Free® Member Home Page

Some of my research’s significant findings

Interviews with our customer experience team and stakeholders validated that users were indeed missing vital information displayed on their personalized Fear Free Home Page. Additionally, I reviewed past UX and marketing surveys regarding our website and user satisfaction. I, then, jumped into researching how other e-learning platforms organize their users' purchases and prioritize display for optimal learning experiences online. I also wanted to see what our competitors are offering and how they were servicing their members.

Empathize
Fear Free® Member Home Page

Understanding our users

I held a workshop in Mural working with WebDev, Marketing, Education, Customer Experience teams, as well as the COO (now CEO). We discussed the responsibilities and pain points our personas could face day to day.

From there I was able to come up with certain themes each persona shared and some outliers we might want to consider when designing our solution.

From this exercise, I quickly realized that we needed to focus on a few different aspects of fearfreepets.com to develop better experiences for our users that could help reach our goals. The Member Home Page stood out to me as the most impactful because it was the one place all users would see as soon as they logged in to start a certification course (one of the main offerings from our company). It also would be relatively low effort to build since some functionality already exists on the current site.

Fear Free® Member Home Page

Personas: Veterinarian, Vet Tech, and Student/Pet Professional (Dog Walker)

I designed 3 proto personas based on the workshop findings and empathy mapping to ensure that the decision-making process is user-centered throughout the project. Proto personas are meant to quickly align the team’s existing assumptions about who their users are, but not based on (new) research. I would use these personas as a guide for developing solutions.

Ideate

User Stories

To grasp a better understanding of the scope of this project, I identified key features and user stories for each corresponding feature. I found that planning out the task flow early on helped me make more strategic design decisions as I could identify opportunity areas and ask users to perform a specific task during user testing sessions. Below are top 5 that shaped my red routes:

  1. As a user, I want a hub to house all my purchased and saved content so that I can easily and instantly resume consuming.

  2. As a potential user, I want to be able to know what content is available once I sign up as a member so that I can see if I want to continue with purchase.

  3. As a user, I would like my content to be readily accessible all in one place in which I can filter through everything that's available to fit my needs.

  4. As a user, I would like to know what other Fear Free Pets offerings would be relevant to my career/learnings so that I can be more up to date on the latest techniques and consume more content that benefits my career.

  5. As a user, I would like to save or favorite content so that they are easily found to view at a later time.

User Flows

Based on the persona we created, I worked on identifying 5 Red Routes that clearly communicates the key goals we want our members to achieve:

1. Access Fear Free member benefits in one place.

2. Easily renew memberships about to expire.

3. Start/Resume courses easily.

4. Find additional courses/resources once user has completed certification.

5. Easily track and see Fear Free Elite status.

Fear Free® Member Home Page

Sketching

I always like to sketch ideas out on paper before I start designing because it helps me to flush out ideas and there's just something about putting pen to paper that inspires my inner creative magic. I first thought about "WTF" or "what's the flow?" I wanted to keep new users and current users in mind as I went through all the steps of my 5 red routes. I also needed to think about mobile as over half of our users access our site via mobile. As such, I needed to make sure desktop and mobile experiences would be seamless.

Design Decisions: Lo Fi to Hi Fi

Due to time constraints and my team being highly visual, I made the decision to take my sketches straight to high fidelity. I held 2 meetings focusing on design and functionality. I was surprised when the CEO immediately loved the designs and wanted to move forward with development.

Design
Fear Free® Member Home Page

Style Guide & Design System

Fear Free LLC has their own marketing material and style guide. However, they have yet to have a style guide for web which I needed advocate for in terms of better accessibility and improving usability for all users. I decided to create a goal for myself to create Fear Free's very own design system that could be applied to other sites in the future.

Fear Free® Member Home Page

Visual Design

Fear Free is inherently a playful company aiming to make education fun. However, we do stress the importance of research, professionalism, and responsibility. Therefore, I wanted my designs to convey this same mood while trying to maintain a minimalistic mindset so users can easily find and access what they need.

One of the things that stood out to me when starting on the UI was that our color palette is not up to WCAG AA guidelines. I tried creating shades and tints that were in line with our brand but also conformed to a score of 4.5 so that our page is usable and understandable for the majority of people with or without disabilities.

Test
Fear Free® Member Home Page

Prototyping & Usability Testing

Prototyping:

As a startup, our WebDev team has the flexibility and nimbleness to develop design concepts on a stage page for usability testing via Kinsta instead of prototyping through InvisionWhile WebDev developed the testing stage, I set up a testing plan and script on Lookback.

Usability Testing:

I recruited participants via a fearfreepets.com survey, reached out to acquaintances in the veterinary/animal industry, and asked internal Fear Free employees to test as well.

I conducted 10 unmoderated remote usability tests in order to understand any problems that users/members may have while interacting with our new Education Library. Each participant completed the usability test by sharing their screen via Lookback.io or Loom (for internal testing) and talking aloud through their thought processes while completing each task.

I tested the effectiveness of the design by having the participants complete 8 specific tasks all of which were in line with my main user flows and the goals we want to achieve for this build and to discover any difficulty or confusion that the user may be having while maneuvering through the page.

Fear Free® Member Home Page

Synthesizing & Redesigning

I utilized affinity mapping to categorize and organize the insights after collecting all of the customer feedback. Then I wrote a usability test report to describe the findings, prioritize the issues, and suggest fixes. I noticed 3 critical issues that needed to be addressed and 3 major improvements.

Fear Free® Member Home Page

Next Steps

The work completed thus far is only the beginning. More iteration and optimization are all topics of future effort. This includes the following top of mind features:

1. Stepper redesign of when tasks are complete

2. CE tracker updates

3. Add times to cards so users know how long a course runs

4. Update any tagging designs for clearer organization and implement text truncation

It's a Marathon, Not a Race
I have gone back to review other educational sites a number of times during this project and I always noticed little updates. The member home page should continuously be checked and visually renewed to ensure that it is encouraging the right behavior, especially as company goals and priorities change. This means it should be ever-evolving as new insights into user behavior and preferences are discovered.

Evaluate
Fear Free® Member Home Page

Increased Renewals

Since Marketing did some marketing pushes in March 2022, there isn't an easy way to show the isolated impact of our changes. Therefore, I took a comparison of March+April of 2022 vs. the same time last year. Admittedly, this factors in sales efforts to increase membership renewals, but this also factors in the changes we made to the site. With that said, the total Pet Professional Memberships Renewals increased 130% vs. last year at this time and Vet Membership Renewals increased by 30%.

Increased Engagement

Education Library views increased by 4882% by putting it in the nav and member home page sidebar. It’s clear that people are indeed interacting with our content!

Certification course pageviews also increased by 5.4%

Increased Satisfaction

In an anonymous survey sent out to our customer experience team, I asked them before the launch of the member homepage and education library how they are able to manage their current volume of work and their perception of how users would rate our site. We saw a change from “moderately" to "very much able to handle the volume of complaints.” And the answer to their perception changed from "poor to fair" to just fair.” That’s a nice little adjustment!

Fear Free® Member Home Page

Reflection

Building a design voice

Lots of people are involved in the design process. People from all over the organization see the value of creating great user experiences, and they all want to participate. But the truth is, all design is subjective. What one person likes, another person hates. What's obvious to one, is not necessarily obviously to another. So with everyone involved, there can be a lot of misunderstandings and miscommunication. You're not going to win all the time. However, I've learned that being articulate is the key to success. While I'm still working on polishing this skill, I've recognized that being able to explain why I did what I did in a compelling and convincing way typically makes me more successful at getting support on the parts of design that are important to me and the user.

"Plussing"

Walt Disney used a concept known as “plussing”: that every project can be improved upon by each hand that touches it. As a sole designer, I don't have anyone readily to bounce design ideas around with. This has been both a pro and a con to my work because while I always thought that the best work is always novel and innovative, I alone don't always have all the ideas. Being able to critique and review other design work has really helped me to produce better work. Being able to build off others’ work and leveraging others’ designs has made me a better designer because I can process and evaluate their thinking (a different point of view) while I iterate on my own work.

Design is never finished

With my own perfectionist mind issuing myself frequent design critiques and gathering constant feedback, I have realized that products will always be evolving, growing, and changing. As they should, for the better! The confidence in my designs I gained from this experience is truly an invaluable experience. I learned that I may not have all the right answers at first and that's ok! As long as I continue to be curious, ask insightful questions, and back the user, results will follow.