End-to-end product design

Leading design with systems thinking to enable product teams and improve the Settings UX for everyone.
  • Cross-Functional Collaboration
  • Systems Thinking
  • Frameworks
Settings final design screenshot collage
Details

Design Problem

How might we re-design Settings so that customers can complete tasks on their own, and teams can make updates easily and consistently?

My Role

Senior Design Lead on the Platform Team (IC) at BILL.

My Team

Product Manager Lead, Engineering Lead, Front and Backend Engineers, Content Designer, Accessibility Experts, Design System Designers, Legal, Product Marketers

Business Goals

  • Reduce customer service calls about settings.
  • Increase product team efficiency.
  • Ensure quality and compliance while improving usability.

Results

  • Reduced contact drivers from top 3% to top 10% in 30 days.
  • A new framework and design system achieving 100% adoption.
  • Set a standard for future development, achieving ADA compliance and launching with zero P1 bugs.

Before

Settings lacked UI standards, had inconsistent navigation, and was difficult to maintain. Distributed ownership, and outdated technology made teams reluctant to update features. Without design governance, quality suffered.

Settings menu before redesign screenshot

After

Settings were centralized into a portable micro-app. This approach simplified integration, improved the user experience, reduced support needs, and made updates easier for teams.

New Settings workspace screenshot
Sharon led three Big Bet projects and facilitated cross-functional workshops successfully. She picked up the most important, complex and legacy experiences (Settings & Email) and created a design process to effectively turn them into modern/usable experiences.
Direct Manager

My Approach

1
Identified user’s pain points, needs and desires with the support of our research team.

I audited 125+ settings pages, mapping patterns, content and ownership across the org.

My PM partner and I interviewed 35 stakeholders across 9 product teams, revealing significant user frustration with basic tasks like password updates.

I ran a card sort study with support from a user researcher, uncovering misaligned mental models and the need for clearer navigation.

Illustration of customer, customer service advocates, and product team’s pain points
2
Defined core user needs and principles.

I distilled discovery findings into a clear set of needs that kept the focus on solving the top issues for our broad user base.

Design principles became a shared language, driving alignment and guiding decision-making for my team and me.

Design Principles

  • Simplify: Remove clutter to improve focus.
  • Confidence: Provide clear feedback and intuitive actions.
  • Efficiency: Streamline workflows for faster task completion.

Core User Needs

  • Clarity: Simplify navigation and reduce cognitive load.
  • Confidence: Provide clear feedback and intuitive actions.
  • Efficiency: Streamline workflows for faster task completion.
3
Clarified architecture with an application map.

I created an application map to visualize relationships between Settings objects and actions, ensuring nothing was overlooked.

Unlike a static site map, it captured the dynamic nature of the content and became a key resource for illustrating user flows and aligning stakeholders.

Settings application map screenshot
4
Iterated quickly with interaction model sketches.

Armed with insights from user research, I sketched various layouts and interaction models, sharing them frequently with the team for feedback.

This gave me the opportunity to partner with design system designers to test and expand upon new components.

Frequent feedback loops helped engineers visualize solutions and paved the way for adopting React and building the micro app.

Settings UI design explorations mini wireframes screenshot
5
Explored possibilities with visual design.

I leveraged the latest design system components while proposing new layout ideas.

I proposed dashboards, fresh illustration styles, and creative color use, all aligned with the brand’s evolving identity.

Settings visual design design exploration mockups
6
Redesigned key screens for better usability.

I led the redesign of User Profile, Email Preferences, and Company Profile to improve usability for top contact drivers.

Built in React, these screens became the foundation of the new Settings design system, allowing teams to manage settings features independently.

I created modular content modules that could be customized to each team’s needs, allowing them to work independently without getting slowed down by rigid rules.

New Settings screenshots of email preferences, company and user profile
7
Validated the experience with user testing.

In partnership with a user researcher, I ran user studies to evaluate the experience, and 80% of participants found it better or about the same as the current experience.

Participants easily navigated back to the BILL workspace after using Settings—one Clerk even said, 'Couldn’t be simpler.'

Overall, participants found the design easy to use and straightforward.

Results in chart format from user testing studies
8
Goals achieved!

Improved customer experience: Customer service calls coming from Settings were reduced.

Increased product team efficiency: Clear guidelines, tools, and a new framework enabled teams to deliver features more efficiently, with better compliance, and aligned with the design system.

Ensured quality and compliance: The first micro-app set a standard for future apps, achieving ADA compliance and zero critical bugs at launch.

Illustration of satisfied customers and their quotes
What I really appreciate is her rigor in the design process and the ego-less way that she seeks and gives feedback with the rest of the design community.
Product Management Leader

There’s more to this story...

But it’s reserved for interviews.

Let’s connect!
More Case Studies