User experience: Roll Forward
A Plan to Revitalize the MBTA
Roll Forward is my semester-long project for Advanced Graphic Design at BU, which I presented in May 2019. We were told to pick a community cause that we care about and design a name, symbols, a UX book, and a website from scratch to bring it to life. I picked the MBTA as my cause (specifically getting the trains to run on time) and named it Roll Forward: A Plan to Revitalize the MBTA. The finished product took about four months to complete and helped me learn so much about design principles and web content copywriting (and of course, the MBTA!).
Part 1: Logo Design
The first part of the project, after giving it a name, was to come up with a logo for the cause and symbols for the three branches of the website (a timeline, a game, and an interactive play).
My professor urged us to think of the three subsidiary symbols as “children” of the main logo; each one unique, but immediately recognizable as being related to the logo. I chose a “T” made out of train tracks as the main logo, in classic MBTA green.
The three symbols were more difficult, but I eventually settled on a playing card motif to playfully represent the “game of chance” that everyone who rides the MBTA plays, given how often the trains are delayed or broken-down.
The timeline’s card was the 5 of Clubs in MBTA orange, the game’s card was the Ace of Diamonds in MBTA red, and the play was the Joker in MBTA blue.
Part 2: UX Book
After coming up with a name and symbols for our cause, we had to set about designing the website experience. Before we got to the actual coding with Dreamweaver, we turned to InDesign to create a user experience book — a visual map of the navigation for the website. This wasn’t purely technical, though; there needed to be a strong visual identity that related to our cause and would carry over to the look and feel of the website. In addition to the navigation pages, we had to have an introduction, a dedication, a conclusion, and pages describing each section of the website and how it relates to our cause. The full book I designed is available here, but I have a few selections below.
Part 3: The Website
Onto the main event! Once we had come up with a visual navigation system with the UX book, it was time to start up Dreamweaver and build the website. This was undoubtedly the hardest part for me, since I had never done real web design before, but I’m pleased with the result. Everything was built with Dreamweaver and Photoshop, using a combination of graphics, rollover images, links, and hotspots. These are a few screenshots from the main pages.
