Timeline: November 2014–February 2016
Platforms: Native iOS and Android applications
Team members: Erin Mays, Maria Surawska, Carl Hill-Popper, David Ryan, Alex Nimmer
CampUSA is a native app for iOS and Android that lets people book reservations at Thousand Trails campgrounds.
When we started this project, the majority of Thousand Trails campground reservations were made over the phone. Our client wanted customers to book without making phone calls, and without using a desktop computer.
Step 1: Research the Domain
With most agency projects there’s gap between what I know about the business and what the client knows. They are the domain experts, and I need to learn everything I can about their business and customers so I can apply my design process to the problem. I conducted research in three ways:
Consume Business Data
I read business reports, talked to internal stakeholders, and learned about the different facilities and services that Thousand Trails offers.
Research Camping in General
I didn’t know anything at all about camping, and especially not about camping at luxury RV resorts. It was important to me to learn about this style of camping so I could fill the product with words and models that the customers can relate to.
Talk to Customers
This was a challenging one because we didn’t have the budget to interview actual customers. I did the best I could using customer feedback forms and reviews of experiences at the various campgrounds.
Step 2: Identify the Goals
With an understanding of the business and its customers, it was easier to identify things that the product needed to accomplish. Users needed to be able to do:
- Book and pay for reservations
- Research and choose from a variety of campgrounds
- See which campgrounds had availability and when
Step 3: Define Flows
With specific tasks in mind, I sat down with lots of paper and begin to write out some flows. At this point I wasn’t thinking about screens or any kind of UI. I was thinking about time.
Where has this person been, and where are they trying to go? What should they see at this step, and what can they do to move to the next step?
The technique I use for my flow work is based on Ryan Singer’s UI Flow Shorthand. The advantages of this method are that it is fast and disposable (which stops me from getting stuck too early in the process), and that it focuses on actions rather than screens or patterns.
Step 4: Sketch the Application Structure
At some point in the flow process I started to get rough ideas about the design patterns that I could apply in the actual application. I identified which steps deserved their own screen, and which should just be elements on a screen. As I sketched, the structure of the application emerged and I thought in more detail about the design of the individual screens.
Step 5: Design Individual Screens
The screens started to get more specific and look better from this point forward. I had a rough application structure and needed to decide which screens to work on first, keeping in mind that the goal is to get to working software as soon as possible.
I decided to start defining the Campground Details screen first because it’s the most dense screen in the application. I figured that working on this screen together would teach me and Maria (the visual specialist on the project) the most about the entire product. It’s the richest screen in the app visually, so starting here allowed Maria to uncover some of the nuances of the visual language early in the process.
When structuring a single screen I like to use the following process:
Gather the Concerns
I make a big list of all the concerns and information that I think will come into play on this screen. I don’t sort the list in any way.
Group the Concerns
I take that list of concerns and group them categorically.
Rank the Concerns
Within each category of concerns, I rank them in terms of importance to the task at hand. I also rank the broad categories. What I’m left with is a list of chunks that are grouped and sorted by importance, which gives me a great starting point for detailed sketching.
Sketch the Screen
I start sketching, blocking in large chunks according to the pre-defined categories and grouping the small bits of information according to patterns that I think will work.
Step 6: Design and Prototype
At some point we had to figure out if the thing we were designing was actually going to solve the problem. We prototyped at varying levels of fidelity to determine if our designs worked.
You don’t know if you’re right until you get to working software, but you can alleviate a lot of uncertainty by prototyping.
We had a great set of engineers building this product with us, who were able to build quickly and were more than happy to test ideas. This gave us the luxury of being able to do a lot of iteration in live code.
Step 7: Release, Test, Repeat
An unfortunate thing about this project is that we didn’t have budget for user testing during the initial design phase. We did the best we could internally but didn’t have money for organized testing with actual users.
Fortunately, as we started planning for the second release of the product, we got everyone to agree that testing would be crucial to figuring out how we could really make the product better. The budget wasn’t enormous, so we ran 12 tests through usertesting.com.
I wrote the initial draft of the scripts, integrated team feedback, and ran the tests online. We learned so much from the testing process and used that to inform the second major release of the product.
I’m proud of the work our team did on this project. In the year and three months that I was on the team we took it from a concept to a multi-platform product that is generating revenue for our client.
I got a chance to show every skill in my toolkit, including writing, prototyping, animation, user testing and interaction design. I am grateful to have worked with developers who are smart and fast, and able to prototype a lot of my ideas in native code.
Thousand Trails is well-positioned to expand their brand and mobile platform in the future. Now they have one of the most beautiful apps in the campground space.
If you want to hear about more problems our team had to solve on this project, send me a message at firstname.lastname@example.org.