Brushing Up on Brilliance...
Almost Ready!
Almost Ready!
Stay Focused, Earn money!
Product Designer
Front End Developer
3 months
January 2021 - March 2021
Yumei Feng
Jiadong Chen
Jialun Sun
Rapid prototyping
Usability Testing
CSS, HTML, JavaScript，Bootstrap
“Ding”, a new notification popped up. You know you are not supposed to check your phone right now, but you just can’t resist the temptation to do so. In the era of technology, mobile phone notifications have greatly interfered with people’s work and study efficiency. Official studies have shown that performances on the assessment suffered if the student received any kind of audible notification, even if they didn’t check it. As a group of enthusiastic students, we intend to mitigate mobile distractions and increase users’ efficiency through time tracking and selectively blocking notifications.
We created an app that can help users stay focused by setting up a task list, a time frame, the apps that they want to block notifications from and then start the task. If they choose to quit the task before time ends, they will earn no or deduced token money, thus providing incentives for them to stay focused.
Methology
We decided to use Ethnography as the main method of our research by directly observing friends, family members and coworkers while working. 10 participants including field workers and fellow students are observed in natural settings. We tried to minimize our presence by not interrupting them at all while recording all the phenomenons observed and then note, describe, synthesize and analyze our data together.
Key Insights
We found that most participants are experiencing outside distractions while studying or working. These are the core issues we found:
1. Distracted by the buzzing sound of mobile notifications
2. Interrupted by outside stimulus
3. Break time takes longer than intended
4. Procrastinated before starting to work
5. Lose track of time while working
6. Tasks take longer than expected
Playing games while listening to lectures
Distracted by mobile phones
Procrastination to start work
Map Problem to Solution
Through intensive user research we were able to match the problems we found to our opinions of solutions.
Storyboard 1
depicts a scenario where users can accomplish tasks efficiently by setting a definite amount of time to stay focused and compete with friends.
Storyboard 2
seeks to help users stay focused by selectively blocking notifications from certain apps.
Storyboard 3
depicts a scenario where the apps help users to focus more after gaining motivations from friends.
We curated a set of sketches using the problem and solution space we mapped and the storyboards as guides. We tested it with real users to examine the logical flow and their initial impression of the app.
We asked our users to evaluate our prototype based on Jakob Nielsen's 10 heuristic evaluation criteria and we found that our design needs to be improved in several aspects. We incorporated the feedback into designing our high fidelity prototypes.
Aesthetic and minimalist design
The layout of the setting page contains too much information and would likely confuse users so we reframe the layout and separate setting into task setting and ticket setting page.
Help and documentation
All users we tested with reflects that there's no help and documentation throughout the app so they are confused on what tickets are used for. We added a help button on the ticket setting page to address users' concerns.
Error Prevention & Help users recognize, diagnose, and recover from errors
Many users reflect that there no proper way of error prevention and feedback given when trying to quit. We added the confirmation pop-up window if users try to quit before section ends.
In order to encourage users to spend more time focusing, we decided to make our app interactive by building it in a corporate setting where more focusing time leads to higher level and salary. New users start from being an Intern with no salary, then they gradually earn more salary through spending more time focusing using the app. Each minute you spend focusing turns into a dollar earned and if you quit in the middle of a task, no money will be earned. The ultimate goal of users is to earn enough token money and eventually upgrade to be the CEO. We believe this mechanism can really encourage users to stay focused for the given time frame and provide themselves internal and external motivation to finish work.
All team members are involved in the implementation process and we developed a detailed development plan assigning specific task to each individual on a weekly basis. Techniques such as HTML handlebars, AJAX, and Json writing are employed to add dynamic interactions. I designed and coded the Home Page, Notification, History and Achievement page independently, and co-coded other pages. The development process was challenging as I had no prior experience with web development but very informative as I self-taught many skills over the process.
We also went over many iterations and added adjustments to the CSS layout and JS interactions through the development process. However, we wasn't able to employ the group task page because of time constraints.
Login Authentication
Users are able to log into their unique account. If they enter the wrong username or password, the app would report an error message.
View friends & Edit To-do List
Users can view the money they earned and their level on the home page. They can also access friends' achievements and add or delete from the To-do List.
View History , Achievements and Set Notification Access
By clicking on the sidebar, users are able to view the achievement badges they have earned and their history focus times sorted by day, week and month. They can also set the apps that they want to receive or not notifications from while focusing.
Set tasks and break time
Before starting a task, users are able to set the time frame and task list freely, and the break time and frequency that they prefer.
Enter break & Quit task
After countdown starts, users can check out tasks that they have already accomplished, enter breaks or quit unfinished task with penalty.
Being a full-stack designer is not easy
This is the first project that I have done combining user experience research, wireframes design and web development. I have no prior experience with front end development so I had to self-taught everything from scratch. The comprehensive thinking and programming skills that I have mastered motivate me to keep learning and enrich my skill-tree.
Reality can deviate from expectation to a great extent
Initially we had many ideas of how we want to design and implement our app but we are limited by time and resource constraints. We had to give up certain features such as group task assignments, ranking, and friend’s achievement page that we designed initially. In future cases, we would probably prioritize features and plan our development process better.
Try to consider everything at the beginning
Initially, we set the screen size to Iphone X and orientiate all components of the page around that size. We later found out that the page is not responsive and we forgot about the navigation bar on top and we had to change all parts of our code to fix the issue. It’s much easier for us at the end if we can consider things like responsiveness and device characteristics at the beginning for future projects.
In the future,
If I have more time to work on the project, I would refine the look and feel of screens pages to make it more aesthetically pleasing and modernize as well as adding in more functions to increase its usability. I would also want real user to actually use our app on a daily basis and potentially publicize our app.
.svg)