Case study: CO2IN

What I did

UX Research

Information Architecture

UX Writing

Wireframing

Project Management

User Testing

time

March 2023

5 months

250 hours

Team

Colleagues from CO2IN (CTO, Graphic Designer, Growth Manager, CEO)

Agency (UI Designer, Project Manager, Graphic Designer)

Tools

Figma/FigJam

Slack

About CO2IN

CO2IN is a dynamic startup established by the CEO of Amper Holding, a prominent player in the renewable energy industry in the Czech Republic.

The goal of CO2IN is to create a scalable solution that enables anyone - from college students to multinational corporations - to participate actively in reducing carbon emissions and thus fight against climate change throught utilizing emission allowances as the underlying asset while each transaction is recorded in an immutable blockchain database.

My Role

I was brought on board by CO2IN to contribute to their marketing efforts and UX design. My primary role entailed the creation of their new website, encompassing everything from initial designs to the final development stage

Additionally, I actively facilitated internal discussions regarding product repositioning, identifying target customers, and determining features and benefits. These efforts culminated in the creation of wireframes for the agency, aiding in the establishment of brand identity, UI, and subsequent development.

Background

The project began with a rudimentary website (viz video bellow), targeting a niche audience consisting of cryptocurrency enthusiasts and environmental advocates. However, this particular group didn’t generate significant revenue for the company.

Eventually, the client recognized an opportunity to market CO2IN to large corporations, offering them the chance to incorporate CO2IN into their corporate social responsibility (CSR) initiatives.

Goal

To design a new website that effectively communicates the main benefits and reasons to use CO2IN, while also providing a clear and easy-to-understand explanation of what CO2IN is.

Research

Goals

To comprehensively understand our existing and potential users.

To analyze competitors and similar products in the market.

survey

The client commissioned an in-depth research project aimed at mapping the present behaviors and perceptions of current users, but only partly the potential users of CO2IN. I used these data as a starting point to determine the motives, needs and pain points of our current and potential customers.

Market research

I conducted extensive market research on their competitors and other companies offering similar products.

Limitations

Due to the time constraints I was unable to carry out further research to map out the needs of businesses concerning their corporate social responsibility (CSR) and openness towards carbon credits. In order to obtain at least some understanding of companies’ CSR requirements, I gathered valuable insights from business owners during mentoring calls as part of the Start-up Yard CO2IN program.

Personas

Using the collected data, I successfully established our four primary personas and determined their crucial traits and requirements. This stage proved to be both essential and challenging during the design process, as CO2IN transformed into distinct products with varying applications for each persona.

Defining the Information Architecture

A significant aspect of my role involved not only designing wireframes for a new website but also collaborating with my colleagues from Amper to compile the entire content for the website thus defining the key characteristics of product as such. This was the most crucial and difficult phase as it lasted while the entire project and overlapped with all the phases of project.

The biggest challenge of the project was to effectively organize and present all the information about the product to two distinct target audiences, making it easy for both of them to find the relevant information they needed. To be able to determinate an importance of benefits of the product for each target group, I used a graph below to demonstrate it.

Sitemap

Throughout the project, I created more than five versions of the site map. Each iteration evolved based on the new knowledge and insights I gained about our product and target audience.

Sketches

My very first sketches were very low fidelity, but helped me to start seeing how the content could be organized.

Wireframes

I began by creating basic wireframes in Figma, using low-fidelity designs to depict the layout of the main content blocks, navigation, and user flow. This was done simultaneously as I worked on gathering and organizing the content for the website.

I sought the help of an agency that specialized in branding, UI, and website development to assist me. With their expertise, we established the fundamental design components and patterns and worked on overall UI of the website.

Through feedback provided to the UI designer, I ensured that every page on the website reached its utmost perfection.

Additionally, I oversaw the responsiveness of the design and development aspects.

Going live!

view the website

Survey for Gathering Feedback

Following the website’s launch, I have prepared a survey aimed at mentors who participated in the mentoring program at Start-up Yard.

The primary objective of this survey is to collect feedback regarding the clarity of our product’s communication of its benefits and ease of understanding its functionality.

Next Steps

Considering the limitations in terms of time and budget, we have decided to defer the design of certain features to a subsequent phase of the design and development process. During this second phase, we will incorporate the modifications based on the feedback we have gathered from the surveys, as well.

Product Positioning and Website Redesign