Shape Up Pup!
Mobile Application
An educational and creative VR experience intended for childhood development.
Team: 2 Designers; Diane Gennity and Robin Yip
I Worked On: Client Relations, Competitive Research, 6 Interviews, Contextual Inquiry, Synthesizing Data, Persona Creation, Journey Maps, Sketching, User Flows, Wireframes, Usability Testing.
Duration: 2 Weeks
Platform: Mobile (Android + iOS)
Tools: Pen & Paper, Sketch, and Marvel
Background
disruptED is an EdTech mobile start-up creating augmented reality (AR) and virtual reality (VR) learning tools for early childhood development. Currently the VR capable book Shape Up Pup is available as a mobile application. Because the phone can be placed into a cardboard headset, the application is intended for any child with access to a mobile phone.
Existing VR Application Screen
Existing VR Coloring Game Screen
Problem Space
disruptED’s current coloring app within the book Shape up Pup, doesn’t provide ways for their users to store their creations for safekeeping. In addition, the user interface has a few shortcomings that create a confusing experience.
The Coloring Book is not easily accessible to kids within the interface, which can be limiting for the wide audience this app is intended for.
After a consultation with our client, Kate, I came away with an understanding of both her vision for this application and her mission to make AR/VR more accessible as a developmental tool for children.
Goal
Provide captivating educational material, coloring options, saving feature, and easy-to-understand navigation for Pre-K through 3rd grade children so they are more likely to stay engaged, increase attention span duration, and return to the app on a regular basis.
In addition, we also aimed to make the application special needs friendly.
Research
After meeting with our client, we quickly started brainstorming who we could potentially speak with within the time constraints and began to draft our Project and Research Plans. Once the client signed off on our scope and deliverables it was time to get moving on our robust research plan.
User Interviews
It was important to have a well-rounded group of interviewees that included both children and facilitators.
6 children (Pre-K through 3rd grade):
2 general education students
4 special education students - physical, developmental, & behavioral
4 educators:
2 educators trained in early childhood special education
2 instructors experienced in working with children
3 sets of parents with children; 2 of which have children with special needs
Competitive Analysis
Conducting competitive research on a number of existing coloring applications gave us a good idea of what the market currently offered parents, children and educators. There were elements on the apps that we classified as positive/favorable such as: color by number, multiple coloring utensils, save option, solid navigation (home button) and music.
However, there were definitely components that could be improved upon such as:
Freemium model that purposely shows the user what they cant color until they pay to unlock
Variety of tool cursor sizes; most either too big or small for a child to color the picture with
Limited selection of coloring tools
Option only to recolor, not save
Lacking AR/VR components
Current State Usability
Since we had the tech on loan, it was important to test out the application in its current state. We tested with 3 children and 2 former educators. By having our users "talk allowed" we were able to hear what was creating a pleasant experience but also any pain points they encountered.
The usability tests were extremely beneficial. Some navigation issues were uncovered almost immediately.
Contextual Inquiry
@ The Thinkery
“Kids want to try different things”
-Briseda, Early Childhood Educator
To get in the mind set of a child, it was important to see children in action so we did a contextual inquiry at the Austin Children's Museum (The Thinkery). I wanted to learn what kids gravitated towards, what games they were playing with and even see how the rooms were laid out for them.
The trip really solidified the concept of having multiple “stations” which are good for when children:
Want to interact freely
Want to try different things
Don’t have long attention spans
Get frustrated with what they are doing
Don’t pay much attention
Analysis
Affinity Map & Key Takeaways
Once we had completed our research, it was time to make sense of everything we had gathered. We wrote down our findings and grouped them to identify patterns/themes.
What was revealed:
Buttons -Missing labels
Coloring Options - Eraser, marker, etc.
Navigation Confusion - A view where you can see all options
Concentration - Stations for kids’ attention span
Improving Engagement
Music = Sensory Experience
Personality/Ownership
Persona Development
This was my first time creating personas of children. The needs and wants of a child are very different than an adult. They also don't have the same type of long term goals/aspirations!
What was important to consider while developing both the primary and secondary persona was to focus on:
With who a child would share the application
Anticipating the needs of a variety of children before they get stuck or frustrated
Keeping children engaged with the gamification of learning
David's Journey Map (Now)
As you can see in David's journey using the app in the current state, the experience is compromised by unclear navigation, buttons and limitations with the coloring game. This leaves David feeling uncertain about what he was just doing and where to go next.
David's Journey Map (To-Be)
In David's journey to-be, he has more ownership and a clear understanding of how to locate games he is interested in but also get back to where he started. In addition to this, the coloring game provides encouragement and advancement to more levels which keeps him engaged.
Design
Sketches
Designing for VR was a new challenge! I now had a 360 degree stage and 3D designs to work with. When thinking back to the concept of using stations in the interface, I can actually design a room for children to interact with.
I noticed when using the VR application, adults were more likely to turn the full 360 degrees while children stayed more in the 180 degree view. It was important to consider the possibility of simulation sickness and disorientation when designing which is main reason I moved the existing "Recenter" button from the ground to above the characters.
As we moved into the design phase, my teammate and I took into consideration the following:
disruptED style guide
Existing and needed iconography
Competitive analysis
Prototype
The first prototype we created was with wireframes. We had planned on a first run with a paper prototype but, due to time constrains and the availability of our users, we think we made a wise choice.
Usability Test Results
We were able to do usability testing with 6 children; 5 of which having at least one physical, developmental, or behavioral special need. Usability testing with children was a unique experience for me as at times you could sense the child needed encouragement to answer however they wanted to.
Ultimately, we were very happy with the results. The prototype was intuitive and the children were able to make it thought all 3 flows.
One of the biggest findings was the confusion of the term "Gallery" for saved art. We learned after talking with the children that the special place used to store important papers and art were folders.
Iterated Designs
Based on our usability test results, the following changes were made:
Made stations clickable - moved “button” onto table
Swapped our "Freestyle Color" for “Color your way”
Added page #’s on Color Sets page
Changed “Gallery” to “Saved Art”
Added “Level 1, 2, 3” to Description
Added confirmation that level was complete
Added easy-to-understand text instructions for Color By Number level
Solution
Hi-Fi Prototype
We had the opportunity to work with our client's graphic designer who breathed life into our wireframes. The designer did an amazing job with the key hi-fi screens we asked her to mock up in one day. It was a great experience explaining our designs and discussing revisions.
Designed by Edna Gamboa
Designed by Edna Gamboa
Design/Time Constraints
Due to the quick turn around, the graphic designer was unable to create a 3D model to render the Stations Screen as hoped. However, the design below is definitely an improvement because now each activity has its own dedicated "hub." Whereas before, a user would have to access the coloring book while in the story and the games were hidden on the third page of the book.
Designed by Edna Gamboa
Next Steps
Since our two weeks flew by, there was so much more worth testing based on our research and user feedback. Our client, Kate was extremely happy with what we uncovered and would also be interested in us testing the following:
Add a subtraction level
Incorporate upbeat music to coloring app and games
Remove color cubes from spacesuit and conduct usability tests
Game Station: Look into creating a Build-a-Robot game (because the interest was there)
Storybook: Update “Repeat” to “Replay”
Subscription model keeps children excited vs. Freemium model
Retrospective
I think my partner and I shared a common enthusiasm for this project. We both recognized the importance of enhancing the existing product for both general education and children with special needs. She and I worked together in person, as well as had check-points via phone and slack over weekends and while she was out sick.
We also collaborated on client emails before I sent them out. This helped us stay on-top of the client and kept us both in the know during each stage of the project.
Other things that went well:
Competitive research strong and extensive
Client Style guide review and collaboration before building wireframes
Willingness to do usability testing up until the very end
Thoughts for next time:
In hindsight, I would have recruited twice as many interview candidates. We were fortunate enough that all the ones we reached out to were available or made themselves available but next time I would reach out to more.
If there was more time, I would have liked to work with the graphic designer sooner to learn design constraints. It also would have been great to speak with the dev team to get a better sense of what our direct hand-off would look like.
If you would like to learn more about my client and her company, visit https://disruptedx.com/