your own way

to be productive

TIMELINE: 22 Feb - 17 March, 2022

ROLE: UI/UX Designer

the problems?

People are using too many apps to keep them on track and productivity. However, they also cause them a lot of stress when users just seeing reminders and deadlines all the time the look at their phone. May we innovate an app that not only helps them manage their tasks professionally, but also encourages them joyfully while they are doing it.

competitive analysis

After receiving the challenge, I began to study the competitors

Remember the Milk is an application service provider for Web-based task- and time-management. It allows users to manage tasks from a computer or smartphone, both online and offline. Created in 2004 by a two-person Australian company, it now has international contributors.

Todoist is an app that allows you to plan out your day and week. You can use the tool to add simple tasks that you tick off as you go, and add descriptions for each of these. The app launched in 2007, and the company is based in California.

Well, Notion is an all-in-one tool that promotes itself as the ultimate productivity tool. It combines to-do lists, notes, Kanban boards, calendars, and tables under one roof. This saves you from having to switch between apps for different tasks.

Low fidelity

Then I quickly sketched out key user flows and diagrams

mid fidelity

The text is Segoe UI – 29pt and semi-bold to create a soft warm greeting.
Every element is 80px apart makes a neat distance and centered vertically to lead the eyes from top to button.
Carousel dot lets users know there are more to see. Skip button is designed less outstanding than carousel.
Login button is designed bold and active to drive users for the action. The size is still maintaining the same over screens.

All call-to-action buttons are prominent for users to interact with.
Input files are on top with 21pt semi-bold to distinguish with other options (16pt semi-bold).
Everything is 32px well distance makes pleasure for the eyes.

Navigation components are designed solid and positioned consistently on top and bottom of the screens. They are also easy for users to go to different section of the app.
Arrow left and right let users know there are more options to display for the calendar below.
Other containers are 32px apart and having the same size.
Icons demonstrates clear the function of each container.

Profile screen is designed as a first page of a bullet journal, where users feel everything is belonging and just for them.
They can create their own style and mood for the screen. Therefore, the Avatar is set kind of big with 148px size in the top center of the screen. There is also changing background so they will feel control everything.
Each container shows different interest of the user.
Icons are solid and in dark circle background make them easy to see and cute.

Brand Style Guide

I also built the brand style guide to set tone and mood for the app as well as keep everything consistently.

Colors

Background

#F0ECE7

Text

#273238

Dominant

#FF8F47

Support

#9FBB8A

Accent

#AE5334

Text: Quicksand

Titles and heading:

Body text:

Heading 1 | Bold, 35px

Heading 2 | Medium, 25px

TITLE 1 | Bold, 42px

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Title 2 | SemiBold, 22px

Title 3 | SemiBold, 25px

Text emphasis:

Number 1 | Bold, 16px

Link | Medium, 16px