Project Management Platform from 0 to 1
Peato
/
Eco-Tech
/
Responsive Web
/
2024
Introduction
Understanding the Challenge
Untangling the Workflows
Design
1
Admins needed a structured way to browse and manage multiple projects at different stages.
Users (project developers, etc.) only needed to see their assigned project(s), making a table layout unnecessary.
Table view is designed for admins. It provides a dense, scannable layout for managing large project lists.
Grid view is primarily for users. It offers a more visual, compact format for quickly accessing one or two assigned projects. Although both views are accessible, users can switch between them based on their preference.
Design
2
Project's Details
Admins found it difficult to track key project details and understand why certain projects were archived or postponed.
Users struggled to understand which phase they were in and what information was required.
Project header improves clarity. It displays key details upfront, including the ID, country, status, point of contact, and partner organization.
Status subcategories were added to provide more context for admins. They help quickly see why a project was archived, postponed, or moved to the backlog without searching through records.
Project summary page provides a high-level overview. It shows only the most critical project inputs, helping admins quickly decide how to proceed.
Phases navigation bar offers a clear overview of all project phases, making navigation more intuitive.
Design
3
Input-heavy Phases
No clear way to track form completion within a phase.
Large, input-heavy forms made it difficult for users and admins to navigate and find missing or incomplete fields.
Users lacked help text and guidance for complex input fields.
Phase visibility issue – on the old platform, users lost track of which phase they were viewing when scrolling.
Phase menu simplifies navigation through large forms. Completion tracker shows progress within a phase.
Structured form layouts group inputs into clear sections for improved readability. Empty fields tracker and dot indicators highlight missing inputs, helping users quickly locate and complete them.
Info text and tooltips clarify complex fields, reducing errors and uncertainty.
Persistent phase header ensures users always know which phase they are viewing.
Design
4
Commenting and Activity Tracking
Scattered communication – comments and discussions were spread across different tools, making it hard to keep track of feedback.
No way to comment on specific fields – users needed to discuss particular inputs, but there was no way to tie comments to relevant fields.
Project updates were unclear – admins struggled to see recent changes or user actions.
Phase-level comments allow general discussions within each phase. Mentions & threaded replies enable users to tag teammates and structure discussions effectively.
Input-specific comments keep discussions tied to relevant fields.
Activity log records all changes, giving admins and users clear timeline of project updates.
Design
5
Adapted for Different Devices
Users struggled to update project data on-site due to lack of a mobile-friendly interface for on-site data entry.
Flexible grid system maintained a consistent structure across all screen sizes.
The interface was optimized for mobile screens, prioritizing core actions for fieldwork and minimizing clutter. For example, project import is not available on mobile.
6
UI Kit
Based on the brand’s style guide, I created a complete UI kit that includes a color palette, text styles, spacing grid, breakpoints, layouts for different devices, and over 70 components.
Usability Testing
Refining the Experience
Retro
Final Thoughts
🔑
Key Takeaways
Engaging with developers early helped ensure technical feasibility, reduce assumptions, and streamline the handoff process.
Gaps in product management meant I had to take on additional responsibilities, highlighting the need for well-defined ownership within the team.
The vague initial scope led to adjustments mid-project. Aligning priorities earlier would have helped keep execution more focused.
⚡
Allocate dedicated research time before wireframing although it's not always possible due to different constraints.
Strengthen collaboration with developers during the planning phase to proactively address feasibility challenges.
Push for clearer ownership roles in cross-functional teams to reduce ambiguity in decision-making.
🌱
Adaptability
Prioritizing and refining designs efficiently under tight deadlines.Problem-Solving
Balancing scope constraints while maintaining usability improved my strategic decision-making.Ownership
Stepping up in areas beyond design helped me develop a stronger cross-functional mindset.
Next Project ->