Creating Wireframes for a To-Do List App: Needfinding Is Key

Liam M.
3 min readOct 3, 2019

The latest assignment in my Interaction Design class was to create a wireframe of a To-Do List app. But most importantly, it had to fit the specific needs of my professor. Which meant that needfinding was the name of the game.

A couple weeks ago, my professor assigned my class this task without specifying the needfinding part of it. He told us to ask him if we wanted anything clarified about the requirements of the app, but he didn’t make it mandatory at all. So naturally, myself and pretty much everyone else in my class threw together a wireframe for a basic To-Do List app and submitted it — without getting any feedback from our professor at all.

We came into class the next day and it was soon revealed to us that the entire assignment was a needfinding test. Of course, how could we have known? He told us he wouldn’t even look at what we submitted, so we didn’t have to worry about our grades (still though, spent a lot of time on it, Joel…). However, he did let us know that we would be redoing the wireframes later, this time with mandatory and thorough needfinding.

So this week, we spent the entirety of the first class individually gathering information from our professor about what he really wanted from our apps. I asked him questions like, “Which devices do you want this app to be available on?” and “Have you used any To-Do List apps before?” For the second question, his response was that he had used Trello, BaseCamp, and Wunderlist, but for some reason he never stayed on top of them. This was where good needfinding skills came in handy. I could have let it go and asked other questions, but I decided to stay on this topic and dig deeper into WHY he wasn’t able to stay on top of those apps. I eventually got to the bottom of it; Trello and those other apps have too many options, like due dates, categories, priority, etc. This was the big thing that I had to focus on.

I started creating my wireframe on Adobe Xd and ran into a problem right away. My professor said the reason he couldn’t stay on top of the other To-Do Lists apps was because of all the options. But those options are important when creating a list of tasks and their various needs. He had also made it clear that he wanted the list to have some sort of hierarchy or “urgency,” as he put it. So I decided to keep the most important options in my wireframe. Due dates, categories, priority (in the form of !, !! and !!!), etc. But I wanted to make sure they were laid out in a way that was not overwhelming, but logical and easy to set and then move on with life.

I created a main page that shows the highest priority tasks first, not the ones that were soonest. In that way, urgency was prioritized. In my needfinding, my professor also showed interest in having a voice-to-text feature that could create new tasks by simply talking into the phone. That interface would have been difficult to create in a soundless wireframe, but I did add a button for voice-to-text prominently next to the ‘new task’ button, so there was an attempt. And when creating the ‘new task’ interface, I made sure to have every selection be as large as they could/should be on the screen and to make it look as uncluttered as possible. Whereas Trello and the other apps scared my professor away with too many options, I’m hoping my wireframes will be clean, concise and logical enough that he would consider using my hypothetical To-Do List app.

Take a look at my wireframes below.

Wireframe for the Main List menu
Wireframe for the ‘New Task’ interface

--

--