Internal Business Sales App

Business Results & Outcomes

[data-ws-animate-id="_Rc6j5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rc6j5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rc6j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rc6j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rc6j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

Strategic Partnership Growth

Easier to showcase all technology offerings
Demonstrate solutions to prospective clients in real-time

[data-ws-animate-id="_Rk6j5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rk6j5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rk6j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rk6j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rk6j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

Internal User Adoption Increase

New SaaS eased effort to scale up company-wide
Replaced fragmented sales supporting assets

[data-ws-animate-id="_Rs6j5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rs6j5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rs6j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rs6j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rs6j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

Accelerated Executive Buy-In

Removed potential bottleneck by using high-fidelity prototypes
Were able to align on goals to get continued support

Executive Summary

[data-ws-animate-id="_R48j5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R48j5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R48j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R48j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R48j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

DASH began as an engineering "pet project" built to help technical teams demonstrate capabilities to our IT clients. While functional under the hood, the UX/UI was fractured, cobbled together, and reliant on static PowerPoint presentations at times for client delivery.

I led the Product Design for Version 2.0, I started with a complete experience architecture overhaul. I began mapping the legacy infrastructure in order to introduce a component-backed React design system advocated for by engineering. This evolution would balance rigorous technical constraints with business urgency, as the timeline was tight.

[data-ws-animate-id="_Raj5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Raj5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Raj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Raj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Raj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

KEy Product Decisions

[data-ws-animate-id="_R1baaj5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R1baaj5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R1baaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R1baaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R1baaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

Technical Debt vs Speed to Market

[data-ws-animate-id="_R6baaj5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R6baaj5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R6baaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R6baaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R6baaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

Tension Point

Engineering teams can struggle to implement new design systems:

Prospect of backtracking feels like a waste of time to the team and outweighs the benefit of the new UI
Friction leads to inconsistent implementation and missed deadlines

[data-ws-animate-id="_Rabaaj5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rabaaj5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rabaaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rabaaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rabaaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

design decision

Prioritized reducing the feeling of duplicating work for team:

Mapped new design system components directly onto established React elements to reduce backtracking
Worked with front end lead to recycle components where possible in my designs

[data-ws-animate-id="_Rebaaj5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rebaaj5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rebaaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rebaaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rebaaj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

the trade-off

Adhering to legacy naming conventions and structures:

May have sacrificed some "ideal" semantic naming
Ensure 100% adoption and meet the immediate launch window
Creating Future tech debt after MVP

[data-ws-animate-id="_Rcj5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rcj5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rcj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rcj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_Rcj5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

My Role

Lead UX and UI Design

responsibilities

User Flows, User Research, User Interviews, User Interface Design, Design System Creation

collaborations

Software Engineers, Software Architects, Business Stakeholder, Graphic Designers, User Researcher, Project Manager, Division Leadership, Executive Leadership, Subject Matter Experts, Partner Evangelists

timeline

1.5 years, project is ongoing

the execution workflow

step 1 > Mapping the technical foundation (IA Audit)

To preserve the established backend infrastructure, I led my team in conducting a comprehensive audit of Version 1.0. We mapped out every existing page, link, and data object to create a visual source of truth for the legacy Information Architecture (IA).

This allowed us to evolve the IA into a more robust interactive platform to serve multiple users, and scale company-wide.

step 2 > shifting from "website" to "Saas application"

The original interface looked like a standard marketing website. Sales and engineering needed a dynamic workspace. We evolved the visuals into a high-density, dashboard-driven application aesthetic, optimizing user flows so sales teams could customize a client-facing technology demo in seconds.

-- Website Version --

-- Redesigned SaaS Version --

Step 3 > Seamless Developer handoff

To ensure smooth engineering implementation, I established a comprehensive design system built in lockstep with the front-end team. Components were engineered to match React development specs, standardizing

Unified design tokens (brand colors, typography scales, spacing units)
Component naming conventions mirroring existing React structures
Reusable dashboard widgets for rapid internal scaling

My Takeaways

Things I learned throughout this process.

[data-ws-animate-id="_R50j5_"] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R50j5_"] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R50j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R50j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])), [data-ws-animate-id="_R50j5_"] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > [data-ws-animate-id] > :not(:is([data-ws-animate-id], [data-ws-no-initial-animation])) { animation: none; }

Global Alignment

Get all Teams to buy in 100% and believe in your goals for the project.

Jump on a Call

A quick 5-minute Teams call can streamline the process and untangle any bottlenecks

Thorough Documentation

Write out your intentions along with prototyping demonstrations to achieve the best outcomes.