Objective: Design a browser-based terminal where hardware engineers can gather, analyze, and store diagnostic data while running tests on their products in realistic environments.
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.
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.
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.
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.
Visualizing the workflow in this way helped us uncover some final 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.
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.
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 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.
As of March 2020, Lager has passionate beta testers at Peloton and has raised $1.5 million in funding.
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.