Moonlite

Moonlite Bedtime Story Projector

Let us tell you our story about a mobile app that turns a mobile phone into a storytime projector.

An Inspiring Idea

+
Backers
+$
Pledged on Kickstarter
days
Funding period

Ultimate Bedtime Story for Millennial Parents and their Children.

Moonlite is an easy to use projector that clips right to your smartphone and uses the flashlight to make your child's favorite tales come alive.

Award-winning

Staff pick!
2017 Top Toys List!
Best New Product!

Make Marvelous Stories Come Alive

Since the imagined experience seemed so magical, we made it our mission to help our client and make it come alive. And then it hit us.

This time we will push ourselves beyond the limits

Our Work

  • 01UX & UI design
  • 02App development
  • 03Backend
  • 04QA Testing
  • 05Webpage

We Started by Visualizing

Our process relies heavily on early prototyping and testing to make sure we’re developing the right product before writing even a single line of code.

The Concept

We took the same concept of the device and applied it to the layout of the app. Just by swiping left or right, the user can bring a book in focus, by tapping on the book it will open the book in full screen.

Little helper Luna

Luna is a companion that walks you through the app. She takes her job very seriously, as she helps the users in certain situations.

Onboarding Experience For Millennials

Moonlite users can enjoy the beauty of unboxing the device without any clutter. The app covers the whole onboarding process: users just have to pull the device out of the box.

The story doesn’t stop with the visuals

There are more than 150 sound effects in the app. Every story has highlighted words that admins can dynamically change through the backend.

Reading experience

We optimized the typography for reading with the well-balanced contemporary typeface, so it’s the same size as on a physical book. In the book we don’t use any decoration as its primary focus is for the parent to read and not to distract the children while looking at the projection.

Shopping experience

With Shopify integration, we enabled users to purchase new stories with few easy steps. Once they click on the story they want, they just put their credit card info, and the story wheel is on its way.

Animation Workflow

Animating using the latest tools

1. After Effects
2. Lottie (AirBnB)
3. App

We animated Luna (and other animations) with Lottie - a new tool produced by Airbnb design. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time. This tool is perfect for simple animations, flexible for code implementation and saves a vast amount of memory compared with .PNG sequences.

Challenges

Our biggest challenge was figuring out how to make the hardware and software work together seamlessly.

Solving problems: Making the app work cross-platform

Probably the biggest challenge was to make the app support the majority of phones on the market. This was especially challenging with Android devices. Making Moonlite’s hardware fit all the devices seemed almost impossible.

Vlatka Sipos
Project Manager
And then our team came up with a genius solution. We call it The Bullseye. It’s a system that enables almost all the devices out there to use Moonlite. Users just have to set the cursor on the device, on a marked bullseye on their smartphone, and voila - the projection can start.

QA testing

Five’s QA team had a lot to cover to ensure the product would work perfectly for a Holiday launch: from hardware fitting challenges and optimizing the onboarding process to UX flows and last UI touches, the app had to perform at scale.

More Than Just an App

This time we didn’t stop with just the app. We wanted to deliver our client the whole experience, extending through our custom-built CMS, backend, and website.

Content Management System

Since the app can use various stories, we provided the client to manage all the content. Build on Django; our CMS makes it easy to handle all the bits of the app, from the store content, sound effects, to story cover images more efficiently.

Website

After we designed and developed the app, we moved to the website. The goal was making it consistent. We wanted to translate the same look and feel of the app to the web. Built on Shopify, the website integrates all the needed eCommerce features out of the box, and gives new and existing users more info about every little thing about the product and the app.

Moonlite was a marvellous hardware and software adventure.

What’s next?

In the next six months we aim to fulfill the following goals for our client:

%
Retention
+
Registered users
0/5
Score

Got a project? Let's discuss!

Contact us at contact(at)five.agency or use the form below