Designing a microsite, including various data visualizations and a public comment form, to match the look and feel of a print publication.
Having worked on the Southern California Association of Governments (SCAG)'s website and collection of microsites, including the 2012 RTP and iRTP (an online interactive document), I designed the microsite for the 2016 Regional Transportation Plan and Sustainable Communities Strategy (RTP/SCS), working, once again, with the amazing graphic design team at SCAG.
Every four years, the SCAG team publishes a document about plans for improving transportation in the region. The public is allowed to make comments, the document is revised and then a final document is published, with amendments and other documents focused on the environment and financial aspects of the proposals taken into account.
The 2016 site focused on having a responsive design, and using a new service to automatically convert a static PDF into an interactive document online. My experience creating the previous RTP website, and also building out responsive design websites gave me insight into what was needed for the overall website. For the interactive PDF, I provided both design and technical feedback when researching and reviewing the various tools with the project manager in order to find one that would work for the client.
The sitemap was focused on similar content to the previous RTP microsite, but this year, the client wanted to highlight the content from the document into “Focus Areas” that displayed statistics and data visualizations.
We created wireframes in InDesign because the page template feature allowed the header and footer to stay consistent across all pages.
For this project, I expanded on the existing brand to design a website that matched the look and feed of the printed document. I worked with my team to create some initial design directions, which I then later refined into highly detailed interface comps for both desktop and mobile.
All design mockups were passed onto the client’s in-house developers, who built the website in SharePoint.
In the 2012 iRTP, I worked with our internal developers to develop a custom script in addition to inDesign’s export-to-HTML functionality in order to display the contents of the PDF in an interactive and searchable form on the CivicConnect platform. For the 2016 iRTP, the client used a third-party service, but I reviewed the transformation and provided feedback to the QA team on how to improve the look and functionality.
We launched the site in 3 stages: informative, comment period, and post comment visualizations. Each stage had design creation, revision, and functionality reviews before passing on the the work to the developers.
For public commenting, the form needed to match user comments to specific areas of the document. A complex process was simplified using a step-by-step form with a progress bar and instant feedback on the comment form.
