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.

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.

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 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.

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.