A Website Redesign Case Study By Karen Kohtz
My Role: UX Architect Lead, Project Manager
Project Summary
No Limit Generation is a non-profit that brings free online mental-health education videos to caregivers around the world. They asked for feedback on their platform (a website) and their educational content. Our chief deliverables were to be a mockup or prototype of their website, and recommendations for making their videos more effective, approachable, and memorable.
I worked on a 3-person team to research and discover the problem, synthesize our results, and redesign the website information architecture, as well as provide recommendations for improving their content.
Below is a screenshot of No Limit Generation’s current website, which we redesigned.
The landing page of nolimitgeneration.com
The Problem
We focused our design and testing around No Limit Generation’s central product: their video content. They need their videos to be clear, memorable, and accessible. But also, users need to be able to find and navigate to the videos — and throughout the site — easily.
PART I: THE RESEARCH
We began our design process with research. Throughout the project we would carry out several different types of research, including:
Heuristic evaluations of the website
Usability testing of the website
Open card sorts
Closed card sorts
A/B testing of videos
A/B testing of terms and language used on the website
Informal reviews of our mockups and prototypes
Usability testing on our mockups
Reviewing No Limit Generation’s brand and creating a style guide for our mockups and prototype
Heuristic Evaluations
We began our design process with research, starting with heuristic evaluations of the website.
We assessed the quality of the website with 3 heuristic tests based on the following parameters:
Learnability
Efficiency
Memorability
Error management
Satisfaction
On a scale of 1-5, with 5 being the exceptional for these categories and 1 being unacceptable, most of ratings ranged from 1 - 1.5. No Limit Generation’s highest ratings were two scores of 3, one for “error management,” and one for “memorability.” The website scored particularly low in the categories of “efficiency” and “learnability.”
We used our findings from the heuristic evaluations to help us form meaningful questions and tasks for users during our usability tests and frame our research plan.
Usability Testing
We did 6 total usability tests on the original website.
During our usability tests, many of the conclusions we came to during our heuristic evaluations were confirmed, most importantly, it quickly became clear that users could not find content quickly or easily on the website, and were very confused by the navigation and content organization. They could not navigate efficiently, and learning to use the site took too long was not intuitive.
Although many users had a positive impression of the site and the videos, they were not able to look at the site and then tell us what the site offered — or who owns the site and what their mission is. The navigation was a major pain point for many of our users during our first tests, causing confusion and even stress for users.
Below are some examples of tasks and questions we gave users during our usability testing of nolimitgeneration.com, and some of the most significant pain points these questions helped us identify.
QUESTIONS
We asked users questions about how they felt about the site, such as:
What particular aspects of the layout stand out to you?
How well you understand what No Limit Generation offers?
Can you identify what services No Limit Generation website provides? and
“Do you have any general comments about this page?”
We also gave users tasks to do while interacting with the website, such as:
“Find the video called “Understanding Sadness and Depression in Children”
PAIN POINTS:
1. User was not able to find something they were looking for & daunted by the lack of navigational aids.
When faced with the task above (“Find the video called ‘Understanding Sadness and Depression in Children’”, one user described a feeling of anxiety the the current organization of videos (see image to the right) elicited from him.
“Honestly I didn’t know where to look (for the video) and had a moment of panic when I thought I would have to look through all these videos to find the one I needed.”
If you look back at our snapshot of the website to the right, you’ll notice that each picture actually represents a SERIES of videos — the first series alone has 32 videos. I empathized with the user when they mentioned their stress about having to look through each of the categories for one video, as there are over 100 videos on the site!
2. Unclear or lack of visual indicators for videos on the front page:
Another user wasn’t able to tell right away that the list of video series (see above) was a list of content links to the videos. After prompting, she was able to articulate what she thought the site was about and find the educational content, but mentioned she didn’t know where the educational content was because:
“I thought these were videos of the staff.”
Another user, when asked if there was anything surprising about the navigational process, reiterated that there were confused where the videos were and wanted an additional way to get to them, rather than just to scroll. This user also suggested that giving the video previews a more “You Tube” feel, such as having a play button and picture previews on the video thumbnails.
3. “Would you use this site?” Many users did not feel confident they could quickly find information from the site.
When asked if they would use the site if they were a caregiver on the ground, 1/3 of users answered negatively— either because they would need to know how to use the site beforehand, or they would prefer to have more defined and readily available information in a crisis situation.
CARD SORTING
Once we had pinpointed navigation as a huge barrier for users to access the videos, we began researching how we could improve the information architecture of the site.
We did 3 Card Sorts ourselves, taking the videos out of their current organization pattern on the site, which is only around speakers, and arranging the videos around categories such as: mental health, community, physical health, and nutritional education.
Based on the website copy, we identified 3 key “umbrella” categories we would use to organize all the videos to make them more easily accessible to users:
Healing
Protection
Support
We did 4 additional card sorts with users, to better understand which videos would fall under each different category.
Key Findings, Card Sorts:
Many series and videos weren’t titled the same thing as they were on other parts of the site.
There are many variations and key words under which different videos could fall.
Video titles were sometimes not specific enough.
Informational videos vs “How to” activity videos needed clear differentiation.
PART II: SYNTHESIS
User Groups
We developed 3 Target User Groups that No Limit Collaboration wants to serve, based on research and our conversations with our client.
NGO Managers
Domestic School Psychologists
International Aid Workers
We developed 3 Use Cases for each user group such as this one for the NGO manager.
An NGO mid-level manager observes that his subordinates (aid workers) in Syria are disengaged during in-person trainings on child nutrition and have trouble applying the knowledge directly to their work in the field (supporting vulnerable children).
Goal: Find and lead a course/module on child nutrition for his subordinates that will inform their work with children in the field.
JOURNEY MAPS
Based on our usability tests and use cases, we developed a present and future journey map to illustrate some pain points this hypothetical user group would face and how the users experience could improve once those paint points have been addressed.
Part III — More Research
Based on our results from usability tests, the pain points we found and user groups we identified, we entered another research phase.
During this stage we used the following research methods:
A/B testing on the video content of the site
A/B testing on word choice and terminology throughout the site,
Usability testing on our wireframes and drafts of possible design solutions.
Key findings:
Users preferred the “tea time” feel of No Limit Generation’s” videos but got lost because of the undifferentiated and non-dynamic nature of the videos.
Users liked videos where there were visual aids, movement, and different camera angles throughout, as well as background music.
Clear preference for terms was demonstrated through our A/B testing:
Users preferred:
“Training Videos” to “E-Learning”
“Course,” to “Series,”
“Lesson” to “Module
“Instructor” to “Speaker”
“About us” to “About”
“Our Instructors” to “Instructor Bios”
Part IV: Design Solutions
Our first design solution was to restructure the website’s IA.
Instead of having two long pages with most of the important information and content (the landing page and the “About & Testimonials” page) we reorganized the site so that the educational content was separated out and easily accessible from the top navigational bar.
We simplified the top navigational bar, changing it from this:
to this:
Then we organized the remaining pages under the overarching “About” category:
We designed a new site map to allow for easier navigation:
New Site Map
We created a new “Training Videos” page where we placed all the current education content and also devised a feature to show the content under various different categories or keywords:
We also devised an infographic to demonstrate the different kinds of non-video aids No Limit Generation could use to supplement its video content. We found that visual aids helped users engage better with videos, and we also wanted to make No Limit Generation’s better accessible under poor connectivity when videos might take too long to load or are impossible to download.
This was an incredible project to work on, and we all three welcomed the chance to help No Limit Generation help childcare workers.
Please contact me with any feedback or comments.