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.

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:

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.

A table with checkboxes and straightforward help text allow users to easily select which updates they’d like to receive.

Users can update date, time, distance, and weather formatting preferences using dropdown menus.