Element Design System

THE STORY

Building a design system that would encompass a library of already developed as well as unknown future apps… Challenge accepted!

Over 6 or so years I partnered with Marrick Medical to not only design things, but to help them grow into a successful company that changed an industry. Marrick Medical is a Denver based company that helps people get medical treatment that have been in accidents. It’s a complicated business that requires working with patients, medical providers, insurance companies, and law firms.  They were a new startup when we began working together back in 2010, and as the principal designer for much of that time I worked directly with the leadership team and a developer to help build a massive system that touches every part of their business. Along the way they spun off the technology into multiple other businesses and have grown into almost a $50 million company today.

The partnership began with building a small portal for their clients to manage the medical treatment process. Along with building that out they realized they needed an internal system that would help their employees manage every facet of each clients treatment as well as legal case. When we first began, none of Marrick’s competitors had anything comparable and this helped set them apart from the competition. As these projects often go, the systems grew with each new feature that was added and soon became difficult to update and navigate. A new plan was needed but not just a redesign, but something that made it easier to maintain, build, and add new features. We realized we needed to abstract all the functionality in modular apps that could be brought into the system or taken out without taking the whole thing down in the process. We also realized we needed a design language that would keep all the various apps fitting together – like legos that were all part of the same set.

My role in this was to build a common design system that would give styles, interactions, and responsive HTML/CSS to 220+ elements, containers, pages, and templates that were yet to be built, and functionality that was yet to be thought of. We were highly influenced by Brad Frost’s “Atomic Design” and Google’s “Material Design”  for this design system, which not only helped give us the basic building blocks for the numerous apps that were already built, but would help to rapidly build new apps going forward.

As part of Marrick’s development and design team (Matter6) we started building this system with one of our external client projects – a company called RallyCap. The goal was to be able to use this system to rapidly build out RallyCap’s internal system managing their complicated business processes. We broke the design system into it’s various elements; single elements (Atoms), groups of elements (Molecules), groups of groups (Organisms), and pages (Templates). This allowed us to define not only styles, but layout and HTML/CSS for all of these elements, molecules, etc. As a developer is building an app, the aim was to be able to include already defined elements and groups together. The system has been rolled out to 3 other related projects and companies and has improved development time by an estimated 30% while keeping the design consistent and cohesive.

Not Just the System

Over the years of working with Marrick I not only helped build this system, but have worked with them to design a plethora of design and media projects. I designed dashboards to help visual analytics for their clients. We’ve spent sleepless nights putting together proposals for client meetings. I created videos helping to explain their process, designed their marketing & print materials, and presentations. Using their tech they were able to spin off a company called Continuum which both used the systems we built and I had the chance to design their identity, marketing materials, and website as well. It was a partnership that gave me chance to grow as a designer, but helped them grow into a leader in their industry as well as diversify their business.

CLIENTMarrick Medical
WHEN2010 - 2016
SKILLS USEDUX/UI, HTML/CSS, Responsive Design, Identity Design, Graphic Design, Video & Motion Design, All the things!