Long Ma's profile

Ike To-Do List : UI/UX, Design & Animation

Ike is our vision of a task list, created in the spirit of Dwight “Ike” Eisenhower, the 34th American President. Eisenhower astutely noted his problems were often defined by varying levels of importance and urgency. By recognizing how tasks rate between these two qualities, Eisenhower was able to organize his tasks into four quadrants, from which it is much easier to decide if and when they should be executed. 

With our app, Ike, we sought to capture the “Eisenhower Method” for task prioritization, and instill it with engaging interactions and bright, playful palette.

You can find our app on the Play Store and follow our work on Dribbble.
In preparation to create Ike, we looked at existing task management apps on mobile and desktop to assess the range of features and designs. The sheer number of these productivity apps were intimidating at first glance. With observation, we were able to conclude that most apps roughly lie in a spectrum between fully featured, Enterprise level apps (such as Wunderlist, Todoist, or Any.do), to less feature heavy, but more personal, Experience apps (such as Google Keep, or Clear by Realmac). 

The Enterprise end of this spectrum emphasize more collaborative features, with sharing between person to person and organizations. This necessitates extensive cloud services to negotiate the communications and data between clients. Personalization is limited to some backgrounds and tag colors, with the overall design hewing to a minimal, corporate appearance. These apps were often free, with a per monthly charge for extended features.

The Experience apps eschew many sharing features but tend to take more interesting, sometimes experimental approaches to task management. The Clear app by Realmac targets a bare, minimalistic aesthetic and uses existing smart phone gesture vocabulary in novel ways for quick interactions. Taasky builds on this design language with additional UI adornments and pleasant audio responses. Google Keep is centered around free form organization of notes, but also has task management features.

In these apps, prioritization is an optional aspect, and often takes a back seat to other features. There currently exists a few apps that pursue the “Eisenhower Method” niche. The execution of these apps however, do not approach the level of features as the Enterprise apps, nor the level of craft on the personal end.

In a market with such depth and breadth, we quickly realized there are three key challenges for our app: finding the right fit in the Enterprise-Experience spectrum, offering something unique, and visually making a mark.

We used whiteboards, sketchbooks, and post-it notes to experiment with app flow, individual interface components, and basic user experience. In this phase, we generated many different ideas and hit some dead-ends, but this process helps refine the user experience and ensure that we explored more than one design solution.
Some themes emerged from our explorations and we intuit our app’s core values as: a simple, playful to-do list that lets you prioritize daily tasks.
With a focus on task prioritization and management a key component of our app, we wanted to make categorization as quick and painless as possible. We tried numerous prototypes and eventually settled on a method that allows the user to prioritize as they added tasks, by dragging a “puck” with one gesture from the main screen. This was a rather novel approach but user testing revealed that the mechanism is easily discoverable and understandable.
To create a “playful” experience, we performed a series of motion studies, experimenting with transition and gesture animations. We wanted the user to not only be enticed to use the app, but also feel rewarded for completing or deleting a tasks.
A bright, poppy palette is chosen for the out-of-box experience to immediately stand apart from existing task management apps. We employed areas of bright colored tones to create a balanced composition, while delineating the task types clearly.
As a productivity app, our app fails whenever the user spends more time than necessary to organize or orientate themselves with their tasks. To mitigate this, we kept these goals in mind when designing the wireframes.

•    Balance between deep and wide to keep cognitive load low when navigating
•    Make obvious the place awareness and ability to navigate between activities
•    Create awareness of state by surfacing useful information only when contextually appropriate
•    Quickly act on tasks

The range of screen sizes and densities in modern devices introduce their own challenges. Finding the right density of images, lines, and text is key to creating a layout flexible enough to scale between screens. We ignored tablet screens for now, which were too large a leap for a responsive design that did not sacrifice functional benefits of mobile screen sizes versus tablets.

Once we had an idea of the basic app flow, we created mockups in Adobe Photoshop to nail down the visual look and adhere to Google’s Material Design standards. Our intention was to create near pixel-perfect designs so that we could begin implementing and coding the app.

Early on, we gravitate towards using Futura typeface to evoke Eisenhower’s sense of efficient management and bold optimism. 

We built the core of our app at a brisk pace, between three to four months. As a small, boutique studio, we were unable to access testing services, but we found a ready source among family and friends. In some cases, familiarity makes it easier to gauge user reactions and points of confusion during live testing. Feedback was less consistent across users over time, but we saw a steady stream of bug reports and questions.

Attempts to allow the user to quickly add information from the “Peek” screen (such as location or time reminders) caused some users to confuse the usage between editing and acting, or feel the screen was redundant with the edit screen. We redesigned the Peek screen according to user feedback to more clearly separate this activity from Editing. By taking the quick edit capabilities from this screen, we were afforded more space to make this screen more appealing visually, and simplify clutter.

Other parts of the app saw further refinement as we moved towards release.
Despite our best efforts, development can be like an island, isolated from the multitude of usage patterns which we did not initially consider or figured as less important. Even with testing, some patterns did not emerge until our app reached a larger number, and wider range of users.

Our initial release is met with favorable reviews, and we were able to hold a near five-star rating in the first month. From user feedback, both through in-app email link and customer reviews, we were able to correlate a number of requests with different user types. We discovered that some users enjoy the novel app animations and wished to see more experience orientated enhancements. Other, more power users, wished for faster load and less animations. In response, we refined some animations and added an option to disable. In this way, Ike is able to widen its territory in the Enterprise-Experience spectrum by compromising for Enterprise, but not sacrificing Experience users.

We also heard from many users who wished to reorganize tasks after initially saving them. As a small team, we were able to fill these gaps within a weeks of launch.

Looking forward, we are working on new features which were sidelined for the initial launch, and more experience features to give our app a more unique character.

Ike To-Do List : UI/UX, Design & Animation
Published:

Ike To-Do List : UI/UX, Design & Animation

Ike is an Android to-do list app, inspired by Eisenhower's Priority Matrix. This is our postmortem on the design and development.

Published: