StudyTracker is a mobile app designed to assist students struggling with time management, motivation to study, feeling unprepared for their assignments, and utilizing the appropriate study methods to accomplish their academic goals.
Additionally, users have access to a customized learner-type page that offers study method recommendations and other study resources based on their identified learner-type after completing a short learner-type survey (Visual, Auditory, or Kinesthetic).
I worked very closely with the client during this project, ensuring that the target audience’s goals, motivations, and frustrations were accurately represented and addressed through my design solution.
I took on the UX designer role of conducting user research, determining information architecture, designing wireframes, creating a high-fidelity prototype using Figma, and testing my design solution with real users for the StudyTracker app through the usability testing platform Maze.
Currently, there is not a product that is able to address all of the following student struggles when trying to create a study plan:
Using the research insights gathered from the user survey and addressing all business requirements identified by my client, I created a design solution for a study tracking app that allows students to create study plans, keep track of their progress for each deadline, and reference recommended study methods for future use.
The target audience for StudyTracker are teenagers/young adults who need guidance with creating study plans, time management, and utilizing effective study methods.
I created StudyTracker with the idea that students who struggle with studying would want a product that solved all of the previously identified problems with one solution.
I started by conducting a user survey for current students aged 12 and up to complete, which accumulated a total of 31 responses. The insights gathered helped me identify potential users goals, motivations, frustrations, and desired features they would want to see in a study tracking app.
The three main academic programs that participants are enrolled in are High School (56.7%), Undergraduate (16.7%), and Graduate (13.3%)
Participants reported that the 3 most commonly used study aids are Quizlet (100%), Evernote (18.2%), and Flipd (13.6%).
Knowing which study aids students use enabled me to identify the strengths and weaknesses that exist in current designs and apply this knowledge to my own design solution.
Users reported that the most important features to include in a study tracking app would be a calendar to input important dates (86.7%), study recommendations and tasks to complete (70%), notifications/reminders to stay on track (70%), and a notes section (60%).
The biggest frustrations/pain points users experience while studying are difficulty concentrating (86.7%), motivation (76.7%), distractions (70%), and time management (60%).
After learning that potential users are using products such as Quizlet and Flipd, I wanted to identify their strengths, weaknesses, opportunities, and threats by conducting a SWOT competitive analysis.
Quizlets strengths include an organizational feature that allows users to create folders for different subjects that they’re studying. However, users are not able to create/manage individual tasks they want to complete towards an ultimate goal.
Flipd's strengths include features that track progress such as recording duration spent on specific activities (studying, revision, homework, exam prep, etc.). However, a paid subscription majority of the app's features such as unlimited stats, custom timer shortcuts, custom daily goal, unlimited breaks, and custom study live.
After reviewing this research with the client, we decided that StudyTracker needed to offer a way for users to view/manage their daily, weekly, monthly tasks specific to their deadlines. We also agreed on the importance of users being able to track their progress. To accommodate this, I included a deadlines page in my design that displays each deadline's due date and progress bar. This ensures that the user can accurately track his/her progress and practice efficient time management.
To better understand the users motivations, needs/goals, and frustrations I created a persona based on the findings gathered in the user survey. Referencing this persona throughout all remaining steps of my design process ensured that I have empathy for the user and apply a user-centered approach to my designs.
" As a High School senior, I need to prioritize my time efficiently in order to stay on track with tests and assignments as well as find ways to dedicate my time to planning my future after graduation"
After the preliminary user-research was complete, I continued to create information and architecture deliverables such as a user storyboard, user flows, wireframe sketches, digital wireframes/prototype using Figma, usability testing, and recommended next steps.
This storyboard illustrates the persona, Kendal, going through the step-by-step process of creating a study plan for her upcoming Biology test. The purpose of this storyboard is to add context to the product's direction before prototyping.
After illustrating the user’s actions of creating a study plan, I worked with the client to identify the high priority features for the app and created a digital user flow in Figma that highlights the step-by-step process of how the user will interact with the product.
Once the users actions were mapped out in a user flow, the next step was to visually display these actions in the form of wireframe sketches.
After getting the wireframe sketches approved by the client, the next step was to create digital versions using Figma.
The next step was to test my design solutions with real users by creating a low-fidelity prototype using Figma and testing the usability through the online platform Maze.
LOW-FIDELITY PROTOTYPE
Through the online platform Maze I was able to test StudyTracker’s usability for various tasks that I would expect a potential user to complete. The three main usability findings are as follows:
As shown on the first heatmap, 80% of users correctly identified the “add task” button as being in the lower right corner, but 33.3% misclicked either by selecting the chemistry deadline header or the calendar icon located in the navigation bar.
Based on the survey findings, users want a study tracking app to include a calendar feature where they could input important deadline dates. The usability findings indicated that users had a 100% direct success rate saving the deadline information to their calendar.
The learner-type page displays recommended study methods based on the user’s learner-type (Visual, Auditory, or Kinesthetic). This heatmap shows users attempting to access additional information on the “practice test” section of the page. 60% of users had a direct success rate completing this task, however there was a 75% misclick rate. Meaning, users assumed that the entire “practice test” component was clickable instead of clicking the “view” button.
Based on the usability results I came to the following conclusions. My recommended iterations to the design solution would be to address these identified pain points:
In addition to addressing the pain points previously highlighted, I would also recommend these next steps for UI/content development.
The next step was to conduct a branding interview with the client to identify the main characteristics, adjectives, and emotions that StudyTracker represents and elicits from its users. After reviewing the adjectives and creating mood statements that represent how the user would feel completing certain tasks within the app, I focused on creating a visual aesthetic based on these descriptors.
I started the logo design process for Study Tracker by creating a list of words that are associated with both ‘Study’ and ‘Tracker’. This step allowed me to brainstorm and sketch visual symbols/designs that could potentially represent StudyTracker and the services the product provides to users.
I chose a color palette that evokes feelings of calmness and efficiency to promote stress relief and confidence in our users. The blue/purple colors represent confidence, pride, and efficiency. The orange/ peach colors are complimentary of the primary colors and add to the overall visual aesthetic of the app.
For the typography, I took into account that StudyTracker is high in textual content. Therefore, choosing a font that has been shown to be easily readable by users was essential.
Before jumping into designing the UI, I created a Moodboard that I could reference throughout the design process, which encompassed the overall aesthetic, typography, color palette, and component inspiration for this app.
Using the user feedback I gained from the first usability test, I moved the add task button to the bottom center of the screen and made the entire study methods component clickable. Addtionally, I incorporated the visual styling inspired by the moodboard to create a high-fidelity mockup of StudyTracker.
This project was my first opportunity to work with a client in the form of a design sprint. My main takeaway from this experience is the benefit of using a design sprint to solve complex problems through a time-constrained five stage process. Following this design method allowed me to quickly and efficiently create a design solution, rapid prototype, and test my solutions with real users all while reducing the time and effort that can accompany bringing a new product or service to the market.
brittany.heng1@gmail.com
