UX DESIGN CASE STUDY

Nurtured By Design:

Educational Tablet App

Nurtured by Design is a neonatal ergonomics company with products designed to improve the mental and physical well-being of prematurely born babies. For a User Centered Design course, a prototype iPad application was produced to educate parents about premature birth healthcare and supplement training on how to use these products.

Defining the Problem

Premature births create a very difficult situation for families. Parents may be unaware of the health risks and effects from pre-term births. The KangarooZak and Zaky are two products designed to supplement a process called Kangaroo Care. It promotes skin-to-skin contact and is supported with empirical evidence of improving a baby's physiological and psychological state. Parents need to be taught by a Certified Kangaroo Caregiver how to use the products. While using the KangarooZak, they are required to sit in place. During this time, parents could use an iPad to learn more about pre-term health, Kangaroo Care, and as a refresher on how to correctly use the KangarooZak.

Users & Audience

Our primary users were the parents of the premature babies. Both mothers and fathers can use the KangarooZak. Due to their difficult situation, we did not have an opportunity to meet with them. To get an idea of who our users were, we had presentations from our subject-matter expert, Yamile Jackson, PhD (product designer and CEO of Nurtured by Design). She shared with us her research, company goals, and her own experience with her son who was born prematurely.

We were also granted a trip to the Texas Children's Hospital's Neonatal Intensive Care Unit for a simplified contextual task analysis. The hallways were lined with artwork for children and inspirational messages. The rooms were dark, warm, and mostly quiet. Some areas were affected by noise from the ice maker and air conditioner. Computers were readily available for the hospital staff. It was an emotionally draining environment. We only experienced a sample of their experience being surrounded by walls full of medical equipment. The app needed to be usable here, and hopefully be able to relieve stress.

Both mothers and fathers can use the KangarooZak. Between the presentation and visit, user proto-personas were created for both groups. They helped serve as a reminder and reference, to put a hypothetical face to a person. Details included in the app needed to be accessible offline and easy to use for varying computer/tablet skill levels. The parents would also most likely be exhausted or drained, so their attention, memory, and comprehension needs to be considered as well. Creating these personas helped us imagine different hypothetical scenarios that the app would be used in.

Team & Role

Our class was partnered with Nurtured by Design to produce a prototype educational iPad application. The iPad was chosen because local hospitals have been applying for grants to obtain the devices. I was focused on visual design and prototyping, while my partner Carlos Lacayo, was focused on developing it. We both worked together obtaining user requirements and the context of use.

Constraints

The primary constraint is not being able to gather user requirements and conduct usability tests with the mothers themselves. It is an understandable limitation, they are going through a stressful and emotional time. Another major constraint is not having the lessons already planned or written. With this app only being a proof of concept, they did not exist or were in a format that was not readily available (for example, a topic may just have a short video on their website).

Design Process

Usability and Business Goals

Before any prototyping started, we defined the usability and business goals. Since there is a wide range of computer skill levels, we stated that an accessible design and layout is needed. Ideally, the app would have text sizing options and the ability to translate to other languages. Occasional access to the internet would be needed for app updates, but Internet access should not be needed for cached information.

The primary business goal of this application is to spread awareness and educate people of Kangaroo Care and preterm birth healthcare. It should be an immediate and obvious resource for Nurtured by Design products and knowledge on premature babies. The application should also reveal the care and commitment of the Nurtured by Design team, who did not have a commercial marketing department. They provide two flexible products that could be repurposed in many ways, saving costs in medical equipment. The Kangaroozak and Zaky are also backed with empirical evidence showing their effectiveness compared to other similar devices and products.

Wireframes and Prototypes

With some technical limitations outlined, such as the device and its orientation, I was ready to begin sketching out a few pages. I wanted the layout to have similarities to e-learning and wiki style websites to give the users some familiarity with digital educational resources. First time users should not be confused with where to find their content or changes to their settings/preferences. These settings should be separated into basic and advanced, to help out less experienced users while still catering to advanced users. Knowing that there is only one variation put me at ease. I hoped that it would reduce the amount of edge cases from differences that may exist if other device sizes and operating systems were involved.

I was anxious to get started on higher fidelity prototypes. Although they are not yet interactive, it starts to feel real and exciting. In retrospect, I should have spent more time working on layouts for specific types of lessons, seeing as that that is the main purpose of the app. I knew the visual design required following iOS guidelines and fitting with Nurtured by Design's branding. I used their brand’s blues and complementary shades for smaller embellishments. I was hoping that sticking with a monochromatic blue look would help it look calming and soothing. Green was chosen as a contrasting call to action color. In light of prototype editing, Photoshop was chosen because we were both familiar with it. Page by page, the app started to look ready.

Starting Usability Testing

Carlos used my mockups and Photoshop project files with XCode to develop an interactive version. The pages were still static, so custom logins and module progress were nonexistent. However, being able to freely navigate between pages using a tablet instead of simulating with a mouse would definitely still help us identify usability issues. We brainstormed research questions, created tasks, and wrote a test protocol to stay consistent. Convenience sampling was used and we had three participants test our first iteration. The sample size was small, but they were UX students, so it ended up acting as a bit of an expert review. I was thankful, as the commentary was focused on the information architecture and navigation, revealing pain points that I did not anticipate due to being so familiar with my own design.

Onto to the Next Version

Certain areas needed to be addressed. One embarrassing oversight was that the purpose of the app was not clear! A new logo was created specifically for the app instead of just using Nurtured by Design's. A few icons were changed to more conventional ones and changes to the copy were made to clarify the navigation. We wanted to add a few more pages or try a new layout for A/B testing, but unfortunately did not have the time. Following the same test protocol, we had six more people volunteer to help us evaluate our design. This time the purpose and functionality of the app proved to be clearer, though troubles still existed. There were more minor usability issues identified with this round, like certain text input fields may be difficult to select or some text needed better contrast. These were easily adjustable. We revisited the design and addressed some of those issues.

At the end of the semester, the teams presented their prototypes to the class and Dr. Jackson. Although there was not an official opportunity to continue working on the project with Nurtured by Design, having a chance to have deadlines and apply coursework to a real company and product proved to be very helpful in learning the material. If the project gets picked up, it would be beneficial for the development team to have access to our data and process documents. It can be reused or revised to complete future design and development goals.

Lessons Learned

UX Research Informing UX Design

While writing this case study, I was glad to know my knowledge of UX design has grown, even though my recent professional experience has been focused on UX research. Working with other designers' creations, I am able to avoid the bias that may occur when one attempts to validate their own design. This allows me to focus on analyzing the information architecture, navigation, and language used in the copy.

When I was a student, I was definitely more focused on the visual side of things. I spent too much time trying to achieve realistic, pixel perfect prototype pages that limited the amount of pages that could be created in time. Carlos and I also dedicated little time in the actual content: the lessons and material that would be taught. The content can easily affect the layout and navigation. Would KangarooZak instructions benefit more from having videos? Or do our users want videos for learning about pre-term health as well? That aspect was not clear in the development of this prototype before running our user tests and developing new iterations.

Understanding Scope of Work

Initially, when Carlos and I were brainstorming about the app, we were very ambitious about the scope. We wanted to involve doctors, nurses, scientists, along with the parents. The app would solve everything! We hoped for nurses having the time, ability, and permission to push updates about the baby's health (then we learned about the complexity of HIPAA compliance).

After graduating and working in the field, I learned more about what is feasible depending on the time, team, and budget. We imagined the app’s content being able to adapt to education level and being provided in multiple languages. That would definitely be a whole new ballpark, involving ethnographic research. If we could continue the project, I would definitely like to be able to be in contact with our actual users, and have them explore our prototype. Working with the website's designers would also be beneficial, so the user would have a more unified experience.

In Closing

This project marked my transition into understanding the differences between user experience design and graphic design. There were beginner mistakes and pain points that interfered with following the user centric design process, but the project still provided me with valuable experience and taught me lessons that help me to this day.