A case study featuring a user-centered design framework focused on ease of use that was driven by smart design and a conversion-driven business model.

We built a scalable, atomic-like foundation that allowed for quick and effective growth to a multi-product/multi-channel system, all while chewing gum.

Email Me
Call Me

Timeline
March – July 2021
6 months.

Contribution

  • User Experience
  • User Interface
  • User Interaction
  • Brand development
  • Design System
  • Product Research
  • CX writing

Hello!

My name is Christian. I am a creative visionary focused on smart, creative branding. From conceptualization to execution, and distribution, all while achieving standardization of design across any company.

I focus on scalable CX, smart interactions and pixel-perfect designs.

Email Me
Call Me

A case study featuring a user-centered design framework focused on ease of use that was driven by smart design and a conversion-driven business model.

We built a scalable, atomic-like foundation that allowed for quick and effective growth to a multi-product/multi-channel system, all while chewing gum.

Email Me
Call Me

Timeline
March – July 2021
6 months.

Contribution

  • User Experience
  • User Interface
  • User Interaction
  • Brand development
  • Design System
  • Product Research
  • CX writing

Overview

Laptop-desktop

Objective

Our goal was to build a brand that was industry agnostic and scalable within any industry as the company grew.

The company had only operated within the healthcare industry for over 20 years and wanted to break into other industries.

Challenge

First challenge was shifting existing mindset that we were serving other industries outside healthcare.

Second challenge was the ladder. Building an industry-agnostic brand with industry-specific avenues that accomodated each industry and didnt confused visitors.

Third challenge was doing the lift without impacting conversion from existing offerings.

Goal

To build a brand that was personal, modern, and high-end, built to support scale and aim for higher-end customers.

In the company’s consideration on going public, we had to build a corporate platform that provided full visibility and context to possible partnerships/adquisitions.

Deliverables

  • New Design system
  • New Consumer platform
  • New Corporate platform
  • New UI Toolkit
  • New Brand Guidelines
  • New Brand Tone & Voice
  • New Logo

Overview

Laptop-mobile

Objective

Our goal was to build a brand that was industry agnostic and scalable within any industry as the company grew.

The company had only operated within the healthcare industry for over 20 years and wanted to break into other industries.

Challenge

First challenge was shifting existing mindset that we were serving other industries outside healthcare.

Second challenge was the ladder. Building an industry-agnostic brand with industry-specific avenues that accomodated each industry and didnt confused visitors.

Third challenge was doing the lift without impacting conversion from existing offerings.

Goal

To build a brand that was personal, modern, and high-end, built to support scale and aim for higher-end customers.

In the company’s consideration on going public, we had to build a corporate platform that provided full visibility and context to possible partnerships/adquisitions.

Deliverables

  • New Design system
  • New Consumer platform
  • New Corporate platform
  • New UI Toolkit
  • New Brand Guidelines
  • New Brand Tone & Voice
  • New Logo

Process

The development process for this project was built levering the following steps:

Research

Design

Feedback

Launch!

  • Market Research
  • Competitive Analysis
  • User Pain Points
  • Approaches to Validate
  • Validation
  • Logo Design
  • Brand Voice/Tone definition
  • UI Toolkit
  • Color Palette
  • Component Design build
  • IA/Journey Maps/UX Flows
  • Low/Mid/High Fidelity Wireframes
  • Interactive Prototyping
  • Stakeholder reviews
  • Client reviews
  • Target Audience reviews
  • Designer critiques
  • Feedback analysis breakdown
  • Lessons learned & applied
  • Prepping all assets for engineering
  • Act as the liaison with engineering for proper development & deployment
  • Launch!!!

Process

The development process for this project was built levering the following steps:

Research

  • Market Research
  • Competitive Analysis
  • User Pain Points
  • Approaches to Validate
  • Validation

Design

  • Logo Design
  • Brand Voice/Tone definition
  • UI Toolkit
  • Color Palette
  • Component Design build
  • IA/Journey Maps/UX Flows
  • Low/Mid/High Fidelity Wireframes
  • Interactive Prototyping

Feedback

  • Stakeholder reviews
  • Client reviews
  • Target Audience reviews
  • Designer critiques
  • Feedback analysis breakdown
  • Lessons learned & applied

Launch!

  • Prepping all assets for engineering
  • Act as the liaison with engineering for proper development & deployment
  • Launch!!!

The Framework

The goal of this framework was to leverage a powerful foundation that allowed for scale and flexibility at the same time.
Through this framework, all teams worked together to build different areas of this build by collaboration and no interruption.

By bringing interactivity as the final step, allowed the development teams time to focus on the foundation first, visuals and interactions last allowing them to compartmentalize the process within small teams ensuring success and timely delivery.

Design Framework (Foundation)

Modules

Branding

Interactivity

Final Website

Design Framework

Just like atoms, the building blocks of matter; the design framework sets the foundation to all things. This includes the User Interface, color systems, typography, aspect ratios, grid structure, and viewports.

Modules

Our elements, modules, and components are built on top of our design framework.

Just like in an atomic design system,
Our modules (molecules) are comprised of elements (atoms). Our components (organisms) are comprised of modules (molecules).

In this case, our design framework combined with elements, modules, and components, build the entire structure for our platform.

Branding

Branding layers over all components within our framework.

Once the platform’s skeleton is built, we layer all visual creative elements over it. Each component is built with scalability and design in mind to ensure proper seamless integration.

Our components are standalone inter-exchangeable pieces that help build all areas of our platform.

Interactivity

After the foundation, components, and branding has been combined, this final layer of Interactivity gathers all UX interactions and best practices gathered by research (industry, best-practices, audience, and intent) and applies it over the creative.

The intent is to deliver an intuitive experience for the users that goes far beyond creative design and delivers a unique, interactive, and memorable solution.

The Framework

The goal of this framework was to leverage a powerful foundation that allowed for scale and flexibility at the same time.
Through this framework, all teams worked together to build different areas of this build by collaboration and no interruption.

By bringing interactivity as the final step, allowed the development teams time to focus on the foundation first, visuals and interactions last allowing them to compartmentalize the process within small teams ensuring success and timely delivery.

Design Framework

Just like atoms, the building blocks of matter; the design framework sets the foundation to all things. This includes the User Interface, color systems, typography, aspect ratios, grid structure, and viewports.

Modules

Our elements, modules, and components are built on top of our design framework.

Just like in an atomic design system,
Our modules (molecules) are comprised of elements (atoms). Our components (organisms) are comprised of modules (molecules).

In this case, our design framework combined with elements, modules, and components, build the entire structure for our platform.

Branding

Branding layers over all components within our framework.

Once the platform’s skeleton is built, we layer all visual creative elements over it. Each component is built with scalability and design in mind to ensure proper seamless integration.

Our components are standalone inter-exchangeable pieces that help build all areas of our platform.

Interactivity

After the foundation, components, and branding has been combined, this final layer of Interactivity gathers all UX interactions and best practices gathered by research (industry, best-practices, audience, and intent) and applies it over the creative.

The intent is to deliver an intuitive experience for the users that goes far beyond creative design and delivers a unique, interactive, and memorable solution.

Research