top
Product Design
Product Design
placeholder
Intent
Transforming utility data into portfolio-level metrics and property distributions for regulatory compliance and environmental reporting.
How we
got there...
Secondary Research
Identifying the use cases for GHG emissions.
Information Architecture Diagrams
We combined the use cases and competitor benchmarking into 'chunked' datasets associated with environmental reporting.
Portfolio-Level Dataset
Property-Level Dataset
Testing Scope Through Content Mapping
Using information architecture diagrams and wireframes to explore use cases, information hierarchy, and high-level questions for our team. Our main goal was to flatten the IA to reduce content complexity and cognitive load for the user.
Opportunity Space
We decided to focus on the corporate-level, portfolio reporting for MVP because of the broader impact it will have for our customers. It also provides an opportunity to structure both aggregated and property-specific emissions, energy, and water metrics. We identified the high-level problems to narrow in on, hypothesis for increasing customer adoption, and risks that we will mitigate through user interviews.
Primary Research
We mapped out our target audience and market segment, performed user interviews, and generated user stories and a target journey for MVP.
Market segmentation to identify our target audience.
A user interview framework focused on mapping the journey for environmental impact reporting.
User interviews and resulting user stories.
We conducted internal review meetings and balanced feedback with user flows and comprehension
Clustering user stories helped us navigate the main themes of information and prioritize the main user flows for MVP.
The prioritized user journey maps the main problem of identifying gaps in utility data.
High-Fidelity Iterations
Increased design resolution and met with engineering to better understand feasilibity of the feature scope and to prioritize functionality and content.
Usability Testing
We ran through multiple journeys within our internal Backpack users including customer success, operations, and our energy modeling team. The users we able to complete 100% of the tasks and the feature received an overall system usability score of 90-95%. Aside from the usability metrics, we were able to fix a UI issue where users weren't associating the portfolio metrics, property list, and filtering.
User journey for testing and user screen capture of testing.
Main page UI modifications
Usability Testing Results
Sentiment Survey and System Usability Scores
In progress... next steps are to map out the logic flows, build out the final designs for engineering, and do final scoping/phasing...
Intent
Early discovery work to define feature breakdowns and phasing for integrating with the EPA's Energy Star API.
How we
got there...
User Personas and User Actions
Initially, we were swimming in "oh and this would be great" and
"what if we could add in this funcitonality" combined with the cognitive load of Energy Star benchmarking data and calculations.
A tactical first step was to map out simple user actions for the 'job executors'-the users in our software trying to get a specific job done-to
ground ourselves in touchpoints the epic would design
for. The growth-oriented business objectives for the epic were well established in our roadmap as integration with building certification frameworks so we were able to focus on the engineering lift to business value ratio.
We intentionally stayed high-level so we didn't
get lost in the complexities. This was more of a flypaper, brainstorming exercise than comprehensive journey mapping.
First Evolution of the Information Architecture
My brain is wired to think about scope in terms of data and
dependencies, so I started mapping out the epic in an
information architecture diagram. It helped in understanding the
data ecosystem that would influence feature breakdowns down the
road. The next step after IA exploration was to reframe the data into user flows so we could investigate the engineering lift and user outcomes.
Exploration: The Messy In Between
Our team concurrently undertook user interviews to better understand the Energy Star Benchmarking Score process and tested the potential data by experimenting with 'what could it be' in blue-sky wireframes of
user interactivity and content.
Quick iterations in figjam, low commitments, rapid
wireframing.
Layering meters on top of the property use and tenants makes the UX burdensome. We should not try to merge everything into one screen.
User interviews to better understand the Energy Star Benchmarking Score process
I had the support of a technical researcher who was our in-house SME on all things Energy Star. He concurrently worked on our graph database schema because our business is leaning into the concept of 'digital twin'-a centralized, digital copy of building information. We collaboratively cross-informed information architecture structures with how that translated into user flows.
Information Architecture Diagram
This is where the conceptual IA landed for the epic. We used this as a roadmap for scope in the features associated with this epic.
Feature Breakdown
We partitioned the work into five discrete features that form the pipeline of pushing building data to Portfolio Manager.
Intent
Mapping property information to a 3D structuring of buildings, floors, and parking data.
Live Feature
How we
got there...
Product-Oriented Business Objectives
Establishing business objectives sets a north star for the feature work. Being outcome-focused tunes the specific use cases, the users and their journeys. Below is the comprehensive list of business objectives established for our company with the targeted objectives highlighted for this feature.
Use Cases
Identify specific user needs that align with business objectives.
Jobs to Be Done
Information Architecture Diagram
Exploring User Flows
Developing the 3D visualization
Integrating the 3D into user flows
Tying User Flows to Logic Flows
Increasing Fidelity
Designs for Engineering
We performed some usability testing to tune any unclear areas of the feature design. One of the outcomes was fixing the tab structure because it wasn't intuitive that there was an additional set of parking questions. We folded the parking questions in the main flow to create one continuous sequence.
Final Prototype
Intent
Creating a pattern for associating space-level, tenant information to building floors.
Live Feature
How we
got there...
Product-Oriented Business Objectives
Establishing business objectives sets a north star for the feature work. Being outcome-focused tunes the specific use cases, the users and their journeys. Below is the comprehensive list of business objectives established for our company with the targeted objectives highlighted for this feature.
User Research
User interviews to better understand thinking, feeling, and behavior
Aggregated user empathy mapping
Investigating current tools and resources
Jobs to Be Done
Iterating Towards a Solution
Mapping user flows to datasets to better understand the implications on users. One of the concerns that surfaced was user fatigue in the building spaces (C) loop.
Iteration and feedback loop
After working through the user flows for entering information needed for Portfolio Manager, we were able to 'chunk' the content into datasets.
Information Architecture Diagram
UI Development
During one of the iterative loops, we had a happy accident moment where the form entry was pulled off to the right of the page so we could explore the 2D visualization. We realized that by pushing the form entry to a drawer we could declutter the user interface and provide a global mental model for data entry.
Working through the color pallete to ensure it blends with our pattern library and then tested it out on real world scenarios.
This is where the main UI screens landed.
UI layout content blocks and skeletons.
Designs for Engineering
Final Prototype
Intent
Transforming property use details into the final calculations needed for Portfolio Manager integration.
How we
got there...
Product-Oriented Business Objectives
Establishing business objectives sets a north star for the feature work. Being outcome-focused tunes the specific use cases, the users and their journeys. Below is the comprehensive list of business objectives established for our company with the targeted objectives highlighted for this feature.
Information Architecture Diagram
User Interviews
Jobs to Be Done
Design Development
Taking logic flows through content testing and design iterations
Increasing resolution
Designs for Engineering
Final Prototype
Intent
Integration service with Portfolio Manager and confirmation of that exchange.
How we
got there...
Product-Oriented Business Objectives
Establishing business objectives sets a north star for the feature work. Being outcome-focused tunes the specific use cases, the users and their journeys. Below is the comprehensive list of business objectives established for our company with the targeted objectives highlighted for this feature.
Activity Log
Rapid Iteration
Exploring content containers
Engineering questions
Push service data schemas
Iterating on information hierarchy
Changes to the Push Service Schema
Designs for Engineering
Intent
Ground-up creation and management of a self-standing pattern library.
Intent
Working on bringing this in... lorem ipsum dolor sit amet consectetur adipisicing elit. Quam fugit voluptas alias, aliquam nisi accusamus sunt nobis.