top of page
H2 Costing
Role: UI Design
My key tasks: wireframing, prototyping.
Timeline: November 2022
The problem
The team needs to create a powerful presentation to pitch to the client in order to get this feature approved for development
The project goal
Create an intuitive and interactive demo that will showcase the most important features of the project
An introduction
About the project
The Costing team would like to develop a stand alone tool that will help investors select different types of energy depending on variables to generate more revenue
Understanding the problem space
What are the challenges that we face in order to generate a powerful interface?
We initially started the project with an excel file containing the most relevant data. We used this data to understand what type of data driven design we needed to produce.
Prior design we also created user stories and user journeys in order to develop more efficient ui interface
We had various video calls with team in order to understand the data and be able to translate it into a powerful interface.
The major questions we asked here were:
- How you prioritise the data?
- How you is the process to obtain the data for the user?
- Which one is the most relevant data for the user and why?
Testing iterations
Ideating for possible solutions
I created several desktop versions for the data that was provided. We had several stand ups with the team and keep the iterative process as a priority.
More information can not be provided due to confidentiality reasons.
Design process
Following guidelines
We kept a clean user interface following the design system guidelines and also accessibility patterns.
Solution
Design process
User journey
We designed the most important user paths to help the team achieved their goal.
1. Create Scenario
On this path the user has a particular case with multiple scenarios. The user has the ability to create a new scenario to add to the case screen
a) On this first screen the user already has a dashboard screen with a particular case and multiple set up scenarios for the particular cas
a.a.) Once the user clicks on create scenario button this screen opens in order to input fields.
First option is General Information
a.2.) Second field is Financial Inputs
a.3.) Third field is Choose Technology where you have to decide which technology to use: Green, Blue or Grey
b) Once you input all the fields the system will generate the results and it will show a summary of the main results that can also be detailed
2. Scenario
On this journey you are able to see all the scenarios you have created for an specific case, select them, see a summary and also compare them.
a) Once you input all the fields the system will generate the results and it will show a summary of the main results that can also be detailed
b) The user also has the option to click on each technology to have a detailed dropdown with most relevant KPI's.
3. Compare Scenarios
Within each case project the user will be able to compare results between different scenarios
a) You can select multiple scenarios and compare them.
b) On this screen you have a detailed overview of all the scenarios you filtered. The user is able to also run some calculations on this screen.
b) Entire page view
Roadmap
This demo was created to help the team to get the project approved for development. Next step will be to map out the full version of it.
bottom of page