Wanderlust Society - Add Idea

Date: 2016
Client: Wanderlust Society
Role: CEO, Co-Founder, UX-Design

Goal

Early on we determined that being able to save a link and image to a mapped location would be our MVP. This was the v1 meat and potatoes of the site.

 

Process

User observation, prototyping, iteration

We wanted our Society Member to be able to easily save an image, link and location to a map to help travel plan.

First Iteration

I started with the hypothesis that 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 to create an organizational structure unless it is desired, but otherwise the software can chronologically save your content, or the software can auto-magically slice and dice your content appropriately via the meta data.

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.

I wireframed (see above) and prototyped designs (see below) until we felt they were ready for user testing. We brought users into our office and ran a few usability tests to the best of our ability.

One of our usability study participants testing away.

One of our usability study participants testing away.

First Iteration Learnings

We did some informal user testing with a demographic / market segment we considered essential to our business — tech savvy, high earning, Gen Xers.

This thwarted my hypothesis that we could have our users save ideas without having to first create a "container” to save the ideas.

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.

Lastly, we realized that copying and pasting a link to save 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.

Second Iteration

I moved from black and white wireframes to color at this stage so the primary blue button would stand out as the single most important action on the screen. Plus, at this stage I needed to play with graphical skinning so this was a good time to try out our new branding too.

Our developer was not able to tell how many images we could grab via Flickr or Google Places API before we loaded the images so I had to update the photo picker to reflect this. Also after testing the v1 on an iPhone 6 I realized that I needed to shrink the vertical height of my designs by about 100 pixels and this embedded photo picker saved screen real estate while also being a large enough target for fat fingers.

I added in the ability to “Save to Trip” but still allowed users to NOT save to a trip if they didn’t want to go to the trouble.

We also opted to default the users to the Want to Go flag as we considered this the primary use case for travel planning.

Upon creating a trip the user was instructed to name their trip. We also added the ability to narrow the trip into a smaller geographic location, like “London.” We found the Google Places API can more rapidly and reliably return better location results if we add a bounding box for the results.

Another important feature we added at this stage was “Quick Add,” in order to remove the friction of having to find a link to copy and paste into the site to save — but without losing the ability to also paste in a link if desired. 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. It was imperative that UI had to reflect that both options existed.

Add idea v4 Copy.png

Second Iteration Learnings

Our head of product concluded we should create a pipeline more like the Pinterest model. The user needs to go to the container they wish to add their idea to and then start adding so there would be no confusion of what actions they were taking. The Want to Go and Been There icons were added into the navigation with counts below. This gave users feedback of what they were doing when they added another Society Member’s card to their own Want to Go or Been There.

This meant we would lose our global “+” Add Button in the navigation but this alleviated usability issues of users creating a card called “London” and then attempting to add more cards to “London.” Basically we changed our designs to match the model the users already had in their head, which was a better solution.

The next issue we uncovered via observation was that our multi-step “Add Idea” was a lot to ask. We 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.

And lastly, we concluded that the word “Idea” was confusing. While the word “idea” was generic enough to fit our long term goals of what the product could be, in the present iteration of the product, we needed to be more specific with our words. What we were asking the user to do was to save a location. In the third round we updated the word to read, “location” and this helped with usability across the board.

Third Iteration: Single Screen Add Location

Here’s an example 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.