Mobile UX/UI Design
Day Up
Timeline
8 Weeks
Responsibilities
User Interviews, User Research
Persona
Wireframes, Low-Fi & Hi-Fi Prototype
User Testing
User Interfaces
Role
Project manager, UX/UI designer, UX researcher
Tools
Pen & paper, Balsamiq, Adobe Photoshop, Sketch, InVision Studio
I collaborated with my classmates to design a study app from the ground up, including defining problems, conducting user testings, etc. This is a group project for Usability & Human Interaction class. However, due to the limitations of course time, I personally want to continue to improve this project after class. Based on the research done by our group work, I individually completed the final UX flows, Hi-Fi prototypes, and user interfaces.
The Proposal
The Problem
-
Have you ever tried to concentrate on your work, but your workflow constantly interrupted by your phone (notifications, new emails, new messages, social updates, etc.)?
-
Have you ever tried to pick up your phone only to check one little thing, but ended up hopping from one app to another for hoooours, but just forgot to check that one little thing?
-
Do you want to improve your work/study efficiency by blocking irrelevant information when you work/study?
In today's world, technology has blended itself with the learning process and lifestyle. It is not possible for individuals to completely avoid using their phones while managing their studies/works.
- They need to look at digital notes
- Search for information
- Look up dictionaries
- Access photos related to the study/work
Existing study apps fail to address the number one cause of distraction
- i.e. Social Media / Messaging apps
- Study apps either completely block individuals from using their
phones or allow only partial access to the phone's contents
Both of these scenarios restrict users from fully utilizing the power of mobile technology for their studies/works. Not to mention the inconveniences caused to users by breaking their flow of thought.
We propose to design a new study app that incorporates the need of the individuals to access other media related to study/work while still serving the purpose of making the user focus on the task at hand (ie, study/work).
Value Derived
Better time management as all the things required are accessible in one location, customization allows for better usability and efficiency. Maintain a natural flow to studies by negating annoying features or accessibility barriers. Making individual studying/working with a phone simple, distraction-free, engaging and effective.
Target Groups
-
Our quintessential users are the ones who want to utilize their phones to study but are highly distracted by their constant social media updates, messages, and other notifications.
-
Our user group comprises of:
Primary: School students
Secondary: Working individuals
User Research
Interview Findings
We interviewed 8 students (including native undergraduate students, and international graduate/Ph.D. students; aging from 20-28) to understand the current study apps usage, users' mindsets and their motivations. From these interviews, we discovered that although students were aware of the diversions caused by social media apps, most of them did not take any action to lessen its impact on their studies. We also learned that they are all looking for a simple interface and easy-to-use app. Some students wanted a study session scheduler so that they could set the goals/outcome of their sessions. Most students also want the app to be synchronized with their calendar and want to have a to-do list.
Therefore, we think it would be best to address all their needs by offering a set of different "Modes"/"Access Groups" to help the users to achieve specific goals as per their choice and convenience. This would also make the app highly versatile and also customizable.
Behavioral Variable Mapping
Interviewees mapped out on behavioral variables
Through the interviews, we mapped out the behavioral variables based on the interview findings.
And then:
-
We grouped similar results
-
Identified trends, and recognized patterns
-
Merged uniformities to create a persona
Polished behavioral variable mapping
Persona
Our Aim
-
To help Emily maintain a natural flow to her studies by eliminating annoying notifications and distraction causing elements
-
To act as a facilitator that helps Emily better her time management by providing all the essential study requirements accessible to her in one location
-
To support customization thereby allowing Emily to gain study efficiency and experience better functionality and usability
The Solution
Introducing Day Up, a study app designed to let students focus on their studies by providing smart solutions to the problems and difficulties commonly faced by them.
Day Up addresses these pain points by offering:
-
Options to set-up personalized "study sessions" based on the student's preferred method of study
-
Provide access to applications and files essential to completing a study session effectively
-
Offer a customized schedule that alerts students of assignment deadlines, customized reminders, and sync to other calendars
-
Increases productivity by offering reminder options for students to take strategic breaks between long study sessions
Prototyping
Initial Wireframe Concepts
We made a clickable Mid-Fi prototype by Balsamiq, and ran the user testing to see if the process makes sense, intuitive and efficient.
The following are some of the screens used for user testing:
User Testing
A total of 8 participants were used for user testing. We designed a usability protocol with tasks and exit questions to help better understand the issues in our designs.
The user testing comprised of 4 tasks:
-
First impressions
-
Setting-up a new study session
-
Find and open study material within the app
-
Add a new task to the in-app schedule and sync it with Google Calendar
Feedback
Based on the user testing results, and after gathering the feedback of participants, we came across the following issues:
-
Without the guide, participants are not very clear about the process. it's not very clear where the buttons are clickable, and they have no expectation of what will happen after tapping on something.
-
When selecting an app, there's no way to make a grouping selection.
-
As an app that aims to improve learning/working efficiency, the overall procedure is not very intuitive but instead increases the burden.
-
The function of finding the file within the Day Up app is a bit unnecessary
-
The function of "Schedule" is not comprehensive enough
-
Some participants mentioned that they don’t like the feeling of being timed when they are studying
After class, according to the class exercises I participated in, and group research findings, I individually finalized the wireframe and organized into the workflow format.
Wireframe Workflow
Workflow of activate accessible apps & start a new session
Workflow of add a new task in schedule for study session
Context Scenarios
I'm going to walk through Emily's journey using the Day Up. In the following scenarios, Emily will:
-
Create a new study session
-
Choose apps she wants to access during the session
-
Set up timer
-
Schedule study tasks.
Scenario 1 - Time To Day Up
After binge-watching TV shows yesterday, Emily comes to the library early today trying to spend more time on studying to compensate for her sense of guilt. Using the Day Up study app, Emily starts a new study session to get focused.
(Tips: Hover the images to see how it works)
To get started with her studies, Emily launches the Day Up app on her phone (This is her first time using this app):
As the app opens, Emily taps on the "Activate" to customize accessible apps that related to her study and Day Up will block the rest. (Left image)
With category grouping, she easily selects only the apps she needs to help with her works. (Right image)
-
Google Docs
-
Google Drive
-
iTranslate
-
Slack
Once she selected her apps, she taps on the "Next"
Emily saves this "app group" as "General" so that she can access this session again in the future.
She types in "General" and then taps on "Done" which saves the session and backs to the timer screen with a new "block" besides "activate" (Left image)
The default study session is a countdown of 25 minutes. Emily doesn't want to be timed and just wants to take the time to work on something. So she turns off the "countdown" by tapping on the switch and then taps on "play" button (Right image)
As time progresses, she can access any apps in the preset "General" group anytime. (Left image)
After that, she gets back to her studies and continues working on her assignment. After being focused for 50 minutes in a row, she decided to stop learning and take a short break. Then she holds the stop button to end the study session. Just then, the Day Up alerts her of the completion of her session time, which will also be recorded by the system for future review. (Right image)
Activate apps
Choose accessible apps
Name the app group
Turn off "Countdown"
Accessing apps
Ending the session
Scenario 2 - Schedule A Study Task
A new week has begun and Emily comes to the library today (Oct 7th) with the aim of completing one of her assignments that is due tomorrow midnight. Emily sets up the submission task and gets focused to complete the assignment asap.
(Tips: Hover the images to see how it works)
Emily taps on the "Schedule" icon on her phone to access her scheduler, and then she taps on the "Oct 8th" box to add a new task (Left image)
Then she types in "Paper" as the task title. Since the default is an all-day task, she only sets the task title for the fastest settings, regardless of other settings(alarm, repeat, subtasks, etc.) (Right image)
Emily taps on the "date box" to view tasks and other events/goals if any, and then she taps on the "Session" icon to get back to timer screen. (Left image)
Above the timer clock, she taps on the drop-down icon and taps on the "Paper" task that she just added. This time, Emily decides to set a 90-minute timer to help her manage the duration of her study session by sliding around the timer clock. (Right image)
She then taps on "None" on the "When timer ends" section, and set the "Radar" as an alarm to remind her. (Left image)
After setting up the alarm, she is redirected to the timer screen where a countdown timer displays the time remaining for the break.
After 90 minutes of concentration, the app alarmed and informed Emily that she completed the task successfully. The completion and usage time will be recorded by the app for future review. (Right image)
Emily taps on "Take a break" and feels very satisfied and fulfilling.
Access the shceduler
View task on the shceduler
Add a task
Set timer for task
Set alarm for the timer ends
Start the session with a task
Takeaways
-
The minimalistic approach towards design and information structure is appreciated by most people
-
Icons, unless universally accepted to connote something specific/are in line with existing mental models; lead to user confusion
-
Clarity is valued more than simplicity. Even the simplest of things can get confusing for users if they are not made clear enough
-
Using actual content while testing was crucial in avoiding participant confusion
-
Observing the participants use the app was more helpful than getting their feedback