Serafina Yu
HomeWorksVisionsAbout
EmailLinkedInInstagramWeChat
View Serafina's Resume

Swifty

The Ultimate Solution for Striplings With Procrastination
Project Type|Academic Case Study at ArtCenter College of Design
Project Timeline|Nov - Dec 2019 ( 7 weeks )
Project Instructor|Maggie Hendrie / Thom Meredith
Project Copy Right|Serafina Yu
My Contribution|User Research / UI & UX Design / Front-end Coding
Tools Used| Adobe XD / Visual Studio Code

Mobile Application For Procrastinators

Swifty is a time management app provided for younger procrastinators. Unlike traditional time management methods, like creating inaccessible To-Do Lists, Swifty generates a more direct solution with easy operation and customized services. I wanted to take creativity, productivity, and work efficiency into consideration and provide remedial measurements. AI-captured patterns from users would be utilized for product enhancement or commercial use.

Part 1

uXR, ui & ux dESIGN

How does Swifty differentiate from other time management methods, to make it the best fit for procrastinators?

Part 2

Front-end prototyping

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

People need stimuli to reinforce the self-awareness needed to encourage proper time management.

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

According to psychological studies and academic research, people who spontaneously generate internal motivation demonstrate Self-Discipline or Self-Control and likely would have more vital self-awareness. When it comes to the time management practice, those people would have a stronger desire to dominate their time or have higher task completeness than others.

What could motivate people to React from Urgent information?

There are several factors that would affect a human's incentives to keep a schedule, list upcoming events, and so on, such as the time left before deadline, health conditions, concentration level, and task sequencing. Targeted research, including an expert review and a survey, defined problems and examined which user needs and wants are important and how to solve them.

The goal/behavior/motivation profiles from these synthesized personas suggest that providing effective reinforcement methods could help users build self-awareness, which acknowledges the needs Swifty seeks to fulfill.
What do procrastinators
Think, Feel, and Do?

A UChicago report indicated that the activation of a clear goal, and an 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. Based on this report, I used three perception aspects - THINK, FEEL and DO - as my key for ideation.

What if...

What if your feelings and focus patterns could be understood?

What if you could have a more effective and meaningful lifestyle?

Record your condition anywhere, anytime
Check your working behavior when needed
Learn about your attention pattern

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

01 - Appropriate Routine Settings in a daily basis

Users can set up a solid routine for daily behaviors with a default matrix. Users can click the arrow icons to increase or decrease the digit, and click on “Plus” to add a new routine to the schedule. Users can see their plans, drag and drop time blocks to a preferred timeline when completing this step.

02 - Project-based Schedule List with Smart Control

All schedules are project-based to meet the audience’s demands. As a result, it is essential to require users only to set basic regulations. The time block is generated according to the two key factors: Due Date and Priority, to help strategize the schedule. The left time calculator before due and the contingency are included by default.

03 - Precise Time counter Installation

Users can click the Bell icon to set or cancel the start reminder. If users cannot complete the project in the given time, they can pause the process. If the due time is less than 5 hours, users cannot pause it. Overall, the time counter follows a compulsive mechanism to supervise users to finish their work before the deadline.

04 - Clear navigation methods to index Location

Users can switch dates via header navigation or click on the Calendar icon for indexing. The default timeline starts at 8 a.m, but users can scroll up to check on a break time. Meanwhile, various statuses for project blocks are indicated: Not yet started, Paused, and Finished.

05 - Hourly condition Track to Achieve high efficiency

Under the footer condition panel, users can see a data-supported tracking block and a progress block to set anxiety levels and external impact hourly. Those blocks showcase condition changes and daily tips after inputs. If users toggle to a previous date, the blocks would only show daily tips, and no information would be offered for a future date.

06 - Time Distribution and Project Summary

The Summary page has two measuring dimensions: the quantity of work regulated from week to month and the project details. Both measurements are stated with a list of recent projects as shortcuts. More details expand so users can toggle between them as they click to enter the micro view.

07 - Footer Bar Interactions and Settings

​​Except for the Add Project feature, users can easily toggle between pages. ​​The Setting page includes the requirement tracking point, customized contingency presets, and iOS connectivity for back-end developers to train AI.

Card State Specification

Those cards contain different information types and are divided by project conditions. One significant difference between cards is the number of sections the project is separated in to provide intuition that helps users tackle tasks through hierarchical information.

Front-end prototyping

Actualizing from design demos to an actual product requires a few more steps, from front-end visualization to testing before final launch. I digged into the front-end coding, trying to take a glance at the primary mockup language. I used Next.js to construct most of my design with Visual Studio Code and used CSS to place each element just like I did in the design process.

Thanks for viewing!
Previous

Spatial Color Picker

Next

Flex

View All Works
©  Serafina Yu Portfolio 2022 · All Rights Reserved