Quantified Impacts

JournAI logo
Freelance project • 2023
Project Overview
QI is a young start-up from Copenhagen with the mission of creating a userfriendly webapp for CO2-emission calculation and data sharing for manufacturing companies. It's intended to also function as a database, both for possible suppliers and products.
My Contribution
• UX design
• Hosting of workshops and sprint planning
Screenshots of the JournAI app
The core design challenge of this project was the lack of competitors and tapping into a very new market. Some companies were selling parts of our intended solution, but in a different format and without any good usability, e.g. an emission calculator in an excel sheet. Beause of this, we needed a very steep learning curve for everybody involved in the project.
To tackle this, I used a design sprint as a problem-solving methodology.
↪ 5 week MVP design sprint
Planning stage

Week 1

• Define project scope
• Plan UX process & tools
• Agree on UX Strategy
• Prepare workshops

Week 2

• Understand customers & industry
• Co-creation workshop - Explorative user story mapping, rapid prototyping, user flow charts
• Define feature list

Week 3

• Choose React library together with developers
• Create a wide breadth of potential solutions
• Card sorting
• Identify concepts for higher fidelity, start prototyping & quick testing
• Create multiple improved iterations

Week 4

• Sophisticated usability testing
• Validate assumptions
‍

Week 5

• Finalise visual identity & mockups
• Prepare developer hand-off
‍
In order to create a good user experience for this niche product, I needed first hand knowledge about the manufacturing industry. Therefore, it was crucial to involve engineers and other employees in the design process from the start. Since 3 engineers from the industry were already working at QI, I got an instant education about potential user needs within manufacturing companies and why the intended webapp could be of great value.
Moreover, we discussed challenges, both for potential users and for the team. Looking at how companies currently deal with CO2 calculation and how they're communicating and sharing data with suppliers and customers revealed big opportunities.
‍
Aligning the stakeholder expectations with the design sprint priorities was important to not loose focus during the 5 weeks. Following a collective, user-centered approach, as well as a flexible, incremental development, was key. Therefore, the plan was created and distributed along the team, as seen above. As a target for our sprint we concluded to create a ready-for-development MVP, which was iterated over multiple rounds.
↪ Agile approach
Project scope & UX process
Before hosting 2 workshop days, we tried to conduct as much secondary research as possible, in order to gather existing information. We analyzed emisson market trends, industry standards, common practices and design guidelines of other data sharing applications. Moreover, we researched if there are existing regulatory or legal requirements, especially in consideration of data privacy laws.
‍
↪ Desk research
Understanding
screenshot of a FigJam file with Personas, User Story Map and Flow charts
During the first workshop day, we started with a Lean Business Canvas Model that we filled out in a group discussion with the co-founders, environmental and software engineers, in order to align on goals, problems and our value proposition.
Afterwards, we firstly individually and then collaboratively created User Story Maps to make a transition from our business requirements to a visualisation of our product. This step was the first moment to illustrate solutions to our problem space. Going through activities, steps and details enabled us to ideate more concretely on the second workshop day.
↪ Workshop 1
Exploring
Based on the USM and the Personas, the next exercise was to create a user flow chart for.different prompts/use cases, for instance: "Persona X wants to get documentation for the calculation of the co2 emissions of the new XM3000 chair". 2 teams, 4 prompts and a group discussion later left us with 4 different user flow charts, which then led to the final rapid prototyping exercise.
Equipped with pen and paper, every participant had to sketch 2 flows for 2 of the user flow charts. This enabled us to quickly get a lot of low-cost iterations for different use-cases with input both from the business- and engineering-perspective. Moreover, we were already able to identify edge cases and create a feature list.
↪ Workshop 2
Ideating
Value proposition canvas, User Journey Mapping and a rough sketch of app screens
As we understood the core challenges, we started generating and specifying first ideas. Considering the bigger picture and discussion material we got from the workshop and the limitations from building an MVP, we were already able to constantly sort some ideas out.
↪ Ideation
Defining and diverging
We started week 3 by choosing a fitting React component library together with the developers. We chose MUI for it's sophistication and stability, as well as its built-in accessibility features. Afterwards, we created a few wireframes, based upon our workshop results.
A card sorting activity together with potential users then helped us to group certain themes together and to get an idea of the needed information architecture. Now, that we had a starting point for logical content structuring in our webapp, we decided to design mockups with higher fidelity. Therefore, a style guide was set up, which would later turn into a proper design system.
↪ First mockups
Deciding
Prototyping and making the mockups ready for testing was the next step in the process. Once the prototype reached a certain degree, we were continuously able to do short testing activities about certain parts of the product, like 5 second tests or prototype walkthroughs. Simultaneously, we were still aiming to validate our information architecture further, for instance by doing tree testing.
↪ First usability insights
Prototyping and evaluating
Value proposition canvas, User Journey Mapping and a rough sketch of app screens
In week 4 we started with sophisticated high-effort usability testing. Multiple ~1h think-aloud-testing sessions with people from the industry gave us valuable insights throughout the week. Based upon the previous ideas, we decided for a few to be designed and tested later on.
During testing, we specifically tried to evaluate our earlier hypotheses from the ideation phase. We gave users some time to interact with the product, monitored their behavior, and interviewed them about their experience. After examining the collected data, we discovered 4 recurring themes, where our testers still had problems:
‍
• The difference between contacts and connections
• User's mental model about the networking module
• Confusion on pages with more than 1 secondary button
• Difficulty in quickly understanding the data tables

Based on those results, we added iconography to some elements in the data table, removed certain secondary actions and hid them on other pages or pop-up modules, renamed and restructured the networking module and its content. We validated all major changes with more testing. For improving our represantion of the mental model of our user, we did more card sorting as well as cognitive walkthrough exercises with testers.
↪ Iterations
Validating and alterating
In order to ensure a seamless collaboration from design to development and an accurate implementation, we not only provided sufficient documentation, assets and specifications, but also included devs since the start of the project in most activities. Beyond that, annotations, a style guide and a well structured version control ensured a consistent transition of the project.
Since we had done enough research to back up most design decisions and since multiple stakeholders were involved in all steps of the process, the handover went smoothly.
↪ Hand-off
FInalising
MANUELDESIGN.DK