Portland, Oregon
 
Role:

Web Designer/Developer (Current)

 
Day to day responsibilities:

UX Design, Visual Design, Motion Graphics, Video/Content Production, Animation Storytelling, React Front-end Development, Photography

 
Tools:

Adobe CS, Gitlab, VSCode, Sourcetree, WebexTeams, Slack

 
 

Rider Communication

 

The team I work in speaks directly to our customers, also known as public transit riders. However, riders can range from frequent riders to even non-riders. Understanding how we communicate to each type is vital to the role. At TriMet, we take the time to listen and understand customer feedback by regularly conducting surveys, asking Twitter polls, and sending nice emails directly to them. Through this process we build rider personas that we try to speak to through our messaging and design.

Daily my work can range from developing MAX arrival screens for the Portland International Airport, to taking photos for our instagram on my way to work, to animating traffic patterns when there are road changes or improvements, to designing graphics for apparel. My work environment allows me to pursue projects I'm interested in.

I’m involved in many projects, here are a few:

 
YearProjectStatus
2019Open Trip PlannerWIP
2019New Onsite Transit TrackerWIP
2019Google Earth FlythroughsOngoing
2019Photography: InstagramOngoing
2018TriMet App ConceptWIP
2018PDX Arrival ScreensPhase II
2018New Club, New BlogComplete
2017Web Style Guide LinesOngoing
 

Open Trip Planner

This project is still in progress so I’m very limited to what I can share. My role in this project is the UX Designer and a member of an internal committee.

 

The highlight of this project so far has been the process of creating user workflows for TriMet's mod. From designing trip plans to real-time transit tracker information and vehicle locations screens this project has been my pride and joy. If you're interested in seeing my mockups, email me directly.

 

For now learn more and enjoy Beta

New Onsite Transit Tracker

Improving the UI of arrival information for riders is just straight up fun. It is great to be involved in a design that has such high visibility within the town I live in.

 

Problem:

 

With the consideration of upgrading our display screens out in the public, we needed a refresh to the new design. With new infrastructure came new capabilities.

 

Current look

Research:

 

Questions we asked our riders:

 
Is the current transit tracker useful?

Purpose of asking: So we can get a sense of any immediate red flags that people dislike about it.

Results: Turns out people trust the information as being more reliable than third-party apps.

What other information would they like to know at their stop?

Purpose of asking: So we can get a sense of what people want to generally know when looking at these screens.

Results: The top want is vehicle location and it’s relation to where the rider is.

 

Design:

 

The knowledge we gained by simply asking riders jump started the design. The three big improvements I wanted to solve was:

  • Visibility, increasing contrast and improving the ADA compliance score.
  • Context, at a glance users should understand where they are and where their next vehicle is.
  • Design, create something elegant that included an ad.
 

Refresh look

 

Hopefully the new design speaks for itself. But to summarize, in order to reach new design requirements:

  • I strongly suggested we continue with dark scheme because of how it performs better with outside displays.
  • Added more colors to service lines, a headline for more context, and applied more styles for a better distinction between each arrival.
  • I've also included a screen with a you are here marker on a map to give users a sense of where they are and where their vehicle is if in the bounded area.
 Enjoy the XD prototype

Google Earth Flythroughs

google earth fly through

My manager walks up to me one day and says, “I think it would be cool to have a visual for new service lines. Like a top down flythrough.” Immediately I thought of the Google Earth's tour feature.

 

Problem:

 

We needed a visually engaging way to show people about new service, show how it connects people within the neighborhood and points of interest along the route.

 

Solution:

 

Using Google Earth's tour feature, produce a video highlighting useful places to know along the new service route.

 

Challenges in the process:

 

Building the initial video was quite the challenge but having gone through the process, the second and third time around became much easier.

  1. First challenge was making sure I spoke to the right people and stakeholders involved with marketing or building the service route; I needed to understand who the route was made for which influenced what exactly to highlight on the map given the video format.
  2. Second, I wasn’t sure on the most efficient way to record and produce a fly through video. I had gone through a lot of trial and error working between Google Earth and After Effects but eventually I established workflow for effective object tracking and a style/pattern for animating text objects.

My favorite part was syncing it up all together with music.

Enjoy the Youtube playlist

Instagram Photo

Proud of this one because it is probably the coolest photo I’ve ever captured. But the real props goes to the person that made TriMet’s such a respected account, Brian K. Lum.

Follow TriMet's Instagram

TriMet App Concept

 

Problem:

 

We get asked a lot, "Why doesn't TriMet have a native app?" This one is tough to answer but the short answer is riders haven't asked for it.

 

Solution:

 

We needed to visualize few key interactions to get the discussions going.

Rider Rewards

Trip Tools

User Accounts

Rider Service

Status:

The visuals helped. It sped up conversations by showing rather than explaining. It aided the discussions around conveying the benefits as well as raising questions that point out complexities. As always, we will continue to work toward a solution.

PDX Arrival Screens

 

This project involved working with The Port of Portland and our internal IT department. My main role in this project was lead UX designer and to support our senior developer with front-end Reactjs development.

 

Problem:

 

At PDX, TriMet’s MAX Red Line services people between the airport and downtown Portland. Prior to the project we did not have any onsite arrival/departure times for the MAX.

 

Solution:

 

Give people arrival information in specific locations, near the arrivals exit at the ground floor baggage claim and upstairs departures which is right above the MAX.

 

Design:

 

The only requirement was that the screen we designed had to account for portrait and landscape, 16:9 aspect ratio, and have reasonable responsiveness for screens 29 - 36 inch screens. The way our process went, warranted a two phases. First to test feasibility, second to apply more data to the display.

 
 

Phase I: Minimal viable product:

 

We landed on the Version 1 design for the first phase. This included iconography of MAX Light rail, arrival times, current time and TriMet branding.

 

Phase II: More branding, plus alerts!

 

The second phase we used Version 2 and had new considerations that affected the design.

 
  • People arriving in to PDX, may not recognize the light rail symbol. Instead use the flat illustration of the vehicle instead.
  • People may not know that they are looking at realtime information at a glance. Include a pulsing dot in vehicle arrival block if time is estimated.
  • We have alert information! Created two alert layouts, one for a regular alert, another for a priority alert.
  • People are viewing this from a far, we need to account for that. Changed each arrival to have their own capsule, went darker on the background color but not pure black.
   

Result:

In the end, we wanted something simple and effective. We already have plans for phase III, maps, real-time vehicle locations, and more.

Enjoy the prototype for Phase II design

New Club, New Blog

As we prepare for a new marketing strategy, we needed a refresh from our old blog.

 

Strategy:

 

Before designing we considered a few things:

 
  • We noticed people didn't search for content by filtering by category but used search.
  • Content was found contextually. People usually would find particular posts from referral links from search, social or email. The front page was never the usual starting point.
  • We weren't giving the signup for Riders Club the prominence it deserved.
 

Design:

 

So what we did was make a lot of decisions before we started and committed to those constraints in the design in order to keep the blog as clean as possible. For example:

 
  • In addition to not including a category list as navigation, we decided we didn’t need a menu either, a home back button sufficed. This kept it extremely minimal at the top.
  • We decided to keep getting rid of sharing options on blog post pages. The amount of times it was used relative to the amount of traffic pages usually get warranted the widgets removal.
  • We wanted to leverage our awesome pictures. We copied from other blogs we liked and noticed the single column content format works best, especially for mobile.
  • Riders Club signups sign up a prominent section for most of the sites pages.
 

Results:

 

An increased rate of 5% more traffic per month and an increased rate 15% of Rider Club signups from the blog. Follow us!

Follow and enjoy the blog

Web Style Guide Lines

 

Before working at TriMet, there was a style guide for print and general messaging but none specifically for digital design. This was my chance to establish a TriMet Design System.

 

Problem:

 

Putting myself in the shoes of a new hire or a web contractor that is assigned to a project, we didn’t have an official place describing an agreed upon style guidelines.

 

Strategy:

 

Work with my manager to develop a style guideline that worked in parallel with our messaging. With our design drive the direction with our development team to use StoryboardJs to have an official place to manage our React UI components.

Enjoy our preview style guide
 TriMet Motion