Mock Up

As the last post for this project, I am showing the mock up of the application on an iPhone.

iPhone Mock Up

iPhone Mock Up

Thank you for following the blog.


Application Descriptive Walkthrough

The user starts off with the main screen in which it requires him to log in to the application or sign up. This is necessary since every user is different and so that the application can track each different users’ progress. Likewise the user can also sign up with either facebook or twitter.

Start Screen

Start Screen

The application have 3 main sections; Browse, Challenge and Profile, and from the start screen the user will be brought to the browse section. The browse section is where the user will gain inspiration and motivation by looking at other users’ challenge submission (submission for short). User is able to sort the way he browse the challenges by; most recent submission, all-time best and sort and view them according to the challenges. These challenges will be shown in a minimized version, once the submission is tapped a full sized version of the submission will be shown.

Browse List

Browse List

Browse - Sort Open

Browse – Sort Open

These full size submission will show the full image or video of the submission as well the remarks and comment received. In order to make these app much more unique, the user are able to put 4 different types of remarks to the submission with the maximum of only 2 remarks per submission. These remarks are; Cool (indicated by the sunglass), Awesome (star), Like (heart) and YOLO (YOLO icon). Users are also able to put hashtags to their title and comment on the submissions.

Browse - Submission Expanded

Browse – Submission Expanded

The next section is the Challenge Section, this section opens up with the list of challenge the users are able to accomplish. With the top being the latest challenge and the bottom, the oldest, on the very top of the list is a countdown to the release of the next challenge. For each challenge, these information are displayed; challenge icon, name, number, event date and progress status. Event date is the date in which the event corresponding to the challenge. If there is a word on top of the date, it indicate the status of the event either the user have attended the event or the event has passed and the user has missed it. Progress status is displayed on the challenge icon, only 2 status is displayed; approve and pending. These status will only be displayed when the user has submit a submission corresponding to the challenge and then the pending for approval status will be shown. The pending status will be shown until an official review the submission and mark it as approved, in which the submission meets the challenge criteria. Since this is a competition these status is necessary to prevent any cheats or loopholes.

Challenges - List

Challenges – List

Approved and Pending

Once the user click any of the challenge, they will be brought to the page below. This page has 2 section the challenge and event. Challenge contains information on the challenge whereas the event displays information on where and when the corresponding challenge event will be held. On the very bottom of the section there is a big submit button for the user to submit the submission.

Challenges - Football

Challenges – Football

Challenges - Football Event

Challenges – Football Event

Challenges - Landmark

Challenges – Landmark

Challenges - Submission View

Challenges – Submission View

When the user click the button, they browse or take from camera option will appear. User then select or take a picture. User proceed with editing the picture and then goes to the last page which is the ‘submit and share’ page. In this page the user can create a title for the picture, review it, have an options to share the picture with any of the 4 social media (facebook, twitter, Instagram and vine) and submit the submission.

Challenges - Submit

Challenges – Submit

The last section of the application is the ‘Profile Section’. In this section the user can browse through the user’s statistics and submission. How many events has he attended or challenges submitted. This section also links any user that visit the profile to his other social media sites.



Resources Made for this

Here are some of the symbols I have Created for these Project.

Icons and Symbols

Icons and Symbols

List of Resources for this Project

Profile Pictures of 5 Users taken from Facebook

Picture of Dessert Taken from the user sammyliew

Picture of Dessert Taken from the user kennybuntara

Picture of Big Ben Taken from the user hendhyhutomo

Picture of a bycicle Taken from the user bernyeremia

Picture of Eiffel Tower from

Picture of Dessert from

Picture of a Guitarist from

Picture of a Sport’s Field from

Picture of a Cyclist from

Picture of a soccer player from

Picture of iPhone Main Screen with all the Icons from

Picture of a white iPhone from

Mental Health Researches


Rationale of The Project, Why Why Why

The main issue that this project is trying to tackle is ‘Mental Health’, and mental health itself can be a lot things from the common symptoms to the extremes. It is very unlikely that there is someone has never experienced a Mental Health problem before. Mental Health includes; Stress, Phobias, Anxiety, Depression and Obsessive-compulsive Disorder (OCD). There is no absolute cure for Mental Health but if only people know about this matter it will be less likely for these problem to occur to them. Tackling mental health problem is actually very simple, since mental health is often caused by the person’s bad daily habit it is as simple as creating a better habit for the person.

So in order to do that, this project aims to grab the person’s attention and getting them to be aware of the mental health problem unconsciously. This awareness is not actually that crucial for this project since the goal is creating a better life habit for the user. The easiest cure for Mental Health Problems is activities. These activities includes; socializing, doing something that is enjoyable, taking a break, doing sports or travelling and eating healthy good food. And this project wants to bring all these activities back to the user. This application will then set out various challenges that is related to the activities to be completed by the user.

This project will be a 3-month campaign in which during that duration, every week 2 challenges will be given out to the users to be completed. For each challenge, there will be a related event health around the major cities in UK to allow the users to meet up with other users to complete the challenges together and socialize. And by making this into a competition that gives of a reward, this will grab the user’s attention and spark the user’s motivation. The reward itself will be a travel trip to some amazing places, this reward will be given to the user who completed the most number of challenges and received the most positive feedback from the other users. The project is not trying to keep the users away from their digital life or social media, but instead just to put the fun offline activities into the life of the users. Once this campaign ended, the users would be trying to find activities on their own, thus having a healthier Mental Health.

New Color Scheme and Design Progress

Currently the design for the Interface looks like this

Browse - Blue

Browse – Blue

Start Screen - Blue

Start Screen – Blue

The color dominant is blue and green, but this scheme doesn’t work well with the browse screen. So I have decided to change the scheme to.

Start Screen - White

Start Screen – White

Browse Screen - White

Browse Screen – White

Which in turns changed the logo and color scheme to:



App Icon

App Icon

Refined Logo

Final Logo

Final Logo

Logo Constructed

Logo Constructed

App Icon Design

App Icon Design

Finalized version of the Logo, along with the app icon design.

Color Mood

Icon Colour Palette

I picked these 2 colours for the app design, because these 2 colours has a refreshing effect to the eye. And blue and green symbolize nature, freshness, relaxation and active.


Wireframe Arrang

Wireframe Arranged

These wireframes displays all the necessary interface for the application: the challenge, browsing and user’s profile. The only thing that would be missing is the tutorial/about section.

The Logo is Up



The aim from this logo is to keep it simple and direct. A logo that is easy to grasp and gives out a bold message, therefore the condensed bold selection. This logo is developed from the font Tungsten Medium.

The title came up from the current slang YOLO which stands for You Only Live Once. This slang suits perfectly with the theme of the project since the aim of the project is to create an awareness to the people of their mental health and body since they only live once. And to do this they need to make the full use of their life. The term YOLO is not only spot on in terms of meaning but also eye catchy to the young Adults since it is the current trending slang.

User Flow Chart

Flowchart YOLO

A user flowchart of my application along with some of the wireframes for the application. Also if you noticed I have changed the name of the App to “YOLO” since it packs quite a punch, and i am doing the second idea from the previous post in which i am creating an application that ask the user to do various challenges to win a travel trip. There will be events all around london that helps the challengers in doing the challenges. Onto the next post then!