Lists App (iOS)

Lists teaser image.jpg

The Challenge  

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. 

Context

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.

 

Role/Services

UX/UI Design
Product Strategy
Information Architecture
Copywriting
Competitive Analysis
Moodboard
Wireframing
Iconography
Prototyping
Mockups

Time Frame

March–April, 2018


 
 

Product Features

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.

 
 
Card View@3x.jpg
 
 

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.

 
 
List View@3x.jpg
 
 

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.

 
 
Calendar View@3x.jpg
 
 

Color Tagging

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.

 
 
Color Tagging@3x.jpg
 
 

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.

 
 
Important List and Items Due List@3x.jpg
 
 

List Details

Once a user checks off an item, it can still be seen with the feature to view completed items.

 
Lists checked.gif
 
 

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.

 
 
Item detail@3x.jpg
 
 

The footer contains controls for search, sort, edit, and add.

 
 
 
 

Trash

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.

 
 
Menu and Trash@3x.jpg
 
 

Log In

A simple and intuitive log in and sign up flow allows users to access the app quickly.

 
 
Log In@3x.jpg
 
 

UI Kit

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.  

 
 
UI Kit@3x.jpg
 
UI Kit 2@3x.jpg
 
 

Process

Competitive Analysis

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).

 
 
Competitive Analysis@3x.jpg
 
 

Moodboard

The moodboard I created for Lists illustrates “clean, refined, calm, and focus” to create an effective environment for productivity.

 
 
Lists_moodboard_3x.jpg
 
 

Wireframing

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.”

 
 
Low-fidelity wireframes@3x.jpg
Medium-fidelity wireframes@3x.jpg
High-fidelity wireframes@3x.jpg
 
 

Iconography

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.

 
 
Iconography@3x.jpg
 
 

Typography

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.

 
 
Typography@3x.jpg
 
 

Color

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.

 
 
Color@3x.jpg
 
 

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.

 
 
Final Product@3x.jpg
 
 

Outcomes

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.