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.](https://www.55mins.com/uploads/images/section-builder/01-design-blobs_1679376394.jpg)
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.](https://www.55mins.com/uploads/images/section-builder/02-design-homepage-main-banner_1679376429.gif)
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.](https://www.55mins.com/uploads/images/section-builder/03-design-filter-function-and-preview-story_1679376469.gif)
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.
![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](https://www.55mins.com/uploads/images/section-builder/06-design-mobile-layouts_1679376747.jpg)
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.](https://www.55mins.com/uploads/images/section-builder/07-imagery_1679376788.jpg)