Mobi Gen gets a makeover

A lesson on how to improve a product without destroying what is loved.

Here, there be madness…and batteries!

•DURATION: Ongoing Contract, 1st sprint 3 Weeks (2 weeks research, 1 week design & iterations)

•TOOLS: Pencil, paper, Adobe InDesign, Sketch, InVision

•DELIVERABLES: Synthesized research findings, Interactive Prototype, Annotated Wireframes

•MY ROLE: UX Researcher & Designer

Interesting Challenges:

  • Designing for a small, externally mounted resistive touch screen.
  • Designing a digital solution for a physical product.

Location: San Francisco, San Bruno, San Leandro, Los Angeles

Today, I’m proud to unveil the first iteration of the digital dashboard for the Mobi Gen product line.

Mobi Gen is a promising large-scale mobile battery system by FreeWire Technologies. Their problem they asked us to help with was “how do we design a better user experience for our Mobi Gen product line?”

Well, after meeting with FreeWire and their customers, we decided to take that problem statement a bit futher. We asked ourselves:

“How do we design a useful, informative experience for Mobi Gen users while preserving what they know and love?

Solution

After witnessing and listening to the problems many users of both Mobi Gen and standard diesel generators had, we discovered common themes we wanted to help with.

Mobi Gen Version 1 Digital Dashboard
  1. User-friendly error management
  2. Glanceable, real-time information
  3. Learnability of device (capabilities and features)
  4. Visibility of system status
  5. Empowering users through contextual help screens
  6. Improved safety through error prevention/recognition

Research

We met Mobi Gen when it was being used as an EV charger. The use case was different than that of a mobile power unit but still extremely useful. We learned a lot by following its primary technician around and pestering him with 1000s of questions.

Mobi Gen Current Interface

After walking around with the technician, we noticed some key opportunities in his workflow. One of the biggest opportunity areas we noticed was error feedback.

The device needed to be cycled, yet 5 people including 2 employees and a manual had trouble restarting the device.

It was clear to me this thing was going to need simpler, easier feedback methods.

After our initial exploration session with the device, we needed to understand what the business was thinking about their market and product. What makes them feel they need a new interface? What are they trying to accomplish?

Participatory Design

We held a with as many stakeholders as we could (VP of Product, Engineering, Brand, Research and 2 engineers). We utilized a few game-storming activities to draw their thoughts out.

Stakeholder Visioning Session
Design the Box

These activities allowed us to understand how the stakeholders felt a digital interface would fit into their product strategy. The main insight that came out of these sessions was that Mobi Gen was beloved, but confusing to its customers.

Domain Knowledge

After our visioning session, I invested a significant amount of time in understanding the science of power delivery. Understanding the difference between voltage, amperage, capacity, charge were all critical in producing a succesful design.

Research (the Sequel)

YES! More Research, I know! But stick with me here. This is where it gets interesting.

After our visioning session, we knew we needed to hear from customers who have actually used the product and contrast that information with customers who were considering using the product.

Doing so would allow us to find areas of improvement and create a potential wish list of features that we could reflect in our “interface” (SPOILER ALERT, we made a dashboard, not an interface) design.

In order to do so, we flew down to LA with our client to meet some end-users and potential customers.

HOLLYWOOD!

We went to CBS Studio City and met with lighting and technical gaffers.

Key insights from talking to these fantastically helpful gentlemen include:

  • THEY BREAK EVERYTHING! (self-proclaimed and objectively observed.)
“Dear God, please no touch screen controls. Someone will blow something up.”
  • They REALLY did not want touch screen controls due to the chaotic, people-crashing-into-things nature of Film/Television sets.
  • The current screen wasn’t working. CBS people felt it was too small and poorly placed (required bending-down to see, a large concern for them due to the ergonomic challenges this would pose).

What we DID hear they want a larger read-out that provided more information and was easily replaceable.)

  • “Take all these doors off!” “These buttons are WAY too small.” (Lots of industrial design complaints.)
  • Hey Mikey, I think I like it! (they were really rooting for the product overall! Provided FreeWire could address their concerns.)

After that visit, we went to meet with the Google Facility Management Head of the Los Angeles Area. I couldn’t take pictures inside, so here’s my notes instead!

Visual notes, only I can read!

Don’t worry, you don’t actually have to read those. Key insights that came out of this meeting were:

  • Please do a screen. Most generators don’t provide any feedback.” (somewhat similar to what our CBS contacts said.)
  • “It would help if generators were friendlier, it would less work for us!” (A well thought out design would save Google time/money as less engineers would be required for on-site events.)

After this meeting, we had our big A-HA moment!

  • Make screen an enhancement, not a requirement. This creates a friendlier, safer user experience.

While we heard the Gaffers at CBS did not want touch screen controls, they consistently asked for a larger display with more detailed information. Our three other interviews (with Southern California Edison, Ian an Indpendent film maker and Obscura Digital) echoed similar information.

Design Time, come on, grab your friends!

First Pass

During our research, we started sketching up some rough concepts with our users in a participatory design session. The first exercise, we divided a paper into 4 sections each and sketched up some concept ideas.

Round 1 Focused on

  1. Simple, chunkable and easily legible information (top left).
  2. Extreme User-Friendliness (ex. A sleepy face in the top-right, the less charged, the more tired it gets and vice versa.)
  3. Visually displaying the data our users found most important (Run time, amperage, ect.)

Combining all the insights and co-design sessions from those helped us come up with a clearly defined set of information needed on the screen. Those are:

  1. Amperage (relative to maximum amperage available)
  2. Line Draw (how much amperage each circuit was drawing, and what the capacity was of that circuit.)
  3. Battery Time Remaining/Capacity Remaining (battery capacity degrades over time, along with battery time.)
  4. Temperature
  5. Alerts/Device Feedback

Gut Check

Second Iteration (Client liked bottom right) Top Right is Line Draw Screen

Round 2

Based on feedback after round 1, I iterated my designs and focused on:

  • Increasing communication of key criteria through graphics and color.
  • Displaying more contextual information on the home screen.
  • Conveying safety measurements (temperature, amperage, etc. in a visible place.)

We showed our second iterations to FreeWire, who loved the circular display of information and the line draw screen seen in the top right (which appeared if a user tapped on the “amps” button.

Round 3

We took this idea and ran with it! My team and I got so excited, that we blacked out and white-boarded everything in a design-induced frenzy!

We got a bit carried away.

Thankfully, we did solicited some quick feedback from some other experts in the field before we started wireframing.

The feedback we got was:

Our humble, resistive touch screen.

“You want to put that (white board picture) on this?”

We were trying to cram calendars, analytics, temperature gauges, and more onto a tiny 7 x 5 inch resistive touch screen.

Given the size and constraints of the screen, we simplifed to what is in the gif belwo.

The Solution!

Solution/Reception

Our design principles reflected:

  • Glanceability
  • Simplicity
  • Error Feedback
  • Learnability
  • Troubleshooting Help

By providing users essential information, reducing the amount of manual calculations (in terms of amperage and per-device amperage pull), focusing on learnability and providing contextual error-feedback, we created a friendlier (and more importantly) safer user experience.

Our key impact in this project was really measured on feasibility and client satisfaction. FreeWire was ECSTATIC with the design. Not only did we create a friendlier user experience for their Mobi Gen through the dashboard, we actually helped demonstrate the full capability of the the product.

The CEO of FreeWire stated he believes this design will have a large impact on the overall business, as their device can now communicate directly to its users. And after all, isn’t that what great design is about :)?

Takeaways

  • Design really is powerful. Not only can it delight, but it can protect and educate!
  • It (the design) doesn’t always have to be fancy to be amazing.
  • GOOB (Get out of the building!)
  • Listen to what your users need. Not what you think they need.
  • DESIGN EARLY AND OFTEN!

Powering Forward:

This is a continuing contract project. Updates will be posted down here to show successful design iterations as we move towards production.