When faced with a list of upcoming tasks, I’m someone who usually prefers to sort out my thoughts by jotting them down. It’s a way for me to make sure I’m not forgetting anything important, but also to have a good idea of the workload I have ahead of me.
Sometimes I’ll write down a list of tasks I have for that specific day or that week. Sticky notes leave me wanting a more dedicated spot for my lists, and I don’t prefer to have a set plan for each day, so a daily planner leaves most pages empty. I ran into the same issue with many to-do list apps as well, as they tended to have designs centered around showing tasks day by day.
My frustrations with existing apps on the market and my motivation to learn more about design encouraged me to create one of my own. I decided to design a to-do list app that allows users to create lists in a simple manner and organize them in terms of categories instead of focusing on dates and deadlines.
Role: Solo UX Designer
Project Duration: February 2021 — April 2021 (2 months)
Design Goals:
- Have the to-do lists be the main focus
- Still offer organizational tools to customize lists and group similar lists together
Personal Goals:
- To practice the process of user design
- Make meaningful design decisions based on user research and analysis
- Gain experience using Figma
Process
Brainstorming
I began my brainstorming process with a mind map and wrote down everything I knew about to-do list apps. This includes all the features and organizational tools I have seen in existing apps, as well as additional features I thought were practical in this context. I also included different methods of organization for the lists, different ways tasks within lists could be interpreted, as well as a list of qualities I wanted my design to embody.
The mind map allowed me to start off broad with the idea without deciding on the core features of the design right away. This ensured I didn’t leave out any potential solutions and could narrow it down as I progressed further in the project.
Research (Competitive Analysis)
After writing down all the possibilities, it was time to see what other functionalities were included on apps already on the market. Many apps exist on the market that double as productivity and habit managers, but I chose ones that had to-do list features at their core. The apps I chose were also quite different from each other in style.
My analysis method:
I downloaded these apps and tested them myself. I performed cognitive walkthroughs as a new user to see how easy it was for me to create my own lists. I then looked up the claims of each app, and read many reviews via the app store and also from popular review sites, such as pcmag.com.
Doing competitive analysis allowed me to get a better idea of potential gaps in the market. It also gave me the opportunity to see what other apps were doing well, so I could find ways to apply it to my own design.
Research (Personas)
Next, I created personas to hone in on the kind of user I wanted to keep in mind while creating my design. Many apps already offered motivational tools to encourage users to stay productive, and certain niches like business oriented to-do apps were already filled. But what about a user that already knows what they want? A user that is already accustomed to using to-do apps, knows what methods work for them, and just wants a quick system that can make this possible.
These two personas are two types of users I envisioned facing this type of problem. First, a user who already uses mobile to-do apps, but wants balance between organization and having too many features. Second, a user who wants to switch over from a traditional pen and paper model, and doesn’t want to spend a lot of time learning the app.
Solution
Low Fidelity Sketches
My initial sketch mainly consisted of the different options I decided to include in my navigation bar: home, list view, categories, and settings. The market research I conducted revealed that many apps made the main screen a view of the user’s day, but given my own experiences with this format and my motivation to create a different format, I decided to keep all the user’s lists on the main screen.
Medium Fidelity Wireframes
In this iteration, I modified the navigation bar to make the home become the entire list view. This was done so that viewing a list individually became natural in the flow of clicking on the list from the main screen. To boost customization of the app, users could customize an icon (emoji) for each list and categorize lists, which is the main list organization method.
Final Design
I created a style guide to help create consistent, visually interesting designs. Purple and white were the main colors for this app design, with some gradient to bring the colors to life.
Modifications to the categorization tool were made because for this simple system, it was confusing for lists to overlap in categories as they would count as multiples in each category’s metric. Placements of the “+” buttons were changed from generic “+” floating anchor buttons to buttons that matched their intended purpose. The inclusion of a UI kit were also used to improve the look of the app.
What I Learned
As my first individual case study, I found this to be a really educational process. It was really motivating to tackle a problem that I related to, and it made designing a simpler process. Here are some things I got out of this project:
Something can be learned every step of the way. — Every step of ideation, research, and execution of the design gave me a new perspective, and I was constantly trying to improve my design, and take it one step beyond what it was. This taught me the value of every step in the process and why it’s important to flesh things out before continuing to the final product.
Not everything needs to be reinvented. — It’s common to look at something popular, and then want to create a different version of it. But sometimes existing concepts are popular for a reason, and these often are things users actually like. Not everything needs to be completely new and unique, and using tried and true concepts can make apps more enjoyable and usable.
For The Future
In future steps, I’d like to be able to conduct user testing and use that input to improve this design. For future case studies, I hope to involve potential users in my design process through interviews and hearing their input on each iteration of the wireframes. I plan to also include user flows and create thorough prototypes for the final design.
