Worldfavor,
The Digital Sustainability Platform

UI, UX Design & Front-End Development

About the project

Worldfavor is a web application that enables cross-functional teams to report, gather and work with sustainability metrics and frameworks.

My Contributions

Since the day I joined Worldfavor, my main responsibility has been to work as a front-end developer, but I gradually saw the need for the company to start implementing a UI & UX processes. Piece by piece I helped the company apply these processes.

Public profile for companies to expose their data

Worldfavor AB

Stockholm, Sweden

August 2016 - Present

Living in Stockholm, Sweden, sometimes referred to as Europe's "unicorn factory", allows me to work for exciting companies and make connections within the start-up scene. This is exactly what I did, I am fortunate to work at Worldfavor AB which at a time when I started was located in one of the best Swedish startup hubs, the SUP46. Working in a start-up helped me grow, learn more and be aware of the many challenges a company might have.

User Interface Design

Scandinavian design is something I always admired and wanted to apply in my professional career. Working in Sweden gave me the opportunity to create a design that is simple and minimal that reflect Scandinavian designs.

Adobe Xd

Font Awesome

Chartist.js

Material UI

Design System

When designing UI components, reusability and responsiveness is something that I always keep in mind. The components have to be carefully designed, developed and maintained so that they cover all possible scenarios such as long texts, positions, and different screen sizes.

User Experience Design

While working at Worldfavor I had the chance to work closely with the customer success team and perform interviews, workshops, collect user feedback and get insights from real users. This relation helped me identify usability issues and potential flaws which reflect in refining flowcharts and in new design iterations.



Interviews



Sketching



Personas



Flowcharts



Wireframing



Usability Testing

User Flow Diagram

Flow diagrams are very helpful to define the scope of the platform, define user flows, remove unnecessary steps and (re)organize the pages. The absence of flow diagrams made it very hard to understand the complexity of the platform, where I took the initiative to map the entire platform. Now it's much easier to understand every part of the platform, reducing confusion, and enabling effective communication between the teams.

Worldfavor user flow diagram

KPI Visualization in Worldfavor

High-Fidelity Prototype

With an interactive and functional prototype, every new design of the project is ready to be tested, reviewed and communicated with the team before sending the blueprint to developers for coding. These steps are very important as it reduces confusion, it removes design misunderstandings and makes the development phase smooth and effortless.

Worldfavor prototype sample

Personas

Worldfavor is a complex system involving many different stakeholders. On my initiative, I have set a few workshops for defining user personas that help in designing new features and use cases. It also assists other teams in the company to not neglect any customer or user.

Persona Cards

Front-end Development

When I joined Worldfavor the platform's front-end was written using the AngularJS framework. As the platform grows and technology moves, the tech team had to make a decision on upgrading the stack and stay up to date with the latest technologies. After many years of developing in AngularJS, it has been decided to migrate to React and move towards a component-based mindset.

I have been actively involved in developing the platform in AngularJS as well as in the process of migrating crucial functionalities to React.

The tech team follows the Agile (SCRUM) development process with regular meetings such as Daily Stand-ups, Spring Retrospective, Backlog Refinement, etc.