Mistbox App (MVP)

Mistbox App (MVP)

Energy efficiency device capable of lowering AC bills by 30% or more.

ROLE
UX, User Testing
Graphic/Visual Design
Interaction Design
Prototyping

Video Direction & Editing
Ecommerce/Marketing
Customer Support

COLLABORATION
Product (hardware)
Development
Business Ops
Marketing
Customer Satisfaction

COLLABORATION
Product (hardware)
Development
Business Ops
Marketing
Customer Satisfaction

SUMMARY
I helped create and design the experiences that allowed our users to install our product, understand the benefits they get from using it and have a better way to solve their issues if they ever encounter one.

Overview

About Mistbox:
Mistbox is an energy efficiency device that sprays a mist of water around the AC unit to give it a boost in efficiency when it’s most needed. The savings of 30% or more on AC bills have been proven by the largest multinational assurance, inspection, product testing and certification company; Intertek.

If you want to learn more about how Mistbox works you can watch this video: Introducing Mistbox

Mistbox features:
• Mistbox is always connected to the internet through a cellular connection, no wifi required. This allows us to track usage at all times and keep a data record for stats purposes.
• It’s a device that works entirely off the grid. Mistbox keeps its modular battery charged with the help of a wind turbine that salvages the air from the AC exhaust.
• It requires a permanent connection to a water source. Mistbox decides when your AC needs a boost and water is sprayed through the Mistbars to cool it.
• A water filter guards your AC against any dissolved minerals in the water and against biofilm like mold and mildew. The filter is conveniently modular so it’s easy to replace when it’s needed.

Target audience:
AC is one of the most heavily used appliances at home, if not the most used. Mistbox is a device geared toward people with a high energy consumption from prolonged AC usage. Our users are homeowners, mostly males 35 years old and above with a liking for smart home tech. Mistbox can be utilized in any region, but people in hotter and drier parts of the country will take the most advantage of the energy savings since the effects of the summer heat are harsher and last longer.

App_Hero

Challenge

Being a brand new product, in such unique and uncommon space like HVAC tech, Mistbox needed an easy and approachable way to let the consumers know how to interact with the device, from the moment of reading about the product online and making the purchase, to the physical experience of going through its installation, to finally navigating the app in order to view all the information produced by the device in a useful way.

The biggest challenge was the timeline; we had only a couple of months to come up with a finalized MVP version that had to be ready for launch. In that time frame we had to plan and execute web design for the company along with ecommerce (more about the website and ecommerce experience here), branding and packaging materials (more about that here), design of the native app and web app and all of its content. Plus user testing and iteration on everything just mentioned.

Mistbox_Inst_gif

Role
& Objectives

Practical responsibilities:
UX, UI, graphic and interaction design, user research, wireframing, prototyping, video direction and editing, customer support.

My role:

I helped define the Customer Journey since the moment the user received their Mistbox, the different paths to follow along with the ramifications for different scenarios; success and possible issues, define the full app experience -- from onboarding up until the user has been able to physically install the hardware and check their dashboard. Lastly, after launch, I helped the Customer Experience team with customer support duty to fully understand problems they were having and keep iterating and improving not only the app, but also all the materials needed on our Help Center; from videos and images to the logic used to automate support with the help of a chatbot on our website.

Objectives:
Since the app depended on the capabilities of the hardware (Mistbox) and its integration with our software infrastructure (servers), the scope of the project was set around these existing functionalities. The project was broken down into 3 main overarching objectives that satisfied our consumers’ fundamental needs:

Installation: Allow users to perform Mistbox’s installation as quick and easy as possible.
Verification: Mistbox devices had to be verified by our database at the time of installation.
Activity: Users can monitor and track the runtimes of their devices (AC & Mistbox) in realtime.

Foundation

This is the progression in which we broke down the whole customer experience, from the moment they login for the first time, going through the activation of the device and physical installation, to the moment when they are able to read their AC’s and Mistbox’s run times on their dashboard.

App_Diagram

Onboarding,
Account & Device

In these sections, we provided a very foundational explanation on what the app is and what user is expected to see once the final step is completed. Then, the user is asked to confirm their account information, which was gathered at the time of purchase. Finally, the user can activate their device by providing their serial number. Once entered, the device pings our servers and the connection between the two is established.

Onboarding_Screens-07
Onboarding_Account_Devic3

Installation options

Since there’s hardly a standard on shape and size on AC units, we had to collect some information with our customers that had pre-ordered our product to know more about the most predominant characteristics on their AC units, like AC top type (air exhaust opening) and AC panel type openings (vent openings on the sides). We picked the 3 most popular from each and put them into a pre-installation flow.

Here, we ask the user questions related to their own installation experience:
1. How many devices are you installing?
2. What’s the water connection you’ll be using?
3. What’s your AC’s top type?
4. What’s your AC’s type of panel openings?

Presenting the information in a visual way helped our users understand immediately what we were asking for even if the nomenclature of certain things was foreign to them.

This section is very important since it customizes the experience of the user to be closer to the actual configuration they’d be dealing with. In the next section I’ve included a break down of this flow and where customization happens, along with the assets we had to create in order to achieve this result.

Before_Start
beforeyoustartmockup

Installation flow

Why installation videos?
Easier installation: We had initially created an installation manual guiding step-by-step the user in the best way to perform the installation, but based on the feedback received we concluded that a video that allowed the users to follow more closely and clearly the whole process, achieving a perfect installation success rate.
Full control on the flexibility of the content: We purchased video equipment and were able to build a mini-studio in one of the corners of our warehouse. This allowed us to create the exact content that we felt better suited the needs of our consumers at the time of performing the installation. Also, we could immediately iterate on the feedback received while testing the videos, giving us full control on quality and production speed. By having control on all these aspects, we also decided to shoot the videos in a way that could be suited for web and mobile, without having to shoot twice.
In conclusion, this method to present instructions gave us full control on the final experience, always putting the user needs front and center while highly optimizing creation quality and speed.

The next list is the succession of events in chronological order:
1. Printed manual created.
2. Printed manual tested with users.
3. Manual discarded based on user feedback since we weren’t achieving a full understanding on specific steps key for the best setup. Video steps idea is generated.
4. Planning (scripting and storyboarding) and recording videos.
5. Testing and corroborating video steps success rate with users.
6. Applying feedback from user testing to the iteration process.
7. Final test to corroborate iteration success.
8. Video implementation ready for soft launch.
9. New content generated based on feedback from soft launch.
10. Changes implemented to installation flow ready for launch.

Video_Production

Video production was fully inhouse, from pre-production to editing. Pre-production was directly tied to figuring out the best way to present the video-guided installation steps inside the app. Also, having the ability to quickly iterate and do changes to any of the steps, as soon as needed, was higly valuable and affected positively our speed and quality.

The videos were shot to be extremelly flexible at the time of implementation. Aspect ratio was calculated so we could utilize the shots in a regular desktop view, but also easily cropped to be used in mobile view by simply adjusting it. This was achieved by positioning each shot as close as possible to the center, giving the scene enough space around it to accomodate for the desired variations; instructions, UI, etc.

Installation_screens-09
Installationvideosmockup

Dashboard

Because of the MVP state of the experience, all the options provided to our users had to be practical. The dashboard provides a very quick view of the run times of the AC and Mistbox assigned to it. The circular graph follows the familiar structure of a regular clock, only that in this case it encompases the full 24 hours of the day at once, instead of just 12 hours. This expanded view allowed us to display visually exactly at what times either the AC or Mistbox had ran and for how long they ran. This kind of information is unparalleled since there’s no smart device that’s directly connected to the AC compressor giving homeowners precise operational times. Currently, only run time information related to temperature changes that happen directly on the thermostat are available. Here, one can also view the status of Mistbox itself and see how it’s doing.

Moreover, the next sections of the app give the user a more detailed look on data over time, support information, and the ability to do changes to the account settings.

Dash_Diagram
DashboardMockup

Web app design

The web app was implemented to be a step in between before the implementation of the native app. By having a web app, development speed increased exponentially and our capacity to serve all of our users improved by not tying the content to one single platform. We decided to cast a wider net of value to most of our users rather than only to a specific pool of them by building the web app first.

MB_webapp2

Support &
Help Center

After launch, I was actively involded in customer support, talking to our customers about their issues with the product (software and hardware related), gaining as much insight as possible. I applied all the learnings from many conversations I had with them and started a compilation of common issues and how to solve them. Some issues were we pretty simple and could be fixed easily by following written instructions. Others needed a little more nuance, that's why I made it my responsibility to create the content the users needed so we could help them solve these issues in a more effective way.

With the help of the team we put together a comprehensive list, organized by easy to differentiate topics with coherent navigation in mind. You can see more at http://help.mistbox.com/

helpcenter_home
helpcenter_post

Homepage of the help center and content created for one of the support articles. Visit: http://help.mistbox.com/ to see more.

UI elements

Part of the visuals designed for the User Interface of the app. From circular graphs to vector illustrations, we put a lot of care on the brand visuals always being consistent throughout all the digital facets of our product: app, web app, website, etc. Clarity and informative were our core values at the time of crafting these assets. Quality is the byproduct of continual, focused refinement.

App_UI

User impressions

This is a compilation of real, early impressions of some of our users after receiving their units and going through the installation process.

John H.
“The Web App guided install steps with video is incredibly simple to follow.”

Charles S.
“I can happily report that installation was a breeze and the Mistbox appears to be operating correctly, including the web interface.”

Derek L.
“My unit came yesterday and install was a breeze.”

Luis
“Just received my two units. Build quality seems really high, installation is super easy and everything fits perfectly. Pay attention to the steps from the web-app to install and you should have no issues.”

Mark F.
“Overall impressions are good though. Seems like really nice quality. Super easy to install.”

David B.
“Extremely easy to install, just gotta watch the install videos.”

Mike R.
“Mine arrived yesterday. The packaging is really nice, it was like the person who designs the packaging for the iPhone did the packaging for Mistbox. Well thought out, slick and well executed. The product was super easy to install.”

Joshua M.
“Received mine today. Install was pretty quick...”

Desi M.
“Mine installed in like 15 minutes, was super easy...”

Cody B.
“Got my Mistbox in yesterday and hooked it up with no installation problems. It is super easy.”

I helped provide visual clarity and structure through the design of an app that allowed users get started quickly.

I helped provide visual clarity and structure through the design of an app that allowed users get started quickly.

All_Screens_App

Selected Works

Mistbox VisualsUI | UX | Graphic Design

BrainCheckProduct Design | Graphic Design

BrandingMisc. branding

Art & 3DIllustration | 3D | VR