UI/UX Design
UX Design
UI Design
Brand design
Dev.
Headline image for the Hefty work page - features an image of a guy pulling an airplane.

Project - UX / UI

Hefty for Sustainability

Brand

Responsibilities

User Experience
User Interface

Hefty™ introduced a new program called EnergyBag® that provides a way to collect otherwise hard-to-recycle plastics at your curb and turn them into valuable resources.
We started this project with the primary goal of teaching everyday users about various aspects of the EnergyBag® program, whether it's educating them about hard-to-recycle plastics, the EnergyBag® itself, or what they can do to help Hefty™ advance this program.

Content Model

We started this project with a content model, or as I like to call it, "colored boxes." Our goal was to divide pages in a way that would enable users to quickly and efficiently learn about the initiative Hefty™ is taking with their EnergyBag® program.

Wireframes

We used our content model as a basis and designed wireframes on top of that. We created a homepage with three bite-sized information sections that, in itself, acts as navigation to the other pages for more in-depth knowledge.

Interactive Modules

We also designed interactive modules for both desktop and mobile experiences to meet our initial goal of conveying information in a simpler form. We added various iconography to further achieve our goal.

sketches and ideas for laying out the content for the site.
well define content model.
Wireframe that showcase the design and the content on the site.
Wireframe that showcase the design and the content on the site.
Wireframe that showcase the design and the content on the site.
Hefty for sustainability home page .
Hefty for sustainability home page .
Hefty for sustainability home page - featuring a interactive module
Hefty for sustainability secondary page
Hefty for sustainability secondary page

UI

We kept the UI as minimal as possible with an emphasis on the copy/text. Fewer design elements don't always result in a boring website; if done effectively, the result is actually the opposite. Fewer design elements with vibrant colors and iconography made this site fun to look at and easy to consume.

Our final product, which we feel accomplished our initial goal, consists of three pages. First is the homepage, as mentioned earlier, with an overview of the program. The second is about hard-to-recycle plastic, which elaborates on the idea of what hard-to-recycle plastic is and how to distinguish it accurately. The third element was an EnergyBag® page that gave more in-depth information about the program with a FAQ section with even more detailed information.

Visit

View the live site at heftysustainability.com