Wanderlust Society - Card Simplification Exploration
Date: Winter 2018
Client: Wanderlust Society
Role: CEO, Co-Founder, UX-Design
Decrease visual clutter.
We believed the faces of the Wanderlust Society card design were too complex. Users could either flag a card as “Want to Go”, “Been There” or get more granular by adding the card to a specific trip. We tested visually simplifying the card face while keeping the complexity of the potential actions.
Nice to have Goal:
Add a Popularity Meter to cards.
We determined having a single affordance would be a direction we would want to move forward with in the future, but opted not to continue exploring at this time due to lack of developer resources.
We put the Popularity Meter on the back burner until we have more dat that would warrant a popularity meter.
Study #1 - Plus Button
One Plus button at the bottom of the card seemed like a potentially good idea. I quickly prototyped up what would happen when the user interacted with the button. I tried putting the “Want to Go” and “Been There” buttons as binary options and the “Add to a Trip” as a tertiary option. We didn’t user test this because we didn’t think the plus button was intuitive enough to what clicking or tapping it would do.
Study #2 - Giant Mouseover
Next I tried just the “more” icon at the bottom of the screen which would trigger on click. The problem with this design is that it didn’t work well in mobile and furthermore, at the time of this study, our cards were not uniform in sizes. If the available actions took up more space than the allotted space, this design would not properly work.
Study #3 - Popularity Meter
One idea I wanted to test out was to work in a way to visually gauge the popularity of a card. How do our users know if a location is good or not? by adding “5/5” to the card, the user could tell that 5 out of 5 people recommended this card. But not. This design made users’ brains explode. As Usability expert Steve Krug said, “don’t make me think.”
Study #4 - Crazy Town Meter
Remember in my last example I said it didn’t work because it made the user’s brain hurt. Same. I tried to do way too much in this prototype!
Study #5 - Getting Better
I simplified the last two studies into this one. It looked a tad better but the popularity meter was still adding too much cognitive load.
Study #6 - Simplifying, Finally
I stripped out all the craziness at the bottom of the card and landed on the idea of a “Want to Go” icon with a dropdown chevron for more controls. I really liked this version. I also added in the ability to add a comment. We didn’t ultimately go with this direction but I felt like it was a fairly solid option.
Study #7 - Good Lord, what was I thinking?
Just when I started getting things simplified I thought, “what if we bring back the popularity meter?” And be able to leave a comment. And have a simple button. And have some avatars on the face. Aye aye aye. Worth a shot, right? Still… too much. At some point you really have to decide what is the most important action for the user to take? And make that easy. This was again, NOT EASY.
Study #8 - Ah ha! A way to sneak in the popularity meter
What if clicking on the “1 Recommend” popped up more info about the popularity of this card? Nah. Pass.
Study #9 - Simple again, yay
I brought it back to just “Want to Go” and “Been There” with some popover treatments to harvest more data.
Study #10 - Harvesting Comments
Tapping “Want to Go” would prompt the user if they wanted to add this to place to a trip. “Been There” would ask for a comment. If the user added a comment, their comment would replace any other comments on the card front. The problem with this one is that we thought it might be annoying every time the user tapped a “Want to Go” they would see a popover menu. Our long term plan was to create auto-generated Smart Trips so that a user would not need to ever take the extra step of adding an item to a trip.