User Interface for Mobile
User Interface for Mobile
User Interface for Tablet
User Interface for Tablet
User Interface for Desktop
User Interface for Desktop
User Interface Kit

Click here to view a full comprehensive development showcase of Taskly.

Taskly is an all-in-one project management solution. The web-based application has been designed to be responsive across mobile, tablet and desktop platforms. This project was carried out through the CareerFoundry course on UX design. Below is a summary of each step in the development pipeline.


Competitor Analysis

The three main competitors identified were Basecamp, Asana and Wrike. Involved in the analysis were:

  • Competitor profile including an overview and competitive advantage;
  • Marketing profile including an analysis of their respective target markets and marketing strategies;
  • An analysis on their core business including their product, pricing costs and SWOT analysis; and
  • A UI/UX analysis on each platform’s usability, layout, navigation structure, compatibility, content, design aesthetic, performance and calls to action.
User Personas

I started out with identifying business/user goals and prioritization, by developing SMART business goals. With that I could prioritize the features of Taskly in conjunction with insights gained from the competitor analysis, minimum viable product, surveys and interviews.

Customer Experience Map

Creating an experience map helped to visualize the interconnected stages and service touch points for Taskly’s user’s journey.

Task Model

I created a task model for Taskly to see the steps people go through and decisions they need to make before structuring and creating its design based on those results.

Card Sorting & Site Map

I conducted a card sorting exercise that helped in the creation of a site map. The site map helps visualize the content of Taskly and how it is all connects. Additionally, a site audit on Taskly’s competitors as well as SEO research has helped put together key words in copy writing.

Paper Prototypes

The activity of creating paper prototypes has allowed me to immediately discover issues with the design, and easily change them. The ability to easily sketch out the user interface allows me to present and test interaction concepts of Taskly’s design.


During the wireframing stage, it was decided to use a responsive design that would work with mobile, tablet and desktop platforms. These wireframes were created to be put through usability testing with non-interactive paper print outs as well as implimenting them with a digital interactive prototype, that was conducted through Invision. This has helped identify the user flow and its pain points at this point of development, and take that feedback back to previous design stages.

Lean UX (Lean Canvas)

With less emphasis on deliverables, which can take up a lot of development time, using Lean and Agile development theories allows me to focus on the actual experience being designed. This will help ensure that it can be aligned with a broader team and business vision, give developers a sneak peak at the direction, and further flesh out design thinking before being consumed with pushing the final design stages.

User Testing

Once the wireframes and user flow was deteremined, it was down to user testing based on a revised ineractive version using Invision. For this exercise, the calendar and project features went through three and two iterations respectively.

User Interface Design

A finalized version of the user interface design was created with Adobe Illustrator and Adobe Photoshop.


After the user interface design went gone through its initial stages, multiple types of testing was executed through Verify and Google Analytics. The involved in the tests were:

  • A/B Testing
  • Multi-click Testing
  • Memory Test
  • Yes/No Test