NEW DIRECTION – GET SERIOUS
I began a more thorough research. I was reading into UX/UI design principles. Rules with regards to colour and font, positioning and overall experience.
Better later than never! I should done this a lot earlier but I am so happy that I made myself to read into things more. Found it extremely helpful.Â
I changed my source of inspiration as well. I realised that Behance is a lot better platform to find inspiration and learn from other, professional designers how they lay out, design and present their (app) work.
I created a moodboard for the app :Â click here
I used these projects on Behance as visual, presentation and functionality references and inspirations.
other useful links I learnt from about principles and rules:
https://medium.muz.li/top-5-ui-fonts-for-website-mobile-apps-d78829e58f7e
https://www.smashingmagazine.com/2017/01/underestimated-power-color-mobile-app-design/
Based on all the new information and inspiration I gathered I felt a lot more and lot better equipped for the task, get serious and design an app interface that looks professional.
FINAL SKETCHES
With the research and new knowledge I gained I realised just how important sketching and planning the layout out in advance is. This is something that needs to be done, and needs to be done quite in depth, much like storyboarding. I have done more, and more in depth sketches for the final design. The sketch plans for this version of the app interface are completely different to the previous ones as they are a lot more simple and neat. I was able to follow and stick with these ideas and easily turn them into digital designs
I reconsidered everything. Layout, features, icons and their position, font, menu bar, colour scheme and user experience. Everything! And I believe it totally worth it.Â
My sketches were a lot more detailed and created a sketch for basically every page, which helped me a great deal. I didn’t have to play around and experiment digitally. I planned ahead and I knew what to do.
FINAL ICONS
I based these final icons on the previously created ones and additional research and my sketches. The original icons created served as the foundation for the improved, more in depth final icons.
I added new ones and modified the previous icons. I looked at reference images of ‘simple’ vector based illustrations. The updated icons are more pleasant to look at and represent the features better. Examples of vector based images I used as references: mainly sourced from Pinterest and can be found in the Pinterest moodboard I created
THUMBNAILS
I believe in the end I was able to apply my knowledge through research in a way that resulted in a simple yet bright and positive layout.
The new layout, typography and colour scheme worked effectively together. There was no more clashing and confusion about the tone of voice and visual message. I also began to understand how user experience works and I was heavily focusing on that within the final design.
I have also changed what pages to feature based on the references sourced on Behance. I now added a ‘walkthrough’ or ‘onboarding’ where I feature the mission statement briefly and the four pillars with relevant quotes. Originally I had these as the home screen. I added sign in and sign up pages as well as creating an avatar to ensure this platform eliminates all possibility for judgements based on profile pictures and cyber bullying. I haven’t had pages like this previously and I think they make a great addition tot he user experience.
I was run-in out of time, so I only featured the home page, home button, tools and articles once the user is logged in. I wanted to feature more, however I was pleased with these as they represent the overarching tone of voice, layout, design and features well enough to be able to imagine the rest.
MOCK UP VISUALS
#1 Walkthrough
The pages work on a ‘swipe(left)’ system. The pages briefly explain the four pillars followed by anappropriate, relevant and motivational quote.
Once the user swiped through the four pillars and onboarding section the can ‘get started’ by clocking the button which will transfer the first time user to the registration and sign up page
These pages are examples and a walkthrough of the ‘onboarding’ process’ the first pages the new user will see when downloading the app for the first time.
#2 Opening Screen / Sign in / Sign up
The following pages display, firstly the ‘quick access’ page
This part of the app serves as a bit of information and insight to what the user can expect from the app and a brief explanation about Utopia’s mission.
Once the user signed up/registered they won’t have to go through the onboarding process again, therefore when the app is opening and loading the ‘quick access page’ will appear which will then transfer them to the ‘login page’ The features of the login page are very standard. I looked at other apps and the login features within them. First time users, or in case a new person wishes to create an account they will be transferred to the ‘sign up’ page where they can input their email, username and password before they continue the registration process.
#3 Create an Avatar
The following pages display the registration process.
Firstly the new user will be asked to choose wether they are ‘here’ on the app to give support or ask for support.This feature helps determine what types of articles, podcasts and recommendations will appear primarily for the user.
Then the user will be asked to create an avatar. The user profile won’t allow peoeple to upload images, this is in order to avoid the breach of Equality and Diversity so no one will be excluded or treated wrongly due to their appearance and to avoid potential cyber bullying.
The features of the ‘avatar creator’ are very simple vector based shapes. The choice of colour is based on the colour scheme of the app.
Primary colour: the main colour of the ‘face of the avatar’
Secondary colour: the colour of the ‘avatar features’ such as hair, eyes, etc.
Other facial features: The user can select the hair, eyes, nose and mouth style to create their own avatar user face.
#4 Home page / logged in
Once the user logs in the ‘home page’ will appear with a welcome followed by the chosen username.
The homepage will allow quick access to the app journal which is made up of a mood tracker and a diary where the user can log their mood and specific events based on a calendar. This will then link to their progression where an analysis is conducted so they can track, analyse and progress.
The ‘tools’ bar transfers the user to ‘quick tools’ that can help people cope with mental issues and guide patients and friends and families.
The home page also features a ‘goal setter’ where the user can add goals and when they need to / want to complete the task / goal by.
The menu bar at the bottom allows quick access to:
• Home
• Articles
• Progress
• Shop
• Extended menu – personal user base
The extended menu button allows quick access to:
• Profile
• Status (view and add new)
• Likes (articles, podcasts, posts, etc.)
• Saved (articles, podcasts, posts, etc.)