MENU

Designing the Taskly App UI

410
12
Objective

Creating a clean, simple, and intuitive UI for the Taskly responsive web app that is aesthetically beautiful and easy to use. See the full creation process from User Research to the final Design here.

My Role
  • Defining the CI
  • Visual Design

Steps


1

Style

To define Taskly's overall style, I searched the web for simple, clean, aesthetically beautiful UI designs and created a Moodboard. 

2

Colors

Next, I defined the Taskly colors. Having done a competitive analysis in the research phase, I had a good overview of which primary colors are used by Taskly's competition. This ruled out the use of red, blue, or yellow as I wanted the Taskly brand to stand out. I looked for color inspiration in illustrations and photography. By importing selected images into Adobe Color CC, I generated a couple of color palettes, from which I selected primary, secondary, and accent colors. Considering accessibility, I tweaked the color contrasts until all colors were working well individually and as an ensemble. 

3

Typography

I shortlisted a few web fonts and tested them in combination for headings, sub-headings, and body text. My criteria were legibility even at small size, versatility, aesthetics, and feel. I decided to pair Merriweather Bold Italic for strong headlines with Open Sans for any other text. The beauty of Open Sans is that it is optimized for legibility across print, web, and mobile.

4

Imagery & Illustration

Defining style of imagery and illustration. The age range of Taskly's audience is from 20 to 50 years, with the majority of users being between 25 and 35 years old. With the help of the personas I created for Taskly, I selected visuals that might be appealing to Taskly's users. At a later stage, I tested my assumptions in A/B tests.

5

UI Kit

Designing the Taskly UI Kit with Sketch. In this step, I created a Sketch symbol library which helped speed up the process of designing all screens for Taskly's core features for mobile, tablet, and desktop.

6

Visual Design

Laying out every screen for the user flows of Taskly's core features for mobile, tablet, and desktop with Sketch.


TASKLY FINAL SCREENS