Wanderlust Society - Add Idea
Client: Wanderlust Society
Role: CEO, Co-Founder, UX Design
After four iterations we successfully launched “Add Idea,” a core feature of our site.
Create the core of Wanderlust Society’s beta version of our product — giving users the ability for users to save a link and an image to a map to aid in travel planning, and sharing travel ideas with other Society Members.
The site relies solely on User Generated Content so it was imperative that Society Members could easily add content into the site so this feature was crucial to Wanderlust Society’s success.
An “idea” includes:
Successfully launched “Add Idea” which resulted in 68% of all content being added into the site via this feature.
First Iteration: Focus on Flexibilty
Users should be able to easily save “ideas” to our site and then easily be able to find the data again at a later date. I was inspired by products like Apple Photos and Adobe Lightroom in that there is no need for the user to create an organizational structure unless it is desired — the software chronologically saves the user’s content, but can be auto-magically sliced and diced or categorized appropriately via metadata.
And furthermore our product has a Pinterest-like feel, but I didn’t initially want it to behave like Pinterest. Pinterest is great for saving content, but not for long term use or finding your items again.
User observation, prototyping, iteration
First I wireframed and prototyped designs until we felt they were ready for user testing. We brought users into our office and conducted several usability tests.
First Iteration Results
We conducted observational user testing with a demographic / market segment we considered essential to our business — tech savvy, high earning, Gen Xers.
The results thwarted my hypothesis that we could have our users save ideas without having to first create a "container” to save the ideas.
Users wanted the ability to create an organizational structure (container) for travel planning.
Almost universally we observed our users save a location card like “London,” and then attempt to save more locations into “London.” There was confusion about what they were doing.
Second Iteration : Add Structure
More prototyping based on observational results from the first usability tests. I wireframed, prototyped and then cut final graphics and provided a style sheet for the developer so we could test this next round.
Product changes in v2 included:
Changed the user experience to reflect the user’s mental model.
To do this, we added the “Create a Trip” pipeline.
Also, by having the user type in the location and making the trip name optional, we could constrain the results for Quick Add, yielding more accurate type ahead suggestions in the Google Places API.
Second Iteration Results
We expanded the group of users that we tested to be not as highly technical as the first batch. Here was what we learned.
Our terminology was confusing to users.
I realized that specificity was key here. What seemed like perfect terminology when discussing the feature internally, was confusing to the user. The main issue was that we were asking users to “Add an Idea.” The term “idea” was too vague.
The multi-step “add idea” process was more work than warranted in most use cases.
Paginating through three screens of searching for the location, selecting the perfect image, adding tags and/or notes was more work than users expected. I had started with the assumption that users would want to hand pick the image their idea was saved with, but that use case turned out to be more rare. The majority of our users preferred the ability to add in locations as quickly as possible and were less concerned with adding in auxiliary data.
Third Iteration : Reduce Steps
More prototyping based on observational results from the second round of usability tests.
Product changes in v3 included:
Simplified the multi step Add Idea Pipeline to Single Screen.
Here’s an example (see video below) of how the single screen “Add Idea” works. This feature was designed to work responsively on mobile, desktop and tablet sizes to save development and design time.
Enabled auto fill / Google Places API to reduce friction.
Copying and pasting a link to save into the site was more friction than warranted for many locations being saved. For instance, if a user wanted to go to London, they would have to find a link to paste in to represent London.
With this next version, users could start typing in “Corfu” or “London,” “Matt’s in the Market” or wherever it was they wanted to go and the Google Places API would give search suggestions. Or they could still paste in a link. However we made it a requirement that the UI had to reflect that both options of getting data into the site. existed.
Forced users down a new path.
We removed the global “+” Add Button from the navigation to alleviate a usability issue. Now users would have to create a trip and then be able to add locations into their trip. Basically we changed our designs to match the model the users already had in their head, which was a better solution.
Before we did not have structure letting the user know if they should use the site to plan a trip or to share a trip they had already taken. Now we put a stake in the ground that this feature was for planning a new trip.
Fourth Iteration: Convenience
In order to achieve the goal of allowing Society Members to easily save ideas into Wanderlust Society from sites they find while browsing the web, we created a Google Chrome Extension.
The Chrome Extension helped in four ways.
Better user experience.
The browser extension method had room for writing in a comment, saving text from the site, adding a tag and having the “add to trip” popover appear in the final step.
Users know exactly what they were saving as opposed to the Google Places API where there was potential of saving information incorrectly. The quality of the images was generally better than the images we were getting back from Google or the Flickr API as well.
Reminder to use Wanderlust Society.
By having the icon in the browser, the user would be reminded of its existence even when they weren’t currently in trip planning mode.
Saves Wanderlust Society Money.
We were not saving a Google Places ID with ideas saved via the extension — thus saving us money in our monthly Google fees.
Note: Even though I had more room enough for a full screen take over in the desktop browser, I constrained myself to a size that would also fit in mobile in case we wanted to repurpose the design for mobile in the next round. With limited development resources I was constantly attempting to create design solutions that would be the easiest and quickest to implement.
68% of all content is added into the site via this feature.
According to our metrics, the biggest win was the “Quick Add” ability, which became our second most used mechanism of adding locations into trips. (“Copying” ideas from other Society Members is the number one method of saving data.)
Once this feature was solid we were ready to move into Beta testing with a wider user base.
As of today, the “Quick Add” method is used by Society Members seven times more frequently than our more cumbersome “Add Location” pipeline method — however, the “Add Location” user experience was greatly improved for the majority of our users by the third iteration.