Gaugebox LP needed help defining a new market. A "missing" solution for collaboration between labs was needed. We started with paper sketches from the Founder. Then moved into user research. From there we began a cycle of iteration and implementation. A year and a half later our parent company is ready to deploy Gaugebox.

wika_booth


OVERVIEW

May 2016 - Present

Product Designer

Front-End

Logo

Backend

Sketch

Invision

Photoshop

Angular

Gaugebox LP needed help defining a new market. A "missing" solution for collaboration between labs was needed. We started with paper sketches from the Founder. Then moved into user research. From there we began a cycle of iteration and implementation. A year and a half later our parent company is ready to deploy Gaugebox.

Strategy & creative direction

After learning about the audience I began defining a strategy and creative direction. I started mapping out the interactions a user would need to perform at each scene.

These flows have proven to be invaluable. By considering entries, exits, errors, successes, and other states, you get a strong sense of what your design should be.

Planning is also crucial to a successful handoff to devs. I need to know that I'm not asking them to have to implement "on the fly". This sounds like an obvious step in product design but it is one that requires a deep understanding of what the tech stack is doing behind the scenes and anticipating various outcomes.

strategy-1

brand_identity

Brand Identity

Calibrations and measurements is a fairly conservative industry when it comes to design. I often considered this when creating new elements. The founder made it clear that we needed to "fit in" but yet, stand out. So I kept things simple. A selective use of color and typography helped to keep the UI clean.

A visual system was created that included a logo, color palette, typography, icons, emails, business cards, and a styleguide.

Typography

Roboto was chosen mainly because it is the de facto in material design. However, I altered the font scale to better fit with our layout and conformity to a hard 8pt grid system. If a new font is needed, I can easily refer to our type scale and determine a solution that continues our efforts in vertical rhythm.

fonts

Color Palette

Our palette was influenced by our parent company, WIKA. The blue is used consistently to help discoverability of elements that can be interacted with. The shades of grey are used to indicate constraints and non-interactive elements. Establishing this pattern of interactive vs non-interactive elements based on color helps the user to make quicker decisions when navigating the app.

Palette

I began the logo design after months of working on the application which allowed me to better express the brand and its identity. Many iterations, as you'd expect, were drafted up. We had an audience. We had a name. We had an identity. Now I just had to tie it all together.

My first approaches were very literal. I placed a gauge inside of a box...then I tried another box and a different gauge. Ok, let's invert the gauge and use the negative space? Hmmm, still odd. How about we use only the gauge and its needle. No no, looks like we're an automotive company. Alright think.... less is more, more or less. What if we use just the initials, can we find something in the negative space? Capitals? Lowercase? Camelcase??...

After racking my brain for a few weeks and designing countless variations, I finally had it, that EUREKA moment! I love when those happen.

The circle

A shape that has been around since before recorded history. Natural circles are observed everywhere and it is considered by many scholars to be "divine" or "perfect". This will be the base of our logo.

The needle

A well-recognized identifier for gauges. Seen most commonly in speedometers and instruments that measure pressure.The needle will be used as negative space, subtracting straight from the circle.

Scales great, recognizable at many different sizes, and brings a great look and balance to our apps navbar since the other item in the nav is our circle avatar. Ahh, such balance.

GB-logo

Styleguide

Creating a styleguide has made developer handoffs smooth. Our devs are pretty sharp but there’s no need to leave them guessing on how certain UI aspects should be implemented. I design how I would develop, which is component based, and this has seemed to translate pretty well to code. The guide is dense, all the way down to what meta tags are needed for proper unfurls of our links when shared on different sites.

pattern_lib

Devices_GB

Our Solution

Over a year after we began developing and designing a solution, Gaugebox is ready. We have been able to address many of the pain points current calibration management tools have. We are online, not sandboxed to an ERP, require no training, and are competitively priced. Our market position and immediate access to an audience place us in a good place to win. Here are a few features that give us this competitive edge.

The Nodelist

nodelist

The Table

A table layout worked the best here due to the amount of information that needed to be presented. We played around with different ideas and designs, like cards, data visualization, and sidebars but none scaled well for us.
We leverage whitespace a lot in the app, especially the nodelist. I removed as much as I could from traditional tables and depended on color and alignment to help guide the user's experience.

The Folders

We knew that organization was a priority for these labs since we'd seen plenty of naming conventions they used in current platforms. So we adopted the folder system. This offers each user a custom level of organization and makes it easy to share any amount of Gaugeboxes.

Built for Collaboration

Collaboration has been considered at every step in the building of Gaugebox. Users can control who and how each collaborator interacts with their Gaugebox or Folder. This allows anyone in any lab or department to share and access gauge data quicker than ever.

The Profile

gb-profile

This is the magic to Gaugebox. Walk into any calibration lab, if you have access, and you will see gauges with multiple labels placed on it. Each label serves a purpose and most likely leads to different software or documents. This fragmentation is resolved with our links.

Now they can add one label to their gauge. This one label lead's to a digital profile that can store multiple types of data. Branding our URL was a decision that drives more than just brand impressions and visibility, it is also the shortest and easiest to remember identifier by far. Now users only need to remember 3 characters to share and access their Gaugeboxes.

The Tabs

Based on common interactions users have with their equipment, we developed a profile with calibration specific properties. Just as our link took many to just one, our profile does the same for the locations where data is stored.

Now you have one source of truth. This profile replaces filing cabinets, custom software, flash drives, spreadsheets, "Bob's" desk, and many other locations bits of data were being stored. These profiles make gathering insights like historicals and trends the easiest it has ever been. Labs can now monitor, track, and control every interaction of their instruments.

The Landing Page

0Landing--Home

The final piece needed before we deploy was the landing page. I've had a few years designing landing pages for some pretty big companies so I was more than ready to tackle this one when the time came. I had studied and researched the market for over a year so I had plenty of ideas on how to position our product. Just like all my designs I started with pencil and started considering the best way to drive the user through the experience.

Each section went through an obsessive amount of criticism and adjustment before we were sold on it. The objective was to show how easy our solution was to adopt. Remember, calibrations and measurements is an industry that is pretty conservative. The industry is full of companies with onsite engineers that implement custom solutions as needed. So we really needed to get the audience thinking about how easy it is to shift away from these outdated and expensive methods.

With the design complete and responsive, we are set to release it along with a big version update before 2018. Exciting times here at Gaugebox!

Want to know more?