Screenshot of the setting landing screen in the TripIt web app.

Web App Settings Refresh

Giving attention to an often-overlooked, yet fundamental part of good UX


After a long period of sitting on the backburner, TripIt’s web app had become clunky and difficult to use. It suffered from an outdated UI, poor accessibility, a cluttered layout and a confusing information architecture. To make matters worse, the lead designer for the web app didn’t have enough time to work on the feature pages and the settings page.
Screenshot of the legacy TripIt website settings.

How might we bring the quality settings experience users know in the mobile app to settings on web?


I volunteered to lead the settings project and made a plan to check in regularly with the lead UX designer for the web app in order to ensure consistency between my designs and the rest of the web app.

Once the product manager decided that building a new site was more efficient than fixing the old one, I started working on an overarching concept. The new settings menu needed to make up for the shortcomings of the previous one – responsiveness, accessibility, UI, etc. –  but it would also have to easily accommodate the addition of new features because we planned to build it iteratively over time. Scalability in the design was critical.

I used existing data metrics on user behavior from the mobile app to prioritize what features to include in the MVP. Based on existing research on mobile IA, I created groupings of features for the first release.  This included separating items from Settings that would now reside in a user profile.


The result was an updated settings menu that was responsive, scalable, and tailored to the needs of the target population for the MVP (TripIt’s EU users). The final set of features for the first release included:
Screenshot of the Account and Security section in TripIt's web settings.
A left sidebar menu lists different sub-sections. The Account and Security section hosts email management, merge functionality and password management. Each function is separated by cards that kickoff the separate flows.
Screenshot of the settings to adjust email subscriptions in the TripIt web app.
A table with checkboxes and straightforward help text allow users to easily select which updates they’d like to receive.
Screenshot of the display preferences within TripIt settings.
Users can update date, time, distance, and weather formatting preferences using dropdown menus.