Emma Xu
emmaxuportfolio
Published in
8 min readFeb 7, 2019

--

My mom is my hero.

She raised me on her own through my late childhood, my adolescence, and my early adulthood. I saw firsthand how difficult and challenging things were for her, although I didn’t always understand them. So, when my design team was approached with the challenge of helping single parents earn a better income, the issue felt very close to home.

Problem

40% of single mothers are low-income or unemployed. This percentage becomes even more staggering when you realize that, of the approximately 12 million single parent families with children under 18, more than 80% are supported by single moms.

That puts the number of low-income or unemployed single mothers at around 4 million in the U.S. alone.

4 million.

Yeah.

Goal

Design a website application that provides resources for single low-income mothers to obtain a better income.

Process

I decided to approach the challenge by implementing the “5 stages of user experience” by Jesse James Garrett. It was important for me to reflect on all of the ways that users would be interacting with the website.

I began by outlining my team’s strategy.

Figuring out where to begin

The challenge that my team was presented with was relatively broad, so I knew that in order to maintain efficiency and prevent burnout, we had to narrow it down. In order to try and solve the problem, it was critical that we understood it. I poured through the existing research, looking through literature reviews, psychological studies, and sociological studies.

And, by the end, I still didn’t know...anything.

I needed to know about the life and day to day of a low-income single mother:

  • what they found stressful
  • what they found joyful
  • their aspirations
  • their frustrations

I realized that no matter how much psychological or sociological research I did- how much I poured over research study after research study- I wasn’t going to discover anything about our users without talking to them.

So, I did.

User Interviews

In total, my team and I talked to 16 single mothers who came from a range of diverse backgrounds.

Here’s what we learned.

Of all the moms we talked to:

Key Insights From User Interviews

Narrowing it down

From here, we began to analyze the raw data from our interviews.

We started picking out patterns- identifying pain points and goals as a team. Interview after interview, 3 key points kept jumping out at me.

The biggest obstacles preventing single mothers from obtaining a better income were:

We knew that better jobs were linked to better incomes. But how could we help single moms obtain better jobs when one of the biggest obstacles standing in their way was a lack of qualifications? After some additional research, it dawned on me.

The key was an education.

According to studies by Georgetown University and the Pew Research Center, college grads earn $1 million more in a lifetime and $17,500 more in a year than high school graduates.

This realization helped us determine our scope. We strived to create an online resource targeting the needs and struggles of single mothers to help them get a better education.

Persona

90% of single moms we spoke to mentioned struggling to balance family and work so we knew we wanted to keep that fact at the front of our minds while designing.

To help build empathy and more easily visualize our users as real people, we created a user persona.

Her name is Susan.

From there on out, I ate, breathed, and slept Susan. I used her to determine the direction and vision for the project. Every design decision from this point forward was made to help Susan achieve her goals and decrease her frustrations.

Information Architecture

Let’s face it. When you’re running on 4 hours of sleep, you worked all day, and kids are screaming in the background, if something isn’t easy, you’re not doing it.

I knew we had to make the process of searching for and applying to schools less overwhelming and time consuming than the current available options, so our information architecture and flow was absolutely critical to get right. I collaborated with my team to construct a user story map. Together, we established our minimum viable product (or MVP) and came up with a few backbone tasks that were high on Susan’s priority list.

Susan had to be able to

  1. Find and browse through college programs related to her availability and interests.
  2. Obtain support and guidance.
  3. Apply to college programs.
Our User story map with MVP line

I translated the first iterations of the website’s structure into a user flow map to ensure that our hierarchy was correct. Flows are like a conversation. The design speaks and the user responds and this continues as they move through the flow of the application (and is there anything more annoying than trying to get answers out of someone who isn’t straightforward?).

I broke the user flow map into specific user tasks to keep it from getting too convoluted.

User flow for logging in

I wanted the architecture of the website to be as predictable and easy to use as possible.

Sketching the way there

A little friendly competition goes a long way. The members of my team and I challenged each other to come up with the best version of each page of the website. I started by sketching 10x10’s in a process I like to call “concept vomit”. I sketched whatever came to mind and then iterated until something began to take shape.

Concept Vomiting…collaboratively

Afterward, we came back together and discussed each version. We went over what we liked about each page, what Susan would like about each page, and what didn’t work.

Like Robocop, we picked the strongest features from each of our individual sketches and constructed the first set of low-fidelity wireframes.

The first iteration of wireframes

At this point, the members of my team and I split off to complete our own versions of the prototype. Using our low-fidelity wireframes, I started conducting user tests right away.

User Testing

Have you ever been to the grocery store and had an employee scream at you to join the membership program before you even got through the door?

No, of course not. Because that would be ludicrous.

So, why do so many websites function this way?

Here’s what I found :

  • Users were irritated by being asked to sign up for the service right away, so I knew that we had to provide them with as much value as possible beforehand.
  • The search bar on the explore page was too big. Users were unsure of what to even search for and its place in the hierarchy was distracting.
  • Having program information in a drop-down format was overwhelming and cluttered the interface.

Here’s what I did about it:

  • Instead of prompting for account creation right away, I pushed the sign up process back until it was absolutely necessary for users to either save their favorite programs or quiz results.
  • Initially, the search bar was given too much hierarchy, I opted for a filtering system right away to help them get started.
  • I removed the drop down functionality and instead took users to a “School Profile” page with program information and a cleaner, more readable interface.

Key Insights

  • Provide users with value before asking them to sign up.
  • Always make sure users know where they are and where they can go. Uncertainty breeds frustration.
  • Using drop-down menus appropriately. Failure to do so can create interaction friction and make for a less pleasant experience.

Color

A bright color palette, dominated by bright red and soft blues, helps establish an authoritative feel without being cold.

Primary Colors
Secondary Colors

Tone

I wanted the tone of voice for Belay to reflect its core message: You can do this.

Guiding Principles

  • Straightforward and easy to understand
  • Familiar and encouraging
  • Informative and audience driven

This is Belay. An education resource targeted specifically toward the needs and wants of single mothers. The objective of the interface was to keep the atmosphere fun and approachable. This was achieved through the use of bright colors and the generous use of visuals.

Blog and Sign up modal

It was important to me that the site was informative and straightforward but still welcoming and warm.

Conclusion

My team was presented with the challenge of designing a web application that would help low-income single mothers obtain a better income.

We presented Belay.

The project required me to think outside the box, design quickly, and reiterated the importance of a well thought out strategy in the final success of a product. In addition to this, working on this project has taught me a lot about working on and leading a team of creatives. Though it wasn’t without its challenges, I gained a lot of insight into the power of proper communication and learned that a little patience goes a long way.

In the end, the problem is multilateral and there is no easy one-stop fix. I sat over dinner with my mom one night and talked to her about the project. Her face lit up. Being a single mom in college felt impossible at times, she said, but being a mom was what made it worth it.

The obstacles that face single mothers in the United States are broad and far reaching. But so is design. With continued testing, iterations, and creativity, the solutions are well within reach.

My mom getting her Master’s in Teaching and Education! Go, her!

I felt incredibly lucky to be a part of this project and any feedback is greatly appreciated!

Thanks for reading!

--

--