To do project: Customizing the UI

One of my projects that allowed me to practice HTML, CSS, and JavaScript was building a to do list. I was able to do it, and it worked, but the design needed work. I had integrated Bootstrap for the first time, so that was exciting, but I didn’t really delve into it too much. I knew it wasn’t perfect, but at the time, I was focused purely on making sure my functions were running properly and that I understood what made them work.

Now that I’ve had a chance to work on other projects and step away from this one for a bit, I see quite a few flaws. So I’m going to rework it.

My first run:

(Left) My current design upon a user’s first visit. (Right) My current design with to do cards added. (Below) A video of my To Do project in action.

As you can see, it leaves much to be desired, so I went back to the drawing board to consider how I could improve it.

Initial thoughts:

• The empty space at the top of a new list does not work. When I tested this project with a user, it confused them.
• The create bar (“Add a to do”) being at the bottom also does not work. Hierarchy-wise, it makes the most sense for this critical feature to be located at the top.
• Having a separate title and body/description section for a To Do list *can* be nice, but also expects too much from the user and can be considered cumbersome. Having a “body” should be optional.
• Overall there’s not a strong enough sense of visual hierarchy.

Sketches:

I sketched out some ideas with my thoughts and then went into Figma to create some mockups. I landed on 3–4 different breakpoints. Mobile, small tablet, large tablet/desktop. The desktop and large tablet may be contained in the same breakpoint. If further down the road it they would work better as 2 separate breakpoints, I will adjust.

Mockups:

(Left) Mobile, (Right) Small tablet

Large tablet view

Desktop view

Changes:

• I created a header bar with a product name and logo that I quickly mocked up.
• Directly beneath the header bar, I added a simple create task input where the user is able to type and add new tasks to the To Do section.
• Just under the input area is the To do section which will contain all of the task cards with an option to mark a task complete or delete the task just as the original design allows for.
• I added the following line of text in the To do area… “Your task cards will appear here.” for when no task cards have yet been created. This simple addition makes a world of difference in preventing confusion and providing clarity.

My overall approach was to maintain simplicity while adding structure. This design has a much clearer visual hierarchy and flows in a more intuitive way. Now to code it. Keep an eye out for my progress in a future post!