Somnium

Overview

Somnium was a collaborative mock-up of a randomized bedtime story app between Abigail Hill and Viktoriya Sim. The goal of Somnium was to learn how to create apps for mobile stores and to make the content accessible.

Abigail was in charge of the title animation as well as helping out with colours for the app, while also creating the code of the app. Viktoriya's main focus was on the actual style of the app as well as graphics.

In the end, Somnium was a bedtime story randomizer test in which users had a few ways to interact with the content- either reading the stories, listening to them, or both.

Skills Used

UI/UX
HTML / CSS / JS
Animaton
Accessibility

Timeframe

3 weeks

Personas & User Flow

Process

After we had come up with a rough concept of a bedtime story app, the first thing me and Viktoriya did was create the personas for Somnium.

Who are out users? What do they look for? Where are they looking? Why choose our app? How will they navigate?

These were all questions we asked ourselves when making our personas, as well as creating the user flow of how the app will actually function.

We created personas for a variety of different age groups, backgrounds and are quite different from each other, but could find benefits with our app.
‍

Click here for the detailed personas and user flow➜

Low Fidelity Wireframes

First Screen

The first low fidelity wireframes were done on paper and had notes on what to do and how to proceed. It focused more on a rough layouts for the main screen and how exactly it goes to the second screen that would have the stories and audio.

Since this was all to be done in mobile, we were trying to make the interaction as simple as possible: going from a title and words users click, to just the title and then a play button users would need to click. Once users press the play button a second screen which is a modal would pop up.

Second Screen

These low-fidelity wireframes hold the ideas and process of how the "second screen" or randomized modal actually work. Initially we planned the modal to hold a random story in text form and then have togglable ambient sounds, however, then we thought of accessibility and how people would read bedtime stories. Instead of having ambient sounds, we opted to having the story be read out by someone like an audiobook, that way users get to choose what they want: just reading, listening, or both options. We planned to have the audio options at the bottom of the screen, but then we found that it was better at the top in the final iteration.

Style Tile

For the style tile, Viktoriya and I have opted to use cooler colours. This was because in our research we found that in colour theory, cooler colours are used most for sleep aids because they are calm colours that do not strain the eyes. Since we did not want to stick in the box of pure blue equaling to sleep/night/calm, we had opted to use a more blueish green which has the same emotional affect to our users. We then added a blueish off-white for out accent colour and and while I was sorting through which fonts are the most friendly and inviting Viktoriya had created the background and logo image.

Understanding Branding and Product Pages

Branding

This project was when me and Viktoriya first learned about how important branding was and how it influences who views our Somnium app. Is being sleek and organized good for our branding? what feelings to we want to evoke in our branding? Are we to be targeted more towards a certain age group? Those were all questions we had asked ourselves when sorting out what to do. In the end, we went more with a calm yet youthful orplayful look; with the slight animation of a a pulsing headphone used for the play button, the image in the background of the sleeping person curtesy of Viktoriya, and then the overall soft text and friendly wording of our app to welcome users. Our branding was to be soft, calming, and overall welcoming.

Description

"Our app will provide you with a calming experience. access it any time to either lull yourself to sleep or simply relax. Our app will randomly select an array of stories just for you, and lets you have the option to either read or listen as if it were your own personal audiobook."

Promotional Text

"Broaden your horizons: bringing you in this version new compelling narratives"

Keywords

Relaxing | Calming | Meditation | Sleep | Chill | Story Telling