Getaway Weekend

Using visuals and scannable text to trigger action


As a design challenge, I researched, ideated, wireframed, and prototyped a potential iOS app over one weekend (including Friday). Aptly named Getaway Weekend, it helps busy people find places to getaway over the weekend.

(Notice the weekend theme? I like weekends.)

The Problem

One of my buddies is often asked by his girlfriend where they’re going for the weekend; they both work long hours and want to escape the city. To figure that out, he has to think of a few place off the top of his head, do a series of Google or Yelp searches for each, then narrow down his choices. Research is time consuming and cognitively expensive.

What to do.. what to do…

Fatigued from work and paralyzed from decision overload, he never musters up the effort to make specific plans. And so, they end up staying in the city, not fully enjoying themselves.

I imagine other locals who work equally long hours must feel this pain as well. And through casual conversations, I discovered this to be true. People know of interesting places, but rarely the details of where to go and what to do. The cognitive effort required to find out hinders them from taking action, and they end up settling for the usual spots.

When you’re overworked, “working” to go somewhere fun is hard.

Currently, people are not being compelled to act. Their pain, triggered by work fatigue, can be solved through others activities. To fully enjoy themselves, my friends need a solution elevates their behavior past the action line.

Up and to the right

The Process

To start solving this problem, I made a persona to help me empathize with my target users. Maggie is a fictional character who represents the characteristics of friends I’ve talked to.

When I work solo, I sketch masterpieces like this

(I know my handwriting is horrible, so here’s a summary: Maggie is a marketing professional who’s lived in SF for 2 years. She wants to get out of the city and explore and unwind, but hasn’t gotten a chance. She does not want to take time off from work.)

There were a few key things I needed to address to help Maggie:

  • Maggie is fatigued and doesn’t want to make the effort to do research — I must therefore show her places outside the city and what attractions to see (raises ability)
  • Maggie is fatigued and doesn’t want to feel like she is working to read booking details— I must therefore communicate details visually (raise ability and motivation)
  • Maggie needs more than 1 day to unwind — I must therefore show her potential places she can stay for the weekend (raises motivation)

With these must-haves in mind, I sketched out a few possible solutions. This is one I thought could work.

Another beauty. Notice the carefully drawn, straight lines.

Then I made a taskflow to figure out what other screens I need to design and how they should be organized.

This is a oversimplified, sunny-day taskflow

The Solution

I skipped lo-fi and went directly to “visually pleasing” wireframes.

Getaway Weekend will help Maggie find fun places outside the city where she can unwind for the weekend.

I wanted this to be an amazing visual experience to draw her into a story. I believe if Maggie can imagine herself on an adventure through the visuals, she will be motivated to take action.

Onboarding

This flow is only shown once.

Places to go

There is no sign up wall — Maggie will immediately see places she can go after onboarding.

Things to see

The descriptions here are not very detailed, and this is on purpose. It’s about presenting a visual story.

Get a place to stay

Here, we see places to stay around Mt.Diablo. Places shown will be unique (non-chain) bed-and-breakfast inns, available only for this weekend.

Why not extend lodging to all hotels and dates? Because Maggie wants to escape from the city this weekend — she won’t escape in a chain hotel, and can’t predict how she’ll feel next weekend. Because of this, I am able to limit her choices and reduce decision fatigue.

(Right now, this app is only designed for Maggie. If that changes, then this design decision will change.)

Lodging Details

I purposely skimmed on the text so Maggie keeps a low cognitive load, speaking instead through visuals and social proof to motivate her. Everyone decides emotionally, then verifies rationally — especially overworked, tired people.

This is one long page that scrolls

Sign up/in

I wanted to wait until Maggie is committed before presenting the sign up/in wall. Notice the background is from the location she choose (Mt.Diablo)— this may be subtle, but I think it will convert better vs a generic image.

Background here matches the place she choose.

Booking

Once signed up/in, she proceeds to booking. A picture of the inn is there so she can mentally confirm her choice.

This is a simplified booking flow — a live product will much more complicated

Green light!

Signed up. Payment Added. Ready to book.

The Prototype

The interactive prototype was made with FluidUI. There are a few things that don’t show up correctly in the prototype (like the pagination dots), but otherwise it’s a great tool for fast wireframing and prototyping.

Running an usability test

By the way, writing is so much harder than prototyping.

What do you think of my process? Did it come to a solution that you think solved the users’ problems? How could I have done it differently? Say hi to me on Twitter @LennsHu and let’s talk.

Inspirational resources I used:
Interface patterns:
http://pttrns.com/
Interaction patterns:
http://www.uxarchive.com/