Case study: Exploring Canada and UX @ RED Academy

tl;dr: I’m making an app to make it easier to explore Canada through our vast variety of national and provincial parks. This is the process I’ve gone through so far with RED Academy.

— — —

I am, and always have been, a copywriter. I love the way I can use words to tell a story, and I’ve been lucky enough to make a living of it for nearly a decade now.

But as much as I love writing, I’ve always been interested in design as well. Maybe working with art directors and product designers in ad agencies and tech companies caught my interest, or maybe I should give credit to my dad, who was a typographer.

Whatever the case, I’ve always wanted to try my hand at design. Worst case, I get a better understanding of the process, and it makes me a better writer. Best case, I add a tool to my kit. Sounds good to me.

So here I am, enrolled at Toronto’s RED Academy campus, starting a 10-week program. The first half focusing on UX, and the the back nine working on UI. This article is the case study for my UX project at RED.

For the UX portion, we’ve been tasked with building a prototype for either Parks Canada, Canada Tourism, charity aggregation, or an idea of our own. Coming up with app ideas for our course was challenging. Narrowing down those ideas was even harder.

I spent some time rattling off ideas for each of the four categories, which I then narrowed down to one per category. Here are my initial four ideas.

First, I explored the Parks Canada option. My first thought was adding a sort of I’m feeling lucky function, where users could enter the distance they’re willing to travel (along with other filters,) and automatically pairing them with parks that have campsites available.

That could be gamified with a Parks Passport, allowing visitors to get ‘stamps’ in their virtual passport.

That seemed like something simple that would actually be useful. I bounced the idea around my group of pals, and they seemed to agree.

We don’t care where we go camping; we just want to camp.

Next up was Canada Tourism. Having done a cross-Canada drive, I firmly believe it’s something every Canadian should experience at least once in their life. But, I appreciate that not everybody is able (or willing) to pack up a station wagon for six weeks and drive across the TransCanada. But if they have one, two, or three weeks, what can they do?

The idea here is to provide road-trip itineraries based on starting point, length of trip, and any must-see destinations. For example, if you’re in Moncton, have two weeks to explore, and you just need a selfie at the Toronto sign, where should you stay along the way?

TransCanadapp has got you covered.

Third: the charity aggregator.

For this one, which definitely grabbed my attention, I want to create an app that surveys users and pairs them with charities and NPOs aligned with their beliefs, values and ethics. Love dogs? Meet Save Our Scruff. Passionate about helping war vets? Wounded Warriors may be for you. Want to help the homeless? Check out Haven or Covenant House.

Once you’ve matched up with an organization, you’ll be subscribed to their news streams, as well as reports or studies related to their field.

From there, users can make one-time or recurring donations, or connect their bank account and round-up purchases to the nearest dollar, making regular micro-donations, adding up to make a big difference. (I realize the complexity of making this happen is insane, and likely impossible to overcome.)

And finally, You’re Changing: an app promoting better mental health support for Canadians from coast to coast.

Named after the Instagram-famous You’ve Changed mural at CAMH, You’re Changing takes cues from Headspace with exercises and tools to help manage daily stress and anxiety, and adds in a directory service to connect users with local mental health clinics for both short- and long-term support.

So what’ll it be? Which one am I focusing on building during my next 3 months at RED?

Parks Canada

It was very difficult to decide between Parks Canada and the charity aggregate, but ultimately, I want to spend my time exploring a way to help people explore Canada.

I do realize that I’ve already listed off potential functions of the app, but rest assured I know those may go out the window as research progresses.

Now the fun begins.

— — —

Once I had my idea sorted out, it was time to figure out my audience, the pain points they currently feel with booking and planning camping trips, and how that could potentially be improved.

To get that information, I developed a survey to find out how far people were willing to travel, their decision making process for choosing a park, and the difficulties faced when booking a trip. Knowing that the app would include booking functionality, I also asked about park amenities, preferred review types, and booking timelines.

I shared the survey on targeted sub-Reddits for camping and backpacking, as well as trusty ol’ Facebook. The survey captured an awesome 57 results, though the results may be skewed based on my circle of friends/peers through Facebook, as my Reddit posts only lead to ~10 of the responses.

Based on the results, I developed my ideal user persona, Alex:

The survey results actually surprised me a bit, and challenged my hypothesis. I had assumed that most people just wanted to go camping with their friends, and that the ideal scenario would be finding the nearest site. I planned to make the core functionality of the app a simple function that would just match you with the nearest campsite that could accommodate your group. However, the majority of surveys said that the distance wasn’t a factor, but rather planning and coordinating the trip was. Based on that, here are some of the features I’m planning, for the first 3 iterations of the app:

Phase 1 = right away, phase 3 = down the line

— — —

At this point, I have an idea of the features I want to include. But what will those pages/sections include? How will they flow? Do they even make sense? Before jumping into wireframing, I put those skills down and tried to expand on them a bit:

That was an interesting exploration, as it helped me figure out where specific functions would live, and the different pages I’d need to sketch out in my wireframes.

The step was putting together the user flow. As much as this process was good to go through for the app, it was a great way to also get familiar with Sketch:

While there’s already a Parks Canada app out there, I wanted to deliberately not use their existing structure as my own; there’s a reason I chose this project, after all.

With that in mind, here are a few shots of the very rough wireframes I started with:

Now we’re getting somewhere. There were many other sketches with both small and large variations, but the flow was starting to come together. Drawing these out also exposed some shortcomings, like the need for location permissions and region selection, to help narrow down and provide more accurate matches for the user.

— — —

Flows had been planned and wireframes had been sketched. It was time to start building these things (roughly) in Sketch. Here are a few of the first frames:

They were a good start. But, just a start. There were far more screens than these; unfortunately though, I didn’t save them all, and edited within the same file. Such is life.

After some user testing and iterating, here’s what I learned:

  • Having the back button on the bottom was unintuitive.
  • Users should be able to search for a park as a guest
  • The headers would better serve as a unique title for each page
  • The Passport page should be split up into “upcoming” and “past” trips
  • Lots more that I can’t recall right now, and small things that I changed on the spot during testing

After taking that feedback into account, trying some of it out, and trying out a lot of new ideas, I’ve got my designs *somewhat* finished (for now), and my prototype is *somewhat* put together (for now). Wanna give it a whirl? Please do. And leave comments. Lots of comments.

— — —

After building my prototype in InVision, I had a few friends of mine (all avid campers) test out the app. Some of their most telling feedback suggested that my chosen icons weren’t very intuitive, it was challenging to find booked trips, and at one round, I had even forgotten to include a home button.

Brilliant.

After reviewing user feedback, I found that it was relatively straightforward to book a trip, but finding those trips after the fact was a challenge. By updating the bottom nav and profile page to have clear, direct links to the user’s booked trips page, I think I solved that problem:

The calendar icon represents bookings, which was reported to much clearer than the passport I had been using previously.

— — —

Final presentation

After presenting my project, there were a few additional pieces of feedback that I received. The first was getting rid of the blue buttons that were in the footer nav. I heard they were distracting (I’m looking at you, George), and that there was nothing indicating which page or section the user was on at any given time. So I stripped out the blue icons, used clean lines to separate the different functions, and added a simple green box to indicate the user’s location within the app:

Updated wireframes

While minor, those changes did make a big impact. Those are the small details that I likely wouldn’t have considered, being such a novice. But, those are also the small details I look forward to noticing, and finding other opportunities to make my designs more effective — whether they’re low, mid, or high-fidelity.

Overall, I’m happy with where these have landed, and really stoked about the progress I made throughout the course.

But as I knew coming into this, there’s a lot left to learn. For now, it’s onto part two of the program: UI.

Want to check out the latest version of the prototype? Be my guest.