Sizewise digital product design

WHO:

Sizewise

WHEN:

2017 - Present

WHAT:

UI/UX
Design System
Brand Application
Illustration


During my time with Sizewise, one of the biggest projects I’ve been involved with has been the design and development of our line of touch screen-based products. My involvement started with designing a family of icons and ultimately led to a crash course in UI/UX design. Currently, I’m the sole designer responsible for creating and maintaining our design system, and using the system to work with our dev team to iterate new features and modules for our products.

Sizewise had started working with an outside dev team on this project in 2016. By time I had been hired, the project consisted of a wishlist list of functions/features and very little else. My involvement started with a set of bespoke icons for the touch screen interface.

After making the icons, I started doing some digging into the scope of the project to learn more about it. Initially, I was looking for some screens where these icons would ultimately live so I could mock them up in context and make sure they still worked. 

"I wanted to make something that felt closer to a native app than a clunky piece of medical hardware..."

I learned pretty quickly that those screens didn’t exist. My icons were the only visuals at this point. We had a pretty small team, so I jumped at the chance to take some initial swipes at some screen layouts. As I started planning out the screens, I interviewed members of our clinical team to figure out logical user flows and function groupings. I also looked at our competition, there were a handful of other medical manufacturers who had made touch screen products out there. I wanted our product to make sense in the current ecosystem. I wanted to make our digital products feel like a continuation of our existing products.

The more I researched our competition, the more I realized that visually, these interfaces seemed outdated. I wanted to make something that felt closer to a native app than a clunky piece of medical hardware, so I started diving deep into Google’s Material Design.

Since this was a piece of medical hardware and not just a native app, we still had to pass ISO certification. I would draw inspiration from Material Design as a starting point and compare it to the applicable safety standard. The end result was a family of bespoke (and ISO-compliant) UI widgets.

"This lack of room for bells and whistles led to a very streamlined user experience."

Other than ISO, the other balancing act I had to navigate was the amount of system memory on the physical UI device. Since we were trying to keep costs down, the actual hardware didn’t have a ton of extra memory for visual tricks. No swanky animations or micro-interactions here unfortunately (I did however win the fight for a 36-frame looping animation for loading screens).

This lack of room for bells and whistles led to a very streamlined user experience. Visually, I tried to use the least amount of “tokens” possible to create a hierarchy and communicate clearly. This meant a stripped back color palette based on the Sizewise brand colors along with some ISO-compliant warning colors.

I started designing layout grids and UI elements. We developed this product in an agile environment, so week after week I would build, present, analyze, refine, and do it all again. Eventually, I migrated all of my art files into Adobe XD (later Figma) and started building out a hi-fi prototype, or as we dubbed on our weekly calls, “the Clicky Demo.”

The ultimate goal of the project was multiple modules all based on the same system (think of them as different apps). Around the time we were finishing work on the first “app,” I formalized all of our parts into a design system built in Figma. Seeing all of the parts side by side was a great opportunity to do some last minute standardization before shipping the product and beginning development of the next round of modules and updates.

At present, this family of digital products has grown to be 3 modules (with two more in development), a comprehensive design system, user flow journeys, documentation, many many Figma files.

back