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.
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.
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.
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.
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.
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.
It was a challenge to ensure bullet-proof styling given the fluid-responsive approach and decoupling of CMS structured content from layout.
- User Experience Design
- Interactive Design
- Visual Design
- Front-End Development
- Web Strategy & Planning
- Design facilitation workshops
- Interactive HTML/CSS wireframes
- Visual Design
- Final Markup
6 months (approx.)
- Foundation Framework
- Invision App
- Back-End Developer/Programmer
- Project Director
- Project Manager
- 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