Sketches and Ideas

Initial Ideas and Confirmed Ideas

Overview

After selecting which brief I wanted to undertake from the 'RSA' website, I first of all produced several ideas along with sketches to help myself visualise how I could have approached the project. I decided to choose an idea which would have divided my application into a daytime section and a night-time section. The user would have learnt about sleep through both information and advice and then would have completed a quiz to solidify this knowledge through the daytime section. Calming images would have been able to be unlocked depending on how many correctly answered questions there were in the quiz. With regards to the night-time section, the user would have been able to set alerts to remind them to turn off all screens at least an hour before bedtime and to also view calming images and write stress lists which could have then be thrown into a virtual bin. The main purpose of this was to reduce the factors which contributed to poor sleep and the primary target audience were those who suffered from poor sleep. At first, my primary target audience was 18-25 year olds but now this was my secondary audience, attempting to help them to sleep, especially through discouraging screen usage before bedtime.

The Sketches/Brainstorms of these Ideas

Inspiration for the Application Ideas

Overview

To gain inspiration for my application ideas, I examined current existing sleep applications. This research helped myself to realise that the need was for an application which addressed the causes of poor sleep rather than analysing data and being reactive rather than proactive. This encouraged my chosen idea explained previously.

The first application was 'Sleep Cycle' which analysed sleep patterns and woke the user when they were in their lightest sleep phase.

Secondly, there was 'Noisli' that helped the user to relax through the use of peaceful sounds and colours.

'Apple's' 'Clock' had a bedtime feature which could have provided the user with gentle reminders of when it was getting nearer to their bedtime and it tracked their sleep. It also linked into the Apple 'Health' app which provided the user with data about their sleep.

'Calm' focused more on mindfulness and meditation to relax and calm the user before going to bed.

The final application, 'Sleep Better', tracked sleep duration, sleep cycles and sleep efficiency and allowed the user to enter daily habits and help them identify what was best for them.

The Different Sleeping Applications

Highlighting Colours and Fonts to Utilise

Overview

Following on from the previous aspect, I then decided to highlight fonts and colours to potentially utilise in the application.

As will be evident below, I decided to choose the 'Arial Rounded' font for my application as it appeared to be the most friendly and welcoming font which was important for a sleeping application. With relation to the colours, I undertook some research on the colours which could have helped with sleep and from this, I created several colour palettes.

Highlighting Fonts Stage

Interface Inspiration and Designs

Interface Inspiration

Overview

For my interface designs, I gained inspiration from both those of 'Sleep Cycle' and 'Noisli'. I noticed that their interfaces were simplistic but effective and easy to navigate with a combination of visual images and text.

The Actual Inspiration

Interface Designs

Overview

Following on from viewing the inspiration displayed above, I then produced some sketches as well as producing some mockups of the potential interface in 'Adobe Illustrator'. As will be evident below, I tested the different colour palettes to gauge which one was best and from this I decided to choose the colours of purple, blue and yellow.

The Actual Interface Designs

Logo Inspiration and Designs

Logo Inspiration

Overview

After having decided which colours to continue with in the project, I then began undertaking the process of creating a logo for the sleep application.

Before creating some logo designs, I made a list of names for my sleeping application. Unfortunately, most of the names already existed and, as a result, narrowed my options. I decided to choose 'SleepSaviour' as the word 'Saviour' reflected the fact that the application was trying to save the user's sleep from distractions. At the same time as creating my logo designs, I undertook visual research on current application logos to gain an understanding of the successful practices which I could have then applied to my logo design. Names of applications were sometimes not included and they were very simplistic.

The Collected Logos Research

Logo Designs

Overview

Following on from undertaking research, I then created some logo designs.

With regards to these, I tried to create logos with visuals, text and a combination of both. The logo design which I decided to choose was 'SleepSaviour' in a cloud with a person asleep acting as the letter 'o'. This was due to the fact that it was simplistic and integrated visuals into the name of the product which looked professional.

The Logo Ideas and Chosen Logo

Creating Initial Wireframes and a Sitemap

Overview

Before creating the 'Adobe XD' file for my application, I thought it would have been best to produce some wireframes of the different screens and also a sitemap to visualise the navigation of the application. Later on in the project, the navigation was more complex with regards to the sitemap placed in this section.

Initial Wireframes

Sitemap

'Adobe XD' Wireframes

Overview

After completing the initial wireframes and sitemap, I then created final wireframes in 'Adobe XD' so that I would have been able to utilise these whilst creating the application later on.

The first three images below portray the main screens of the application which were the home screen, daytime section screen and the night-time section screen. The images placed underneath display an overview of all of the screens of the application in 'Adobe XD' from a design point of view but also a prototype view which was the way in which each screen linked to each other.

As well as the images shown below, the actual file can be interacted with via the provided link.

The Actual 'Adobe XD' Wireframes

An Overview of the Three Different Sections

The Development Process

Overview

After having completed the design processes, I then undertook the process of developing 'SleepSaviour' using both 'Xcode' and 'Swift'.

To demonstrate my development process, I have included a link to a 'PDF' document below.

Creating the 'RSA' Submission Boards

Overview

As part of the final submissions for this module at the University of Winchester, I was required to create different submission boards which helped to demonstrate different aspects of this project.

Each of these can be viewed either below or through the provided links.

The Hero Image Board

The Big Idea Summary Board

The Proposal Outline Board

The Supporting Material Board

How Would I Approach this Project Again?

Overview

If I were to do this project again, I would ensure that I would set myself a scope which wasn't as big. This would then mean that I could complete the whole project without any problems. My solution was good in the way in which it helped sleep as it addressed several problems. It would have also been informative about sleep and would have provided helpful advice if it were to be fully finished. However, some of the ideas could have had more creativity to them which would have made the application even better and maybe the design could have been enhanced more.

I have included two videos in the final section, demonstrating a prototype of the sleeping application 'SleepSaviour'.

To view more detail about this project, please view the document provided below.