NEXT
A minimalist to-do app that focuses you on one task at a time.
Role: UX, UI, Prototyping
Problem
Between your personal and social life, work and play, hobbies and chores, keeping track of your tasks can be an exhausting balancing act. Though there are many to-do apps on the market, I wanted to create a product that greatly reduced the effort of juggling unfinished business, freeing the individual to stay focused on the moment.
Competitive Analysis
First, I conducted an analysis of to-do list apps (Actions, Doo, MinimaList, Productive, and Things 3) and identified their distinguishing features as well as what made each brand unique.
Things 3 with its abundant and granular-control features expects the user to be very hands-on in the task management process, which may cost more time and effort than a busy person can afford. Meanwhile, Productive with its habit-forming gamification tactics gives too much attention on streaks and long-term success rather than helping the user stay focused on the present task.
The three remaining apps place more emphasis on completion, but still lack in key areas. Minimalist distills tasks into a basic checklist, but does not order them in an easily perceivable hierarchy, which is important for people who rely on their to-do app for time and priority-sensitive items. Doo solves the problem of concentration with a card-based method. However, this makes it cumbersome to see a task within the context of a day, because in order to do so, the user has to swipe through an entire deck. Action’s week view may be useful as a secondary feature, but is extraneous if the user’s objective is to stay focused on the here and now.
Opportunity
In order to distinguish itself, a new entrant in this market should work to eliminate the pressure of managing tasks and long-term planning, presenting to-do’s as items that users can accomplish one at a time. To achieve this, NEXT will be a minimalist app where users input their tasks and rely on it to present them in a way that follows the natural order of time and accounts for priority. While the greatest emphasis is placed on the present task, it should still exist within the context of they day because nothing in our lives exists in a vacuum. Finally, NEXT will employ a spare and carefree aesthetic to dampen the intimidation of long to-do lists, showing users only a glimpse of what lies immediately ahead and providing secondary access to the rest of the week.
Design Principles
I then developed a set of design principles to use as guidelines for determining the look and feel of the product. Since minimalism is NEXT’s cardinal quality, its UX should feel intuitive and natural. The UI is entirely in service of functionality, always clear and helpful, never intrusive. Finally, NEXT needs to convey reliability. Even though engagement is simple, you can count on it to get things done.
Intuitive: UX feels natural & Copy is clear and succinct
Simple: UI is clean, airy and minimal
Contextual: App should feel smart and effortless
User Stories
NEXT’s target demographic are 24-40 year-olds who are comfortable with technology and lead busy professional and personal lives. With lots to do, their demanding schedules leave them with little time to plan.
I then created a series of user stories from the perspective of people with very limited time and mental space to organize their busy lives. After arranging them into high, medium and low priority, the most important items fell into categories of completing tasks in a timely and efficient manner.
Overall, time scarcity tended to be a main theme for folks who have a lot to accomplish on a daily basis.
“As a user, I want to organize my tasks effectively so that I can complete them as planned because I want to maximize my time.”
Another motif was accountability.
“As a user, I want to set reminders for appointments so that I don’t have to rely on my memory alone, because I’m bound to forget something.”
Finally, without sacrificing focus, it was important to provide affordance of what lies ahead, which lets the user consider the larger picture.
“As a user, I want to see all my tasks clearly laid out so that I can tackle them in an efficient manner.”
Defining the Features
Taking into consideration the user base’s priority concerns of time, accountability and affordance, NEXT’s core features will contain the following.
Home screen where the user can view their day’s to-do list and a summary of tasks in the coming days
Ability to easily create a new task, assign a due date and time, and categorize it
Mark a task complete
Edit and delete existing tasks
Create lists so that the user can categorize individual tasks
Empty states that encourages and instructs the user to create new tasks
UX Exploration
Home Screen
NEXT’s core features exist on the home screen, which is where the user would be able to see their next to-do as well as an overview of their upcoming tasks. After sketching several UX iterations of the home screen — for which I considered cards, tabs, scrollers, fullscreen menus, etc — I landed on a timeline concept that organizes tasks by a chronological order of due date and time. This approach allowed users to focus on what they have to do at the present moment, which aligned best with their needs.
From here, I refined the timeline concept through several more iterations to give the task at hand the most visual weight, while providing easy access to the rest of the week and list categories.
Information Architecture
The home screen was the basis from which I mapped out the rest of the app.
Creating the UI
I relied on two guiding pillars to develop NEXT’s look and feel. Firstly, its UI needed to be clean and simple to achieve a visual effect of minimalism. Secondly, color and typography would be carefully selected because NEXT heavily depends on them to convey utility.
To explore my options, I created three mood boards, each demonstrating a different style that met these standards.
Considering NEXT’s user base of 24-40 year-old professionals, A Breath of Fresh Air won out with its straightforward and customary aesthetic which conveys function and reliability.
Typography
Fonts and text styles were selected to implement NEXT’s heavy reliance on typographic hierarchy.
Color Scheme
Color is the primary tool that gives A Breath of Fresh Air its visual character. While preserving an abundance of negative space, a judicious use of bright colors in shadows and a few UI components enlivens NEXT’s spare interface.
Joining UX and UI
Home Screen
Combining the color scheme and typography with the timeline concept, I created a home screen where the user’s current task is most pronounced to fix their attention on the present. The rest of the timeline is less conspicuous and only partially visible, giving a de-emphasized glimpse of what follows. Color-coded checkmark icons indicate which list the user had assigned each task to. If an overview of the week is desired, s/he may quickly tab through the days of the week using the tabs bar conveniently located under the header.
Lists
A list icon in the header is accessible from the home screen to take the user to the lists view, where s/he can see tasks grouped into their assigned categories.
Create New Tasks and Edit Task Modal
An Add FAB is readily accessible on the bottom center of the page so that creating a new task is always just one tap away.
Each task also exists within a tappable cell that brings up an edit task modal where the user can schedule a due date and time as well as assign it to a list.
Overdue Tasks & Tasks Without Assigned Due Date and Time
To address the issue of accountability, overdue tasks are automatically migrated to the top of the next day’s timeline with a friendly prompt to reschedule.
Tasks that were created without a due date and time will recur on the bottom of each day’s timeline until the user assigns one or marks it complete.
The present task, however, still maintains the most visual weight, adhering with NEXT’s ruling logic that the present is where you should focus your attention.
Prototyping the Flows
For prototyping, I turned to NEXT’s information architecture to prescribe interactions. My goal here was to use common interaction patterns so that navigating through the app feels natural and effortless.
The following prototypes show three key user flows.
First Time User
A brand new user opens NEXT for the first time and creates a new task.
Reviewing Task Lists
A user tabs between days of the week and then navigates to the list page to see all of her tasks within a specific list.
Editing Tasks
A user taps on a task on the timeline to edit details.