Social Design Challenge Backstory
Every night across the world, hundreds of moms and dads have children in hospitals being treated for serious illnesses. Often times, these hospital stays are for extended periods of time. In large part, the children are taken care of as they are the ones needing the help, yet the parents still have to eat, sleep, and keep things afloat back at home during this difficult time. What could possibly be done to help these parents?
Myself and a colleague took on the challenge to find a way to help these families, in particular, the parents, during this emotionally and financially stressful time. Below is my design process and the role I played in the creation of the native Android app, MEND.
I feel it’s necessary for any UX designer to understand their UX process. You may find your process is similar, or that you’d change mine up a bit, but I believe this was a strong, structured approach to this design challenge.
Step 1: Empathize
- Assumptions & Research
- Build an Interview Schedule
- Conduct In-Context Interviews
Step 2: Define
- Create a Persona
- Produce a Creative Brief
Step 3: Ideate
- Generate a User Story Map, User Flow Diagram & Sitemap
- 10x10 Drawing Method & Sketching Phase
- Low-Fidelity Wireframes & Prototype
Step 4: Design & Prototype
- Implement a Style Guide
- Hi-Fi Mock-Ups
- Prototype in InVision
Step 5: Test
- Conduct Usability Testing
- Ideate, Refine, Test Again
- Project Impact & Outcomes
- Special Thanks
- Design Toolkit
Step 1: Empathize
Assumptions & Research
First step — to hit the ground running by establishing what was known about the issue, what wasn’t, and making assumptions. The realization soon came that many programs were in place across the country for parents in regards to food and housing during their stay at the hospital. A little “outside the box” thinking and brainstorming was needed to come up with more creative ways to help. After writing down ideas, the information was transferred to Trello to collaborate, keep the information in sync, and on task.
Aside from just assumptions and unknowns, a project like this won’t go anywhere unless you start talking to people. In addition, asking the right questions was absolutely critical to the research process. An interview schedule for both the interviewed parents and professionals was carefully crafted. Below is the schedule for one of the parents that agreed to speak to us about her time with her son in the hospital.
Interviews were conducted in person and via Skype with parents facing different challenges. I conducted the interviews and my teammate recorded them. I felt we were able to truly empathize with the parents and felt, in part, some of the real-world struggles they face with their children. The interview process quickly taught us two important things:
- These parents needed motivation throughout their day to keep them going
- They had a lot of things to get done at home, yet had a hard time asking for help (Sound familiar? I swear, we all struggle with this!)
Step 2: Define
Build a Persona
Based on the information that was collected from the interviews, a persona could then be built to better understand our user, their goals, motivations, and frustrations. This persona was kept at the forefront of the design process throughout the remainder of the project.
Produce a Creative Brief
The Creative Brief was an essential part of the UX process. It was used as a critical outline for the app and was forwarded on to local hospital administrators in Utah to elicit their help with the project.
A side note should be made here that while we did send this brief to local hospital administrators, and they were ready and willing to help us, time didn’t allow for us to reach out to them during this project. If I had more time to pursue this, they’d be the first ones I’d reach out to!
Step 3: Ideate
User Story Maps
Fun and silliness must abound at some point during the UX process, right?
It was a blast to start seeing the project take shape on paper and in Sketch when moving to the user story flow and sitemap. An MVP (minimum viable product) was established and I could see the direction the app was headed… and it was awesome!
The app was to focus on helping the user accomplish three MVP tasks:
- 1st: The dashboard of the app should be an area where the user receives daily inspiration through quotes and uplifting messages
- 2nd: The user should be able to create tasks, much like common to-do list apps, but with one caveat — it’s not for the user to complete these tasks! They should be able to share the tasks and allow for someone else to do them
- 3rd: The user needs a profile area where they can keep family and friends up-to-date about the condition of their child
10x10 and Low-Fidelity Sketches
Drawing, drawing, and more drawing! Did I mention drawing? Using the 10x10 method to quickly generate ideas, we collaborated on our favorite ones that best accomplished the MVP goals. I transferred them to my Dotgrid notebook in a little higher quality. Below is just a sample of the many sketches I cranked out during this step.
During the wireframe process, I tinkered with Adobe XD for a bit but ultimately kept feeling drawn to design the wireframes in Sketch. I tried to keep it simple, but also had to keep in mind that the end product needed to follow Google’s Material Design guidelines.
It would be appropriate to mention here that even though I wanted to follow Google’s Material Design guidelines for Android devices, I was still learning best practices. It wasn’t until later in the high-fidelity stage that I learned better how to implement and design to these guidelines.
Step 4: Design & Prototype
Implement a Style Guide
A project like Mend really starts to hit home once you see the pieces coming together. A style guide (using the Craft library plugin in Sketch) was created for the app including colors, font choices, grid layouts, and copy for the app. The logo I designed for the app utilizes a simple font and subtly embodies the concept of sharing with the three dots in the typical sharing icon positioning. I’ll go over the sharing aspect later, but thought I’d clarify here since it was included as part of the style guide creation.
With the style guide in place, the process of bringing the app screens to life could begin. As this was being designed as a native Android app, adherence to Google’s Material Design standards for color, sizing, objects, text, and more was a must. It was undoubtedly a learning process, but I soon realized that within the inherent, restrictive guidelines of Material Design, it also exposes you to a whole lot of freedom, possibilities, and fluidity in design!
Prototype in InVision
InVision was used both in low fidelity and high fidelity mockups to help the app come alive and test further for any missing elements or awkward-feeling screen flows. The InVision prototype below allows you to test the app live in both modes (give it a sec, I promise it’ll load!)
Step 5: Test
Conduct Usability Testing
Initial tests showed an accessibility color issue. The color scheme had to be tweaked slightly to accommodate those with colorblindness.
Further tests and discussions about the direction of the app also revealed a powerful concept. Even though the app was geared toward solving a social challenge for parents in our initial discovery process, the app could serve a broader purpose.
What about family members who lose a loved one and need help completing their day-to-day tasks while they deal with the funeral, planning, and grieving? What happens when you fall down the stairs, hurt your back, and can’t take care of things around the house? Mend, this app, could help in these situations! If you remember from earlier in the case study, the caveat that set this app apart from being yet another t0-do-list app was to encourage the user to create tasks, share them, and let someone else complete them! This was one of the most exciting discoveries during usability testing!
Ideate, Refine, Test Again
Adjustments were made to some of the screens in Sketch based on the feedback. Updates were made to the InVision prototype to reflect those changes.
I struggled at first adhering to Google’s Material Design guidelines and had to revisit many of my screens in Sketch. It was a little frustrating, but I learned a great deal about grids, spacing, color, fonts, and more by holding true to those standards and refining my own designs.
Project Impact & Outcomes
A few powerful insights surfaced during the five weeks given to complete this project.
- Not Another To-Do App: We realized that this app could be used for anyone going through a difficult time. Instead of just parents with children in pediatric care, what about families dealing with the loss of a loved one? What about someone who just went through surgery and needs help accomplishing tasks around the house? What about elderly folks? What if you get hurt at work and need some things done around the house? We now realize that the goal of this app is not to be just another to-do app, but to encourage people to create a task, then ask for help in getting them done.
- Empathy Rules: I have become emotionally attached to this project! For me, this happened during the research and interview phase. Sitting down with those moms and listening to their struggles tugged at my heart strings. I found myself staying up late coming up with ideas and refining current ones. My commitment to this project was like nothing I had experienced before and this was exciting! If UX is about people and solving real-world problems, then this project epitomizes user experience design beautifully.
- Never Enough Time: Unfortunately, this was an enemy to the project. This app has yet to make it to the development phase. I have spoken with developers about the app, and while they say it is doable, time hasn’t permitted. One time allows, I look forward to having a working product that can be handed to these moms, and others across the word, to help them during their most difficult times.
- More User Testing, Lots More: If I could go back through today and begin the process over, I would test a whole lot more. I’ve learned in the past few months how useful testing is at every phase of design. While I believe a great concept has been brought to life here, only through user testing can that be validated.
There’s no way I could have done this project alone! My team member, Beverly, was a rock star through the whole process. Check out her work at: beverlykodos.wordpress.com
With so many resources at our fingertips, we had to pick the best and get moving on the project. I love learning new software! Here’s a full list of the technology we used to complete the app:
- Trello, InVision, Sketch, Slack, Slickplan Sitemaps, Balsamiq, Adobe XD, Adobe Color Wheel