In 2019, the Virginia General Assembly will commemorate its 400th anniversary of being the first and longest continuous English speaking legislative body in the western hemisphere in the ongoing experiment of democracy.
The Process & Idea:
To commemorate the contributions of these individuals, a web application was envisioned and requested by the Clerk of the House of Delegates and my supervisor. In creating the application, a vast amount of historical information was gathered from several sources. This data was obtained from the Library of Virginia, University of Virginia, along with New York State Library and the public-at-large.
A large workgroup of the House of Delegates Clerk’s Office participated in researching hundreds of years of history, collaborating on how the content would be displayed by front and back end developers who determined the outcome of the UI/UX along with structures to hold and organize database table structures for insertion of the data into the application. A very special shout out to DB master Danny Musco and javaScript queen, Nikia Shaw who helped with complex relational DB scenarios and unique, client-side menuing solutions requested by staff.
Another large group of stakeholders were involved in the creation and usability of the application. This group was staff from the Dr. Martin Luther King, Jr. Memorial Commission, Library of Virginia, Jamestown-Yorktown Foundation, The Encyclopedia Virginia Project of Virginia Humanities, as well as the Secretary of Education of the Commonwealth of Virginia.
User Experience and Presentation:
At its initial start of development, many meetings were held with the internal development team as well as the stakeholders mentioned above. The start of the ideation and team presentation process evolved from designs created with software including Adobe Illustrator™, Sketch™, and Sketch Cloud™. Creating and then iterating on several basic information mockups for presentation were done first. After this groundwork was laid down with semi-interactive workflows, a development team and myself focused on fine interaction patterns. Unique scenarios were handled with HTML, CSS, javaScript, and the Bootstrap framework.
A huge challenge still remained. This was to make the application cross-browser responsive, (presented on a multitude of mobile screens), and of course remain desktop friendly. There are many considerations for the small form factor of phone displays with the challenge of presenting large tables of information. This was done with many CSS Media Queries to accommodate for such a large amount of screen experiences, in both landscape and portrait views. I based the device widths and their heights along with DPRs (Device Pixel Ratios), to pinpoint the myriad of designs and experiences. The following galleries and video below describe the application’s desktop and mobile options for information and research of the historic body with image captions for further explanations.
Dynamic Historical Timeline
There was a need to display a visual, database driven timeline in a way that was more appealing than a plain list of eras. These milestones where the legislature met over time were presented as an illustration-like, numbered chart. The user can move through milestones. When the user scrolls on the desktop or swipes down the milestone list on a phone or tablet, markers in time are highlighted, bringing emphasis to each. This allows the milestones to stand out from the rest, be brought into focus and made easier to read.
More can be viewed about the technologies involved by reading this blog post meant for web designers and developers.
Creation of Branding and apple-touch-icon(s)
I created a consistent brand for the application for print promotion, desktop browser tab icons, and touch screen icons for the application on mobile devices.
There was a process where imagery needed to be compressed into very tiny icons, though still recognizable and relative to the app’s use. Also at play was a theme and variation for larger icons that allowed for more elements. The gallery here with captions shows the design process for this imagery. It all started from a photo I took in the Capitol building. I thought this represented the record keeping that the application displays.
The Future and Maintenance:
Ongoing efforts to make the vast database accessible on new mobile devices, (phones and tablets) will always be in progress as new ones are always coming. Along with this work, the public-at-large can provide input through an email address. A group facilitates and legitimizes information received. Photos and additional biographical information can then be updated in another staff owned application. Its database drives this historical application from web services.
Along with prominent lawmakers like the forefathers of the U.S. constitution, etc., attention is paid to history-making lawmakers of all colors and creeds as well as women legislators. Selected lawmakers can then be cited in social media and other web presences owned by the Commonwealth.
Celebrations in monument forms on Capitol Square in this same vein can also be seen at the Virginia Capitol Foundations and Preservation Council’s website.