Website & online ticketing platform redesign for public transit agency ACE Rail.
- User Experience
- Interaction Design
- UI and Visual Design
- Web Strategy & Planning
- Front-End Development
- Invision App
- Front-end Framework
- Back-End Developer/Programmer
- Project Director
- Project Manager
- Client: Marketing team, SMEs
- External Branding/Marketing Agency
- Design facilitation workshops
- Interactive HTML/CSS wireframes
- Visual Design
- Final Markup
6 months (approx.)
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.
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.
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.
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.
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
- whiteboard/stickies prototyping
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.
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.
Product Features, Modules, UI Design
Hot-task Navigation System
Mega menu surfaces powerful hot-tasks with one click
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.