TYPE & TIMELINE
End to End Design Process
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
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
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.
Patrick, 40 Years Old, Site Supervisor from Calgary, AB
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.
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
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
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
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 / Adding a Task
Connecting with Team Members
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.
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.
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.
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
I wanted to stay true to the ProjectManager’s website visual and branding - using the same logo & similar colours in the new app.
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
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.
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.