Product, UX, UI & Brand Design

by Mané Branco

Meet the Product

Working with a group of the best accomplished professionals to build the next-generation footprinting tool. Life Cycle Assessment (LCA) made easier, faster, and "for humans"!

The team includes members out of Harvard, MIT, Google, Firefox, Intel, University leaders, several PSDs and more so the potential for an amazing product is enormous.

app.earthster.org

The Challenge

1. To create the new benchmark for representing the very complex data that is a Lice Cycle Assessment.

2. To create a product that anyone can use, and not only the experts. Help the curious pizza guy down the road understand the impact of his pizza, in an easy and cost effective way.

My Role

Co-Founder and Head of UX & Brand

I led the ux research and design of Earthster since the outset of the project in Nov 2020.

During the first 2 months I also created the full branding and brand guidelines.

My Usual Process

First of all it is important for the whole team to sit together so we have a collaborative view of what it is that we already know about the problem we are trying to solve, the resources that we have and those that we don't.

Kickoff

To understand the needs and preferences of our users. Conducting user research allows us to gather data on user demographics, behaviour, and preferences. For this I have used methods like surveys, interviews, and focus groups.

Research

After conducting research it's good to do workshops with the team where we identify the problems and challenges users face with the current product or service, to clearly define the objectives and goals of the new product or design.

Define the problem

The research should allow us to create personas that represent the different types of users who will use our product. The more realistic the personas the more they provide a clear understanding of our target audience.

Develop personas

It's important to create a site map, Figjam/Whimsical/etc., to organize the information and structure the possible content on our product. This will help the team create a clear and intuitive navigation system.

Information architecture

Wireframes help us plan out the layout and functionality of the product. These need to be created with the user in mind and focusing on creating a clear and intuitive user flow.

Wireframes and journeys

Once the sketches and wireframes are complete, we can develop the visual design of the product. This includes all high fidelity designs and include color schemes, typography, and graphic design elements. These elements are also part of the Design System that should be created alongside the designs.

Visual design

For parts of the product that need to be tested a prototype can be created, Figma/Invision/etc.. Usability and functionality tests can be conducted in person or online and they help us gather feedback and make necessary changes. Prototypes might also sometimes be of value internally for easier communication between the design and development teams.

Prototyping

Whether the development team can start building the product after the whole designs are done or alongside the design process, constant communication between the teams is essential to ensure that the designs are implemented accurately and the user experience is consistent across all platform.

Development

If possible, testing for each/main sections of the product should be conducted to ensure that the product is functioning as intended and that the user experience is optimal. Once testing is complete, the product can be launched and the team should continue to gather feedback to improve the user experience.

Testing and launch

The team need to continuously evaluate and update the product to ensure that it remains relevant and useful for all users. This includes user sessions and analytic data gathering and may include fixing bugs, improving functionality, and making updates to the design.

Iteration and maintenance

User Research

I led Focus Groups and interviews with consultants and a few global businesses and renowned institutions.

These sessions allowed us to better understanding our users, to create Personas, and understand their needs and goals.

Focus Groups and Team Workshops

I led workshops with the whole team to discuss our findings, iterate on our initial ideas and come up with the best plans of action. Team discussions at every stage were essential for everyone to fill included and for the best ideas to arise.

Workshops for Conclusions

Market Research

When doing this research we tried of course to look at what was already out there, like SimaPro and Gabi who dominated the market, but also look at the history of LCA to opportunities for change and be unique.

Competitor Analysis & Benchmarking

The existing products were very difficult to use and reports very hard to decipher, not “made for humans”!

Users are used to this though so, if we want to win the market, the new product needs to be extremely easy to use, visually appealing

Conclusions

Business Challenges

For the past 20 years market has been dominated by 2 or 3 products that still resemble the looks of MS-DOS. The are hard to navigate and made for experts, making it impossible to expand the creation of LCA to enough producers globally so it can make an actual positive impact to the environment.

To create a product that is so easy and intuitive to use that can abolish the competition and grow exponentially in number of users is one of the most important business KPIs for Earthster.

To be different, be better!

Creating a product that has a brilliant first impression, especially in practitioners used to other products, is also one of the most important aims so it cab grab their attention and curiosity at the first look.

After this, to ensure a big percentage of returning users, other KPIs include having the best data connected to global databases, have an easy way for the users to connect data up/downstream on the supply chain for more real data, and an easy way to do “what if scenarios” for better environmental and business improvements.

New Users, Retain Users

Design Phases

01.

Product Mapping

Being such a complex product it was important to map the whole of it for a better birds eye view and understanding of both the ux/ui design and development scopes.

>

This allowed us not only to have a full understanding of all the sections of the product but also to prioritise based on the previously established business KPIs.

>

User Journeys

02.

Again, because of the level of complexity, a User Journey map was created for every single section to ensure the minimum possible complexity and the best ux.

>

For me this a very important part of the ux design process, and it always proved to be an amazingly interesting exercise. It allowed to find journey issues very early in the process and was also proved to be a great asset in all discussions with the engineers/developers and product owners.

>

03.

Sketches

Having a Graphic Design background, having started my career in print and always having had a passion for hand drawing, I always feel that the simple pen or pencil on paper give a great opportunity to quickly get ideas out of my head and the ability to iterate on those in non time consuming manner. I think this is important especially when producing work for a startup where time really is money!

>

There are several elements that need constant easy access and allowed me an overview of those.

>

Wireframes

04.

Similar to sketching, wireframes also allow me to fairly quick through elements on a page, but here I already start to think not only about the ux but also about the ui.

>

This allowed to start seeing possible similarities between different elements, to see where certain elements start to repeat themselves and also to start creating a more structured version of the screens

>

05.

Low and High Fidelity Designs

Low fidelity design helped to fairly quickly create a couple of versions for the look and feel of the product that I could then take to discuss with the whole team and a few potential customers.

>

And after this is was time to create the real thing, already with the tone set for the whole product, so I could just go ahead and start creating the whole product section by section.

>

Prototyping

06.

Not only because this is a complicated product but also because several of the functionalities have never been created, I ended up prototyping a few sections with the aim of getting our assumptions validated by the team and/or our users before moving forward.

>

>

We felt this was sometimes necessary to avoid unnecessary development works and time/money wastage which is crucial for any business.

07.

Hand Offs

Once the whole team was happy with the results it was time to hand off for development.

>

Even though the product owners and developers are part of the whole process, I always fully document my work so there’s lees margin for mistakes

>

>

This was mainly recorded on individual Github card for each section, with text, run through videos of the ux/ui designs and prototypes if existent.

User Testing

08.

All testing sessions were recorded video calls, with existing users and users who had never seen the product, depending on whether we were looking to find if the users had access to everything they needed or if the ux was clear for any user.

>

I moderated these with silent team mates taking notes, and this gave us the best insight and kept proving that assumptions really don’t hold much value compared to how the real users use the products in the real world.

>

09.

Usage Tracking and Analytics

Hotjar has been plugged to the product since it was still in beta. and the first users started playing around.

>

This allowed us to watch videos of how users interact with the platform, where they go and the potential pain points, but without the “pressure” of a user testing session. It also allowed us to implement the ability for the users to very easily give us feedback, whether that is good or bad.

>

10.

Iterating

In the age of the online products it is important to work in an agile environment and be ok with the idea that things, behaviours and expectation keep changing, so iteration will forever be a part of the process.

>

Iteration gives the team the opportunity for improvement as nothing is set in stone!

>

The Results

The end product keeps being amazingly praised as a game changer for the LCA industry by expert Consultants and some of the biggest institutions, like Harvard University where it is already being used the LCA tool for the environmental study courses.

It also keeps growing its clients, already having some of the major players in the beverage, chocolate, global cargo transportation, communication networks, science and others as clients.

It is expecting a major investment during 2022 so it can scale and be the most used platform for Life Cycle Assessment studies, and help change the world!

Thank You!

If you bothered to read the whole of this page I hope you’re feeling impressed and eager to get in touch!

Please feel free to use the form below and I’ll get back to you soon.

Whether you have a project you want to discuss, a position you think I’d be really suited for, or just want to have an interesting chat about product, ux, ui, design or life in general, I’m always up for meeting interesting people with challenging ideas!

Let’s work together!

Have a project you would like to discuss?
Please fill in the form below or call me on +44 7854 624521

Next
Next

Skin & Medical Cosmetics