ACE RAIL
Public transportation that connects people.

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

Role

  • User Experience Design
  • Interactive Design
  • Visual Design
  • Front-End Development
  • Web Strategy & Planning

Tools

  • HTML/CSS
  • Foundation Framework
  • Photoshop
  • Invision App

Project Team

  • Back-End Developer/Programmer
  • Project Director
  • Project Manager
  • Illustrators
  • Client

Duration

6 months (approx.)

Agency

PMC

Project Background

www.acerail.com is a commuter transit rail train website and online ticketing system. I completed the project while working at PMC, serving as a creative services consultant and designer. 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. As a fully responsive website, we were tasked with eliminating the existing mobile application in order to create one content management system that would serve a number of usage contexts. The project was very impactful for the organization because it completely rethought the way they interacted with their users online - from organizationally structured initially to becoming a site that quite literally embodied the user groups identified during our research. We turned our head away from established models of transit websites in order to create something that could foster an emotional connection from the ground up. Our efforts were a driving force for the vision forward for this organization, and really inspired staff, stakeholders, and users to reenvision what a commuter train could feel like. As the sole designer and front-end developer, my personal contributions had a huge direct impact on the direction, completion, and success of the project.

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 fromproject 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.

Deliverables

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

Key Tasks:

  • Lifestyle transit - people over trains. “Connections” and “ACE Life”
  • Combining desktop and mobile site into one platform
  • Easier Navigation
  • flattened site
  • mega menu
  • more logical groupings - group by intent and segment
  • modular componentry design - ui and services
  • Lots of content templates and content types
  • User Segments focused
  • Making it easier to start and continue riding

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.

User 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

As a government institution, the ACE Rail website contained many pages and documents. We 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.

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 oppening up the design process. During these sessions we had various activities such as card sorting (both open and closed), empathy building exercises, brainstorming, and whiteboard prototyping.

Sketching, Wireframing, 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 weight 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.

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 prespective 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.

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.

Interactive HTML/CSS Prototypes

The site would be fully responsive. Having done several break-point "adaptive" based layouts in the past, I was aware that creating a fully fluid responsive layout would be a HUGE challenge, especially give the scale of the website and it's use of a mega-menu navigation and large imagery.

Next Project
Modernizing a digital brand.