UI Design Of A Kanban Application

Collins Lagat
Oct 20, 2020

--

Screens from various pages on the Kanban application, viewed on mobile and tablet

Introduction

The objective was to design a Kanban application targeted for use on the web. Since it would be used in a browser, the app must be usable on mobile, tablet and desktop (Responsive Design).

Motivation

(a) For Me

It’s a combination of wanting an extra app in my portfolio and wanting to use Bootstrap in an application. I observed that many people posted freelance jobs related to Bootstrap therefore I wanted to dip my feet into it.

(b) For User(s)

Kanban users love their kanban applications because they help them visualize project progress and status.

Inspiration

The colors and design of components was influenced by Bootstrap, while the layout was influenced by two posts I found on dribbble. You can find those posts here:

https://dribbble.com/shots/13240759-Project-Management-App

Summary of Process

  1. Brainstorming: involved looking at existing kanaban apps and browsing designs by professional designers.
  2. Sketching prototype on paper.
  3. Implementing sketched prototype in Figma.

Sample Screens

Mobile

Mobile View of Home Page
List of Boards, Viewed On Mobile
Mobile View of Kanban Page
A Single Kanban Board, Viewed On Mobile

Tablet

Tablet View of Home Page
List of Boards, Viewed On Tablet
[Tablet View of Kanban Page
A Single Kanban Board, Viewed On Tablet

Desktop

Desktop View of Home Page
List of Boards, Viewed On Desktop
Desktop View of Kanban Page
A Single Kanban Board, Viewed On Desktop

Link To Article

You can get further material on this project, including more images and screens, at (Part 1) Kanban Application — Design Stage.

--

--