ACE RAIL
Public transportation that connects people.

Website & online ticketing platform redesign for public transit agency ACE Rail.

Role

  • User Experience
    • Interaction Design
    • UI and Visual Design
    • Web Strategy & Planning
  • Front-End Development

Key Tools

  • Photoshop
  • Invision App
  • HTML/CSS
  • Front-end Framework

Project Team

  • Back-End Developer/Programmer
  • Project Director
  • Project Manager
  • Illustrators
  • Client: Marketing team, SMEs
  • External Branding/Marketing Agency

Key Deliverables

  • Personas
  • Design facilitation workshops
  • Interactive HTML/CSS wireframes
  • Visual Design
  • Mockups
  • Final Markup

Duration

6 months (approx.)

Agency

PMC

Project Background

What is it?

ACE Rail is a commuter transit rail service similar to CalTrain. It has largely served as a means to get riders from the central valley to silicon valley. Our team was tasked with overhauling the website and online ticketing system. I completed the project while working at PMC, serving as a creative services consultant and designer.

The team

Our project team consisted of - myself, a project manager, project director, and back-end developer. My role was that of designer and front-end developer. I created user personas, wireframes, sitemap and iA documentation, content inventory, design facilitation sessions, card sorting activities, prototypes, visual design mockups, art direction, HTML/CSS layout (responsive), UI design, usability testing, production-level front-end code, graphics, etc.

Collaboration

I worked closely with our backend developer/programmer to ensure features were being completed in accordance with to our design strategy and initial visions laid out during site planning, wireframing and prototyping. I had clear and open communication with our project manager and project director on a very regular basis to ensure we were hitting milestones on time and on budget. I got buy-in from project leads to recruit the assistance of illustrators to help create a large custom iconography set. I regularly convened our entire project team as well as client team (designers and non-designers alike) to facilitate design studios to ensure a diverse range of ideas, robust feedback/critique cycling, and to build morale and support for the project as it moved along.

Proto-persona Creation

We knew the project would have a much more user-centered design than the existing site. We started off by pouring over existing marketing reports and surveys collected by the marketing team there to get an idea of some of the demographic and psychographics. We held stakeholder interviews with staff to better understand their ridership. During meetings at their headquarters, I would observe riders entering the station - waiting, purchasing tickets, interacting with customer service representatives, boarding, etc. Through these reports, interviews and observations, we were able to begin to paint a picture of who the users (and potential users / non-users) are.

Rider Matrix

The persona creation process lead to a small but mighty artifact I called the "rider matrix." This encapsulates the core groupings of users. To keep the site redesign user-centered, we had to ensure that the way we structured the site and it's contents met the needs of all of these users.

Content Inventory & Sitemapping

A hybrid approach

As a government institution, the ACE Rail website contained many pages and documents - board meetings past and future, press release archive, news, reports, rider information and other content types. I started by creating a hybrid content inventory / sitemap document. Given the large number of pages, a spreadsheet format was chosen over a more traditional visually hierarchical diagram due to it's ability to hold vast amounts of information and display them clearly. I captured the existing site structure as a starting place using a software called Xenu Linksleuth. The software outputs a very raw and unformatted CSV. Importing this into excel and cleaning out erroneous links using numerous excel formulas such as COUNTIF and the like provided a clean starting place.

Structured Content Models

From there I worked with our personas to begin to draft a suggest information architecture that is geared more around user groups than how the organization is run. To make this effort multi-functional, I also included fields for suggested template type, content type and other valuable meta information. Because this would be going to our client to assess content, I also included a section for an OUCH Assessment - denoting content that is outdated, unneccessary, current, and have to write.

Design Facilitation & Planning

A big part of the design process was about facilitation for staff. We didn't want to go into a corner and design something and do a big reveal. We had many meetings both in our offices as well as at their headquarters to make sure the process was very participatory and collaborative. We really respected the institutional knowledge that they brought to the project and wanted to unleash that by opening up the design process. During these sessions we had various activities such as:

  • card sorting (both open and closed)
  • empathy building exercises
  • brainstorming
  • whiteboard/stickies prototyping

Sketching, Wireframing

Lo-fidelity rapid prototyping

After lots of work to determine how the site should be structured and what key features would be developed to help users achieve their goals, I finally was able to start turning things into tangible layouts. I began with sketching rough layout ideas and iterating on them, and eventually making some of these concepts more concrete in the form of wireframes.

This was a very important phase because it started to put forth lots of design decisions such as a page templating schema, navigation schema, and module/component features. I had to weigh out closely what we could feasibly complete given our scope and timeline - and not just throw pie in the sky ideas out there. Ultimately I would be scaffolding the front-end so it was crucial that these ideas were scalable across a large number of documents as well as devices sizes through responsive layouts.

Style Tiles

During the time of the redesign, ACE Rail was also undergoing a rebrand — redesigning it's branding guidelines, huge rider guide brochure, logo and an overall image overhaul. Our team met with the client and their chosen graphic design team and professional photographer to ensure cohesion amongst all efforts. I created variations of style tiles to present visual options for design elements. It was important to keep in mind how these style choices would reflect the overall approach. For instance, we were attempting to attract new riders so a greater emphasis would need to be placed onto photography to draw these users in.

Visual Design Mockups

In the design process, we allowed for each artifact and deliverable to inform the next, so as to create an organic, living project that could grow and morph throughout the process. With each iteration, feedback was incorporated. I created visual design mockups of various page templates to show a more high fidelity portrayal of wireframes and begin to incorporate design elements from the style tiles.

Ticketing transactions

Product Features, Modules, UI Design

Hot-task Navigation System

Mega menu surfaces powerful hot-tasks with one click

Template System

User Testing & Feedback

With visual design mockups completed, we uploaded the screens to InvisionApp to get feedback from users. We were lucky enough to be able to tap into a very valuable group of existing riders who were on a committee to help guide the rail into the future. We also sent the prototypes to various non-riders to get a fresh perspective on the "onboarding" process of welcoming new riders to the system. These prototypes made their rounds with ACE staff and board members as well.

We received lots of valuable information during these tests, most importantly was feedback on expert users on the priority of service alerts to their daily commute which drove placement of this feature. My role was to aggregate the insights and parse them into actionable iterations.

Photography Art Direction

In order to create a more immersive experience the site design utilized large photography. It was crucial that the professional photographer chosen by ACE Rail provide us with shots that would work for these layouts. I created art direction specs as well as a shot list for the various sections of the site.

Interactive HTML/CSS Prototypes

Creating fully fluid responsive layouts can be a HUGE challenge, especially given the scale of this project and it's use of a mega-menu navigation and large imagery. To combat any potential hiccups, it was important to create living breathign live-code layout prototypes. These allow for a clean template language to emerge, determine the choreography of content blocks shifting scale and priority, and serve as the basis for live production code.

Outcomes

  • Sunsetted outdated mobile app into robust comprehensive RWD platform
  • Streamlined navigational flows - making it easier to start and continue riding
  • Flattened site structure to reduce complexity of flows
  • Mega menu surfaced powerful hot-tasks with one click
  • Content restructured by user intent and user segment

  • Modular component design system - both ui and backend services
  • Structured content types and templates for manageability and search optimized
  • User Segments focused information architecture
  • Moved ACE's digital presence to lifestyle transit - people over trains. “Connections” and “ACE Life”

Next Project
Modernizing a digital brand.