My Role: Product Designer       Client:  Whyzz      Year: 2018 ( partially-shipped ) 

Tools:  UX design, strategy, mind mapping, Adobe Illustrator, Adobe XD
Deliverables:  Prototypes, Strategy, Character development, UI/UX for IOS app & webgl
Lead Developer:  Hermes Frangoudis 

Through an iterative process, I designed a proof of concept tool for both children and parents to learn together through a variety of mobile educational games by using the power of computer vision, ai, and augmented reality. The content would be related to that specific destination, such as NYC, but through a universal user interface container. 
Web - webgl - UI screens for IOS by Jae Salavarrieta

UI screens for the webgl version in the browser

The Whyzz Explorer Story will be a platform for young explorers, children 8-14 years old, to gain an appreciation and understanding of the people, cultures, and countries in the world around them. Interactive games, an extension of the website, will be the vehicle for knowledge and growth. Through each game and challenge explorers will be rewarded for their progress with points and badges to represent the knowledge they have gained. 
paper Design Iterations for whyzz explorer app

Sketching out multiple design Iterations and organizing the information for whyzz explorer app

What problems are the users turning to our product to solve
When it comes to traveling with children, parents are often overwhelmed because they fear kids will get bored or might not get anything out of a sightseeing trip. Rather than using this precious time to bond, some children are turned to mindless phone apps to quench their boredom. There are so many kid's related mobile apps but many keep them glued to the screen rather than engaged with their current family activities. How can I help children to become more involved in family activities through their mobile device? How do I make sure this is all tied together with the main platform - 
Typical Family on an Outing via thinkstock
Digging deep to the core that matters
 More then just a solo interactive app, I also had to define the overall strategy of the platform and connect it seamlessly with the mobile experience. The platform is mainly a online news outlet focusing on more mature global topics for parents and children alike. From doing various interviews, it was clear parents were the main drivers when it came to deciding what is allowed on mobile devices for children 8-14 years of age. 
So I needed more than just knowing about children's activities, I needed to know the  behaviors and patterns of the parents as well. I distributed a detailed questionnaire form ranging questions from their personal lives, internet activities, devices, global topics, traveling habits with the family, and their own child's activities. ​​​​​​​
At Home
It was shown that about 48% of participants were not familiar with the term "global citizens" and even more disturbing was that 65% spoke very little or not at all about it to their children. Many parents felt they were "too young" to discuss global topics and felt 5th - 7th grade was more of an appropriate age to start conversing. Which shows we need to show specific age content to help target those younger ages where parents don't know how to engage in more mature topics with their children. 

While Out With Your Family
Who's voice is prominent in family outings? I wanted to discover which family member were the decision makers in family activities. A lot of families do let their children have a voice in most activities and are eager in suggesting things as well. But many are worried if they are fully engaged since most are distracted by their own entertainment on mobile devices. Even knowing things about their typical traveling party is very useful when creating content for multi user games so to include other family members. Since every family is unique.  About 66.7% of participants do travel with their or their spouse's/partner's parents and another 28.6% of them will travel with their children's aunts/uncles. 

Children's Activities
There are currently a lot of children brand content, so we need to know which brands and games are currently prominent with 8-14 years old. Not only to know which ones stand out but what aspects do they seem to like/dislike as well. I found that 62% of our participants (parent) are the main decision maker when it comes to selecting a mobile game/app for their child. Which confirms the audience we need to include when creating educational and inclusive family friendly games related to to their everyday activities.

Examples of questions given to adult participants

Competitive Analysis
I took time to learn about the landscape and other brands' strategies. Not only from children's education learning sites but also from blogs, online games, and learning feeds.
• A lot of restrictions and rules under COPPA
• A lot of the toddler designs/interfaces are kept the same for older children
• Tracking progress not only for the parent but for the child has proven to be very popular and in-demand.
• Any "create your own" sort of activity is popular
• Almost all children online games or education centers are integrated with a bigger system (LMS) that makes up for a lot of their content such as going to google classroom or Clever so in a way to make a more secured system so they can create accounts under the supervision of a parent or school. A system to keep out online predators as well.
Weighing in the user needs vs the business wants
Since it was unconventional way to showcase a brand through a game before establishing the platform, my first major hurdle was planning out the overall brand strategy and lay out the information architecture. Since a lot of things like payments and and parental controls will effect design choices later on in Whyzz Explorers app. So working with the client, we first defined the overall reasons, drivers, audience, competitors, tone, and message. 
Finding the right tools to use became the second major UX hurdle since we wanted to deliver a fun, unique, and engaging interactive experience while leveraging the latest tech. My developer and I had to determine together through research and recommendations for the best tools to use. It's important though that content is what delivers with the tech supporting or otherwise the tech will having no purpose and be no different than a marketing embellishment.
Also showcasing with webgl through a browser instead of developing through a standard app, I had to rethink the workflow since the Whyzz Explorer is only accessible by mobile.  Keeping in mind that most parents don't want their younger age children browsing the web on the desktop, so to get their quickly and surely they can scan or print out the code whenever they wanted to access site under their associated account.

Webgl Mobile Flow

Designing for the browser vs an app experience are also called for slight changes in the interface such as compensating for default nav bars. Showcasing an experience in webgl is much more alluring for small budget projects since it's much cheaper, quicker and can execute AR without the arkit or arcore. Of course their are other advantages, but by request I had to design for both experiences. 
A) Default Mode - Initial
  • search bar and bottom browser bar
B)  Initial + Scrolling
   •   1 - Another example of the "Menu" button in the most optimal place despite the browser bar, but the browser bar is only visible when not scrolling
    • 2/3 - Menu button can expand on the bottom, but height placement depends when users are scrolling or on initial start
C)  App
    • Menu would follow the most optimal placement, which is the bottom

The third UX hurdle was the content strategy.  How to design it efficiently and orderly to easily integrate new content as it arrives? Having an interactive and meaningful experience for AI/CV/AR requires a lot of production. Since this was an early showcasing for investors, we wanted to focus and shape the content that already existed so we can create a good foundation but keeping in mind future content. Since the client wanted to have her future team to be the most minimal while leveraging CMS,  I needed to design a universal template but without sacrificing design. ​​​​​​​

I used a 3 tier system that better organizes the workflow of current, activated, and future components

Enabling an easy and fresh way to sort and add future content without disrupting the current design. Having a timeline also allows transparency with the investor and it shows your investment in the project.
Collaboration is the key to success
It's easy to fall into that trap of assuming to know what users want through what is trending and popular in technology. It's a critical time to explain to clients on why its important to validate design choices with users and work on solid content. Working with new and evolving technology, there are no room for assumptions and if you want to create something revolutionary then you can not follow trends or just make things for the sake seeming cool. If I had not researched in the users behaviors and patterns then I would I have focused solely on the child's needs rather than exploring ways for parents or other family members to be more involved.

You may also like . . .

Back to Top