Storyboarding, Wireframing, Prototyping, UI design
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.
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.
This ambitious 5 week project had tight deadlines and we had to work efficiently and collaboratively to finish a successful prototype by the deadline.
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.
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.
Next I created a story flow to visualize how everything may work together. (Images are blurry due to sensitive information)
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.
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.
“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.
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.
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.