JULIA DEBARI
Designer Doer
Traveler Profile
Project Length: 4 months
Tools: Sketch, InVision
Team: 2 UX Designers, 5 Developers, 2 PMs
My Role: Senior UX Designer, UX Writer
Goals: Add a new feature to the mobile platforms and rework the feature on the web platform.
Project Background
TripIt wanted to add a new feature to the app that allowed travelers to keep travel documents, emergency contacts, and other important travel info at their fingertips.
There was an already existing feature called Traveler Profile. It had a bit of information about the person who owned the account, such as their home airport, and stats about the trips they had taken.
This was also the first team to go fully Agile. We made a squad of one Product Manager, 2 Designers, and 3 Developers for the full cycle of the project.
Project Challenge
We decided to build out the existing feature and make it more useful. However, this feature only existed on the web version and not on any of the mobile apps. So we had to add an entirely new feature to both the iOS and Android apps and add functionality to an existing feature on the website.
Some Beginning Challenges
Where did we put this new feature?
Yes, there was an existing feature with the same name, but is that where this functionality belonged?
How would people discover it?
How would people know that a feature that already existed had changed and been updated?
How useful would it be?
No User Research had been done to decide upon this idea. A PM had said she knew that customers really wanted something like this.
Feature Organization
I started with a sitemap and then began sketching screens. It was important that there was consistency between all three platforms in both functionality and design.
Existing Site Map
Site Map with added feature
I started wireframes with the website and broke up the existing profile into sections by adding tabs. Before the tabs, everything had just been on one screen.
Because the web version had a user's screen name, we had to carry it over on mobile. We had no specific statistics around whether it was useful, but since it had been there since the beginning of the TripIt web platform, we couldn't just remove it. We did add functionality to make sure the screen name was unique, which did not exist before this upgrade.
I started with the website and broke up the existing profile into sections by adding tabs. Before the tabs, everything had just been on one screen.
On mobile, we added a Profile section, and then a space to show the screen name. We also allowed users to edit that information.
Screen Design
From a UX point of view, one of my biggest concerns was not having the user have to manually enter the information from all these documents. We added the ability to take a photo with your phone add then used OCR technology to read as much of the information as possible. Once added, the user could view their document info as text or the photo itself.
iPhone, adding a new document via OCR.
Android, adding a new document manually.
What about security?
According to the PM, the biggest benefit of this upgraded feature would be the ability to store travel documents electronically, such as a passport, visas, or a driver's license.
There was a lot of discussion between the UX team and the PM on the project. UX wanted to add a PIN to lock the information behind the profile as an extra layer of security. There are a lot of personal documents held in this profile. The PM thought it would be too much of a barrier to entry to require this extra PIN, so we compromised with messaging.
Android, messaging to lock your phone.
iPhone, messaging to lock your phone.
Writing Copy
Because of the sensitive information and new pieces to an existing feature, I focused a lot on the copy to build trust with both existing and new users. I designed null screens, partially filled out screens, and fully filled out edge case screens.
Design Validation
Version with checkmarks to indicate selected items. This design was the winner.
A version that just changed to a solid color when selected.
Style & Specs
As we moved into visual design, I wanted to make it very clear, but also delightful, how to choose various options. I ran a few days of preference testing online and got some good results.
Version with a default gray and then changed color when selected. People thought this meant the buttons were disabled, which I should have known. :)
A version similar to the gray selection, but using blue instead of gray.
Although the preference testing was only run on the desktop version of the feature, I used it to inform the visual design of all three platforms, while keeping the brand and style guide of TripIt.
When I created the visual specification document, I only called out changed items from the original feature.
Launch
After launch, there was a backlash from users about the lack of security built into this feature. We ended up requiring users to create a PIN to access this sensitive information within the apps.
Adding in the ability to set a PIN the first time you add a travel document.
Team Results
Our team performed the best as far as being on time and producing the most work efficiently that the company had ever seen.
Lessons
Learned
01) Security is number one, don't compromise.
02) Back up writing choices with data.