Final Spritztour high fidelity mockup
Background
I started a UX Bootcamp at DevMountain in July of 2017. In the first week, the class was paired up and each team chose one of five design challenges for our first case studies. My partner and I chose the following:
How might we encourage people in our community to use the mass transit options available to them?
[…] The American Public Transportation Association reported that 74 percent of people support more mass transit spending. But only 5 percent of commuters travel by mass transit.[]So why do so many people support transit […] when they have no intention of using it? With this design challenge, you’ll work in a team to design ways to increase rider participation in your local mass transit options.
Beginning
Since DevMountain is located in Salt Lake City, Utah, the local mass transit (Utah Transit Authority a.k.a. UTA) was the perfect template for our case study. There is one train line and buses and streetcars galore. Many in my cohort use UTA to get to the campus every day. It is the most convenient way to travel in the city.
Planning
A plan of action was created, using trello.com to map out to-do’s and generate ideas. It was simple to manipulate, so there weren’t reservations to throwing any and every idea that came to mind. Multiple boards were created for various objectives.
The assumptions board was used to ideate every assumption for why people would rather drive than use UTA. This was used as the base on which we built our interview questions.
Research
Before started interviewing, responsibilities were divvied up:
With selected questions in hand, Isaak and I headed to Salt Lake Central Station to interview riders.
Interviews
Unfortunately, the first round of interviews at the train station yielded results of little value to the research.
The second session of interviews took place at the University of Utah. It’s the closest university to the city and easiest to access using UTA. Eight students and a faculty member were interviewed. About half of those interviewed have used UTA to get to school, but prefer driving, because it’s faster and they are too lazy to change up their habits. The students were asked if they would use UTA more if there was a rewards program associated with it. Most of them reacted positively to this suggestion. Below is a persona created from the interviews at the university.
Ideation
The focus of this challenge was to design for the web. With this in mind, the team hit the ground running.
Original Concept
Using the Kynzlee Carter persona, along with personal university experiences, it was thought that the website could have the following:
- collect points by riding and redeem them for prizes
- social aspect to follow and meet up with friends
- UTA route suggestions
- reducing carbon footprint stats
- badges for accomplishments (i.e. traveled 100 miles with UTA, saved 100$ on gas)
- prize feed
- ride challenges
MVP and Story Map
All of these ideas seemed potentially effective in motivating students to make UTA use more of a priority. However, some of these ideas were not necessary for a Minimal Viable Product (MVP). Sticky notes were used to aid in filtering out the unnecessary items. This was advantageous in creating and rearranging a User Story Map.
Everything was whittled down to one purpose: get free stuff. This MVP design contained three main goals a user would have:
- Registering
- Collecting and viewing points
- Redeeming points for prizes
User Flow
A messy, webbed user flow was generated to ensure that there was a page and link for every plausible scenario a user could come across, using the format, “What do I see? What do I do? What else Could I do?” Below is the pattern and the user flow for the MVP.
First Design
Once all the ideas were mapped out, sketching came next. The 10x10 method was used for iteration.
Once the best wireframes for each page were identified, the designs were taken to Sketch to flush out all the kinks.
Problems
Going from hand drawings to using Sketch proved difficult in keeping scale. What originally looked good hand-drawn, showed a lot of dead space in Sketch. To compensate, lorem ipsum was added to fill space… which resulted in later problems with writing copy. Having the actual copy prompted further changes to the design, especially the landing page. Next time, I will use real copy from the beginning to save time down the road.
First Prototype
Once the wireframes were satisfactory, Principle was used to link them all together. I found principle to be user friendly and a powerful tool, but many artboards had to be duplicated to make wanted connections. My biggest frustration was in the way principle organizes artboards and connections. All the artboards are in one line (see the bottom of the screenshot), which resulted and lots of zooming and scrolling.
Despite my qualms with this program, the final result looks really good. I have a recording of this first prototype below.
User Tests
The team went back to the University of Utah to see if the prototype was usable and heading in the right direction.
The students tested were all able to follow the posed scenarios, with little trouble. The scenario went like this: sign up > register card > view feed > view prizes > redeem points > update information > sign out.
The biggest problem that users came across was linking their UTA pass to the site. They were confused and not sure what it was. Our original design had card registration on the same page with the other registrations information. Our solution was to put the card registration on its own page along with a “what’s this?” link to inform users on what to do.
Final Design
Once we fixed the issues we came across, we started filling in the site with a name, a pretty sweet logo, good copy and a decent color palette.
Name
When the design was beginning to come together, the team started to toss around potential names for the website. Since I am fluent in German, Isaak asked if there were any good German words that had to do with travel. After some online searching, I found “Spritztour,” which is the German word for “Joy Ride.” It felt like a good fit. It shows that it’s fun to use mass transit and free stuff make people happy.
Logo Design
I was thinking about what the logo could be for our site. I wanted some that conveyed joy from the name. I then thought that a bus kind of looks like a happy face if you flip it upside down. So I took the bus icon from UTA and started messing with it in Sketch.
Copy
Fontpair.co was used to find the best fonts for the site. I originally chose Kannada MN and Hoefler Text for the site. I thought it was fine and fun, but my partner picked a different font pair to try out. I’m glad he did, because it kept the fun, but made the website easier to read.
Color palette
Finding the best colors for the site proved to be the most difficult part of sprucing up our site. We wanted to stay away from UTA’s red, white and blue color palette, so that became a limiting factor. We first tried out a few blues and greens in the palette, but they were hard on the eyes. After trying new combinations and showing them to classmates and mentors, we finally ended up with this:
Final Prototype
When every wireframe was to our satisfaction, we linked the artboards in Invision. Unfortunately, Invision does not have the same capabilities as Principle, but it is so much easier to use. The only problem I had with Invision is that there needs to be an internet connection for it to work.
Final User Tests
We headed to the University one last time to put our baby to the test. This time, everything went so smoothly. Everyone we tested was able to complete all of the tasks with not much trouble, other than taking a little bit to get oriented to the layout. Once they were familiar, everything was smooth sailing.
Summary
Isaak and I left the university feeling happy with what was accomplished. A problem was identified and solved within five weeks at DevMountain. It was difficult and worth the struggle.
I learned many things with this challenge. It is always good to ask for feedback. Negative feedback is better than positive feedback. Challenge assumptions. Ideate, ideate ideate! There is always room for improvement and next to no time for perfection.
Every step taken to solve the transit problem was a new opportunity to learn something new. That is the beauty of user experience. There are always learning opportunities available. This case study is a product of the fine teaching I have experienced at DevMountain. I may look back and shake my head at this project, seeing it as juvenile, but I will always appreciate this good start to a great future.
