Defining the problem

Many people face difficulties and frustration making actions and getting tangible results. The ability to concentrate and mange yourself regularly varies from person to person according to their character, upbringing and living environment. This project puts the user front and center in order to create a tool for realizing their opportunities on the journey to action.

Key pain points

Maintaining motivation to follow through
Setting goals and objectives
Acknowledging of small achievements

Market research

There are multiple market applications that allow building plans and monitoring of habits and goals comfortably, yet they offer the same methods and tricks for all the users, instead of looking at each user individually. The user study identified a number of points where it is possible to stand out and create opportunities for improvement.

Design opportunities

Motivation booster
Based on self-directed speech exercises.

Pusher dashboard
Designed specifically to lead the user to the next action.

Gamification
Combining playfulness with productivness

Solution

An application that allows users to track weekly habits\goals and encourages them ,to take immediate action in 5 areas.
In order to solve these issues, i divided the process into 3 parts:

Trigger - Planning ,follow-up and results
Action - Type of action, task execution
Reward- Accomplishment and rewards

User research

User goal

Translate actions into measurable results

User task

User flow

While mapping the required pages for construction I created a complex user flow, which revealed a need to export a very large amount of pages and options to developed.

Wireframe flows

In order to create a prototype for user testing , I focused on number of user action cycle within the app, with the goal of reducing the number of pages I produce.

add new habit

Motivation Booster Notification

completed TASK

Design process

Inspiration

The design process was based on a number of key elements that represent the opportunities embodied the app.

Compass - Navigating , directing you to your destination.
Marker List - Highlighting a particular area to emphasize its importance over others or to mark it as urgent.
Rolex Lens - The addition of a magnifying glass in the Rolex watch lens, producing a bigger date number.
Playfulness - Win by completing a sequence of shapes and colors .

Sketching and exploring

The process began with the creation of the dashboard structure - This stage was the most important and complex to produce and involved the most user interaction.

Dashboard wireframe

Screen hierarchy:

Task axis - Tasks to perform on the same day
Timeline - Progress, tasks to follow and completed tasks
Menu - Access to additional content and settings

the thumb zone :

Natural
Stretching
Hard

Final low Fidelity Prototype

The dashboard's final configuration was determined after a number of usability tests that identified the most common operations.

Testing

Tests were done by observing users as they tried the prototype freely with minimal guidance. Tests were performed throughout the design process. The main interface points required for the test were:

Using dashboard
Creating a new habit
App navigation

Unfortunately the dashboard test was relatively weak, the finger screen sliding and playfulness did not go smoothly and the users fled to other pages. The key takeaway is the reaction of people to the visual overload on the screen. In this case the solution was to clear buttons and options and focus on the base option.

Dashboard elements

The design process forced me to clean up and fine-tune the mass of functions that have accumulated throughout the research, Despite this, each has its own magic and unique solution it provides with an emphasis on a same design language.

timeline nav

task button

Task indicator

task button states

The user should be able to clearly distinguish between what is being done and what needs to be done. and still see progress and success without disregarding failure to perform tasks.

Finding a style

logo evolution

Colors

Main

#314057

#fdb913

#da5f5a

#ffffff

#888888

#c4c4c4

#f2f2f2

Extra

#00a1c7

#7cbca7

#e1814d

#7e3f97

Typography

Roboto normal

Roboto medium

A B C a b c 1 2 3 4 5

Final design prototype

The following videos present real time use of the final prototype made in Adobe XD, The motions in the videos show the interaction and interface communication in the app and the potential for further development.

Add habit

*Motivation booster based on user preferences

Change future task

*Flexible and easy changing

Completed task and reward

*Reward context based on self-talk preferance

App navigation

Completed task shortcut

Full dashboard view

*Satisfying and catchy sliding Navigation

Process conclusions

As my first complex concept project, I challenged myself to dive deep and set a high standard of work that at the very least would meet, if not exceed other existing app in the market. My initial plans for features, pages and options were impossible for just one designer in a reasonable time.
Future lessons:

Identify basic actions – Simplification of user actions to basic flow and execute features. Base your work on main conclusion and then continue with extensions.
The question model - on every feature in development we ask basic and advanced questions. If we are planning a large number of features and don't ask enough questions, there is a chance that basic options will be skipped or won't provide a sufficient solution.
Options framing - in the final design process it is possible to create endless design options, so it is important to place a limit on a number of basic designs from which to decide on one option to go with until the end of the process/stage.

Habit compass

Searching for the perfect grid