Nicole
UX designer

Happy Harper

A Children's Book Series Dedicated to Haitian Stories

Overview

In DisQovery is a production company that explores, creates, and shares an assortment of Haitian stories overlooked in the mainstream. Under the In DisQovery Press brand, Michelle Derosier writes culturally diverse stories from picture books to novels. One of the children’s series is Happy Harper, about a quirky Haitian American girl exploring Brooklyn and always wishing for a pet chicken.

Michelle wanted to redesign the existing Happy Harper site to better cater to children 5-8 years old, who are visiting with their family’s permission. She wanted to be able to offer children fun activities while also allowing adults to purchase her books and read her blogs. As a small business owner, she wanted the site to be developed using Squarespace so she could more easily make edits herself.

Project Duration

5 weeks

My Role

UX Research, UX Design, and UI Design in collaboration with 3 other designers

The Challenge

Designing successfully for children in the desired age range requires interactive activities. This was also the client's goal. To do so with the constraint of Squarespace development proved to be an interesting challenge that required both extensive research and creativity. The site needed to be fun and safe for kids, but also useful and easily accessible by adults.

The Solution

My team and I researched the capabilities of Squarespace and designed with those limitations in mind. The interactive components were created in a way that was both simple and entertaining. The client was informed about how to hire a developer for Squarespace who could create the more complicated elements. Lastly, a grown ups section of the site was designed, and adult verification was implemented before purchases.

Research

Secondary Research

In my first stage of research, I started by reading 5 articles that helped me understand how to design for kids. I focused on the 6-8 year age range since that included most of the ages targeted by the client, though I also kept in mind what I read on 3-5 year old children so I didn't exclude anyone who was 5.

I learned that kids like bright colors, either primary or secondary. The mood of the site should be happy with smiling faces of characters and familiar elements like animals should be used. Typography should be simple with short sentences. Large buttons are needed for kids with less dexterity, and even 3-year-olds easily recognize main functions like play, pause, and volume control buttons. Purchases require a hidden or protected payment option. In terms of keeping kids' attention, they want to feel immersed in the website immediately and interact with characters on the page. Various forms of media will also aid in catering to their attention span.

Happy Harper

Competitive Analysis

In my second stage of research, I used what I learned to pull together questions that would allow me to gain design insights and identify market gaps. I searched for sites that were both similar to what the client wanted and incorporated techniques I had researched. I settled on 4 competitors to compare to the existing Happy Harper Website.

Main Design Insights:

  • If there is a login at all, signing up and logging in is simple and fast

  • Most sites have a page only meant for adults

  • Movement and bright colors capture attention

  • Large images and icons are used

Market Gap:

No free, interactive reading site exists that is mainly meant for kids and includes many media types related to one series.

Ideation

Brainstorming

Ideation started with making a bulleted list of all the ideas I had. This was a quick way to get some potential plans on paper and share them with the team. The brainstorming continued on Figma by gathering imagery for the site and playing around with layout.

Happy Harper

User Stories

Creating and ranking user stories allowed me to focus on what would create an MVP (Minimum Valuable Product). I color coded the stories based on the different users so I could easily see which design aspects applied to each user story.

Sitemap

Setting priorities and matching user stories to the ideas created while brainstorming laid the groundwork for a sitemap. This more clearly defined what screens would be needed to create an MVP.

Happy Harper

User Flows

User flows were then created to assess the efficiency of tasks. I had already established that navigation for kids had to be simple, so that was prioritized. Tasks for adults still had to be intuitive, quick, and easy to complete, so the users would return to read the blog and purchase more books. This is where the placement and frequency of a math problem to unlock purchasing was solidified.

Happy Harper
Design & Prototype

Sketches

Sketching allowed for further exploration of concepts and placement. It was still easy to change designs at this stage, but it gave the team something more concrete to reference while laying out wireframes.

Wireframes

Low fidelity wireframes were created so that we could focus on the layout as opposed to the color and artwork. This refined the designs even more and allowed me and the team to scrutinize iterations and navigation options. Here we also started to think about how we would translate our designs to be mobile friendly.

Iterations

Happy Harper

Moodboard

Moodboards are amongst my favorite deliverables to create. They really set the scene for the rest of the design and provide me with a plethora of inspiration to play with in UI iterations. Most of the imagery would occur on the children's section of the site, so I focused on the quirky, colorful, and happy attributes of the brand. For the UI inspiration, I explored the grown up portion as well, especially how the blogs could be made both visually interesting and easy to scroll through.

Happy Harper

Color Exploration

Because there was so much color involved with this project, I thought it necessary to explore how the chosen colors would look near one another. That way I could be certain that nothing would clash come time for the UI.

Happy Harper

Style Guide

Using everything we gathered so far, we started to create a guide with components that could be easily copied into all future designs. Typography and colors were also defined here. This would not only save time, but also ensure consistency throughout the site. As we worked on UI iterations, we updated this style guide so that it was finalized before the high fidelity frames were created.

UI Iterations

I played around with some color combinations and style decisions to determine what would be the most aesthetically pleasing. It was important here to find a balance between distractingly colorful or disorganized feeling and pleasantly playful.

High Fidelity Wireframes

Here the semi-final designs really came to life with color and graphics. You could see the happy and adventurous personality of the brand.

Happy Harper

Prototype

The prototype for this site was particularly important because some of the most important aspects of the Happy Harper vision included interactivity. This required quite a few screens, but the relatively simple game designs allowed for the use of Figma.

Usability Testing & Redesign

Usability Testing

A test plan and script was created so usability tests could remain focused, consistent, and solid conclusions could be drawn. The children's portion of the site is meant to be a fun and engaging way to introduce kids to the Happy Harper character. The tasks for the adults should be easily understandable and straightforward to increase customer retention. 3 adults and 3 children were interviewed in a mix of virtual and in-person settings.

Test Objective:

To evaluate the Happy Harper website prototype and ensure the site is easy to use and intuitive for children and adults based on the most important user journeys for kids and adults.

Test Tasks:

  • Kids, play tag with the chicken

  • Kids, play the party planner game

  • Adults, print a maze

  • Adults, buy a book

Testing Results

In general, both children and adults enjoyed the site. The adults noted that it was easy to navigate and that the tasks were straightforward. They were also fascinated with the kid's portion of the site and had fun exploring the interactive elements when their tasks were complete. The children were entertained and interested by the features on the site. We did get some great questions from the kids and suggestions from the adults about how to make the site more intuitive as they worked through the tasks. We incorporated the following changes based on that feedback:

  • More detailed instructions with a translation of the Haitian word "Byenveni" were included on the game page

  • Just the banners were made clickable as opposed to the whole party setting

  • More product details and a preview of the books were added

Reflection

Designing for kids was a whole new experience and challenge for me. It was extremely fun to be creative in that way and put myself in the shoes of a 5-8 year old. My inner child was really able to come out in a curious and imaginative way. I also learned a lot about how to work with clients with limitations. It's rewarding to be able to deliver something feasible that satisfies the client's wishes. The client was thrilled with the design that she could use to upgrade her small business, and I loved having the opportunity to work with a brand focused on inclusivity and representation.