Mockup for Kreis- Project management Webapp

Kreis-Project Management Webapp

Mock-up designed using Malo Widerspach’s template

WHAT AND WHY

Kreis is a simplified version of a project management software. It is dedicated to freelancers and startups and aims to build relationship with younger companies that will eventually become users of the legacy product.

The goal is the design of a simple and appealing tool that allows users to set up free accounts, add team members, create projects, and manage basic timelines, deliverables, statuses per project.

Duration: 27th December 2019 – 20th January 2020

MY ROLE and challenges

My role was to design the project management web app between December 2019 and the end of January 2020. Together with the styleguide, these were the features to be included:

  • Ability to group smaller sub-projects under a larger “parent project” in view project;
  • Ability to assign owners to parent projects, sub-projects, and tasks within each sub-project in view project;
  • Ability to assign due dates, “marked complete”, and add comments to each project type in edit project;
  • Ability to indicate dependencies/blockers between projects in view project;
  • Ability to add attachments.

RESEARCHES

Competitive analysis

The first step was to research the main competitive softwares out there.

I focused the analysis on two of the major softwares available, comparing the features, the pricing and their usual customers: Jira and Trello.

I was also able to observe and record few steps of a software developer while using Jira, and question him on the activity.

That gave me a big hand on understanding the conventional process of the main features and also their complexity.

Building empathy

During the empathy phase of the deign process. I decided to create two personas for this project, to be sure to understand fullfully both the needs of a freelancer both the ones of an employee,

Ilary Smith, Entepreneur
Mario Rossi, Social Media Marketer

The site map

With this collected datas I could finally work on the architecture of the webapp and therefore I designed the sitemap. As you can see, it is very easy and simple indeed.

Sitemap of Kreis

Wireframes

Note: I made tons of pen and paper sketches for this project, they were all really meant to help me to ideate, therefore I was not really focusing on the rendering for publishing, unfortunately.

Lo-FI

For this project I wanted to try Balsamiq for the lo-fi wireframes.. Although after a very short time moved back to InVision to save time when needed on the next stage.

Hi-fi

This is at the moment the only project I can say i entirely made using Invision. Below I am sharing all the High Fidelity wireframes for the kreis Project management tool.

PROTOTYPE

Prototype with Invision Studio.