H.E.A.L.

Case Study

Client

Benten Technologies

Role

Product Designer

Methods

Storyboarding, Wireframing, Prototyping, UI design

Overview

Myself and 3 other designers worked with the client to help design a prototype for their product in development. We were given 5 weeks to meet with the company and work together to design the final prototype. Due to the project being in early stages of development, I am only able to show snippets of the project.

Problem statement

Obesity among children is an escalating problem.  A lack of healthy eating and active living (HEAL) is the leading contributor to childhood obesity and there are various barriers such as cultural norms, lack of knowledge, lack of role models and safety concerns of neighborhoods, that prevent African American girls from adopting HEAL practices.

Goal

To create a fun and informative app that educated young girls about the HEAL philosophy (Healthy Eating, Active Lifestyle) through observational learning and effective role modeling using a doll and an animated video series with reinforcement from primary caregivers. The specific goal of the project is to Develop a prototype of the program with a smart doll, animated video series, and a mobile app, initially for overweight/obese AA girls between the ages of 4-8 years old.
Scope

This ambitious 5 week project had tight deadlines and we had to work efficiently and collaboratively to finish a successful prototype by the deadline.  

Deliverables

  • Initial design based on understanding including: 
  • Customer journey map
  • 3-5 Themes – One per team member 
  • Draft Storyboard for 2 Themes
  • Interactive Wireframe in Figma 
  • Second iteration of interactive wireframe based on feedback from focus group testing and feedback

We can do it together!

warm up

The first meeting with the client was focused on how to approach the idea? The theme of the program would be based around travel and maps which was confirmed by focus testing done prior to our project.

Idea Train

First we came up with some ideas: We would brainstorm individually then meet via Zoom to present ideas and provide feedback.

It was easiest for me to work in bullet points and separate everything by category to make sure we were including all the different aspects that the client needs. Each person on our team tackled the approach differently and we would meet together and discuss what worked and didn’t work and together create a solution.

How to show big picture?

Next I created a story flow to visualize how everything may work together. (Images are blurry due to sensitive information)

Narrowing the ideas

The client then asked to see the “big picture” and wanted to visualize it more. So I took the feedback they gave me on my storyboards and created a visual storyboard from the story flow to help them see the idea more realistically.

Designing more than just an app


An important aspect was making the application interactive and encouraging girls to interact with the doll throughout the day. So it was important to consider how she would interact with the doll outside of the app. 

The client also wanted to reinforce good habits and extend the motivation outside of the app.

Story promotes meaningful engagement

“In market research the client discovered that many of the app based learning products did not include any story and the children expressed that they wished they had it.” 

So it was important to highlight this. We developed the story of a traveling market and the girl and doll travels the country to collect food to bring back to their product market.

Initial design thinking

The first wireframe was a good start as I was able to receive great feedback to work with. One of the major concerns was making sure that we focused on healthy eating and not just exercising. So we gamified the interaction and made it reward based to motivate kids to learn more about food. This was done with making a fun passport to stamp and the girl gained coins from learning about the food to buy it for her market.

This screen would be interactive and the idea was the girl would be able to tap and stamp her passport.

The girl would earn coins by participating in exercises.

This screen showcased all the places the visits, and showing that some of the screens are Locked ideally would spark the curiosity for the girl to keep progressing through the program.

Preparing for testing

We met with the client twice a week to gain feedback and kept revising the wireframes as we progressed towards the final product. I even gained a new skill at this step when I learned to import animated gifs into the prototype for a more realistic experience for the children.

We had built a working wireframe prototype in Figma by the fourth week. The client felt that kids wouldn’t react as well to a black and white prototype so requested in our last week that we create a colored version to make it as fun and engaging as possible when the app goes into testing. The prototype was presented to the client who was happy with the product.

Next Steps

Our prototype will be presented to a predetermined group of girls for them to interact and play with this app. Although we won’t receive the results, the client will gain useful insight as they continue with their project.

Conclusion
This was a great learning experience since we were pushed to think creatively and outside of the box. We went beyond just UX and UI Design and helped design all the interactions surrounding the mobile app. We had to work as a team and find a balance between bringing our own individual ideas and merging ideas with feedback to make design decisions that were best for the product as a whole.

More projects