LP Engine

Upsell Modals

Interactive Heroes

Vimeo Homepage

Vimeo Nav

Chroma

Demo Flow

Sketch
A/B Test
Which variant wins? Make your call.
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Dallas
—
Partly Cloudy
6
Portfolio Tour

WorkMoney Design System, Brand Refresh, & Website Redesign

WorkMoney Design System, Brand Refresh, & Website Redesign

D2C

WorkMoney Design System, Brand Refresh, & Website Redesign

+35% conversion rate

A distinct design system based on MUI for use across digital properties and products, plus a brand refresh and website redesign.

Role

Product Design Manager

Company

WorkMoney

Year

2024

Tools

Figma

D2C

WorkMoney Design System, Brand Refresh, & Website Redesign

+35% conversion rate

A distinct design system based on MUI for use across digital properties and products, plus a brand refresh and website redesign.

Role

Product Design Manager

Company

WorkMoney

Year

2024

Tools

Figma

WorkMoney Design System, Brand Refresh, & Website Redesign cover

Shipped design · scroll inside each frame

WorkMoney Design System, Brand Refresh, & Website Redesign: full homepage on mobile

Mobile · full homepage

WorkMoney Design System, Brand Refresh, & Website Redesign: full homepage on desktop

Desktop · full homepage

Results

The website redesign and integrated branding strategy drove tremendous improvements across key performance indicators over the first 6 months:

35% increase in website conversion rate

  • By optimizing information architecture, simplifying calls-to-action, and boosting visual appeal, we significantly lifted conversions across WorkMoney’s digital touchpoints.

40% decrease in bounce rate

  • Aligning branding and UX to keep customers engaged led to substantially lower bounce rates. Visitors resonate with the friendly tone and intuitive navigation.

300% increase in brand mentions

  • Unified messaging and visuals boosted brand awareness exponentially, with social media mentions tripling since launch.

Additionally, WorkMoney received positive feedback on the cohesive customer experience reflecting their unique value. By balancing visual storytelling with performance, I helped strengthen brand perception while making it easier for the ideal customers to engage with WorkMoney’s offerings. The strategic rebrand and user-centric redesign opened new avenues for customer growth and retention.

The Problem

WorkMoney's brand and website were outdated and not optimized for user experience. Additionally, their branding was fragmented across channels.

  • Needed a full rebrand and website redesign to reflect new company direction and values

  • Required consistent design system for use across branding, ads, and content to unify experience

The Idea

Conduct brand strategy workshop to define new brand identity and style guide

  • Create three user personas to optimize design for key target demographics

  • Design bold, modern visual identity with vibrant color palette

  • Develop fully-responsive website with focus on conversion optimization

The Action

Worked closely with stakeholders on brand strategy and creative direction

  • Designed logo, typography, color palette, imagery for brand identity

  • Produced style guide documents for design system usage across channels

  • Created user flows, wireframes, and prototypes for highly usable web design

  • Launched website with A/B testing for continual optimization

My contributions spanned:

Design (UI)

  • Vibrant, modern flat design system

  • Bold typography and color palette

  • Distinctive brand motifs and graphical elements

  • Photography style showcasing real people and settings

Design (UX)

  • Intuitive information architecture based on user testing

  • Clear calls-to-action and value propositions

  • Simplified workflows and transactional experiences

Leadership

  • Managed project team of 5 over 6 month engagement

  • Led collaborative brand strategy and design workshops

  • Directed creative team through brand identity development

  • Oversaw design testing and quality assurance processes

Strategy

  • Target key customer demographics through personas

  • Focus brand identity on simplicity, transparency

  • Highlight easy account setup and management

  • Promote user benefits of financial clarity and control

WorkMoney Design System, Brand Refresh, & Website Redesign: The Action

Personas

I examined WorkMoney's most engaged customers — those utilizing tools and content to spend less, save more, and access additional financial support. Through this analysis, I identified three common financial situations and mindsets amongst these users. I distilled these target demographics into the following personas based on shared goals, obstacles, and needs which WorkMoney directly helps resolve through their products and guidance.

John Laborer

With fluctuating construction income, John has trouble budgeting and saving. WorkMoney provides John financial tips tailored to inconsistent earners, helping him spend less on unnecessary expenses. Automatic savings rules allow John to consistently put money away, while free tools for accessing government programs qualify John for additional financial assistance.

Jenny Mom

Trying to save on a busy parent's budget is difficult for Jenny. WorkMoney gives Jenny money-saving hacks for family expenses like groceries, kid activities, and more. Setting up auto-savings helps Jenny consistently build funds despite constant expenses. Additionally, WorkMoney helps Jenny identify and enroll in government support programs for things like healthcare and childcare.

Emma Grad

Fresh out of college, Emma wants to save but student loans make it tough. WorkMoney offers Emma financial tricks for recent grads to save on housing, happy hours, and more while paying down student debt. WorkMoney's student loan manager integrates with Emma's providers for easy access and insights. Free tools also allow Emma to discover and apply for relevant government assistance programs.

Ideation & Wireframing

WorkMoney requested I present higher-fidelity conceptual mockups of their eventual homepage rather than basic wireframes in order to envision the brand and visual language more clearly at this stage.

I explored two distinct stylistic directions for the homepage design. Version A focused on a typography prominent hero and imagery-focused value propositions. Version B prioritized clear navigation and spotlighting various tools and features using more vibrant colors.

With approval of Version B, I expanded this into a complete design system including typography, color palette, graphical motifs, photography styles, and component libraries. This ensured visual consistency across mockups for inner pages and features as I moved into the high-fidelity design phase. Applying the design system to additional templates allowed my team to quickly translate our vision into an immersive website redesign concept optimized around WorkMoney’s brand and UX priorities.

WorkMoney Design System, Brand Refresh, & Website Redesign: Ideation & Wireframing

Final Design: Design System

The final design system incorporated MUI components and reflects WorkMoney's mission to make financial clarity easier to achieve. The design language is simple, straightforward, and focused on highlighting utility through bold icons, clean layouts, and easy scannability.

Deep blue serves as the primary brand color, connoting trust, confidence, and transparency. It contrasts with vibrant pastel hues to draw attention to key actions and information. Friendly rounded corners, approachable language, and smiling faces in imagery help communicate the guiding principle of money management with a human touch.

These elements coalesce into a welcoming, demystified financial environment. The consistent design system applied across all customer touchpoints reinforces WorkMoney’s promise of banking and budgeting made simple through thoughtful design.

Final Design: Homepage

The open and airy hero section commands attention with a clear value proposition targeting WorkMoney’s goal user base. Plain language communicates the essential benefits rather than overcomplicating the sell.

Further down, customers can directly engage with the concepts through testimonials, savings calculators, and getting started prompts woven between summaries of key offerings. Icons, menus, and visual signifiers optimize navigation and conversions while retaining the clean, approachable aesthetic.

Balancing aesthetics with performance, the homepage quickly guides visitors through an exploratory journey via sticky nav menu, strategically highlighted CTAs, and ample whitespace between digestible sections. The design effectively captures WorkMoney’s identity and makes accessing tools intuitive.

More screens

WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 1
WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 2
WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 3
WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 4
WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 5
WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 6
WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 7
WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 8
WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 9
WorkMoney Design System, Brand Refresh, & Website Redesign: Final Design — Design System screen 10

New Message

To:

Alex Calams

From *

Name *

Subject *

Goes straight to my inbox