Lists App (iOS)
Design a to-do list mobile app.
I created Lists to accommodate a variety of content with flexible viewing modes. Lists view modes consist of a card view, list view, and calendar view; for each of the view modes, users have additional control over size/detail presented.
I conceived of and designed Lists as the first project for CareerFoundry’s UI design bootcamp. I was inspired to create Lists based on my own desire to have a tool that addresses all my checklist-related needs without having to jump between different apps.
Card View for Lists
The card view mode enables users to view their lists as cards that can be arranged and grouped. It would be useful for people who like to remember things spatially and prefer the visual representation of physical cards. A slider allows adjustment of how many cards are displayed on the screen, and could facilitate quicker search if a user has many lists.
List View for Lists
The list view mode displays color tags most prominently out of the view modes because the whole row’s background contains the color. The list view would appeal to users who want a linear presentation of their lists and need to see the titles of their lists in at a larger size. A slider controls the size of the list rows and what details are displayed.
Calendar View for Lists
The calendar view mode presents a calendar interface with markers on dates where items are due. Starred items are marked with a star icon, and other items with due dates are marked with a dot. A slider allows users to see 4 months, 1 month, or a day-by-day view. In this view mode, users can select which lists they want item markers to be displayed for with the footer selector.
Lists can be marked with four different color tags should users want to group lists or otherwise call attention to certain lists. In the card view mode, tags are displayed as little triangles on the bottom right corner of each list; in the list view mode, color tags are represented by coloring the entire list’s row background.
Important List & Items Due List
There are two default lists for important items (items marked with a star on the list screen) and items due (items with due dates defined). Both of these lists draw items from all of the user’s lists to make it more efficient for users to manage important or time-sensitive items as a whole.
Once a user checks off an item, it can still be seen with the feature to view completed items.
The item detail screen shows when the item was created and allows users to add attachments, due dates, reminders, notes, and move the item between lists.
The footer contains controls for search, sort, edit, and add.
Lists or items that users delete will be saved for two weeks in a trash section accessible through the menu. This feature makes user error reversible by enabling users to restore items or lists they’ve deleted.
A simple and intuitive log in and sign up flow allows users to access the app quickly.
Lists was designed to have a clean and immersive feel through its dark interface that encourages focus and helps users concentrate on getting things done. It includes standard symbols for common functions such as add and search, and icons that illustrate unique features such as the list view modes.
I analyzed Apple Notes, Wunderlist, Google Keep, Apple Reminders, and Apple Calendar to evaluate features and patterns of productivity apps. From Wunderlist and Apple Reminders, I appreciated the ability to prioritize items, and I decided that one or no star was an appropriate level of control for prioritization in conjunction with the ability to reorder items.
By considering the date organization in Apple Calendar, the card organization in Google Keep, and the lists organization in Wunderlist and Apple Notes, I created three view modes for lists in my app: a place-based mode (card view), a date-oriented mode (calendar view), and a color-based mode (list view). I implemented a toggle for users to switch between the three view modes, and for each view mode, I incorporated a slider to allow users the flexibility of easy reading (larger text size, fewer items per screen) or easy scanning (smaller text, more lists per screen).
The moodboard I created for Lists illustrates “clean, refined, calm, and focus” to create an effective environment for productivity.
Going through a thorough and iterative wireframing process enabled me to design a complex, but not complicated product. At the high-fidelity stage, I learned how to write effective UI copy. Instead of a screen being titled, “Create a new account,” the title, “Sign up” would be clearer and simpler. Similarly, a form field title, “email address” would be simpler and more intuitive than a sentence like “please fill out your email address.”
As the first project of the bootcamp, this was the first set of icons I designed. With the intention of creating a cohesive family, I went through many sketches to arrive at the best combination of illustrations. I succeeded at drawing icons in Sketch for the first time through trial-and-error and some online tutorials.
With the direction established by the moodboard in mind, I chose Montserrat for its confident feeling for headings and legibility and Lato for its clarity at smaller sizes, efficiency, and pairing with Montserrat.
Based on the moodboard, I created two color palette options. One was light and one was predominantly dark. I presented the palettes in an arrangement that shows the colors’ relative abundances to provide a more effective portrayal of how the colors would work together than if they were shown separately. Both palettes have a predominance of grey and cool colors to evoke “calm.” I chose the dark scheme because it better evoked “focus” through its immersive feel, and I applied it to the design by ensuring each color’s usage was unique, consistent, and achieved the desired hierarchy.
Prototyping & User Testing
A clickable prototype of Lists may be viewed in InVision here: https://invis.io/4VMXJIDDFQC. It contains 34 screens and may be navigated using arrow keys or by clicking on configured hotspots.
This project took 30 hours, which was within the estimated completion time of the project in CareerFoundry’s program. I feel like I succeeded in creating a to-do list app with the flexibility and customization options I felt limited in similar products.
As the first project of the bootcamp, I faced a few challenges including designing list view modes that are distinct and have their own strengths and drawing the icons in Sketch for the first time. This project did not involve user research or testing, which are two things I would incorporate to better understand my audience’s needs if I had more time .
If I were to improve its design, I would also consider designing versions for native apps that utilize platform conventions such as a footer navigation for sections of the app rather than actions. I created Lists before learning about mobile UI patterns, and my intention with the footer design was to allow users to quickly access features they would need more frequently than accessing their account or settings. Overall, this project was a great first opportunity to practice UI design.