Serina Murphy
UX/UI Designer | Digital Artist

Fear Free® Education Library

Fear Free Pets is an online educational platform that enables users to earn world renowned Fear Free certifications that improves pet behavior and overall wellbeing for animals and humans alike, as well as, supplies additional animal behavior content in one place. The Education Library story is part of larger epic of the company rightly named project bear. This initiative is increase revenue through membership renewals.

Problem

Today's pet professionals are time-constrained and overworked. An added stressor is their inability to find useful information through subject guidance, demonstration, and CEs online.

Solution

Our goal is to provide a fully responsive, easy to navigate website (fearfreepets.com) that improves content awareness & consumption. Using the Educational Library, users can choose their preferred content type that accommodates a busy schedule and filter through categories that are most meaningful to them, giving users a convenient tool to learn quickly and accurately from trusted pet health experts.

My Role

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

Process

  • Design Research

  • Empathizing

  • Ideating

  • Designing

  • Usability Testing

  • Evaluating

Tools

  • Figma

  • Mural

  • Miro

  • Typeform

  • Lookback

Research
Exploring educational platforms and competitorsShown: Example of a good catalog page with Skillshare

Exploring educational platforms and competitors

Shown: Example of a good catalog page with Skillshare

Knowing that there are many educational websites available in the market, I jumped into researching how other educational platforms display, organize, and filter their content. I also wanted to see what our competitors are offering and how the experience is when navigating through their site's catalog functionality. I was able to find some key takeaways that most of these sites have in common when it comes to displaying and filtering a large amount of content:

1. Appearance

Catalog pages can contain a lot of results (upwards of thousands of pieces of content), so it's imperative to keep the page simple and clean by maximizing white space on the results page with color being ushered in to highlight topics or prompting clickable items.

2. Intuitiveness

While intuitiveness can equate to minimalism (largely by removing any non-essential features), this can also remove features that might be useful for our specific audience and doesn't necessarily solve the problem. I've noticed that most educational platforms make a large initiative to understand my wants and needs as their users and tailor content specific for me. Smart design in terms of intuition is getting a good understanding of our users in order to build an interface that minimizes the knowledge gap between what users know prior to coming to fearfreepets.com and what they must know to use it properly.

3. Improvement

Since searching for content is a huge part of Fear Free Pets' offering, it should never have a final form. Regular testing and modifying as needed are important.

Fear Free® Education Library

Surveys

Part of my research was to go through past research efforts and learnings.

Key takeaways

  • Most of our users are Vet Techs, Vets, and Students

  • 39% of respondents from a Home Page survey feel our site is hard to search and navigate

  • 44% of respondents from a Continuing Education Materials survey state that they have limited time to spend on site consuming our content

Empathize

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.

  1. As a user, I want to be able to navigate to Fear Free Pets main offerings no matter where I am within the site so that I can get what I need quickly.

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

  3. 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.

  4. As a user, I'd like to clearly see that I'm logged in so that I can continue consuming my personal content.

  5. As a user, I'd like to be able to search for the content I want within Fear Free Pets easily so that I can quickly access helpful information.

  6. 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.

  7. 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.

  8. As a new user, I'd like to provide my interests so that the algorithm can serve me content most relevant to me and my career.

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

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

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

Personas

For this challenge, I met with WebDev, Marketing, Education, Customer Experience teams, as well as the COO to present proto personas I came up with based on initial research I conducted about our users. Proto personas are meant to quickly align the team’s existing assumptions about who their users are, but not based on (new) research.

Fear Free® Education Library

Understanding our users

I held a workshop in Mural working with WebDev, Marketing, Education, Customer Experience teams, as well as the COO. 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 a catalog page was not the only thing we needed to focus on in order to develop better experiences for our users. However, it remained top priority as it could offer a big impact to achieve our goal. It also would be relatively low effort to build since some functionality already exists on the current site.

Ideate
Fear Free® Education Library

User Flows

Based on the persona we created, I worked on identifying 3 Red Routes, the most critical tasks that deliver the most value to the users on the product.

1. Do a search in the search bar on the page. In the search box within the Education Library you can enter keywords for the course or content you are looking for.


2. Filter the content users are specifically looking for quickly.


3. Save content users find throughout the process that they may want to watch at a later time.

Fear Free® Education Library

Sketching

Sketching the Education Library helped me to flush out ideas based on the complicated Fear Free model. Some content is open to the public and other content is restricted to members once they complete their Fear Free certification. I tried to come up with a solution to minimize any frustration that may arise due to this gating.

Design Decisions: Wireframing

My team is very visual, so I decided to move past low fidelity wireframing to deliver high fidelity mock ups. To share some context of my design decisions, I sent out an annotated pdf of my thoughts to my team to get sign off.

During this stage, I held 3 meetings focusing on design and functionality. It was a "wireframe > iterate > re-wireframe" type of process.

By the end of this stage, our team decided to move forward with WebDev developing the Education Library on a stage site so that we all can go through the functionality and design in real time to make sure it behaved how we want and as portrayed in my designs.

Design
Fear Free® Education Library

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.

UI 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.

Test
Fear Free® Education Library

Prototyping & Usability Testing

My team is currently in the process of putting this design on stage for online usability testing via Kinsta.

In the meantime, I have set up user testing questions on Lookback to launch with beta testers once stage is complete.

During the test, I will be asking users to complete four tasks (the three red routes + one test for upcoming new navigation design). I'm looking forward to seeing if my solution is viable for our users and what new iterations we can come up with to continually evolve the product.

Evaluate
Fear Free® Education Library

Key takeaways

Detachment from my own bias

Understanding how to analyze and use research data to put myself in the user’s shoes. This let me validate or reject my own assumptions, formulate strong rationale for decisions, and turn feedback into opportunities. If I didn’t do this, I would not have thought of creating an option for users to look at open to the public content only vs. member exclusive in order to decrease frustration.

Don't need to re-invent the wheel

There are so many well-known UI patterns (such as cards, search boxes, and radio buttons), it's not always feasible nor practical to create a new component when my justification is just because the UI looks 'nicer'. Instead, I spent a lot of time breaking down existing design patterns to analyze why it works, why it doesn’t, and what I can do to take it a step further.

Building a design system & Figma tricks!

Learning to create a design system really saved me countless hours and made it much easier to establish consistency, whether that be with defining margins, font styles, or drop shadows. I also tried teaching myself a few cool Figma hacks (creating variants, autolayout, key shortcuts).