Web design, product checkout + packaging and all marketing materials

ROLE
UX, Usability Testing
Graphic/Visual Design
Interaction Design
Ecommerce/Marketing

COLLABORATION
Product (hardware)
Development
Business Ops
Marketing

SUMMARY
I helped create and design a great web and product checkout experience that provided our users with all the knowledge to make an informed decision at the time of purchasing our product. Also, helped on solidifying the brand visual direction making it cohesive throughout all marketing materials.

Brand Guidelines

While the logo was already established when I joined the team, I was in charge of defining the brand direction of the company. This included the addition of an accent color to make the brand more memorable and easy to differentiate. The visual system created was propagated across the company’s consumer facing elements: marketing materials, app, web app, web and ecommerce sites absorbed these standards to form a unified visual language.

Website &
Ecommerce

The company’s website was comprised of a two-step process. The first step was about conveying the right amount of information to the consumer, explain what the product is and what it does, dissipate all doubts and explain clearly all the benefits the user should be getting once they’ve purchased the product. The second part was the moment of purchase. We broke down the purchase steps so all the information regarding payment, necessary or optional add-ons, account creation and payment confirmation were crystal clear and left no room for ambiguity or confusion, optimizing the purchase experience.

CES 2018

Before our launch in summer, we were present at CES 2018 in Las Vegas. Here, we had the opportunity to present a functioning demo of Mistbox where people could see the device misting while mounted on an AC unit. We had a button that when pressed it’d make the fan compressor run, simulating standard operation. The air coming out of the compressor made the wind turbine spin and the device would begin operation. Finally, the mistbars would spray water for 30 seconds allowing the spectators see the cooling process in action.

We created informational materials that accompanied parts of the product on display, like the wind turbine and the water treatment system. Additionally, we had a table with all the Mistbox parts on display, and every part was equally explained with its corresponding visuals.

Lastly, next to all the elements on display we had informational kiosks, which were iPad pros with a Principle prototype loaded into them. This prototype served very effectively as a ‘native’ experience full of valuable information for people that wanted to dig even deeper into what Mistbox is and how the science behind it works.

Marketing material available at our booth.

Installation of our booth's banner.

Fully finished booth.

Packaging

Mistbox was manufactured by the tier 1 manufacturer Flex in Shenzhen, China. They're responsible for manufacturing products like the iPad for Apple.

I helped design the visual elements present on the hardware itself. The battery, water filter and control unit needed information printed on them. Print surface areas varied for several reasons, which presented a challenge at the time of coming up with a unified way to include descriptions and graphics. The final result was laser printed.

Additionally, a reference guide that served as an installation manual was initially included in the box. Installation steps were explained in detail, accompanied by custom illustrations. It was later discarded but continued to serve as the foundation to the video-guided flow inside of the app (click here to check the Mistbox App project), which better suited the needs of the users at the time of installation.