BedtimeStories is an iOS app that lets parents easily create personalized bedtime stories for their children. Using OpenAI's API for story content and DALL-E for illustrations, the app offers a simple prompt or detailed template for story creation. All stories are saved within the app, making bedtime a magical storytelling adventure.

‍

Project status: In progress

- UI/UX Design: In Figma.

‍ Wireframes finished, Mockups in second round of improvements.
‍

- Development: Xcode with SwiftUI.

The prototype is finished, it includes a successful network connection to the OpenAI API to get the story text and image. The stories are persisted using CoreData and displayed on their dedicated view, where users access , favourite and delete their stories.

Project details

BedtimeStories is an iOS app that lets parents easily create personalized bedtime stories for their children.

Project type

My role

UI/UX Designer - iOS Developer

Tools

Figma

Date

In progress

Understanding the user

User personas

1. Aniya

1. Émilie

1. Ryan

2. Ansel

2. Megan

User journey map

Starting design

Paper wireframes

No items found.

Low-fidelity prototype

I have created the wireframes using Figma. Click the link below to access the interactive version.

No items found.

https://www.figma.com/proto/2sYGmulVZeTf6DuIEV5rwz/BedTime-Story-Creator---Wireframes?page-id=0%3A1&node-id=3-53&viewport=-206%2C701%2C0.78&t=17ZFy8VOlAqR7T7c-1&scaling=scale-down&starting-point-node-id=3%3A53

Usability studies: findings

Round 1 findings

Round 2 findings

Participants found the prototype not interactive enough.

Participants found the prototype intuitive.

Text size was too small for the participant with low vision.

Participants need a help/support option.

Payment process confusing for all participants.

CTA button hidden behind nav. bar in some screens.

Round 1 findings

Round 2 findings

Participants found the note-taking flow easy to use.

Participants mentioned they see themselves using the note-taking system.

Toolbar icons were too small to identify and participants felt confused.

Toolbar improved from feedback, and participants understood clearly the functionality of the icons.

Round 1 findings

Round 2 findings

Participants found the note-taking flow easy to use.

Participants mentioned they see themselves using the note-taking system.

Toolbar icons were too small to identify and participants felt confused.

Toolbar improved from feedback, and participants understood clearly the functionality of the icons.

Round 1 findings

Round 2 findings

Most participants found that a weekly meal planner is needed.

Participants found useful that they now can alternate planners.

Participants had a hard time adding recipes to the shopping list

Add to shopping list button added, now it's clear for users how to create a shopping list.

Round 1 findings

Round 2 findings

Participants found the note-taking flow easy to use.

Participants mentioned they see themselves using the note-taking system.

Toolbar icons were too small to identify and participants felt confused.

Toolbar improved from feedback, and participants understood clearly the functionality of the icons.

Prototype

Development status

The demo presented below has been developed using SwiftUI. Currently, I am focusing on enhancing error handling and improving user notifications. The UI will be updated once the mockups are finalized.
‍

Functionality:
The app offers two distinct modes for creating a story:

1. Template Mode: In this guided mode, users fill in the fields and select buttons to create a story that is more specific to what children might enjoy.
2. Quick Mode: Users can enter a quick prompt to generate a story on the fly.

Powered by AI technology, this app crafts unique bedtime stories, complete with illustrations, specifically tailored for each child.

‍‍

App back-end process:

1. Network Call: Upon receiving user input, a network call is made to OpenAI’s API.
2. Story Generation: The API response includes a detailed bedtime story text and an accompanying image generated using the DALL-E model.
3. Data Persistence: The story is saved using CoreData and the image is stored in the Documents Directory.
4. Stories Management: Users can view, favorite, or delete their stories as needed.

Refining the design

Mockups

No items found.

High-fidelity prototype

Onboarding + app prototype link
This flow covers the onboarding process and app flow.

App prototype link
The link below covers the app flow only.

https://www.figma.com/proto/KFPIuNpdnzE1GYnrqsRilt/HealthyMeals-App-Hi-Fi?page-id=0%3A1&node-id=305%3A2026&viewport=-40%2C692%2C0.27&scaling=scale-down&starting-point-node-id=6%3A206&show-proto-sidebar=1

Accesibility considerations

Contrast

Headings

Typefaces

I used contrast checking tools to make sure that the contrast between background, font and images was high.

Different font sizes were used to for main heading and sub-headings.

Only two basic typefaces were use in all the designs, being Helvetica regular and bold the main font.

CTA Buttons

Element Labels

On boarding

Call to action buttons have a high contrast color.

Meal plans and onboarding include images and text..

A detailed onboarding process with images and text

BedtimeStories

Project details

Understanding the user

User personas

1. Aniya

1. Émilie

1. Ryan

2. Ansel

2. Megan

User journey map

Starting design

Paper wireframes

Low-fidelity prototype

Usability studies: findings

Prototype

Development status

Refining the design

Mockups

High-fidelity prototype

Accesibility considerations

Going Forward

Impact

What I learned