Lager
A web app that allows hardware engineers to gather, analyze, and store diagnostic data while running tests on their products in realistic environments.
context
Lager is a three-part system: a dongle, the Cloud, and an interface. I designed the user experience for the interface.

Work on Lager began in January 2018. As of March 2020, Lager has passionate beta testers at Peloton and has raised $1.5 million in funding.

I worked directly with the hardware engineer and backend engineers to create a user flow, sitemap, and wireframes.
Project Scope

Define challenges → Product research → User journey → Information architecture → Wireframing → UI Design → Beta testing → Launch

This case study covers the 3-week sprint in which I worked on the UX with the engineering team.

Team
  • Hardware Engineer
  • Industrial Designer
  • 2 Backend Engineers
  • 3 Frontend Engineers
  • Creative Director
  • UX Designer - My role
  • 3 UI Designers
01
Challenge
With a Lager dongle, hardware engineers can communicate to their devices through the Cloud and access their data files from anywhere.
Docklight is an industry standard software that hardware engineers often use for their serial communication needs when testing and debugging devices.


Our challenge was to maintain feature parity with Docklight while solving three big problems it presents:
1. It requires you to plug in your device with a USB, limiting distance and movement allowed during testing
2. The files it spits out directly onto your computer desktop are poorly named and pile up quickly.
3. The interface is cluttered and non-intuitive

While the team was hard at work building a wireless dongle that communicated through the Cloud, I worked on designing an experience for hardware engineers that would help them organize their data files and move about the interface with ease.


My challenge was to maintain feature parity with the industry standard software, Docklight, while designing an experience that would help hardware engineers organize their data files and move about the interface with ease.
All major real estate companies use the same configuration for their search page: a search field and filters above a split screen of listings in a grid and a map.
01
Challenge
With a Lager dongle, hardware engineers can communicate with their devices through the Cloud and access their data files from anywhere.
My challenge was to maintain feature parity with the industry standard software, Docklight, while designing an experience that would allow hardware engineers to organize their data files and move about the interface with ease.
3D rendering of the Lager dongle.
02
Discovery
The most important part of designing the user experience is making sure hardware engineers have all of the features they need.
To understand the process of debugging a device, our hardware engineer demoed Docklight for me and pointed out all of the essentials and how they worked.
I was also given a feature set that listed all of the pages and features that needed to be in the Lager interface. These specs gave me what I needed to get started.
03
Process
Collaboration with the engineering team was imperative for making sure we were all in consensus on how the Lager interface would work.
Using the site outline and feature set documents prepared by the hardware engineer, I created a sitemap that laid out the architecture of the web app.
I was also given a site outline that listed all of the pages and modals that were to be in the Lager interface as well as a feature set. These specs gave me what I needed to get started.
Once we were all in agreement on the architecture of the web app, I started pencil sketches and wrote a user journey describing a hardware engineer testing their devices with Lager.
Pencil explorations of various pages and modals.
User journey telling the story of a "typical" day for a hardware engineer.
Visualizing the workflow in this way helped us uncover missing pieces of the functionality, such as:

If you stop and restart a session, does it create a new data file or continue collecting in the previous file?

and

We should make it easy to see what session a dongle is running in cases where multiple dongles are being used at once.
The final stage of the UX sprint was moving from pencil and paper to the screen to create wireframes for the entire web app.
Preliminary wireframes of the Dashboard, Project Page, and Session Panel.
Collaboration with the engineers continued throughout the wireframing stage. I made notes of all my questions as I worked things out, then consulted with the team to come up with solutions.
Example of how I annotated wireframes and wrote out my questions as I worked.
At the end of the wireframing sprint, I packaged up the full set of wireframes and handed them off to the engineers for implementation.

I also handed off my files to the branding and UI team so that they could design how it would look.
The entire set of Lager wireframes.
04
Solution
User experience design doesn't stop after the wireframes are completed—it continues to be shaped through all phases until the product goes live, and then still continues shaping from there.
The branding and UI team took the wireframes and came up with a three-panel interface that mimicked code editors from the web development world.

The transition from a top-down page to a left-right page was extremely thoughtful and made the product feel really solid and useable.
Clockwise: Data file, editing an auto-response, running a session, project page.
Final Thoughts
This project was a great reminder that everyone on a team can provide good UX ideas and insights, not just the UX designer.

I learned that although it can be intimidating to design a whole program in 3 weeks, the most important thing you can do is ask questions, take notes, and try again.
Go back home