Overview
Brought on to redesign the Project Management Portal for a growing startup focused on making homes more energy-efficient through smart, scalable retrofit solutions. This was used daily by teams coordinating retrofitting jobs across the UK. The goal was to reduce friction, improve user experience, and modernise the interface—ultimately saving time for customers, project managers and field staff.
Problem Statement
The original portal had grown organically, leading to:
● Cluttered workflows
● Confusing navigation between project states
● High cognitive load for repeat tasks
● Lack of clear visual hierarchy
We needed a solution that clarified project states, reduced time on task, and supported a more modern, responsive experience.
Approach
1. Competitor Benchmarking
To position the product and gain UX inspiration, I conducted a benchmarking review of:
● Industry competitors (energy and construction SaaS)
● Adjacent tools (e.g., Trello, Asana, Monday)
● Niche players in the retrofit/smart home space
This helped identify UX standards and where we could differentiate with smoother, more intuitive workflows.
2. Information Architecture & Wireframing
● Reworked the information structure to highlight event states (e.g., “Scheduled”, “In Progress”, “Completed”).
● Simplified navigation by reducing redundant views and grouping key actions.
● Created low- to mid-fidelity wireframes to explore new layout and interaction ideas.
3. Creation of a Figma Design Library
As the product matured, it became clear that a shared design language would speed up collaboration and reduce inconsistencies. I created a scalable Figma design library to serve as the single source of truth for the portal UI.
Key elements included:
● Typography system: Defined headings, body text, and labels with consistent spacing and contrast for accessibility.
● Colour tokens: Developed a palette based on the brand, with accessible variations for light/dark modes and status indicators (e.g., event states, alerts).
● Component library: Created reusable components including cards, modals, buttons, navigation elements, form inputs, and loaders.
● Auto layout and variants: Enabled responsiveness and state switching (e.g., button hover/disabled/active).
4. Motion & Interaction Design
One major innovation was introducing smooth animated transitions between event states. This gave users a clear sense of context shift without disorienting them.
● Transitions subtly guided the eye between workflow steps
● Animations emphasised status updates without overwhelming
● A "Return to current view" shortcut made deep navigation effortless, minimising clicks
● Motion documentation: Linked animated prototypes using Principle and Lottie to provide devs with clear motion specs.
I designed micro-interactions for common tasks like status changes, field notes, and file uploads—making them feel seamless and modern.
Design Highlights
● Clean layout with clear hierarchy: Visual clarity across different screen sizes.
● Event-state animation system: Intuitive, fluid transitions that felt natural and informative.
● Smart navigation shortcuts: Reduced user friction for high-frequency actions.
● Dark mode exploration: Considered environmental and battery-saving use in the field.
Results & Feedback
✔︎ Users reported the new flow felt “simpler and more modern”
✔︎ Project managers completed common tasks ~30% faster on average
✔︎ Positive feedback from beta users on animation flow and return shortcut
✔︎ Set groundwork for scalable component design across future tools