Problem Overview

RGH2 (Rouge H2 Engineering AG) specializes in on-site hydrogen production units for steel furnaces, offering cost-efficient solutions that reduce expenses and lower the carbon footprint associated with external hydrogen sourcing. To enhance their services, RGH2 is establishing a new start-up, On Site On Demand (OSOD), which will leverage advanced unit monitoring and fast-computing sensors to provide predictive maintenance and detect issues like flooding or accidental falls.

As a small team of approximately 10 people, RGH2 desperately sought a new and consistent identity design to effectively communicate their sustainability efforts and the value of their solutions to stakeholders. Their goals included raising awareness about sustainable alternatives within the carbon-intensive industry, particularly among younger generations, while simultaneously launching their new expansion, OSOD.

RGH2 Website Prototype

Website Structure

To address pain points and highlight advantages of the original website, I began by creating concept maps based on discussions with the company team. These maps focused on the big picture, guiding decisions on page structure, content, and navigation flow.

Website Wireframes

Using concept maps, I created a persona to pinpoint the target audience for the website. Meet Lars! Lars is a young Chief Sustainability Officer (CSO) at a European steel company, leading sustainability initiatives while balancing environmental improvements with profitability. He actively seeks innovative, sustainable solutions from companies with advanced technology and industry expertise.

This persona represents the target audience I aim to engage through the design of the company website featured in my portfolio.

Using concept maps, I was able to flesh out an initial wireframe for the pages and content.

During the wireframe iteration process, I focused on what the target audience should take away from the pages, ensuring their interests and questions were comprehensively addressed through thorough analysis and annotations.

The annotated wireframe was also cross-checked with the user journey to ensure a seamless online experience.

Website Lo-Fi Interactive Wireframe

With the final wireframe, I created a low-fidelity interactive prototype using Figma. You can access it here: Interactive Wireframe. Below is an image to communicate the page purpose and goals in the website documentation.

Website Hi-Fi Interactive Prototype

With back and forth communication with the company, the final RGH2 website prototype conveys the solutions with tailored emphasis on its value propositions and strengths, bringing difficult contents to be digestable with clear layout, easy explanation, and approachable colors and styles with the focus on sustainability. Access the Interactive Prototype here.

OSOD Style Guide

Logo

Through close collaboration with the CEO, I successfully brought her vision to life by refining the logo, emotions, and color palette through meticulous adjustments and iterations.

Guideline

This 15-page logo guideline comprehensively includes:

• Corporate Identity Details that define the brand’s core identity and visual language

• Logo Variations and Usage with demonstrations of acceptable adaptations and use cases

• Logo Applications presented through high-fidelity mockups showcasing real-world scenarios

• File Structure Diagram providing a detailed overview of the hand-off file organization for easy implementation