No Limit (Re)generation: Serving Children Worldwide

An iteration of my team’s mockup for No Limit Generation’s home page.

Introduction

Although our client is a nonprofit startup called “No Limit” Generation, as is the case with all UX design projects, we operated under strict limitations. We were given two weeks to deliver designs and recommendations addressing two immediate needs. The first is the website’s feel, flow, and ability to communicate its mission to whom it serves, while the second is the effectiveness of the product itself — in this case the training videos.

This was my last project for the General Assembly bootcamp, so I wanted to show off everything I learned and take on new roles and tasks that would develop my skills for the sake of job-readiness. I also got to choose this particular client, which meant that I was passionate about the mission. To be passionate about one’s work seems inherently positive, but too much passion can lead to problems — primarily a tendency to overdo it by ignoring principles around Minimum Viable Product (MVP) and falling into what my instructors referred to in a lecture about working with clients as “scope creep.” I believe my team avoided this pitfall, but I’ll let the reader be the judge.

The Process

This project was unique not only because I got to choose it but also because the instructors permitted — in fact, required — us to communicate directly with the client. Due to my background as a freelancer and mid-level nonprofit manager, I volunteered to be the point person for all client communication. This experience was very low-maintenance: Our client was friendly and hands-off throughout. We were given plenty of room to be creative or redefine aspects of the initial briefing. This I appreciated.

Our three-person team developed its own process for the two-week span of our project. Communication was at the center of our dynamic. While not formally the project manager, I helped set expectations early around scrums, roles, and — yes — communication. I became quite comfortable using Slack, Miro, and Google Drive to share my own accomplishments and roadblocks while collaborating with my team. Still, face-to-face remains the most effective form of communication. Here is where you can have meta conversations about how you communicate. It may seem strange, but talking about talking works wonders in both professional and personal relationships.

Overall, I never could have imagined how important so-called “soft” skills would be in navigating through my four projects at General Assembly. Not only was I able to improve on many such skills, it’s also true that the most memorable moments of these ten weeks have been difficult-yet-critical conversations. These are the moments I hope to highlight (very soon) during job interviews.

But I digress…

Let’s get to the agenda.

1. The Mission
2. Information Architecture
3. Comparative Analysis
4. User Groups/Use Cases
5. Usability Testing
6. Journey Maps
7. Sketches/Wireframes
8. Mockup
9. Recommendations

These items will not all be addressed with the same level of detail. I will highlight the most important or unique parts and tie them together as clearly as I can.

The Mission

In short, our client, No Limit Generation (NLG), produces training videos for aid workers, social workers, school psychologists, and anyone else who works with vulnerable children. It operates under a “human-centered communication” model, which stipulates that e-learning should be clear, engaging, and actionable as well as accessible, evidence-based, and culturally-informed. The client assured us that he had carefully vetted every instructor in the videos, so we focused on how the information was presented — rather than whether it was high-quality. Moreover, we assessed the usability of the website, particularly in the context of the training videos. We looked at how the videos were presented on the site and the levels of navigation it takes for users to find the video(s) they want. To summarize, we addressed the visual design of the website, the information architecture, and the videos.

Information Architecture

Once the three of us completed our heuristic evaluation of the site, we identified information architecture as the primary issue to address. It was clear to us — and later became clearer through usability testing — that it was not so easy to navigate through the videos. It was also not immediately clear where to find them because there was no separate videos page nor was there a link in the global navigation to “videos” or anything related. The areas we chose to address were as follows:

• How to navigate to videos from the home page
• How to create multiple forms of navigation to the same video
• How to generate, define, and filter categories of videos
• How to address redundant videos
• How to label and title videos in a user-friendly way

To address the last three bullet points, we designed an open card sort for four potential users (using index cards) — discovering there were multiple ways to group the videos and that none of those ways was particularly precise or satisfying — and we did our own affinity mapping exercise on Miro:

I show my partner’s affinity map because her categories were taken right from No Limit Generation’s front page, and those categories (with one modification) became a foundational part of our project.

I adopted those categories and set up closed card sorts to make sure the videos on the site could be effectively sorted in such a way.

User attempts to sort video titles in the form of index cards.

I found that the “Support” category was the hardest for users to define, so we later changed the category on our website mockups and prototypes to “Caregiver Support.” This change made it clearer that this category of videos is intended to help caregivers take better care of themselves. Another conclusion I drew from these card sorts was that videos containing physical exercises — as opposed to informational lectures — required clear differentiation in order to be understood.

Comparative Analysis

Another major part of our early research was a comparative analysis, where we examined other e-learning websites and watched other educational videos that were relevant to No Limit Generation’s work. We examined patterns, noted key features — taking screenshots along the way. Additionally, I did research on best practices for making web-based educational videos. While I already knew quite a bit about LMS platforms from my previous project, I didn’t know that zoom-ins on the speaker were so critical to keeping the user engaged in a video. I understood the concept but hadn’t made much use of the term “b-roll.” The research made me wonder to what extent e-learning content creators take into account these technical details.

While we were not tasked with re-designing the videos — which were already the result of much research and expertise — we did create an infographic to supplement one of the videos and test to see whether it helped users better understand the video’s content. I will discuss this in more detail in the usability testing section.

User Groups/Use Cases

Before discussion usability testing — the biggest part of the project — I will discuss No Limit Generation’s users. One of our major challenges was that we had limited data on said users and could not readily connect with them for interviews or surveys. I connected with as many people as I could who represented the following user groups, but I could not confidently generate personas based on those people. Instead, I followed the client’s lead and thought about users under the following headings:

I developed a use case for each one:

Scenario #1: Aid worker (who is not a native English speaker) in Bangladesh is concerned that many impoverished children are working long hours and not attending school. She has some understanding of the economic realities their families face but wants to combat exploitation.

Goal: Find video/educational resource (with language flexibility) that will help her reduce the harm for children who are forced to work at a young age to support their families.

Resource Link: https://www.nolimitgen.org/protecting-children-q6-v6

Scenario #2: School psychologist (who is a native English speaker) in California sees dozens of students every day that are dealing with the effects of trauma. She notices that the structure of the school day does not allow for much movement or breathing exercises, but she feels these would be helpful for those students who are dealing with anxiety in particular.

Goal: Find a video/educational resource that will instruct her on how to lead breathing or movement exercises to help students manage trauma.

Resource Link: https://www.nolimitgen.org/emotional-wellbeing-cx4-v4

Scenario #3: 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.

Resource Link: https://www.nolimitgen.org/meeting-nutritional-needs-playlist

Usability Testing

It would be difficult to recount the extent of our testing as it took quite a few documents just to organize our results. Suffice it to say that we conducted three phases of testing and more than 30 individual tests, starting with the look and feel of the website and ending with A/B testing on words for the buttons on our future mockup. There was a lot in between — including A/B testing on videos (a client video up against a competitor video), paper prototype testing, and infographic testing (in conjunction with a related video). The infographic resulted directly from our comparative analysis.We diagrammed its evolution as follows:

Our takeaways were numerous. I will list the most significant:

1. For most users, the purpose was not immediately clear
2. All users indicated that navigation was a major pain point
3. Most users suggested alternative ways to present/navigate through videos
4. Participants preferred a light box vs. expanding menus
5. Participants preferred large pop-ups to describe video content
6. Participants sought additional (visual) content

For many of these, we recorded quotes as evidence to present to our client.

My teammate administers a usability test using a paper prototype.

Journey Maps

I took on the journey map because I felt like I had a strong grasp of the entire user experience. However, because I did not have a strong grasp of each user group, I settled for a relatively generic map and focused primarily on pain points related to accessing and watching videos as well as measures No Limit Generation could take (based on our research) to address those pain points.

I would be remiss if I did not point out that I really hate how Miro does not let you convert diagrams into hi-res photos without paying for the privilege. I hope it’s clear (to some extent).

Sketches/Wireframes

I did not do much sketching and wireframing for this product beyond what I have already presented. My teammates were more passionate about this phase, so I took a backseat approach and helped with the text and other details. Some of my contribution was to validate the sketches of my teammates — knowing I could not do better — and helping select the most relevant ones for our presentation/client handoff. While this is more art than science, I think I have a knack for telling a story through words and pictures.

Perhaps the most useful sketch to show would be an early iteration of a revamped sitemap for the website and its hi-fi descendant.

I will also show two versions of an enhancement to the way the training videos are presented:

Note: These are not my creations, but I contributed to developing the concept.

Mockup

It would be too much to show the entire mockup, so I’m just going to present about half of it. The key changes were to the global navigation bar and the written content around NLG’s mission. We also made sure it was clear to the user exactly what NLG offers (training videos).

Recommendations

We parsed out our recommendations into three phases. The first phase are adjustments that could be made in a matter of hours — even minutes.

• Add 3 topical categories (Protection, Healing, Caregiver Support) along with language and instructor categories
• Highlight the “Protection” category for urgency-sake
• Correct inconsistent video titles

Our second-phase recommendations are more time- and cost-intensive. These would also require skilled developers and, in the case of the last bullet point, a research team:

• Remove videos from homepage
• Create Training Videos page
• Add search function
• Put all videos in Caregiver Support, Healing, and Protection categories
• Customize code in Squarespace; add sort function
• Interview domestic, international, and NGO users of training videos in order to develop full personas and journey maps

Lastly, for long-term recommendations — requiring the most time and resources — we suggest that NLG:

• Build learning management tool on new website
• Work with developers to reduce video load
• Allow users to rate videos
• Provide advanced search feature
• Add more camera angles in videos
• Add music to videos
• Add profile capability; allow users to save, rate, and comment on videos

Although this was one of the most research-intensive projects I have participated in so far, I feel like we only scratched the surface. NLG’s users are ubiquitous and complex in their needs. It truly takes a village to support children.