SMS marketing

SMSEdge SMSEdge Rebuilding campaign creation

Redesigned SMSEdge dashboard with sidebar navigation, key metrics, an SMS statistics chart and time analysis
Role
Sole product designer
Team
CEO & CTO
Year
2019–2021
Product
smsedge.com (opens in new tab)

01 Overview

A platform built for performance marketers

SMSEdge is a global platform for large-volume advertisers. Marketers upload contact lists, compose campaigns and send bulk SMS through specific routes to any country, then optimize for clicks, leads and sales in real time.

  • My role

    Sole designer

    I audited the UX, ran usability studies, and restructured both how the system works and how it looks.

  • The problem

    New clients stuck before send

    Campaign creation lived on one crowded screen with 38 ways to go wrong, every screen looked different, and no onboarding showed the way — slow starts were putting adoption and retention at risk.

Five chapters, one structure

Each chapter opens with its challenge and outcome, then the decisions that got it there.

02 Discovery

Experiencing the product the way clients do

Challenge

Campaign creation lived on one crowded screen with branches, dead ends and loops, no onboarding showed the way, and every screen looked different — slow starts were putting adoption and retention at risk.

Outcome

A validated list of what to fix: an unintuitive flow with 38 error opportunities and a 46% error rate, a bloated dashboard with no hierarchy, and inconsistent UI inside Bootstrap 4’s limits.

How might we

make campaign creation simple enough for new clients to adopt quickly, without taking power away from experienced marketers?

01

Usability review

A new colleague and I were onboarded exactly the way clients are, then ran a usability review of the platform.

  • Responsiveness problems on the website and platform
  • Unclear naming
  • Inconsistent colors and UI elements
  • No user onboarding
  • An unintuitive campaign creation process

02

Support validation

Then I asked the team which problems came up most often. The top support requests:

  • Campaign creation is hard to grasp
  • Button and section names are unclear
  • There is no pricing page

The flow to beat

The whole process lived on one screen. Names weren’t self-explanatory, some features sat outside the flow, and cramped elements fought each other. No hierarchy, no structure.

Original campaign creation flow
Original campaign creation flow From the dashboard, users could create a campaign or upload a list. Creating a campaign first checked whether lists were available. If not, users were sent back to the dashboard to upload and segment numbers. If yes, one screen asked for send time, lists, offers, ads and advanced settings. Users then moved to a campaign view to test routes in a separate tester, which looped back to the campaign screen. Dashboard Create campaign Lists available? Yes No Send now (schedule) Lists Offers Ads Advanced settings Campaign view Testing routes Tester Add testing routes Upload list Number segmentation

Branches, dead ends and loops — all before a single message went out.

  1. 1 Select a step
  2. 2 Add details
The original Tester screen: lists, offers, ads, routes and settings, all competing at once.
A dense test-laps table — every metric from CPC and CTR to leads and rank crammed into one view, with inconsistent alignment, cramped columns and no clear hierarchy. Visually cluttered and hard to scan, it left the best route hard to spot before sending at scale.

Baseline UX KPIs

Measured on the original campaign creation flow

Time on task
2:53 min : sec
Error opportunities
38 errors
Error rate
46%

03 Design system

One kit for every screen

Challenge

Every screen looked different: inconsistent colors, button shapes and patterns — no shared language to build on, with Bootstrap 4 capping how far the visuals could go.

Outcome

One cohesive library on Bootstrap 4: coral for primary actions, teal for success, a consistent button shape, and shared patterns for calendars, menus and campaign tables — carried across every screen.

UI kit

One kit carried the new look across every screen: coral for primary actions, teal for success, a consistent button shape, and shared patterns for the calendar, dropdown menus and campaign tables.

SMSEdge UI kit: labeled primary, error, success, dark and disabled buttons; a removable tag, a price badge, numbered pagination, a checkbox, an off/on switch and an icon button; the product navbar with a utility bar, logo, active SMS tab in red and section tabs for Dashboard, Campaigns, Lists and Reports; a calendar with a highlighted day and an hour/minute send-time picker; an account dropdown with balance, billing, settings and log out, plus a context menu for reroute and segment analysis; and a campaign table with an active toggle, sortable columns, progress states and selected, alternating and hover rows.

  • Buttons

    Five button styles: coral for primary actions, a distinct error red separate from the accent, teal for success, black for strong emphasis, and a muted disabled state.

  • Controls

    Small utility pieces used throughout the platform: a removable tag, a price badge, numbered pagination, a checkbox, a switch and an icon button.

  • Navigation

    A black utility bar for support and legal links sits above the product nav — logo, the active SMS tab, notifications — with section tabs underneath: Dashboard, Campaigns, Lists, Reports.

  • Date & time

    One calendar component handles both the send date and time, with a highlighted day, an hour/minute pair, and a teal confirm button.

  • Menus

    Two dropdown patterns: the account menu with balance, billing, settings and log out, and a compact context menu for rerouting or checking segment analysis.

  • Campaign table

    The campaign list pattern: an active toggle, a progress bar that finishes or resets, and row states for selected, alternating and hover.

Making red work for both

Using coral as the accent made error states tricky — both need attention. Errors use a slightly different shade so they stay distinct from primary actions.

04 Platform redesign

Rebuilding the core experience

Challenge

Bootstrap 4 capped how far the visuals could go, the dashboard buried key actions, and campaign creation crammed lists, offers, ads and advanced settings into one screen.

Outcome

A sidebar dashboard that scales, onboarding from day one, and campaign creation split into focused steps — lists, landing URL, message, finalize — then a live view.

A dashboard ready to grow

Bootstrap 4 powered the platform, which capped how far the visual design could go. The dashboard came first, on three decisions:

  • A new sidebar that makes the main sections easier to reach
  • A consistent color scheme
  • A cohesive UI library
Redesigned SMSEdge dashboard
Original SMSEdge dashboard

Drag the handle to compare the original dashboard with the redesign.

Onboarding that shows the way

New users land on a welcome screen with a launch checklist. From there, quick tips guide them through the platform to their first campaign.

Welcome screen A six-step checklist, intro video and help resources
Quick tips Contextual tips point to the next action

Campaign creation, one step at a time

Following the same step-by-step narrative as onboarding, campaign creation splits into focused steps — no wall of buttons and decisions before a single message goes out.

Prototype of the new campaign flow. Select a step to jump to it.

05 Marketing website

From a one-pager to a full marketing site

Challenge

A one-pager had to become a full website. Pricing, guides, FAQ and developers built a knowledge base that introduces both the service and SMS marketing itself, but no structure existed for it.

Outcome

A complete marketing site — pricing, guides, FAQ and developer docs — with information architecture, content, design and WordPress build handled end to end.

A one-pager had to become a full website. Pricing, Guides, FAQ and Developers built a knowledge base that introduces both the service and SMS marketing itself.

I handled the information architecture, content, design and WordPress build.

Homepage Hover to scroll the full page, or open it full size. Tap to view the full page.

Features, animated

Short loops show each feature at work: cleaning contact lists, lifting ROI, ranking sending routes.

Make every number count
Send highly converting campaigns
Innovative SMS routing

What this achieved

A full marketing site — pricing, guides, FAQ and developer docs — that explains the service before the first call and brought a steady lift in inbound leads right after launch.

06 Visual identity

One consistent brand, from screen to booth

Challenge

Nothing said which identity elements to use or how to apply them — every visual felt like a one-off, from the product to ads to the booth.

Outcome

A style guide and a unified system across product, website, print and merch — coral and charcoal at the core, a line-icon family, and a promo video that brings the brand to life.

Nothing said which identity elements to use or how to apply them, so I wrote the style guide that keeps every visual cohesive.

A wide range of print and digital materials followed, and gave SMSEdge a branding foundation to build on.

Core elements

Color palette

Select a swatch to copy its hex

Preloader animation

The Σ-shaped mark doubles as the product preloader, rebuilt here in SVG and CSS.

Brand in the wild

Event post template
Facebook ad: SMS vs. email
Facebook ad: engagement stats
Merchandise
Identity items
Office entrance wall
Roll-up banner & conference booth

Custom icons

A line-icon family for the product, website and marketing materials, from small interface icons to spot illustrations.

Bringing the brand to life

With few marketing materials to work from, a promo video was the fastest way to raise awareness. The tight timeframe pointed to kinetic typography, inspired by pieces like Apple’s “Don’t Blink.”

07 Impact

Easier to start, easier to navigate

Research identified and validated the problems that mattered. The new campaign flow and restructured navigation got new clients started faster, and made the platform easier for everyone already on it.

  • Campaign creation

    Challenge: One crowded screen, with features scattered outside the flow

    Design response: Focused steps: lists, landing URL, message, finalize

  • Onboarding

    Challenge: No onboarding at all

    Design response: Welcome checklist, intro video and contextual tips

  • Navigation

    Challenge: Unclear section and button names

    Design response: A sidebar with clearly named main sections

  • Interface

    Challenge: Inconsistent colors and UI elements

    Design response: A consistent color scheme and cohesive UI library

  • Website

    Challenge: A one-pager with no place for pricing or docs

    Design response: A full marketing site with guides, FAQ and developer docs

  • Brand

    Challenge: No rules for identity elements or their use

    Design response: A style guide and one brand from product to booth to video

Outcomes

  • Decreased time on task
  • Fewer error opportunities
  • Improved retention and adoption rates
  • Increased client satisfaction
  • A cohesive UI library

08 Takeaways

What this project taught me

  • Validate before designing

    A usability review, support requests and interviews pointed at the same problems, so the redesign targeted what actually blocked people.

  • Constraints shape solutions

    Bootstrap 4 and backend limits defined what was possible. Designing inside them kept the work shippable.

  • Fewer decisions per screen

    Breaking one crowded screen into guided steps made a powerful tool approachable.

Next project

Dojohome

Visual identity and UX for a real estate platform reimagining homeownership. Read the case study All work


Let's build great things together.

Dani Tesler

Product Designer

Dani Tesler: Hey 👋 I'm Dani.
Dani Tesler: What's on your mind?

Image preview