UX / UI Product Design. Brand ID & Strategy.
UX / UI Product Design. Brand ID & Strategy.
A web-based app that provides a comprehensive feature set to track and quantify one's health and wellness behaviors, as a means to enact sustainable behavior change.
The meat and potatoes of h2 wellness. Since I began my tenure there, the fundamental purpose of this SaaS model was to provide people a means to enact meaningful behavior change that would affect positive changes in their health. It took some years of iteration, trial and error and corporate soul searching to arrive at the baseline. Though there was a singular event that caused a pivot in h2’s approach. A simple yet expansive design solution that I and UX Director, Kimberly Jennings put forward on a cloudy morning in Amsterdam.
Twitter, Facebook, Instagram and even mySpace classic. These ubiquitous social platforms that affected an irreversible change in global user behavior all had one obvious feature in common—a newsfeed. Watching daybreak in Amsterdam’s Hilton Honors hotel brought me to wonder if we could leverage that unremarkable pattern to provide meaningful, on-time content relevant to users’ personal health data.
The potential of this solution was so vast that it lifted a veil covering h2 blue sky strategy. The Feed became priority one upon our eternal to Los Angeles. Our in-house data scientist, director of marketing, chief technology officer, Kimberly and I poured over possibilities in which, how and when content would be presented, across different platforms and tailored to each of our clients’ user bases.
The pivot was grueling and an exercise of stamina and motivation for the teams to crack connected health—or at least create a lasting contribution to the growing industry. It felt something like this:
“The problem was that the iPhone should have been all about the display, but in their current design the case competed with the display instead of getting out of the way. The whole device felt too masculine, task-driven, efficient. “Guys, you’ve killed yourselves over this design for the last nine months, but we’re going to change it,” Jobs told Ive’s team. “We’re all going to have to work nights and weekends, and if you want we can hand out some guns so you can kill us now.” Instead of balking, the team agreed. “It was one of my proudest moments at Apple,” Jobs recalled.”
Excerpt from Walter Isaacson‘s, “Steve Jobs”
Above, a registration flow loosely based on both Material and Apple’s early card-based design language.
Sitting on a trove of small, mundane bits of health data like customer body measurements, vitals and dieting patterns, h2 was positioning itself amidst the industry’s push in leveraging Big Data. This, coupled with the Feed concept, created a foundation toward meaningful user behavioral change, to produce desired health outcomes.
Rendering all this data was important to help users visualize their numbers, and to reinforce the notion that content being pushed to the user was based on analysis of said data—not canned buckets of content that would otherwise be accessible by a simple Google search.
h2 onboarded new clients at a fast clip, so creating a simple, modular design system was imperative. Yet, the constant churn of new business often times, as it does with lean startups, hobbled concentrated efforts in completing the latter goal.
I assembled the beginnings of a design system including design principles, UX guidelines, interaction behavior guidelines, development guidelines as they related to the UI, UI patterns, userflows, and brand/white-labeling guidelines.
Frankly, it was an ambitious endeavor. This was only shortly after another designer by the name of Brad Frost, published his Atomic Design. Needless to say, we created a product that sought to apply that very design methodology to an all-encompassing health management suite analogous to a combination of all the dieting, fitness, supplement and medical history tracking apps out there. While nowhere near perfect, it was an opportune challenge that inspired my interest in designing to scale.