Case Study

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

Brand Guidelines

Videos

Emails

Web

Brochures

Case Study

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

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

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.