A Self-Guided UX Design Case Study
TriMet is the company that operates the public transportation here in Portland. This case study involves rethinking the digital experience of using TriMet’s app and how it could be faster, more intuitive, and better at handling different use cases.
+ UX Design
+ UI Design
A few screens from the final iteration of my redesign.
TriMet's app — which allows you to purchase transit tickets — is inefficient, confusing, and limited. The ticket-buying process takes too long and is difficult. Also, when you try to use any of TriMet's other features (transit tracking, viewing alerts, etc), it links you off to their website, instead of showing you the information in-app.
To get a better idea of what other customers were frustrated with, I started in the review section of the TriMet app within Apple's app store. It had a rating of 2.7 stars out of 5 and, as expected, quite a few negative comments from unhappy users. Some users were unhappy with how unreliable the app was; some were upset with the minimum $5.00 purchase when some tickets are as low as $1.25 (which the app doesn’t mention until you land on the checkout screen); etc.
Aside from digging into the app reviews, I also spoke with people who use public transportation more than I do. One interesting comment that came out was actually from a friend who said:
“I wish I could swipe between active tickets when my partner and I get on a bus. Right now I have to open one ticket, show the driver, go back to my tickets screen, find another activated ticket and open that up. It might not sound that complicated, but when there are a lot of people trying to get on the bus, I’d like to move as fast as possible.”
I also scanned TriMet’s website to learn more about the features listed on the site that would be helpful to show in the app. On the site, they offered the ability to track transit vehicles, view service alerts, and plan a trip (the ability to save step-by-step navigational instructions to your destination).
I started laying out designs for the three basic features I wanted to include in this app:
1. Ticket Buying
2. Transit Tracking
3. Trip Planning (step-by-step navigation)
I mocked up a few different layout options and iterated on the ones I liked. Fortunately, I'm married to a talented Experience Designer & Researcher, so I would show her different versions, get her feedback, and continue iterating. It helped that she also takes public transportation from time to time, so it was really like having an open dialog with an actual user.
A few low fidelity mockups from early on in the process
Going back to the state of design tools real quick, I did something that was probably a no-no for most designers. Although I started this project designing in Sketch, I switched mid-project to Figma as I wanted to learn it and gain some experience with it. I really enjoy Figma now, but I probably should've waited to test it out until after I wrapped up this project. :)
I hadn’t planned on testing a whole bunch of users for this project as I was just trying to gain a better understanding of the overall UX process. However, I did write up a user testing script and used that to test one user so that I could get some experience with user testing(sincethen, I’ve done more user testing which you can find in my other case studies).
This phase of the project was probably the most enlightening and surprising to me. I thought I’d enjoy the other phases a lot more, but this gave me a real appreciation for seeing users actually interact with my designs. It was an ego-check moment — I had to remove myself from my designs and not take any feedback or confusion personally. Instead, I was able to see what a user struggled with while using the app and, after diligent note taking, use this information to better my designs.
Ideally, I would’ve left more time so that I could test 7-10 users, but this was a great intro into the value of testing your designs early and often. I think it was also a good lesson on how to ask good questions so that when you don’t have a lot of time to interview as many users as you’d like, you can still be sure you’re exposing potential issues in your designs.
One of the more insightful pieces of information I got from testing was that one of the features I was planning on adding to the app — the Trip Planner — seemed unnecessary. I realized that most people actually felt more comfortable using a navigational app they used regularly (like Google Maps or Apple Maps) and didn’t want to use the TriMet app to navigate around the city. It seems counter-intuitive to use two different apps rather than just one; but I also understand wanting to use an app that’s familiar and that would have more functionality.
So I decided to scrap the Trip Planning feature altogether for this version. Had I not done the testing, I would’ve continued to design a feature that most users wouldn’t have wanted to use in the first place.
Given the insights user testing provided, it was clear there were some issues within the app that I needed to rethink, reword, or reorganize. One of the most interesting things I learned while testing was how important word choice and UX copy is within the app. I realized I had used the word “Passes” in some instances of the app and “Tickets” in other instances, which had confused the user I tested. That’s just one example, but there were others which helped drive this point home for me. So when I dove back into Figma to iterate on my designs, I also spent a good deal of time iterating on the copy used throughout the app.
The next phase was deciding on colors, illustrations, and the overall brand and vibe. I decided to keep the app clean and minimal since the main point of the app is to quickly purchase or access your transit passes, and finding an ETA for the next arriving bus or train. For color, I chose an accessible blue that passes AAA for large text and AA for any text size.
After finalizing all those decisions, I then focused on refining the UI elements within the app. As a designer and developer who utilizes a design system, I made sure to create components that could scale well and be used in multiple parts of the app. You can see some of the designs below.
Mockups for the pass activation process. Notice the ability to swipe between multiple passes — a feature that was requested (and quoted above) by a long-time app user and friend.
I learned a lot from this case study. This was a hands-on learning experience into just how different Brand & Marketing design is from UX design. I can whip up designs for a landing page or a new section of a website and then build it out all within the same day. And marketing design is often about getting visitors to your site to sign up for a free trial; whereas UX design is helping your users to accomplish their goals with your product.
No project or process is perfect, and with this being one of my first UX projects, it clearly had room for improvement. There are definitely a few things I’d do differently next time, mainly:
1. Spend less time with the visual design early on.
The web designer in me wanted to make designs pixel perfect even during the LoFi mockup phase, but this can be a waste of time if you haven’t tested yet.
2. Spend more time testing and iterating.
As mentioned above, the testing phase was very enlightening to me. I got great feedback and realized I didn’t need to continue designing for a feature that my users wouldn’t use.
Of course, it’s important to continually test and iterate on your designs. Just one round of user testing isn’t really enough — though I’m sure for some companies, that may be all the time you get, so it’s important to ask the right questions.
3. Don't switch design editors in the middle of a big project.
This is probably obvious to most people, but I let my curiosity get the better of me. Lesson learned!
The redesigned pass purchasing experience.
The funniest part about this entire process was that, right as I was wrapping up this case study, I got an email from TriMet that they were sunsetting this app and forcing users to use a new third-party application to purchase tickets.
So they must've known how poor of an experience they were providing and, rather than fix their app, they decided to move everyone over to a new one. 😆