The Ultimate Solution for Striplings With Procrastination
Project Type|Academic Case Study at ArtCenter College of Design
Project Timeline|Sep - Dec 2019, Jan - Apr 2020
Project InstructorMaggie Hendrie / Thom Meredith
Project Copy RightSerafina Yu
My Contribution|Product Definition / Storytelling / User Research / UI & UX Design / Front-end Coding
Tools Used| Adobe XD / Visual Studio Code

Mobile Application Designed For Procrastinators

Swifty is a time management app provided for procrastinators at a younger age. Unlike traditional time management methods, it generates a more direct solution with easy operation and customized services. Other than following a delayed To-Do List, I wanted to take creativity, productivity, and work efficiency into consideration and provide remedial measurements. The patterns AI could captured from users would also be utilized for product enhancement and commercial usage.

Part 1

product value & definition

How does Switfy differentiate from other time management methods and make actual difference for procrastinators?

Part 2

Front-end prototyping

What does Swifty look like when it change from design mockups to the front-end prototypes?

People need stimuli to improve self-awareness of making proper time management.

What is the role of self-Awareness in Time Management?

According to psychology studies and academic research, people who spontaneously generate internal motivation of getting things done, which is so called Self-Discipline or Self-Control, would be more self-aware. And when it comes to the Time Management practice, those people would have stronger desire to dominate their time or have higher task completeness than others.

What could motivate people to React from Time-related information?

There are several aspects that would affect human's reactions on time schedule, list of upcoming events and so on, such as the time left before deadline, the body condition, the concentration level, and the sequence to do works. The acquisition is from a targeted research, including an expert review to define problems, and a survey to support if needs are indeed necessary and the scale of people facing a similar issue. (research details in below)

The Goal, Behavior, and Motivation behind, resulting from the synthesized personas based on research and methodologies, are all pointing to the idea of providing effective reinforcement methods to help users build up self-awareness, which acknowledges Swifty's significant value.
What do procrastinators
Think, Feel, and Do?

A UChicago report indicated that the activation of a clear goal and the accompanying increase in motivation can influence many aspects of users' behavior and judgment, which can be converted into awareness-triggered impetus in the case of time management. As a result, I listed the three perception aspects - THINK, FEEL, DO, as my key for ideation.

What if...

What if your feelings could be understood?
What if you could check your working pattern?
What if you could have a more effective and meaningful lifestyle?

Record your mood and condition anywhere anytime
Check your working behavior summary when needed
Learn about your continuously boosted working cycle

An Empathetic friend,
a conscientious Supervisor,
a Professional coach.

01 - Appropriate Routine Settings in a daily basis

For initial setup, users are required to set a solid time period for daily behaviors, like sleeping and eating, given by default. Users can click the arrow icons to increase or decrease the number, click on the “Plus” icon to add routine to schedule, and long press the edit block to delete. When this step is completed and the page is redirected to the Schedule page, users can drag and drop time blocks to a preferred timeline.

02 - Project-based Schedule List with Smart Control

All schedules are project-based to meet audience’s demands. As a result, content requirements are taken into considerations while adding projects to schedule. The time period is generated according to the two key factors: Due Date and Priority so that back-end could help to strategize. As users add project successfully, a project block displays out. Other than the two factors above, the Left Time before due and the contingency are also given.

03 - Precise Time counter Installation

Users can click the Bell icon to set or cancel reminder. Once users click Start, the time counter generates and cannot be paused. If users complete tasks before deadline, they can just click to finish; otherwise, they can work until they finish or to pause. However, if a project is about to due (≤3h) or cannot be placed anywhere else, users can only finish it. Overall, the time counter follows a compulsive mechanism to supervise users to finish their work before deadline.

04 - Clear navigation methods to index Location

Within a week, users can switch dates by clicking on the date number with the cursor only displaying on the present date. If users want to switch to a date out of that week, they could click on the Calendar icon and quickly navigate. The default timeline starts at 8 a.m, but users can scroll up to check the time between 0 a.m to 7 a.m. Meantime, there are three main status for a project block: Not yet started, project paused, and project finished.

05 - Hourly condition Recording to Achieve high efficiency

Under the Efficiency Control page, users can see a data-supported records block and a customized setting block where they could set anxiety level and external impact hourly. The first block may appear changes after users operated, the daily tips would also display out in the second block; if users toggle to a previous date, then this block would only show the daily tips for that date; no information would be displayed for a future date.

06 - Time Distribution and Project Summary in Macroview and Microview

There are two measuring dimensions for the Summary page, one is about the quantity of work regulated from week to month, the other one is about project details. In a macroview perspective, both measures are displayed briefly, a list of drawable project blocks would also show up as shortcuts. As users click to enter the microview angle, more details display out and users could toggle between the two measures.

07 - Footer Bar Interactions and Settings Review

Except for the Add Project function in the middle of the footer, users can easily toggle between pages, which builds up the core value of Swifty. In the Settings page, required tracking point, customized contingency preset, and iOS related connectivity are all included to close the product loop for back-end developers and technologists to obtain the data.

Project Block Specification

Divided by project conditions, those Project Block Cards contains different types of information, respectively represents different categories. The major way to distinguish each category is on the quantity of sections the project is initially divided, which helps users clarify to a large extent. However, the size of each block on the schedule is decided by the time length of each section, so the information displays would be differed relatively.

Front-end prototyping

Actualizing from design demos to an actual product requires a few more steps, from front-end visualization to final release testing. Departments are always trying to find a balance between each stage through negotiation. But for an academic project, I stepped by the front-end coding, trying to take a glance at the basic computer language. I used Next.js to construct the major part of my design and played with the CSS to place each element just like I did in the design process. It's not fully developed though, I captured the idea to convert design thinking into a logistic step by step process.

Thanks for viewing!
For inquiry purposes, contact me via email or chat with me on linkedIn. I am always open to share my professional experience and process behind.
avant-garde experiments