Skip to main content
Dave Navarro McDonald
Work

Settings Refresh

Settings Refresh

The Settings Nobody Owned

TripIt's web settings had been untouched for years: outdated UI, poor accessibility, confusing information architecture. The mobile app had moved on, but the web settings page hadn't kept up. The lead web designer was stretched too thin to take it on. I volunteered to lead the refresh. Working with the product manager, we decided a full rebuild was more efficient than patching the existing page. The result: a responsive, accessible settings experience that aligned with TripIt's mobile standards. Early users highlighted the clarity and ease of navigation, and the new architecture created a foundation for ongoing enhancements.

How might we bring the high-quality settings experience users enjoy in the mobile app to the web?

The Problem with the Legacy Settings

The settings menu had several compounding issues:
  • Outdated UI and poor accessibility, making it cumbersome to navigate
  • Cluttered layout and confusing information architecture, leading to user frustration
  • No clear owner; it had been deprioritized for too long to patch incrementally
The legacy TripIt web settings: outdated UI, cluttered layout, poor accessibility
 The legacy settings page that kicked off the rebuild.

Rebuilding from the Ground Up

I coordinated with the lead web app designer to ensure consistency across the platform. Using data from mobile app research, I prioritized features for the web MVP around core user needs: email management, account security, and notification preferences. Key goals for the new design:
  • Responsive and accessible to meet modern UX standards
  • Scalable to accommodate future features without another overhaul
  • Intuitive information architecture aligned with the mobile app's structure
Based on research into IA best practices, I regrouped several items, moving some settings out of the settings page entirely and into a more contextually relevant location within the user profile.
New card-based settings landing with Account, Alerts, and Display sections

A Scalable Foundation for TripIt's Web App

The new settings menu launched first for TripIt's EU users as the MVP release. Key updates included:
  • Email Management: Adding, verifying, setting a primary email, and removing emails
  • Password Management: Secure password updates with clear validation
  • Account Merging: Functionality that previously lived in an unclear location
  • Alerts and Notifications: Core notification settings with a clear path to expand
Highlights of the final design:
  • Left Sidebar Navigation: Labeled sections for quick orientation
  • Card-Based Layout: Each function in its own card, making separate flows easy to initiate
  • Subscription Management: Checkboxes with help text for fast email preference updates
  • Display Preferences: Dropdowns for date, time, distance, and weather formats
Positive feedback from early users centered on clarity: they could find what they were looking for without hunting. The rebuilt architecture gave the team a clean structure to add features to going forward.
Detailed settings view with left sidebar navigation and email management

Related projects

AI Subject Line Optimizer
Act-On Software

AI Subject Line Optimizer

Designing Act-On's first customer-facing generative AI feature: a subject line analyzer that uses each account's own performance history to generate personalized alternatives.
Read case study
Groups: Putting Data in Context
Sparta Science

Groups: Putting Data in Context

Designing a way for Sparta Science users to compare individual performance against meaningful peer groups rather than the entire dataset.
Read case study
COVID-19 Guidance
TripIt

COVID-19 Guidance

Designing a centralized, digestible source of COVID-19 travel restrictions inside TripIt so travelers could stop hunting across government sites.
Read case study
Safety Personalization
TripIt

Safety Personalization

Designing a personal risk threshold system inside TripIt so travelers could set their own safety preferences and get alerted when destinations exceeded them.
Read case study