Designing a website that connects children and families through storytelling

Client

Nine Tales

Nine Tales is a startup focusing on helping children build emotional intelligence and learn life lessons together with their families through storytelling.

Project summary

Our role

Website design


Team

Project Manager

UX Lead

UX/UI Designer


Duration

1 year partnership

Project brief

Nine Tales is a Singapore-based startup focusing on children’s storytelling, with a goal of helping children build emotional intelligence through stories. As a new company, 55 Minutes was tasked to design a website for Nine Tales to build awareness for the company and mobile app.

Our approach

Design

Tying back to the importance of building emotional intelligence through stories, we wanted the website to look organic and raw, much like how emotions are in general. Taking on the same organic blob shape of the logo, we tweaked it to differentiate it as individual sections of the layout on the website.

We designed two blobs, both of which were used throughout the entire site. They were then used individually or mixed together to differentiate each section of the website. This was done by rotating them or mixing them up together, or with a rectangle shape.

The two main blobs designed were based on the Nine Tales’s logo, tweaked to differentiate the different sections of the website.
The two main blobs designed were based on the Nine Tales’s logo, tweaked to differentiate the different sections of the website.

With emotions playing such a vital role in Nine Tales, we designed the main banner on the homepage to reflect that by having users select how they are feeling from a dropdown menu. This would then bring them to another page consisting of a list of stories to browse through based on the selected emotion.

On the Home page, the main banner works by allowing users to select an emotion based on a dropdown menu.
On the Home page, the main banner works by allowing users to select an emotion based on a dropdown menu.

Users can browse stories by scrolling down the page, or by utilising the filter function to filter by genres, emotions, or themes. After selecting a story, users are also able to preview and listen to the first five pages of a story. This helps parents get a glimpse of each story on the content, imagery, and how the voice artist sounds, which builds trust between parents and Nine Tales.

Left: Browse stories by using the filter function. Right: Preview and listen to a story.
Left: Browse stories by using the filter function. Right: Preview and listen to a story.

With storytelling as Nine Tales’s focus, the website was also built so that each section would take up half the screen size or more, enlarging images and story covers to frame them as the heart of Nine Tales.

Full layout of Home page

Full layout of About Us page

Showcasing the intentional design of how different sections in the mobile layout of Nine Tales’s website would take up half the screen size or more
Showcasing the intentional design of how different sections in the mobile layout of Nine Tales’s website would take up half the screen size or more

Imagery

As much as Nine Tales is a children’s storytelling company, we did not want the focus to be on stories. We wanted to communicate one of Nine Tales’s core pillars — building connections and connecting families through storytelling. Emotions are powerful forces, and we wanted to portray that as much as we can on the website. Hence we settled on photography as the direction and the medium of website imagery, emphasising on humans and connections.

Images that were used throughout Nine Tales’s website design to reflect on one of Nine Tales’ core pillars — building connections and connecting families through storytelling.
Images that were used throughout Nine Tales’s website design to reflect on one of Nine Tales’ core pillars — building connections and connecting families through storytelling.

We have updated our privacy policy. By continuing to browse this website, you consent to our privacy policy terms.