Tools

Pen, Paper, Balsamiq, Figma, Figma Mirror, Illustrator

I began the project in Ideation where I brainstormed features and broke down different high-level ideas to improve the user’s experience in the app. I created wireframes using Balsamiq to test different layouts and user interfaces. I created mockups of the app in Figma and created a clickable prototype with the 60 different screens I designed. I then stripped down my design and created an MVP(Minimum Viable Product) in wireframes to showcase a version of the app that could launch in its first phase. Finally, I wrote a design brief explaining the concept of the app and the rationale for my design decisions.

Design Process

Wireframes

M.V.P. (Minimum Viable Product)

Login/Sign Up Process and Today List

Dashboard, Lists, Add Task, Edit Task, and Options

Planned List and All Tasks List

Account, Friends List, and Sharing Lists

Design Process

Mockup Screens

Design Process

Design Brief

Whistle, a Daily Task Manager Mobile Application

Project Overview

Goals of the Project:

• Design a mobile application that allows users to create and manage their daily tasks.
• The app needs to be functional, results-driven and fun to use.

Core Features Needed:

• View a list of their daily tasks and option to categorize them
• Add notes and comments to existing tasks
• Upload documents and images to tasks
• Check tasks off a list
• Edit and delete tasks

Target Audience

• Age 28 – 44
• 65% women, 35% men
• Tech-savvy, but not quite early adopters.
• Users who love being productive, efficient and tools that offer a superior user experience.

Lisa (Target Audience User)

She wants the ability to have her to-do list everywhere with her and enter her tasks on the fly. She currently uses a pen and paper to write her task lists. Her tasks include tasks for her job, tasks outside of work and goals for the week.

The Brand

About the whistle:

The name of the task manager mobile application is “whistle.” The idea for the name came from researching the idea that this application will help you remember things to be more productive. After brainstorming different ideas I came across an article (https://www.nationalgeographic.com/news/2013/8/130806-dolphins-memories-animals-science-longest/) that found that dolphins have the longest social memory in the animal kingdom. The article states that dolphins can remember the “whistles” of other dolphins for up to 20 years.

Similar to the app Evernote and their elephant mascot, I decided to base the brand around the dolphin because of their impressive social memory which coincides with a social/collaborative feature I designed for the app. I called the app “whistle” because that’s how dolphins communicate. In my opinion, the name sounds fun and friendly as well as being more creative than simply calling the app a variation of “To Do” like many other products. The slogan of whistle is “Remember everything and do more, together.”

About the whistle Logo:

The idea behind the whistle logo is a checkmark that incorporates the dolphin theme. As you can see above the logo as a whole is a checkmark made from soft geometric shapes that link together and symbolizes productivity and efficiency. The right blue gradient portion of the logo is meant to resemble the front half of a dolphin and its dorsal fin bursting out of the water. This is especially emphasized on the login/sign up pages of the app because of a background image of a dolphin that looks similar in shape to the logo. The left purple gradient is a different color to allow the dolphin portion to stand out, but unify the logo as a whole to create a checkmark shape.

About the whistle Color Scheme and Font:

Based on a business strategy article I read (https://yourbusinessmatters.co/designing-for-gender/) I used a lower case font in order to appeal more to the app’s 65% female target audience. I also incorporated softer colors and shapes within the design for this purpose as well. In order to appeal to both women and men, the main color scheme is a combination of soft blues (traditionally associated more with males) and soft purples (traditionally a more feminine color). The blue color is mainly used for top and bottom bar menu items of the UI while the purples are used more heavily in the interior UI of the application. I used the same subtle gradients the product in order to make the UI pop a bit more on-screen. I also incorporated different shades of gray to better differentiate sections and for borders. For the font, I used San Francisco Pro Rounded with varying font weights. I designed the app for iOS so using one of Apple’s supplied system font’s made sense to create a more unified user interface.

The Design Process:

After reading through the design challenge brief and brainstorming the brand, I began researching currently available task management mobile applications. Applications I researched and took design inspiration from including Microsoft To Do, Any.do, Planny 3, ToDo, Things 3, Apple Reminders, Wunderlist and more. After researching competitors I began writing core and extra features down on sticky notes attached to the wall to better visualize and organize my ideas.

Once I had my list of features and concepts for the application I began to wireframe different ideas using the tool Balsamiq. Using Balsamiq I created wireframes for the following features:

• Sign up and login pages for the app.
• Default lists including Today, Tomorrow, Week and All Tasks.
• Information modal for new sign-ups.
• A dashboard page that shows your default lists, as well as your custom, added lists to categorize tasks.
• The ability to add tasks and create tasks.
• Edit task due dates, change the assigned list to better categorize tasks, the ability to add attachments and add notes.
• My account page with the ability to add friends and see the points you earn from completing tasks.
• The ability to add friends to your lists to complete the same list collaboratively.
• Settings that enable a user to sort tasks, change due dates, hide/show completed tasks, delete tasks or friends, invite/share lists with others, and search for lists or tasks.

After completing wireframes, I began to mockup the design using the design and prototyping tool Figma. I decided to use Figma because it’s free, I’m more familiar with its layout/features and I currently don’t have a Sketch license. As I mentioned earlier, I designed the app UI for iOS because I’m more familiar with iOS UI and I’m able to test the mockup on-screen using my iPhone X. Within Figma, I converted my wireframes to hi-fi mockups that incorporate the whistle brand and display the app’s required core features as well as expanding on them and adding new features. After completing the app’s UI, I created a functioning prototype using the mockup screens within Figma to demonstrate and test the app’s features.

Concept and Reasoning:

The concept of Whistle is it’s a mobile application that allows users to easily create, categorize, collaborate and complete their daily tasks in a user friendly and fun way. Whistle at its core is a personal task management app. When you first open the app it gives you the option to log in or create an account. After creating an account it brings you to the Today list. The Today list is the user’s default list where you always land when first opening the app. The decision for this is because users like Lisa create task lists just for the current day and don’t always plan their tasks far ahead.

The top toolbar of the Today list and other lists include options to see all of your lists, go to a calendar picker to change the day list, my account button and a settings button with functions I’ll describe later. The button called “Lists” brings the user to a dashboard that displays their default lists as well as a section to create their own custom lists to better categorize their tasks. This page provides a superior user experience in that it’s quickly accessible and provides the user with a full and easily digestible view of all of their lists and tasks. The default lists that uncategorized tasks simply categorized as “tasks”(rather than work, school, etc.) fall into include Today, Tomorrow, Week and All Tasks. These lists give users quick access to all of their tasks based on task due date. Tasks that have been added to categorized custom lists(work, school, etc.) still appear under these lists because the default My Tasks lists are aimed at organizing your tasks by the due date.

On each list page, there’s a prominent button on the bottom of the screen that allows users to add tasks to lists. The default function for adding a new task is when tapping the add task button a keyboard & text bar appear that lets you type in the task. This allows users a quick way to add tasks without having to configure more specific options by default. Tasks then appear in gray bars on top of each other with a circle next to it that can be checked to complete the task. These taskbars also include information like the assigned list, due date, steps, and icons that denote comments, attachments, and collaborators. Users have the ability to customize options like adding steps, assigning the task to a custom list, changing the due date, adding the task to the Today List(this function is available even when there’s a future due date in the case that the user wants to complete the task early), adding attachments(photos and files), adding notes, and the ability to delete the task(this can also be complete by dragging a task to the left). This can be accomplished in two different ways: tapping the “i” icon in the add task text bar or clicking directly on a created taskbar which brings you to the edit task screen to configure the options I described above.

Apart from the core features required for the product design challenge that I described above, I also designed a few other features for the application. One of the core concepts I designed for whistle is the ability for users to collaborate with each other on lists. Collaboration in the app allows users to whistle at each other (Share lists and assigned tasks to friends/collaborators) and work together to be more productive and efficient with their time. An example where this feature would be useful is planning a birthday party. User A would create a birthday list and create the tasks for the list. In this example User A may be planning this birthday party with others so whistle allows User A to share their birthday task list with User B in order to collaborate, stay organized and be more productive with their time when planning this birthday party. This collaboration feature could apply to a multitude of different occasions including work, school, grocery shopping, and many more uses.

There are multiple ways to assign friends to different lists and tasks as collaborators. One of the easiest ways is to view a custom list like Birthday and click the user plus button in the top toolbar. This allows you to send an invite to friends and invite you via a link to share that specific list. The top toolbar icon then changes to a multiple user icon that shows how many people are on this list with the ability to remove collaborators from the list. Another way to add friends to lists is through the Account page. On the account page, there’s a section that shows your friends list with the option to click on each friend to view their profile. Your friend’s profile includes options like enabling/disabling notifications, the ability to remove them as friends, a section that shows the shared lists between the user and their friend and the ability to assign them to tasks within a list. This is done by clicking the whistle text bubble icon on the left which brings up the option to select a list. After selecting a list it brings the user to the tasks of that list and it allows you to assign specific tasks to the user’s friend. I believe this collaboration feature really sets whistle apart from many of the other task manager applications on the market.

The account page is also home to another feature that adds some competitive fun to the application. Under a user’s name it displays their whistle score. These points are accumulated from completing tasks on time. Users get 1 point for every task they complete on time with a maximum of 10 points allowed per day. Tasks must also be active for 30 minutes before they become eligible for points. The 10 point and 30-minute design concepts were created to deter people from quickly creating fake tasks and completing them to drive up their whistle score. Whistle points don’t actually give you anything as it’s more of a fun way to compete with friends and see how tasks you’ve complete similar to apps like Snapchat.

Lastly, each list has a settings icon in the top right corner. These settings include the ability to select tasks and sort them, change multiple tasks due dates at the same time, show/hide completed tasks and delete multiple tasks at the same time. These settings provide the user with a more powerful and efficient way to edit multiple tasks at the same time. Please view the links for the mockup frames and prototype included in the email to better demonstrate the features of Whistle.