Project management Software
Reading time: 3 minutes
My Role
Research + UX
Period
2 days
Tool
Figma
Context
Larry Roberts is a manager in a consulting service company. He is responsible for a team consisting of 12 consultants and 1 team assistant. These consultants are assigned to different customer projects. One project may be handled by one or multiple consultants.
Larry has the following management goals:
Track the status of all the projects in his team, in terms of timeline, budget, and quality etc.
Understand who is doing what.
Build a learning organization that facilitates knowledge sharing and collaboration.Keep the team morale.
Process the leave requests, shopping requests, and expense reports from team members.
etc....
Design Process
Dashboard
The dashboard includes a left navigation bar, a top global search bar, and a main area with card-style sections.
The navigation bar highlights the current location ( Heuristic - visibility).
Card style can provide visual separation for modules and establish a clear visual hierarchy for important information, such as emphasizing key numbers and utilizing charts for enhanced visualization.
Numbers, dashboards, and bar charts are all clickable, allowing users to access the relevant detail pages directly.
Dashboard -- Iterative process
Users can drag to switch between different layouts—small, split, medium, and full-screen video—to adjust the video-to-transcript ratio.
The First Iteration:
I designed a project overview using a broad user journey, then applied a deep-dive user journey to uncover the task overview. Both overviews are located in the project section
The Second Iteration:
I conducted usability testing with five users. The results showed that in the agile development process, users prioritize task numbers and prefer task shortcuts for direct access to the task section.
The third Iteration:
I used cognitive walkthrough to evaluate a design goal, allowing Larry to check the project budget. I realized this feature was missing, so I created a new section for it.
Project
A Project Status Filter Bar at the top enables quick status switching.
The ‘Add Project’ button is prominent for easy project creation.
The left navigation bar provides quick links for direct access to current projects.
Tasks
Tasks, as project breakdowns, can be viewed in List, Kanban, or Gantt Chart formats.
List style：
makes text-heavy information easy to scan.
Kanban
allows you to view the different stages of a project.
Cards are draggable for flexibility.
Gantt Chart:
allows you to view work progress over time.
Members
Tasks, as project breakdowns, can be viewed in List, Kanban, or Gantt Chart formats.
Member overview highlighting projects and tasks.
Add member
The member’s profile page uses card style to provide visual separation and visual hierarchy.
Approval Center
Use a List Layout when displaying large amounts of structured, text-heavy data that users need to scan. Like, Display approval details with distinct column names.
Approval & Reject CTA buttons.
Learning Hub
In the Learning Hub, members can share, ask, and answer questions, fostering collaboration.
Post using a Card Feed with infinite scroll for seamless browsing.
Ask or share via a prominent input field with placeholder text and a clear CTA.
Contribution ranking in a list-style card encourages sharing, morale, and readability.