top of page
PM_final_screens_mockup.png

Project Manager
App

 

 

ROLE

 

End to end design

UI/UX

Prototyping

 

 

TYPE & TIMELINE

UI/UX 
7 weeks

 

 

TOOLS USED

 

Figma

Figjam

Maze

 

 

YEAR

 

2021

 

 

WHAT'S THE APP ALL ABOUT?

ProjectManager is a cloud-based project management tool that helps teams plan, schedule, collaborate and manage projects online with other team members. The ProjectManager app redesign allows for seamless mobility when moving from the desktop version to the app.

 

The ProjectManager app was launched in 2021:

  • Easy access from anywhere

  • Real time updates while working remotely/on-site

PROBLEM SPACE

The ProjectManager website is not responsive and mobile friendly, that’s where the app comes in. The app’s current configuration has limited tools and features on the app, compared to the website:
- No Gantt charts
- No calendar view
- Dashboard lacks quick review of project or today’s schedule
- No way to customize dashboard
- No filters to search by - projects show up only alphabetically, no ability to search by date or task
- No way to communicate with other team members

DESIGN CHALLENGE

How might we design a product that can improve active users’ experience using the ProjectManager app?

DEFINING THE PERSONA

Project teams (management and team members) that want to collaborate, plan, manage and report their projects.

User_Persona_pic_User_persona.jpg

Patrick, 40 Years Old, Site Supervisor from Calgary, AB

About

Patrick is a site supervisor for a local building company. He supervises between 10-15 construction sites at a time. He visits between the different sites on a daily/weekly basis, supervising all the trades at each site. He reports each project’s progress back to management, using the ProjectManager app.


Pain Points

There are limited tools and features on the app:

  • No Gantt charts - No calendar view

  • No option to view few projects at once

  • Dashboard lacks quick review of project or schedule

  • No way to customize dashboard

  • No search filters - projects show up only alphabetically, no ability to search by date/task

Motivators

  • Patrick likes to stay on top of all the projects and all tasks within a project, making sure everything stays on schedule and budget.

  • He wants to be able to keep all relevant parties (management, clients, tradespeople) informed on a daily basis
     

User Goals

  • Ability to update ongoing tasks & assign new tasks while he’s working on-site

  • Needs to quickly communicate with other team members/management if & when problems arise while on-site

  • Ability to view project timelines & budget

  • Needs to track daily/weekly activities

MY DESIGN PROCESS

USER FLOWS

SKETCHING

USER TESTING

ITERATION

VALIDATION

USER FLOWS

I created user flows of the main actions my target user would take within the app’s core features:

Creating/viewing a project, viewing/adding a task, project overview, connecting with team members, and setting notifications.

Creating / Viewing a Project

viewing project_white.png

Viewing / Adding a Task

Project Tasks.png

Project Overview

Overview.png

Connecting with Team Members

Team Members.png

Setting Notifications

Notifications.png

SKETCHING THE INTERFACE

LOW-FIDELITY PAPER MOCKUPS

The next step was to create low-fidelity sketches. The quickest way was to put pencil to paper, and create paper mockups, that are based on the user flows. The low fidelity sketches were a quick, effective way to ensure easy navigation between all core components, while making sure to follow my design goals:
 

• Include core features from the website
• Make it easy for users to navigate between all their projects and tasks.
• Make it easy to follow project timelines & progress.
• Make it easy to connect & communicate with fellow team members.

LOW_FID_WIREFRAMES.jpg

 

Next step was to take the paper mockups and create wireframes in Figma. These wireframes would then turn into a working prototype that is ready to test with real users. Once I had a working prototype,
I set out to create my first usability test, in order to see which flows were working and which needed to be improved.

 

MID-FIDELITY MOCKUPS

Mid_Fidelity_mockups.jpg

 

USER TESTING

 

In the first round of testing, each participant completed 12 tasks, allowing for follow-up questions between each task. The testing was done through the Useberry website. The various tasks took users through the different workflows in the app, such as logging into the app, creating a new project, adding tasks into the project, inviting team members to join, checking the overview dashboard and setting alerts.

12 Tasks

4 Users

rainbow_spreadsheet-03-03-03.png

 

The main themes and insights that emerged from the test:
- Change the homepage icons’ wording: “Project Progress” and “Overview” were confusing
- Make email button more visible & button-like
- Make "Add Task" button more visible
- Allow for more customizable icons on the homepage – such as “add task” icon and “chat”
- Add Home icon to footer, for easier navigation between the screens
- Add more details inside each project screen, such as number of open tasks left & % completed

PM_website_1.png
PM_website_2.png
PM_website_3.png

 

VISUAL DESIGN

 

I wanted to stay true to the ProjectManager’s website visual and branding - using the same logo & similar colours in the new app.

 

VISUAL DESIGN

Style_Guide.png

 

VALIDATION & DESIGN ADJUSTMENTS

 

I created a second usability test for validation purposes, to test out the high-fidelity mockups and the design iterations made in the former phase.

I tested on 3 users, having each user go through 7 tasks of the main workflows in the app, such as logging in, adding new tasks to an existing project, checking out their project overview, and sending an email to a team member.

Main findings & design adjustments: 

• Footer: add direct access from footer to all the main pages
• Homepage: there’s no direct access to the Gantt chart & calendar page
• Overview Page: when asked to check on the progress of a project, the first instinct was to go to projects page
• Overview tabs: change the names of the tabs under the overview page or remove some of the tabs completely

usability_tasks-04-04.png
PM_High-Fidelity_in_a_row.jpg

 

FINAL SOLUTION

My solution provides ProjectManager users with the ability to see a complete list of their projects, tasks within each project and timelines via a calendar and a Gantt chart.
 

Each user has the ability to create new tasks and assign them to other team members, keep track of logged hours on each task/project, and chat with other team members inside the app.

 

REFLECTION

 

This was my first project redesigning an app. I learned a lot from the whole process - how to create wireframes, how to prototype, how to create a usability test, and how to extract users' valuable input into design iterations; Learning about target users early on is key to understanding their pain points and frustrations. Your users' ease of usability and their input is what validates your product.

bottom of page