UI/UX Design
PATHWAY TO NET ZERO CLOUD APP
Sero, a tech startup from Wales, UK, combines industry-leading construction and digital expertise to deliver ground-breaking living solutions. Their Passport provides property owners and developers with a clear set of steps to achieving a carbon-zero portfolio of homes. As UX/UI designer, I collaborated with the team responsible for delivering the Pathway tool which helps understand how a home, building project, or housing stock contributes to the UK’s climate challenges and provides you with solutions on how to tackle it.
The Pathway tool is part of a larger digital management platform called 'Passport'. This enables property organisations to view and manage property data such as surveys which include floorplans and photos of individual homes or entire residential portfolios. UX/UI design was primarily aimed at desktop users.
As UX/UI designer, I was also involved in ideating and designing the Passport. I used Figma as the tool of choice to present and communicate designs to teams and stakeholders across the organisation. Click image to view.
Click image above to view more detail on some of the organisational management within Passport. This example illustrates UX flow and is also intended to communicate to developers UI behaviour.
The above Figma design illustrates the use of annotation to communicate certain concepts and UX features and behaviour patterns to developers and project owners. Click image to view.
The Pathway designer in more detail. This was the result of months of iteration through design and feedback sessions between UX/UI, founders and senior stakeholders. The application allows Pathway Designers to view existing property survey information captured by on-site survey engineers, and then apply steps across a timeline towards achieving net zero through an efficient drag-and-drop interface. The responsive design above shows the Pathway app in use on different desktop screen sizes. Click image to view.
The diagram above illustrates the UX flow for three different types of personas. Keeping everything within Figma makes for effective communication and management of design files. Click image to view.
Part of a successful design communication strategy was to create a UI Kit using Figma where other designers and developers can access design and style guides as well as reusable UI components. This kit also served as a design system that included brand guide elements which are useful to marketing teams. Click image to view.
Click the image above to view larger examples of the UI Kit designed using Figma.
After many months of design iteration, the Pathway tool was complete and ready for development.