SugarMD

E-Commerce Redesign & Design System
6-Week Timeline
D. Love (CD) + Team
2025 Launch

Problem

50%
revenue
50%
Customers
FDA
Recall
Creative Department
Marketing strategy

SugarMD struggled with an outdated website design that failed to align with modern UI/UX standards or effectively guide users through an intuitive customer journey. Inconsistent branding across their website, packaging, and marketing materials diluted their professional image and hindered customer trust. Additionally, regulatory challenges complicated messaging, further impacting customer perception. Preserving SEO performance during the planned overhaul added another layer of complexity, as traffic and visibility were crucial to their business. The company’s goal was to establish a cohesive, user-friendly digital presence that resonated with their audience, improved conversions, and aligned with their mission to educate and support customers.

Key Challenges Included:
Main Pain Point

Disjointed Digital Experience

Our outdated website and inconsistent branding were eroding trust and engagement, making it clear we needed a complete overhaul to better serve our customers and reflect our mission.

Solution

Design System & Asset Libraries
Production
Templates
Brand Refresh
Copy re-write
Website Redesign

Under D.'s leadership as Creative Director, the project involved a holistic transformation of SugarMD’s digital presence:

Website Redesign:

  • Introduced a modern, user-focused design to enhance UI/UX and streamline navigation.

  • Optimized the customer journey to ensure seamless access to information and products.

Brand Standardization:

  • Unified branding across the website, packaging, and marketing materials to create a consistent, professional image.

  • Integrated educational storytelling to build credibility and connect with the target audience.

SEO Preservation and Optimization:

  • Collaborated with developers to safeguard existing SEO performance during migration.

  • Leveraged tools like Figma for efficient design workflows and a custom GPT to generate on-brand, high-quality copy.

Customer-Centric Features:

  • Designed custom icons, detailed ingredient transparency, and standardized product descriptions to emphasize quality and trustworthiness.

The result was a polished, engaging, and functional digital experience that strengthened SugarMD’s position in the market while remaining true to their mission.

REsults

The revamped digital presence delivered tangible benefits for SugarMD, including:

Seamless Customer Experience:

Delivered a modern and intuitive platform that improved navigation and made it easier for customers to access essential information and products.

Preserved SEO Performance:

Collaborated closely with developers to ensure a smooth transition during the website migration, safeguarding existing traffic and visibility.

Enhanced User Engagement:

Designed a user-centric interface that encouraged interaction, improved trust, and supported SugarMD’s mission to educate and support customers.

Improved Project Efficiency:

Streamlined workflows and leveraged reusable design components to deliver high-quality results efficiently and on time.

Strengthened Brand Trust:

Unified branding, transparent product details, and educational storytelling reinforced SugarMD’s professionalism and commitment to quality.

Assigned Tasks

UI/UX

User Study Research

Variable Library

Sitemap

Wireframes

Hi-Fi Design

COPY

Marketing & Brand Audit

Brand Tone & Personality

Website Copy

Product Descriptions

Blog Posts

DESIGN

Brand Re-Design

Icon Production

Asset Research & Production

Asset Cataloging

START

Team Assembly

Overall Strategy

Timeline Creation

Task Delegation

MIDDLE

Overseeing Best Practices

Research Based Direction

Client Communication

Progress Reports

END

User Study Research

Variable Library

Sitemap

WireframesHi-Fi Design

Team
Management

UI/UX

x
3.5

User Study Research

Variable Library

Sitemap

Wireframes

Hi-Fi Design

COPY

x
3.5

Marketing & Brand Audit

Brand Tone & Personality

Website Copy

Product Descriptions

Blog Posts

DESIGN

x
3.5

Brand Re-Design

Icon Production

Asset Research & Production

Asset Cataloging

Project
management

START

Team Assembly

Overall Strategy

Timeline Creation

Task Delegation

MIDDLE

Overseeing Best Practices

Research Based Direction

Client Communication

Progress Reports

END

User Study Research

Variable Library

Sitemap

WireframesHi-Fi Design

Asset
Library

Design system

Build & Deconstruction

Component Library

Asset Hierarchy

Naming

Template Design

Universal Components

Aesthetic & Hierarchy

Asset Organization

Component ID Naming

Prep for Mass Export

Quality Control

Team
Management

UI/UX

x
3.5

User Study Research

Variable Library

Sitemap

Wireframes

Hi-Fi Design

COPY

x
1

Marketing & Brand Audit

Brand Tone & Personality

Website Copy

Product Descriptions

Blog Posts

DESIGN

x
2.5

Brand Re-Design

Icon Production

Asset Research & Production

Asset Cataloging

Project
management

START

Team Assembly

Overall Strategy

Timeline Creation

Task Delegation

MIDDLE

Overseeing Best Practices

Research Based Direction

Client Communication

Progress Reports

END

User Study Research

Variable Library

Sitemap

WireframesHi-Fi Design

Asset
Library

Design system

Build & Deconstruction

Component Library

Asset Hierarchy

Naming

Template Design

Universal Components

Aesthetic & Hierarchy

Asset Organization

Component ID Naming

Prep for Mass Export

Quality Control

Asset
Library

UI/UX

ID Naming

.CVS Doc for Dev Team

DESIGN
GRUNT

Asset Production

Asset Import

Template Population

Link Master

Template Manager

Component Linking

Advanced Prompt Engineering

Prompt Generation

Asset Generation

Overall Approach

D. approaches every project with a "putting ducks in a row" mindset—carefully analyzing each individual piece or task, aligning them for cohesion, and prioritizing based on strategic importance. His process ensures that timelines, dependencies, and overlapping tasks are seamlessly managed, enabling different sections of a project to run in tandem while empowering teams to meet their objectives. This dynamic approach combines high-level oversight with granular precision, ensuring every element is perfectly ordered for seamless and successful execution.

Customer-Centric Design:

Prioritized creating a consistent, user-friendly experience across all touchpoints to enhance brand trust and customer engagement.

Collaborative Integration:

Aligned the system with sub-departments’ strengths to foster adoption and ensure the design system was viewed as an enabler, not a constraint.

Operational Efficiency:

Focused on reducing production times and legal bottlenecks by standardizing and centralizing assets.

Scalable Foundation:

Designed the system to grow with Mint Mobile’s evolving needs, ensuring it could be adopted by additional teams as its value became evident.

Generic Master Library Template

Variables & Styles
A screen with a color palette and a button to create a variable.A list of numbers with the number 45 at the bottom.
A black screen with a list of fonts.A screen with a black background and a white box that says create variable.A list of color styles including black, white, and blue.

Generic Social Media Template

ATOMS
A black and white image of a circle with a square in the middle.A white ball with a purple background.
Templates
A red and white sign that says "loren dor".A logo for the Apple company.A pink and white box with a white box inside.

SugarMD Design System

Step 1:

Proposal

Management Buy-In + Cross-Department Efficiency Initiative
Step 2:

Consolidation Of All Approved Mint Mobile Assets

X =
Management Buy-In + Cross-Department Efficiency Initiative
Step 3:

Graphic Design Team LIBRARY

Due to the lack of participation, a duplicate of the proposed Master Library
was created and adjusted to accommodate the Graphic Design team’s needs.
Step 4:

Step 4:

AI Photo Library

Adobe Firefly
A collage of men in various poses and outfits.

AI Prompt:

HYPER-REALISTIC SIDE VIEW OF A RELAXED 50 YEARS OLD SMILING MAN WITH STUBBLE, WALKING HOLDING A LAPTOP, FIST UP IN AIR

AI Prompt:

HYPER-REALISTIC QUARTER VIEW OF 30 YEARS OLD MAN IN A T-SHIRT AND BASEBALL CAP, WITH ONE HAND UP, LOOKING AT PHONE, SMILING, HAPPY

A man holding a laptop and talking on the phone.

AI Prompt:

HYPER-REALISTIC QUARTER VIEW OF A 50 YEARS OLD HAPPY MAN, FLANNEL SHIRT, BASEBALL CAP, HOLDING A LAPTOP, TALKING ON A CELL PHONE

A woman in a grey jacket is holding a clipboard.

AI Prompt:

QUARTER VIEW OF HYPER-REALISTIC 50 YEARS OLD WOMAN IN LONG SLEEVE SHIRT AND PUFFER JACKET, HOLDING A CLIPBOARD

AI Prompt:

40 year old, arms crossed, smiling, overweight man, blue work jacket, studio lighting, hyper-realistic

AI Prompt:

40 year old, arms crossed, smiling, overweight man, trucker, studio lighting, hyper-realistic

AI Prompt:

Quarter view, smiling, overweight hispanic man with a beard, baseball cap, hoodie, and vest

AI Prompt:

Quarter view, smiling, overweight hispanic man with a beard, baseball cap, hoodie, and vest

AI Prompt:

Quarter view, 40 year old, looking away, smiling, overweight tan man with a beard, baseball Hat, punching fist out front

A man wearing a blue jacket and a black shirt is making a fist.

AI Prompt:

side view, eyes closed, 40 year old, one fist up, smiling, overweight man, blue work jacket

A man wearing a blue jacket and a grey shirt.

AI Prompt:

side view, eyes closed, 40 year old, one fist up, smiling, overweight man, blue work jacket

A woman wearing a blue shirt and smiling.

AI Prompt:

side view, eyes closed, 40 year old, one fist up, smiling, overweight man, blue work jacket

Social Carousel

Email Heroes

Figma Brand Guidelines

Scroll to view
A green and white cat with glasses is the mascot for the Mint Mobile brand book 2023.A list of different colors and their uses.A website page with a green and blue gradient.A list of rules and instructions for a mobile device.A white and green logo for Mint Mobile.A website page with a logo for Campus.A collection of different colored backgrounds for a website.

Universal Component Snapshot

Proposed fox library

A green and white cartoon character with a sword.

Proposed fox library

A 5G card with 50% off.
A collection of cards with prices and features.

Monthly DAta Usage Component

A chart shows the monthly data usage for a user.

Premium Wireless Campaign Lockups

A green and white sign that says Premium Wireless.

Universal Component Snapshot

Proposed fox library

A green and white cartoon character with a sword.

Proposed fox library

A 5G card with 50% off.
A collection of cards with prices and features.

Monthly DAta Usage Component

A chart shows the monthly data usage for a user.

Premium Wireless Campaign Lockups

A green and white sign that says Premium Wireless.

Braze EmailS (Designs + Guidelines)

Scroll to view
A website with a green background and a man on the screen.A white screen with a green box that says "This is a test".

Product Gallery Library

1 icon Producer
+
1 Design Grunt
+
1 D. Love
A flow chart of a healthy lifestyle.
A white square with the words product gallery library written on it.
266+
Exports
A flow chart of chemicals and their properties.A book titled Doctor's Guide to Diabetic Diet.A purple box with a man and woman on it that says From Lab Tested for Purity.

Identity & Branding

Initial Concepts
A collection of icons and images for a website.
Origami Exploration & Refinement
A man holding a yellow bird paper crane.A green paper kite with a long tail.A hand holding a green paper butterfly.A yellow paper bird is held in a hand.A yellow paper bird is held by a hand.A yellow paper crane is held in a hand.A black and white photo of a paper owl.A white paper bird with a black background.A 3D model of a bird's head made from paper.
Origami Exploration & Refinement
A green and pink paper bird.A blue and white kite with a black wing.

Ironbird Master Library

Variables & Styles
A list of colors including black, blue, gray, and purple.A black screen with a numbered list of values.
A black screen with the word Space Mono on it.A black screen with a button that says create variable.A color palette with various shades of color.
Atoms
A collection of black and white geometric shapes.
A purple and white drawing of a bird.A black and white image of a geometric pattern.A head with a brain and a robot head.

Website Design

A website that is purple and white with a kite on it.

Presentation Design (Figma)

A poster for Ironbird Studios with a bird on it.A blue and purple advertisement for a company called Why Ironbird.A white paper with a title of "Heavy Asset Industries" and "Traditional Industries" on the top.A blue background with white text that says "About Us".

Social Media Template Library

Variables & Styles
A purple background with a white kite on it.
A purple and white sign that says "Lowen Shulam".
A white and purple sign that says London.
A Playboy store with a variety of products.A row of white boxes with different words on them.A poster advertising a phone and internet service.A blue tent with a sign that says "Caleb's".A Shellback bar with a man and woman sitting in a booth.A collection of images of a UAG display.A Google logo is displayed on a blue background.A collection of images and text about Old Navy.A man wearing a white shirt with a picture of a box of fruit on it.A white and black advertisement for a coconut drink.A bottle of Pilar liquor is displayed on a magazine advertisement.A collection of advertisements for Vinoq.A purple and white advertisement for Spark Conversations.A white and blue poster advertising a product.A green and white advertisement for Dirty Jobs.A woman holding a box of Brawny paper towels.A collection of logos and images, including a deer head and a hat.A box of Nurure diapers with a picture of a baby on the front.A collection of images of women in lingerie.A white and black ad for Prim.A collection of logos for products like Nu-mask and Toad & Co.A collection of logos for various companies.A white drawing of a tree with a person sitting under it.A poster advertising a project called "Aurora".

Testimonials

“From pitch to delivery, the level of detail involved in anything that D puts into the world is something to aspire to. But D's creativity may only be outshined by his leadership and communication skills. Being able to tactfully challenge people while gently guiding them towards an alternative that better aligns with their goals is a skill he's mastered 10x over. A lost art these days. Working with D is like getting the best parts of the veteran creative who has all the answers because they've *seen some shit* and the bright-eyed intern you turn to when you need to believe optimism and integrity still exist. ”

vector quill pen icon
Katherine Johnston
Copywriter

"D. is the kind of teammate who makes everything click. His creativity brings fresh, standout ideas to the table every time, while his organization keeps projects moving seamlessly—even when things get chaotic. What really sets him apart, though, are his management skills. He leads with clarity, ensures the team stays on track, and somehow makes it all look easy. You always know he has your back, and his ability to balance vision with execution is next level. Working with him is not only productive—it’s genuinely inspiring."

vector quill pen icon
Kensie England
Creative Director

"Collaborating with D. Love on the SugarMD rebrand was an incredible experience. As the creative director, D. developed a comprehensive overarching strategy that tackled the brand’s unique challenges, including navigating their FDA warning. Serving as the primary point of contact between the client and the creative team, D. ensured seamless communication and collaboration, resulting in a streamlined process with minimal revisions. Thanks to his leadership and vision, the client was thrilled with the outcome and has entrusted us with their next brand. Working with D. was an absolute pleasure—his strategic insight and ability to unite a team are truly inspiring."

vector quill pen icon
Sam Seaman
Copywriter