header image of past House of Delegates Members

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:

The House members listing is a different user experience / visual venue that retains branding and themes from the main website, while allowing users to interact and export custom listings of Virginia Delegates.

Animated overlays in the desktop experience describe where the user can navigate to next, keeping the categories and imagery still intact

On the iPad, since animation for "overlays" can't be triggered by mouse events, a static, consistent height panel and smaller text allows for brief descriptions of  venues to navigate to.

Exposing the navbar allows for various options the user sees in various views of the app consolidated into one area.

Certain views allow for displays of page views by year, name, or locality.

Within each view selected, a set of searchable and sortable columns is produced for further investigation of data.

Clicks of member names produce a final destination showing relevant information for clerks, speakers, and delegates.

As of early 2019, the application is only responsive on the iPad, and of course desktop friendly. There are many considerations for the phone experience to display large tables of information. The following galleries describe the application’s 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.

A historical timeline was created with unique milestones' appearances through CSS and javaScript that resembles an illustration or chart

When the timeline is scrolled or swiped through on desktop or mobile devices, milestones, associated text and imagery are "lit up" or highlighted with color from the application's color palette via javaScript.

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.

The start of both a favicon and apple touch icon creation, using Adobe Illustrator ©

Using Adobe Illustrator's © clipping masks, I created a stylized representation of the inkwell and quill photography.

Creation of a smaller icon for use in browser tabs

Combining new vector objects to further brand the app when users "Add to Homescreen" with the this mobile Safari feature on the iPhone

The "Add to Homescreen" mobile Safari feature on the iPhone deploys various apple-touch icons depending on what mobile devices are being used

How the touch icon added resembles a native app

Various modern desktop browsers are now displaying apple-touch-icons in areas like "Top Sites".

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 smaller mobile devices, (phones) are now in progress. 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 a database that drives the application. Along with prominent lawmakers like the forefathers of the U.S. contitution, etc., attention is paid to history-making lawmakers of color and creed as well as women legislators. 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.

Written by 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.