How we redesigned an Excel-based tool into an intuitive web application
New concept and redesign of a CO2 calculator for simplified work flow.
Problem context
The application was developed to calculate the CO2 concentration in rooms with different ventilation systems. The tool was implemented as an Excel-based file, resulting in limitations in usability and user-friendliness.
Goal
To overcome these limitations and promote the tool's usage, it is now intended to transition the tool to an accessible online software solution.
Team
Product Owner
Project Manager
UX Designer
Developer
My role
User flow analysis
New concept
UI / UX design
Client
Das Bundesinstitut für Bau-, Stadt- und Raumforschung
Why should we change it?
People problems
Lack of usability
Users have difficulty in their work flow using the tool on the day to day basis.
Lack of flexibility
The tool is only locally accessible, it needs to be used from the same computer, also limited to Microsoft Windows operating system.
Business problems
Lack of distribution
The tool is not used as much as it is intended to, due to its limitations.
Lack of access
Regulations change every 2-3 years, in the current tool it is not possible to change outdated sources.
UX Audit
User is overwhelmed with a long list of tool instructions, which is displayed only in the beginning of the process.
Will the user read it?
Will they remember what they read?
How does the user find this information again once they started using the tool?
UX Audit
It is difficult to follow steps, there is no clear navigation. Too many overlay windows open.
Exploration
Key insights
How might we make the process intuitive and understandable while ensuring users feel confident that they have all the information they need?
Benchmarking
We gathered inspirations and compared best practices of other similar tools.
We learned that all these tools provide clear navigation and an overview of the steps the user needs to take to complete the task, making the process easy to follow.
Decision
We decided to create a split screen concept due to the complexity.
At this point we already discussed the idea with our developer to recognize constraints early on.
Strategy
Wait! What else should we know before designing?
Requirements
Intuitive user navigation
Implement tool tips and explanations
New modern interface design based on Corporate Design
New feature: import/export previously entered data
Tool has to meet WCAG Standards
Constraints
Can not save process online
Only desktop version will be available
Limited users to do usability testing
Concept
We focused on 2 user flows.
User flow 1
Starting a new project
Start
Choose new project
Tool information (or skip)
User information (or skip)
Disclaimer
Fill in project information
Save and continue
User flow 2
Continue a previously started project
Start
Choose continue project
Upload project file
Project file uploaded
Continue project
Solution & design
We implemented indicatiors for intuitive user navigation.
Current section highlighted.
Overview of next steps.
Checkmark for finished sections.
Solution & design
The user is now guided through the steps in a clear, linear manner (from top to bottom).
Solution & design
We added tool tips and instructions where it was relevant.
Solution & design
We enabled the comparison of multiple datasets in one graphic.
Before
After
Solution & design
Since projects can't be stored online, we implemented an export and import feature, allowing users to download a project and continue it later by uploading the file.
Design system
Now it's time for developers to create!
After the designs have been finalized, they are handed over to our developers including other design guides such as the interactions, text hierarchy and colors.
Finalize
How else can we support the client managing their own CMS?
To ensure the informations are concise and easy to understand we suggested character limitations for each type of text fields for the backend. The current design choices also correspond to this limitations.
It helps the client to create texts focusing on only necessary information in their CMS system.
Next steps
What I would do different & next steps
I would have liked to conduct more user testing during our design phase, our only testers were the clients, who do use the tool on a day to day basis and have a good understanding how it works and what should happen. It would have been interesting to test user flows with different target users, but we did not have dedicated time or budget.
As a next step I would validate design decisions conducting user testing.
