CSCI443 - UI - Task App Liam Wickland, Fall 2024
Stage 1 -
Empathize - Research Your Users' Needs
Problem Statement
As students transition into higher education and young professionals enter the workforce, they face the challenge of adapting to a significantly increased workload. This transition often requires developing new, more efficient workflows to manage their responsibilities effectively. I am developing a web application aimed at assisting these college students and young professionals build and settle into these new workflows. My primary focus is to enhance organization, task management, and collaboration among my demographic. By doing so, I hope to empower my users to reduce stress, boost their productivity, and promote a healthy work-life balance.
Interview Pool
I am focused on making the management and prioritization of assignments for college students and young professionals a more streamlined experience. Therefore, I need to do target market research to determine the demographic (age and gender) so I can best define the typical user of this product. My target demographic are undergraduate Americans aged 24 and under, making up 67.2% of college students, with a distribution of 42.7% male, 57.3% female (educationdata.org). This demographic is already in higher education, many of which will be entering the workforce soon. Therefore, I will target my interviews towards college students and young professionals between 18-24 years of age, 2 males and 3 females (Sample Size = 5) to best represent my target audience.
Selected Participants
- J.C., Senior Computer Science Student. (Male, 21 y.o.)
- L.G., Junior Business Finance & Poli. Science Major. (Female, 20 y.o.)
- S.J., UI Developer. (Female, 24 y.o.)
- K.G., Customer Support Specialist. (Male, 25 y.o.)
- J.N., Software Engineering Intern / Senior Computer Science Student. (Male, 27 y.o.)
Interview Questions
- What is your name?
- What is your job/major?
- How many hours each week do you dedicate to completing tasks and/or homework?
- How would you rate your ability to manage homework and other tasks?
- Are there ways you currently organize your tasks and other responsibilities?
- How do you keep track of long-term projects or assignments with distant due dates?
- How do you prioritize those tasks? What factors do you use to help you do so?
- Can you describe a time when you felt overwhelmed by your workload? How did you handle it?
- Can you describe a time when you felt particularly productive? What contributed to that feeling?
- How do you deal with unexpected changes or additions to your workload?
- Are there factors that make you struggle or succeed to manage your workflow?
- What have you observed others around you doing to manage their own workloads?
- Are there time management methods you’d like to incorporate into your workflow?
- What role does technology play in your current task management approach?
Empathy maps
Survey
In addition to the interviews, I prepared and sent out a survey. This allowed for the convenient collection of extra data to better reach conclusions about this stage of the project, and will assist me in future stages as well. This survey was sent primarily out to college students (91.7%, 8.3% young professionals), and contained questions largely similar to my in person interview questions. Below, I have provided those questions and responses.
Survey Questions
- What is your age range?
- What is your current occupation?
- What major or job are you currently studying for / working?
- On average, how many hours per week do you spend on tasks/homework?
- How often do you feel overwhelmed by your workload?
- How satisfied are you with the way you currently manage your time and workload?
- What is your greatest strength in managing your tasks?
- What is your greatest challenge in managing your tasks?
- What tools, if any, do you use? (Planner, calendar, etc.)
- What tools or methods do you see your peers using?
- How open are you to revising your current task management approach?
- How involved is technology in your current task management approach?
Survey Responses
Stage 1 - Conclusion:
After reviewing my interview and survey responses, I can say that most of the people in this pool were properly demographically targeted, with the exception of my interview pool. I was trying to target 3 women and 2 men, but I was able to interview 4 men and 1 woman. Despite this, I believe my interview pool still provides me with a good overview of what my target demographic for this application would be, and my additional survey data will assist me to best make decisions going forward.
Participants were largely polarized, either being satisfied (50% of survey results) with their current approach to time management or generally dissatisfied (33.3% of survey results). Many young professionals have settled into a workflow that works for them, with room for improvement. Many students, however, feel scattered, procrastinate, or will go as far as to forget assignments. While some students use no tools to manage their time, many use physical planners/notebooks, or they use applications like Google Calendar, Basecamp, and Apple Reminders to keep themselves on track. Similarly, they see their peers doing the same thing. 41.7% of the survey pool were open to revisions to their current task management approach. Interview participants seemed to have a better grasp on their approaches, but all but one participant had ideas on how or a desire to improve their own workflows and were open to new things, which aligned well with the my survey (8.3% of survey participants were not open to revisions to their approach). 83.3% of survey participants and 80% of interviewers said technology was well or completely involved in the way they manage tasks.
To summarize, I found that many people would be served by a an additional approach to the way they manage their upcoming tasks. Being within the demographic myself, I was able to set expectations that I believed others within my demographic aligned with, and I believe those expectations were largely met. These surveys and interviews gave me insight into the level of task management that many people had, and I am excited by the room for improvement I believe is possible. From these findings, I believe there is a real place for improvement within my target demographic, and that creating a method that integrates well with existing workflows, rather than a complete overhaul, would improve the satisfaction level students and young professionals have with their approach to managing their tasks.
Stage 2: Define
Persona Map
Based on my empathy maps and survey data, I developed a persona that reflects the average responses from my target demographic. With few exceptions, the data collected in Stage 1 were consistent across participants, providing a reliable foundation for this persona. Key information, such as location, life strategies, and occupations, can be inferred from the responses, while quantitative data, including age and specific traits, helps to create a comprehensive profile. Additionally, I identified common contexts and challenges faced by participants. By synthesizing these elements, I crafted a narrative that effectively represents the experiences and needs of my target audience.
Business Model
Conclusion
In this stage, I thought more about this project from both a smaller, user perspective and a larger, business perspective. Creating a model of what I believe will be the average user helps me make design choices that will best reflect the workflow and intuitiveness required to provide a positive user experience for someone. In many cases, students are more technologically inclined and will not need as much hand holding to use an application, which will allow me to use a similar interface to other applications and create a sense of familiarity for a new user. While I'm not sure I would end up implementing much of the business plan, it helped me define rigid goals and come up with some of the activities I want users to be able to do within the application, and gain an idea of what kind of teams are necessary to carry this project on to a full fledged product.
Stage 3 - Ideate
I went through with generating ideas using Walt Disney's Creative Strategy. While it was easy to come up with features I wanted for the app that could fit into the dreamer and realist categories, I had a hard time falling into the mindset of the critic, and was only able to find relatively redundant things to apply to my ideas.
The Dreamer phase was fun, getting to imagine ideas that may never make it into the app within a realistic time frame. While these ideas aren't completely unrealistic, I am not sure about the time frame required to implement and design these features. Large scale things like timeline views and analytics tools could be very useful but would take a large amount of work to implement.
I had the easiest time with the Realist phase, finding lots of overlap with the other phases. While a Calendar view would take a lot of work, I feel it is crucial to the function of the application. This, with the addition of color coding and assignable attributes to different tasks would allow for a level of fun customization for the user, and I feel it would allow for a greater level of organization that other calendar / task management apps are missing, but one that someone transitioning from a planner would feel is missing if it weren't there. Additionally, being able to write down that I need a simple, easy to use user interface with a natural feeling workflow has allowed more ideas to flow about how I want users to interact with the application.
In conclusion, using Walt Disney's Creative Strategy helped me identify and create ideas that I wanted to bring forward in the project, but also come up with ideas that expanded past the realm of realism and improve my creative process. While I had some trouble getting started with this process, I am glad we performed this stage before jumping into prototyping.
Stage 4 - Prototype
Low Fidelity Prototype:
I sketched the low-fidelity prototypes with reusable components in mind, like the nav bar. I expanded on this, having simple text boxes and dropdowns to build the necessary pages. While I had no experience with any design apps like Adobe XD or Figma, I am glad I took this approach, and it made structuring my app pretty simple. I didn't make too many "flashy" design choices, but I did get somewhat creative with things like putting an icon related to the page's action behind the title text of the page.
High Fidelity Prototype:
I had a lot of fun creating the high-fidelity prototype, using Figma. I chose to use Figma because it's what I see at work and it seems to be commonplace in the industry. I had to spend quite a bit of time learning how to work with Figma, but I feel like the time paid off. Once I knew how to build components (pictured above), I was able to create all of my reusable puzzle pieces and transform them into real pages.
My low fidelity prototype played a large part in my high fidelity prototype, practically mirroring each other. If I hadn't done the low-fidelity, I think I would have been lost in the process of building the high-fidelity portion.
Usability Heuristics:
Visibility of System Status:
My navigation bar demonstrated immediate feedback and represented to the user where they are in the application.
Match Between System and Real World:
I used familiar icons that align with the real world that clearly demonstrates the purpose of the page, even if the descriptive text weren't there.
User Control and Freedom:
The user is easily able to reverse actions that they may have done by mistake, like Task Creation or Task Edits
Consistency And Standard:
I enforced a standard across my app by using reusable components that adhered to a simple color scheme. By using these components that are all designed in a similar manner, there is no possibility of a loss of consistency.
Error Prevention:
Each screen containing user input had clear labels that described the purpose of the user input, and I had prompts like a "Confirm Password" to ensure the user does not commit a misinput when creating their account.
Recognition Rather Than Recall:
By making the user of familiar icons consistent throughout the app and adding visual cues to those, (like the plus and the hammer icon signifying a new project) the user would assumingely be able to navigate the app without icon labels/helper text.
Flexibility and Efficiency of Use:
Each page has a simple layout with a limited number of interactions on each. Keeping the entire app simple allows users of all skill levels to learn to use the app efficiently.
Aesthetic and Minimalist Design:
Similar to the last heuristic, each page was created with minimizing the amount of elements required to allow the app to fully function in mind.
Help Users Recognize, Diagnose, and Recover From Errors:
Errors like this help the user get back on track, by offering to let the user reset that account's password, for example.
Help and Documentation:
Each action page has a "?" help button that leads to documentation explaining the purpose of that page/concept.
UX Laws:
Hick's Law:
Hick's Law states that "The more options a person has to choose from, the longer it will take them to make a decision." The limited number of actions I have on each page follows this law to a tee, and makes for quick decision making across the app.
Law of Common Region:
The Law of Common Region states that "items within a defined boundary are perceived as a group." I have grouped together any relevant items across my app, either having lists of tasks, lists of projects, task details, action buttons, or navigation buttons all grouped together to imply a common functionality amongst themselves.
Van Restorff Effect:
The Van Restorff effect is "a psychological phenomenon that states that people are more likely to remember items that stand out from the rest".
My application applies this effect by making items like tasks and projects within a list view or the action buttons more distinct than the rest of the page, as well as the action buttons. This immediately draws the user's attention.
Stage 5 - Test—Try Out Your Solutions
Background Summary:
For my usability testing, I want to determine the ease of use and intuitiveness of the app, primarily to make the app something anyone can jump into without any prior exposure. To do this, I will be mostly focusing on the subjective opinions of the test participants, rather than the amount of time involved to perform each task. The participants reflect my initial target demographic, having 5 participants, 3 female, 2 male, aged 18-24, and are either in college or young professionals. I aim for the app to offer a smooth transition from a potential user’s previous method of task management, so gauging user familiarity is a top priority. I used the Usability Test Dashboard template to design my test tasks and grasp an idea of how I wanted to structure the test, and based my tasks on most of the actions a typical user may do every time they open the app. Because of the simplicity of the app, I was able to cover most functionality in 10 tasks.
Methodology:
Performing a quantitative pre-test survey will allow me to gauge the user’s familiarity with similar applications and technology in general, and compare this to their experience with my application. Tasks will be administered one at a time, without offering any assistance as to replicate a real-world case. The only assistance offered will be my own navigation through the Figma page, as “click-through” functionality is not complete, and will require my input to navigate them to the relevant page they are trying to enter. At the end of each task, I will ask for a general 1-5 scale (1 being very hard, 5 being very easy) on how easy they found the task to complete. At the end, a post-test survey will be completed with more 1-5 scale questions for quantitative analysis’ sake. Pre- and post- test surveys will be completed using Google Forms, and Google Sheets will be used to record subjective answer from each task. Data will be exported into .csv format and graphed using Python using the panda and matplotlib.pyplot libraries.
Participants and Demographics:
This time around, I was able to get all of my participants to match the target demographic. While getting availability for all 5 was difficult with the Thanksgiving break, I was able to get all the responses I needed. The participants are as follows:
- J.D., Student (19, Student)
- M.T., Student (22, Male)
- A.C., Student (20, Female)
- R.L., Young Professional (23, Male)
- S.O., Student (21, Female)
Pre-Test Survey Questions:
- What is your age?
- How do you currently manage your tasks/homework?
- How confident are you in this method?
- Have you ever used apps like Google Calendar to manage tasks/homework?
- If so, how comfortable are you using these app(s)?
- How comfortable would you say you are with technology in general?
Post-Test Survey Questions:
- How would you rate your experience with the Task App?
- How easy was the Task App to use?
- How would you rate this app compared to your current method of task management?
- How familiar did the interface feel?
- Did you feel like you had to search for the button/prompts necessary to perform the action you were asked to complete?
- How confident/comfortable do you feel navigating the app?
- How comfortable would you feel if you replaced your current task management method with the Task App?
- How likely would you be to recommend the Task App to others?
- General Comments
Test Tasks:
- Have user sign up for an account and login.
- Create a project
- Create an assignment and assign it to a project
- Create an assignment and create a new product for it
- Edit an assignment
- Find the overview for November 11
- Edit Profile
- Undo Changes to profile
- Change password
- Mark a task completed
Test Results:
Pre-Test Survey:
Mid-Test Results:
I used Python to graph the results of my Mid-Test ratings for each task, graphing the mean results for each test and their standard deviations, and the means of each user's test ratings.
Python code:
Mid Test Results by Task:
Mid Test Results by User:
Post-Test Survey:
Findings:
Overall, I feel like the UI I designed was successful. While user M.T. clearly struggled more than the others, they were able to navigate enough, and with time, I feel as if they can get up to speed with the other participants- even if they stated in the survey that they would never switch from their planner. The other users had little to no issues navigating the app, and made comments about the simplicity. The simplicity did end up being somewhat of a downfall though, as there were a few comments and responses stating that the simplicity took away the flexibility that they have with their existing task management methods.
While navigation was not necessarily an issue, it seemed as if my UI were a bit clunky, especially watching someone else interact with it. Honestly, I blame my own sense of design for this, and I don't think the app is necessarily good looking at this stage. One user mentioned that the bottom nav bar does not match the rest of the app's design, and I realized that my design wasn't completely consistent.
One of my biggest takeaways from the user testing is things I missed when creating my UI- primarily delete functionality. I completely forgot to add buttons to delete projects and tasks, as well as simple actions like logging out. Another feature that seemed to be missing was the ability to attach documents or pictures to a task.
Despite the app's flaws, those that were "tech savvy" or familiar with apps like Google Calendar seemed to have no issues moving around. Reviews across my rather small user testing group were surprisingly high, with criticism in the spots that I feel I needed it.
Moving forward, I'd like to be more thoughtful about how others interact with the app, and spend more time dotting my I's and crossing my T's, putting myself in the user's shoes rather than designing to design. Making my design more coherent and the actions possibly more simple (like tasks 3 and 4), I think I could open the app up to a broader range of users.
Conclusion
Seeing someone else interact with what I pictured in my mind as ideal really allowed me to see the flaws in my design. I am grateful for this "reflection" stage, and I think with mending to the aesthetics of the UI, the "flow" of the app could easily be improved and I think the simplicity of the functions I had serve that well. With an "agile" approach to Stage 3, 4, and 5, I think repeating that process could serve to quickly and greatly improve the Task App, granted I avoid scope creep from a development point of view. Regenerating ideas and implementing them in multiple versions, and then redoing user testing could help me zero in on what I really think the Task App could and should be, and could be a project I do in my own time in the future. This is my first time bringing a design project to some level of fruition, and I think this UX design process was pretty eye opening as to how I can structure future design projects, and provides perspective at a workplace level as I work alongside designers. I think design work is something everyone should try on some scale.
Stage 6 - Present
Credits:
Liam Wickland