UX/UI Design
Nacero
Helped Nacero build an energizing consumer brand across all channels and roll out a network of gas stations like no other by creating a branded consumer experience for the future of gasoline.
Project Overview
Nacero developed facilities that produce a new type of gasoline made from natural gas and renewable natural gas instead of crude oil. They had successfully marketed to investors but needed our help to launch to the general public. I was part of the five person team that created a new brand identity, website, custom data visualizations and a iOs app.
Role & Duration
UX/UI Design
iOs App Design
Data Visualization
5 months
Building the brand
We started with building a brand that represented their visionary approach. The new identity was built around two core concepts: A logo mark that underscored their new approach to an old industry, and a brand strategy that centered around the idea that you can change the world without changing your car. This visionary spirit was reflected across all touchpoints—a fresh visual palette, aspirational lifestyle photography, and innovative service experience
Data visualization and infographics
One of the biggest challenges we encounter was figuring out how to present the data and conversion process in a way that anyone would understand. Nacero has very specific process of producing gasoline, meaning that not everyone would understand what it was or how it worked. Even we initially had a difficult time understanding how some functions worked so we closely collaborated with their engineers and farms.
I personally worked on the two graphics below. Starting with the ESG Ecosystem Wheel which is meant to illustrates the various components and interactions between different stakeholders, companies, industries, and institutions involved in promoting or implementing ESG practices. We decided that an interactive svg would be the best way to implement and maintain this graphic as it allowed me the designer, full control of the interactive, styling and hover behaviors. At the end this was a single svg with hover animations and inline text which was accessible by screen readers.
Incorporating 3D models
Another flow that we believe would benefit from data visualization was the manufacturing process. This is a three-steps process that takes the natural and renewable natural gas, converts it to hydrogen or gasoline with either methanol or hydrogen generation. I worked closely with a 3D model artist and provided the detail sketch below. Final deliverable was a mp4 that we used in a module where users can click through the steps to zoom into that specific section.
All sketches were created within Procreate on an iPad.
A whole new refueling experience
Nacero plans for its stations to feature healthy food options, gourmet coffee, wifi-connected open areas that are sustainable and green, and of course a fully connected, seamless experience between the Nacero app and smart fuel pumps featuring touch screens.
The idea was that simple, convenient app will make it easy for users to buy Nacero fuels. Users would be able to use the app to pay at the pump, track their carbon savings, and earn rewards. I was the design lead for the prototype app that Nacero used for investor meetings and at tech conventions like CES. This project had a very quick and tight deadline. We created over 15 screens and provided click through prototype and an animated video of the whole flow using After Effects.
Explore More
Here are a few more case studies you might find interesting
