NightNight app — find the perfect bedtime story for your child

Challenge:

NightNight is an iPad app where authors publish short stories that parents can read to their children before bed. Parents were having a difficult time sorting through stories and identifying which ones were best for their children. NightNight wanted to make it easier to quickly find the perfect bedtime story.

Solution:

I developed intuitive solutions to improve the user search experience.

Role: Creative Director / Visual Designer

Existing design

Shown here is the existing design of the NightNight story index screen. Improve this experience based on user feedback.

User research

Feedback from 150 parents indicated users had a difficult time identifying which stories their children were most interested in. Parents needed an easier way find out what the stories were about, whether they were age appropriate, the story length, and reviews from other parents.

Competitive analysis

I looked at in-category and out-of category apps that help users sort through lots of content. Apps with filters, sorting, and onboarding processes informed my design decisions.

In-category apps

Out-of-category apps

Competitive analysis: what was learned

Searching, filtering, and sorting options make it easier for users to find what they are looking for (e.g., Amazon app). Apps without these features make users work harder.

More useful apps display important information on top-level screens, but let users dig deeper to find more specific information.

Apps without clear labels are more challenging for users to search (e.g., Netflix). Labels provide context about what they will find after they click or tap on a link.

Feature prioritization

Translating feedback into actionable design ideas

On the whole, parents expressed a need for more detailed information about each story. I started to think about specific solutions to directly address their needs:

Existing experience: potential improvements

Sketches

Onboarding

Onboarding presented an opportunity for users to custom tailor search results. When launching the app, new users are asked to enter their child’s age and preferred interests. This information allows the app to know which stories are most relevant, and which stories to recommend.

Story index screen

To begin, I kept the story index screen in a grid layout but added some new features: a search bar in the navigation and a drop-down menu for filtering search results. By default, the screen displays recommendations based on interests identified in your child’s user profile. Users can also use the new search tools to find specific content. Inspired by the effectiveness of the Amazon app, I also added icons to display results in grid view or list view. I also felt that story thumbnail images could be larger to provide more context about the overall story theme.

I considered whether the experience would be more effective in a list view. List view allows more space for important information such as author name, story ratings, and most importantly a summary of the story. The list can be scrollable, with the page navigation locked to the bottom of the screen.

Story index screen, search filtering

I thought about how the filtering menu might work. Search results can be filtered by story theme (e.g., Animals or Fairy Tales) and age range. Sorting features can also be included, to view stories by popularity, average review, relevance, read time, language, etc. When the menu is in use, stories appear dimmed (behind an overlay) but are still visible to provide context to users.

Filter menu, expanded and collapsed views:

List view

I further explored the list view scenario, thinking about the position of descriptive content, buttons, age range, read time, and ratings. I felt that isolating stories on individual cards would visually group information, and maintain continuity with the look and feel of the grid view.

Story details

From the story card, users can select “more info” to see additional story details. This action brings up a modal window with more details on the story: a more complete summary, author information, and larger cover artwork. To help users find similar content, the window also includes links such as “More stories like this...” and “More from this author...”.

Story content screen

When users tap Read Now, they are greeted with a large illustration at the top of the screen that brings the story to life. NightNight is primarily for children, and I felt that illustrations will keep them engaged and interested. I thought about navigation, and the tools that are the most important while users are reading. I added a bookmark feature, and an option to change font size. Story content is also searchable.

Wireframes

Onboarding screens

Story index and content screens

Visual design

Onboarding screens

Story index screen, grid view

The default appearance is grid view, which can also be activated by tapping the grid view icon. I added search, filtering, and sorting capabilities.

Top navigation now includes a search bar to help users find the perfect story. Below the search bar are sorting and filtering options.

The background color was changed from purple to light gray. This was done to differentiate the navigation bar from the body of the screen.

Story thumbnail images were enlarged to make the visual design more engaging and to help users infer the theme of the story. Additional story information was added to help parents find a suitable story, and call-to-action buttons were enlarged.

Story index screen, card studies

A range of configuration options were studied to make story cards as informative and as useful as possible. Variations included thumbnail image size, button size and position, colors, and overall card size. I chose a large button across the bottom of the card, unobstructed by other elements. This made the call-to-action more obvious. To remain consistent with other navigational elements, the button was filled white in its inactive state.

Bottom navigation

A range of configuration options were also studied for the bottom navigation bar.

Story index screen, list view

I added a scrollable list view, which provided more space for supporting information, such as a story summary. This view is activated by tapping the List view icon in the top navigation. List view includes search, sorting, and filtering options.

Story index screen, information window

From the story card, users can tap the information icon to see additional story details. This action brings up a modal window with a more complete summary, author information, and larger cover artwork. To focus attention on the window, the story screen appears dimmed behind a transparent overlay.

Story index screen, sorting and filtering

Search results can be filtered by story theme, age range, and read time. This helps users find the perfect bedtime story for their child.

Story content screen

Tapping the Read Now button brings users to the story content screen. Each story includes colorful illustrations to create a richer reading experience for children. A large drop cap indicates the beginning of the story. Navigation features a search function, font size adjustments, and bookmarks. Users return to the story index page by tapping on the Back arrow in the upper left. Users can toggle between pages using bottom navigation, which is consistent with navigation found on story index pages.

Next steps

User testing

Design decisions such as button placement, lighter background color, and onboarding process must be tested with users to make sure they provide a positive user experience.

Additional screens

Create additional screens for user profiles, favorites, “more stories like this...,” and user reviews.

Additional viewing formats

Design screens in both portrait and landscape format, and determine if app should be adapted for use on iPhone devices.