ACE Rail
Public Transportation That Connects People

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

Our project team was tasked with creating a large-scale responsive website, integrating the functionality of an existing mobile application, and ticketing platform. We completely rethought the way the organization interacts with their users online - shifting to a model that quite literally embodies the user groups identified during our research. We turned our head away from established models of transit websites in order to create something that was special, something that could foster an emotional connection with users.

UX Design

Persona Development

We poured over existing marketing reports and surveys for demographic and psychographic information and 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

I created a hybrid - content inventory / sitemap document. Given the large number of pages involved, 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.

Personas informed an information architecture schema that is geared more around user groups than how the organization is actually 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

We didn't want to go into a corner and design something and do a big reveal. 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

I began by sketching rough layout ideas, iterating on them, and ultimately turning these into wireframes. At this stage, I put forth lots of design decisions such as a page templating schema, navigation schema, and module/component features. I would be scaffolding the front-end markup and styles, so it was crucial that these ideas were scalable across a large number of documents as well as devices sizes through responsive layouts.

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.

Visual Design

Style Tiles

I created variations of style tiles to present visual options for design elements. 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, the rider guide design team, and professional photographer to ensure cohesion amongst all efforts.

Visual Design Compositions

I created visual design compositions with Adobe Photoshop of various page templates to show a more high fidelity portrayal of wireframes, and begin to incorporate design elements from the style tiles.

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.

Interaction Design

Interactive Responsive HTML/CSS Prototypes

The site would be fully responsive and not just use "adaptive" break-points, in order to accomodate for a number of growing screen sizes. Creating a fully fluid responsive layout was a HUGE challenge, especially give the scale of the website and it's use of a mega-menu navigation and large imagery. Prototyping in code allowed me to see the content choreography between screen sizes.

Front-End Code

Working hand-in-hand with the project back-end developer, I coded the HTML markup and CSS styles for the website. I built numerous page templates, converting my static HTML into Kentico CMS psuedo programming logic, built forms, migrated and tested content.

Responsive Design

It was a challenge to ensure bullet-proof styling given the fluid-responsive approach and decoupling of CMS structured content from layout.

Project Details

Role

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

Deliverables

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

Duration

6 months (approx.)

Tools

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

Project Team

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

Agency

PMC

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

Jacob Swift - Digital Craftsman

Listen. Act. Trust.

jacob [at] jacobswift.com

©2017 Jacob Swift | Powered by WordPress & Reactor

About Me

I am Full-Stack UX designer: a strategy-minded user experience designer who conducts research, writes code, and does visual design.

Core Expertise

  • HTML/CSS/Sass
  • Visual Interface Design
  • Experience Design
  • Interaction Design

Core Tools

  • Text Editor
  • Browser Inspector
  • Photoshop
  • Pen & Paper
  • Omnigraffle
  • Invision App

Common Deliverables & Artifacts

  • UX Artifacts
  • Live-code Styleguides
  • Hi-res screen comps
  • Production-ready front-end Code
  • WordPress Themes
  • Clickable Prototypes
  • Final Launched websites

Outside of my Wheelhouse

  • Engineering, Programming, Back-end
  • Javascript Frameworks
  • Illustration & Graphic Art
  • Motion Graphics

UX Design Immersive

During Summer 2014 I was lucky enough to be able to participate in a ten week, full-time, immersive course specifically focused on User Experience (UX) design. The course is crafted by top practitioners in the field, with a specific focus on honing students in their path to a UX design career. Through 400+ hours of face-to-face instruction, presentations, discussions, guest lectures, interactive lessons, real-world client projects, and personable mentoring, the course provided a rounded understanding of the entire UX process. The focus was on core skills, tools, and intensive design sprints encompassing the entire user experience design process. From research and ideation to prototyping and testing, we solved design problems utilizing a industry-proven set of skills and methods.