Looking Lens Kids
#REPRESENTATIONMATTERS
UI Design
Interaction Design
Angelica Pierre
Liz Castillo
Aja Jones
My Team
My Role
Zoom
Maze
Figma
Time
Tools
2 weeks
Project Introduction
When Disney released Encanto, parents of Black and Brown children everywhere shared the reactions their children had to seeing characters who looked like them in a movie.
One little boy’s reaction went viral and was shared along with the hashtag #RepresentationMatters across the internet.
Our Client
Looking Lens is a publishing company focused on creating characters that represent and empower Black and Brown children. They want kids to connect and engage with their characters and stories.
Design a children’s website for Looking Lens where children can engage with the characters through games and explore the brand while helping Looking Lens with their mission of representing and empowering Black and Brown children.
Our Opportunity
Our Process
Secondary research
Screener survey
User interviews
Research
Synthesize
Affinity mapping
User personas
Usability testing
Hi-fidelity Figma prototype
Design
Prototype
User flows
Sketches
Wireframes
Research
While most of our inspiration came from PBSKids, we also looked at other popular children’s sites like sesamestreet.org, seussville.com, and abcya.com. We noticed similarities and trends across the sites that we looked at such as bright colors, voice overs, show specific games, videos, and parent/teacher pages all housed within a safe, child-friendly site.
Screener Survey & User Interviews
We had 15 participants for our screener survey to find parents and guardians who engage with children’s websites for interviews.
Only 1 survey participant agreed to an interview, but our research and planning leads were able to reach out to their networks and conduct 6 interviews with 3 parents, 2 teachers, and 1 child. We included teachers in our interviews because they also have a need for digital resources that can be used in the classroom. Several parents and guardians also mentioned that they get recommendations for trustworthy children’s sites from teachers.
Synthesize
Affinity Mapping (User Interviews)
of participants mentioned games as a feature that was enjoyable and expected on a kid’s website.
Games were a must-have on our Looking Lens Kids site.
of the adults talked about safety as a major factor in deciding which sites they let their children use. They mentioned limited features and making sure there were no ads or popups that would take them somewhere else.
This helped us keep our design simple and consider separating content for kids and content for parents/guardians.
of the adults felt that there isn’t enough representation in kid’s media.
This validated the importance of our work in designing the Looking Lens Kids website to support the goal of increasing representation of Black and Brown children.
“My kids are half Black and half Hispanic. They don’t see themselves that much in media.”
Personas
We needed to keep the balance between fun for kids and trustworthy for parents and guardians
From our research, we were able to identify our problem and solution statements.
Design
Keeping in mind that website needed to be simple and easy to navigate for kids, I created user flows to show main user interactions.
User flows
Sketches and wireframes
The Looking Lens Kids landing page has an outer space theme. This was the vision of our client because the name “Looking Lens” and the telescope in their logo come from the idea that an image looks clear or distorted depending on the lens you’re looking through. Our client’s goal with Looking lens is to give children a way to see themselves and their future in their characters and stories through a positive lens.
Looking Lens Kids landing page
This would be the first page users would see to explore different character planets.
We wanted to add filler images to match the space theme because Ava & Mae are the only characters available right now.
Main character page
This would be the main character page as users click on a planet to explore. The layout is very simple with limited content for kids.
From here users can view a new or featured video and game or navigate to one of the three main pages (Videos, Games, or Books)
With children as our primary users in mind, we really wanted to keep each page simple with minimal scrolling and limited content.
During user interviews, a parent expressed concern over websites that had so much content that it would keep their child going through an endless rabbit hole. They usually navigate through a site themselves first to see if it is safe and trustworthy for their child to use. From hearing this, we made sure our site was straightforward and all of the available content was clear and easy to see.
Videos and games pages
During our initial client meeting, the founder shared that they wanted this to be a site where kids could engage and connect with the characters of Looking Lens.
Books page
The Books page would include the images and descriptions of books that are a part of the series and a carousel to “Meet the Characters”.
We included the icons underneath the text descriptions to give a read aloud option for younger kids who are still learning how to read or if they just want to listen.
We also wanted the read aloud option with “Meet the Characters” so that the characters’ names would be heard. We all agreed that names and hearing different name pronunciations are an important part of representation as well.
Style Guide & Component Libraries
I was able to reference a design guide and illustrations sent from our client to build our Looking Lens Kids style guide and component libraries before making our hi-fi wireframes and prototype.
As a team, we wanted to keep the colors bright and engaging. We also wanted to choose icons that were easy to see and recognizable for kids.
Hi-Fidelity Wireframes
With our style guide and component libraries, I was able to create the hi-fi wireframes an initial prototype along with our other design lead.
Our client provided illustrations to be incorporated in the website design. The background image is from Ava & Mae, which helps keep the connection with the books as users are navigating through the pages.
Prototype
We created our initial prototype and our research lead was able to conduct 14 usability tests using the online platform Maze. Heatmap images showing instances of user clicks from Maze along with user feedback from two main tasks gave us great insights for iterations.
Usability Testing
Task 1: Make your way to the games page
We wanted users to click into “Ava & Mae” to find their games page. We realized should have been more clear for this task with the wording and asking users to go to the “Ava and Mae games page”.
The heatmap shows where users clicked to complete the task. Higher instances of click are in red and lower instances in green.
There was some cognitive overload with too many filler images and users most frequently clicked on the hamburger menu in the top right corner.
Task 2: Go to the Parents & Guardians page to view Activities for Home
In our initial prototype, users would have to click into “Ava & Mae” to find the Parents & Guardians button.
We ran into the same issues as before with users clicking on the filler images and most frequently on the hamburger menu and logo.
One user said “I think the “Parents & Guardians” should be at the main page since it’s something that a parent wants to access fast.”
Landing Page Iterations
The Parents & Guardians CTA button was moved to the landing page for quick access.
The Ava & Mae planet was moved to be front and center and reduced the number of filler images to ease the cognitive overload we saw from usability tests.
A sound icon replaced the hamburger menu. We included this as users mentioned during interviews that audio was a feature that seemed to keep kids engaged and guided them through a site.
Positive Feedback
Along with the feedback that helped guide iterations, we also got some positive feedback during usability tests about the site overall.
Even though all of our usability testers were adults, they were able to channel their inner child while navigating our prototype and let us know we were on the right track with our design.
OR
View final prototype highlights:
Landing Page
As more characters come to life, they will have space for their own planets to be added.
The site was designed with the thought that music and audio would be heard, so the sound icon would allow users to turn the sound off and on.
Videos Page
The videos page has a simple video player with tabs to organize groups of videos. These could be book trailers, character videos, or videos from the author.
The buttons are large and easy to see. We wanted to make the buttons easy to find and click, especially for younger kids who might still be learning how to use a computer, mouse, or laptop.
Games Page
Any featured or new games would be front and center in the carousel. As games are added, the cards would be listed underneath.
Books Page
Users can see books that are a part of this character series and learn more about their favorite characters.
Next Step Considerations
There were great insights from our user interviews that we relayed to our client as considerations for next steps as Looking Lens Kids grows.
User profiles to create avatars and earn points/coins from games
-During interviews parents said their children enjoyed being able to create their own avatars (this could also be a way for kids to create avatars that represent themselves!).
-They also said incentives like earning points kept them engaged. These points could be earned from games and used to customize their avatars.Including different language options
-One parent mentioned they liked when their child could listen to things in other languages. This could be an educational aspect or a way to practice and hear their home languages spoken.
-Another parent said it was difficult finding sites and resources in their home language. Having language options would make the site more accessible and inviting to families who don’t speak English as their primary language.Hear from the kids!
-During the timeframe of our project, we were only able to conduct usability tests with adults which was essential to make sure we were designing a site that parents and guardians could trust for their kids. But we would have loved to get feedback from our target users, the kids!
-As a former elementary school teacher, I can speak from experience when I say that kids will give some of the most honest, and many times, entertaining feedback.
With the recent release of Disney’s live-action The Little Mermaid trailer, another wave of reaction videos have gone viral of Black and Brown children seeing Halle Bailey star as Ariel. *You might want to have some tissues handy
#REPRESENTATIONMATTERS
Brown and Black children deserve to be represented and celebrated in the media they consume. Working with Looking Lens on this project was an incredible privilege. Knowing their mission serves such a great purpose and impact made this project worth every minute spent!
Project Takeaways
Doing the research to get to know the client and their company is a must. Talking with our client really helped with understanding her background knowledge of design and how to best communicate with her and present our project.
Setting a clear scope of work was also extremely helpful to let our client know exactly what we would be able to produce. It also helped us stay focused and made sure we weren’t biting off more than we could chew.