Brief: "Design a product, service or system to improve health and wellbeing by encouraging and/or enabling better sleep."
For a more detailed process, refer to my portfolio document situated at the bottom of the page, especially for the research for this project.
Initial and Confirmed Ideas
After selecting which brief I wanted to undertake from the RSA website, I first of all produced several ideas along with sketches to help me visualise how I could approach the project. I decided to choose an idea which would divide my application into a daytime section and a night-time section. The user would learn about sleep through both information and advice and then complete a quiz to solidify this knowledge through the daytime section. Calming images are able to be unlocked depending on how many correctly answered questions in the quiz. With regards to the night-time section, the user would be able to set alerts to remind them to turn off all screens at least an hour before bedtime and also view calming images and write stress lists which could then be thrown into a virtual bin. The main purpose of this is to reduce the factors which contribute to poor sleep and the primary target audience are those who suffer from poor sleep. At first my primary target audience was 18-25 year olds but now this is my secondary audience, attempting to help them to sleep, especially through discouraging screen usage before bedtime.
Inspiration
To gain inspiration for my application ideas, I examined current existing sleep applications:
This research of current sleeping applications helped me 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 stated in the previous section.
The first application is 'Sleep Cycle' which analyses our sleep patterns and wakes you when you are in your lightest sleep phase.
Secondly, there is 'Noisli' that helps you relax through the use of peaceful sounds and colours.
Apple's Clock has a bedtime feature which can provide you with gentle reminders of when it is getting nearer to your bedtime and it tracks your sleep.
It also links into the Apple 'Health' app which provides you with data about your sleep.
'Calm' focuses more on mindfulness and meditation to relax and calm yourself down before going to bed.
The final application, 'Sleep Better', tracks sleep duration, sleep cycles and sleep efficiency and allows you to enter daily habits and help you identify what is best for you.
Colours and Fonts
As is evident above, I decided to choose the 'Arial Rounded' font for my application as it appeared to be the most friendly and welcoming font which is important for a sleeping application. With relation to the colours, I undertook some research on what types of colours help with sleep and from this I created several colour palettes.
Interface Inspiration and Designs
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. I produced some sketches as well as producing some mockups of the interface in Adobe Illustrator. As is evident 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.
Logo Inspiration and Designs
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 down my options. I decided to choose 'SleepSaviour' as the word 'Saviour' reflects the fact that the application is trying to save your 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 then apply to my logo design. Names of apps were sometimes not included and they were very simplistic. With regards to my logo designs, I tried to create logos with visuals, text and a combination of both. The logo design which I decided to choose is 'SleepSaviour' in a cloud with a person asleep acting as the letter 'o'. This is due to the fact that it is simplistic and integrates visuals into the name of the product which looks professional.
Wireframes and Sitemap for Adobe Xd
Before creating the Adobe Xd file for my application, I thought it would be 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 here.
Adobe Xd
The three images at the top of this section portray the main screens of the application which are the home screen, daytime section screen and the night-time section screen. The images underneath show 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 is the way in which each screen links to each other.
How would I approach this Project again?
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 is good in the way in which it helps sleep as it addresses several problems. It would also be informative about sleep and provide helpful advice if it were to be fully finished. However, some of the ideas could have had more creativity to them which would make the application even better and maybe the design could have been enhanced more.
DEVELOPMENT WORK AND FINAL OUTCOME SUBMISSIONS ARE BELOW - SOME REFERENCES ARE INCLUDED IN THE PORTFOLIO DOCUMENT SITUATED AT THE BOTTOM OF THIS PAGE
View the full Adobe Xd file here
Xcode Development Work can be viewed here with references
Xcode Work can be Downloaded here
RSA Submission Board - Hero Image
RSA Submission Board - Big Idea Summary
RSA Submission Board - Proposal Outline
RSA Submission Board - Supporting Material
Demonstration of Application (Daytime Section)
Demonstration of Application (Night-time Section)
Brief: "Produce a new look for Cherry Childcare's website which is modern, appealing to their demographic and reflects their culture."
Due to the fact that this was a group project and the fact that I was the developer within the group, my main task was to code the website based on designs created by others. However, I did contribute as well to some of the design aspects.
For a more detailed process, refer to my portfolio document situated at the bottom of the page.
Competitor Research
To start the project, I analysed the competitor's websites which were provided by the client. The 'Busy Bees' website wasn't too overpopulated with information/visuals, it used clear headings, the images were easy to see, horizontal scrolling text was used and there were links to social media websites. The 'Childbase Partnership' was visually attractive, there was a friendly tone to the website, it was simplistic and it was modern with an effective layout. The final competitor, 'Bright Horizons', had a professional appearance, there were some animations, big images were used and there was a combination of a one page scrolling website and several pages.
Desktop Website Wireframes and Considered Fonts
Following on from analysing the competitor's websites, I then produced some wireframes for how the website for 'Cherry Childcare' could appear on a desktop computer. I made wireframe ideas for the home page, find nursery page, how some of the generic pages could appear and for the contact page. As well as these wireframes, I also contributed some font ideas for the new website.
Additionally, I also undertook some research on which Content Management Systems could be used for the website, analysing the prices and advantages and disadvantages. This can be viewed in my portfolio document situated at the bottom of this page.
Mobile Wireframes
The designers produced some desktop wireframes which were to be shown to the client and taking inspiration from these, I created some wireframes for how the website would appear on a mobile device, implementing features such as a responsive navigation menu.
The final website can be viewed below along with detailed description of the coding process. Unfortunately, due to the timescale and myself as the only developer with some help from one of the designers, the website wasn't able to be fully finished but an agreement was made between myself, the client and a member of another group working on the same project that we would collaborate and finish the website throughout the next semester.
DEVELOPMENT WORK AND FINAL OUTCOME SUBMISSIONS ARE BELOW - SOME REFERENCES ARE INCLUDED IN THE PORTFOLIO DOCUMENT SITUATED AT THE BOTTOM OF THIS PAGE
Brief: "To organise an End of Year Show which involves all cohorts that interests industries and attracts potential employers."
For this project, my role was to create the website for Transmedia 2018 with other team members but I also contributed to other aspects as will be evident below.
For a more detailed process, refer to my portfolio document situated at the bottom of the page.
Branding Contributions
After we as a year group had decided on the theme of simplicity, I then undertook some visual research to assist me in my branding contributions. After this, I then produced a colour palette based on research undertaken on colours. The blue represents high-tech, the orange reflects creativity, the black portrays power and the white relates to simplicity. I created a mindmap to help me understand simplicity and once this was finished, initial logo ideas as well as my final designs were produced.
Desktop Wireframes for the Website
With regards to my work for the website, I first of all undertook critical analysis on the previous website to analyse what was and wasn't effective and how we could improve with our website this year. This can be viewed in my portfolio document located at the bottom of this page. After the critical anlaysis, several wireframes for the desktop version of the website were produced, all of which are evident above.
Mobile Wireframes for the Website
I also produced some wireframes for the appearance of the website on a mobile device, based on chosen designs by the group.
Colour Combinations
To help myself and the group visualise which colours could be the most successful for the website, I trialled different colour combinations on a prototype of a web page I had created. These were based on the colour palette provided at that current stage in the project. To view the code for this, click on the link below.
Coding for Colour Combinations
Content Pages for Transmedia 2018 Website
I was assigned the task of creating the content pages for the website, adding code into files which were created by other members of the website team. As can be seen above, I produced a structure for the about, contact, game and yearbook pages. This was then combined with the work of the others to produce a prototype. The code for this can be viewed via the link below.
Coding for Content Pages
The current website can be viewed via the link below. I will be helping with the updated website during the Christmas break.
Click here to view the current Transmedia 2018 Website
REFERENCES FOR THE WORK I CONTRIBUTED TO THIS PROJECT ARE INCLUDED IN THE PORTFOLIO DOCUMENT SITUATED AT THE BOTTOM OF THIS PAGE
Brief: "Produce a stylised 2D/3D character which demonstrates a movement animation."
For a more detailed process, refer to my portfolio document situated at the bottom of the page.
Moodboards/Inspiration
To start the project, I first of all created some moodboards on Pinterest. The first moodboard shows a range of characters relating to different archetypes. The second relates to my character inspiration with regards to the appearance. The third demonstrates the types of environments my character would travel through and the final moodboard displays story inspiration.
Character Development
After collecting together different images in relation to archetypes from Pinterest, I then produced ideas for my character archetype which are evident in the mindmap. After this task, I then chose to draw a character, one from each archetype. I decided to choose to develop the 'Hero' archetype monkey as my favourite animals are monkeys which would mean that I would have more passion with this character. Then I started to create a range of designs on Adobe Illustrator to think of how the monkey could look. I took inspiration from the character concepts in the previous section, focusing more on the first two images. I then added some faces to the designs for the monkeys to appear more realistic. I decided to choose the first monkey design as this reflected the calm, cool, friendly nature of the character I wanted to create. The designs positioned to the right weren't chosen due to the fact that their faces didn't look like those of a monkey. The design to the right of the chosen idea wasn't chosen due to the fact that the monkey didn't look calm and cool enough. After the animation process began, I soon realised it would be better if the monkey had more joints. This is my final character design as can be seen above.
Title Screen Ideas for the Game
Before thinking about title screens, I decided to choose the male gender for my character and then produced a list of names. These consisted of 'Monkio', 'Swingy/Swingio', 'Timpy' and 'Mono Chimp'. I decided to choose 'Mono Chimp' as this appealed to me the most as well as it being simplistic. As my character would be for a game, I undertook some visual research on title screens in order to create some designs. I understood that they were minimalistic, clear and bold. I tried to implement these aspects into my ideas. Aspects relating to a monkey were included, as is evident with the bananas. If I were to choose one for the game, it would be the top left design as this reflects Mono Chimp's friendly and likeable nature with his friends.
With regards to the story of the game and the role of Mono Chimp, this can be viewed in the pitch bible within this section.
Scale Perspective Drawings
The first sketch demonstrates the full body awareness of Mono Chimp before adding more joints to his arms and legs. The second sketch is the scale perspective drawing for the final character with more colour and accuracy to show a good perception of his body.
Different Sections of my Character
This analyses the individual parts of Mono Chimp which combine to make his character appearance. Likewise to the scale perspective drawings, the first image displays Mono Chimp's body parts with simple joints in his arms and legs and the second presents the same with additional joints in his arms and legs.
Animation Proof of Concept
FINAL OUTCOME SUBMISSIONS ARE BELOW - REFERENCES FOR THIS PROJECT ARE INCLUDED IN THE PORTFOLIO DOCUMENT SITUATED AT THE BOTTOM OF THIS PAGE
Character Model can be Downloaded here
Character Files can be Downloaded here
Pitch Bible
Final Outcome Presentation
