Web Design & Development

400th Anniversary Historical Web Application (2019)

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. A detailed page has been created to show the historical information and research tools within this new web application.

hodnav.house.virginia.gov

A responsive web application, (designed for a multitude of mobile devices and desktop screens) for transparent government and wayfinding of a new home for the Virginia General Assembly. The application was developed for the public-at-large, internal staff and members of the Virginia General Assembly. A detailed page has been created to illustrate the methods and use for this new mobile app.

virginiageneralassembly.gov

A website developed for the public-at-large, internal staff and members of the Virginia General Assembly. Everything from in-depth education about the legislative process in the assembly, how to locate one’s representatives, who they are, and what committees members are on is included. The resources on the site were developed within a committee over several years. The committee included the Senate of Virginia, Commonwealth of Virginia House of Delegates Clerk’s Office, and the Division of Legislative Systems. The committee was able to generate ideas and work together to present all services available to the public from each legislative branch agency.

Beyond the Default Site (application portals)

Besides the main website’s navigation and application state views, there was a need to employ a user experience where users could find specific information on House of Delegates Members. The House members listings and other apps within the main website have different feel, but are visual venues that still retain branding and themes from the main website, while allowing users to interact more in depth with information stored in databases. After a list is created to suit the user’s needs, it can then be exported as a standard spreadsheet that is familiar to users that also works with standard consumer office software. These lists can be used for mass mailings, email blasts or other research. One example of a very unique list would be how many females and their nationality are within a certain political party, that can even be displayed by their age. Another example of related applications that support the main website is that of the Interim Studies application that is described in detail below. The next steps in the evolution of the website are to make it and all subsets of it responsive, working on a variety of screens along with the desktop.

Technologies Used

• Created a brand and visual identity to keep the site cohesive and credible when referenced in its variant forms or on social media
• Custom jQueryUI .css and .js for presentation of front end animation and widget/component functionality
• Multiple state agency team effort to develop a proprietary, .net content management system, (CMS) for custom content delivery that could be moderated and approved by departmental teams’ supervisors, allowing for a managed release workflow (information architecture diagram shown)
• Help from another back end developer to develop customized php templates that refactored code and posted parameters to the address bar that could bring “section” or “related content” into view by using unique URLs
• Integration of on-site Google Search Appliance, (GSA) that allows for quick retrieval of pre-indexed or crawled pages relative to legislative branch websites for better, relative information result when searched on the site

Breaking it Down

It’s easy to get wrapped up in technologies used, losing focus on the information and a specific user experience that’s needed. A large challenge of this project was to work within a large committee setting of 9-12 staffers. During many meetings, both compromises and collective innovation created a greater project than one agency or team could have. Ways in which this was done are;

• Educating visitors about the Capitol building itself, the Virginia Legislature, and the legislative process that takes place in the historic institution.
• While educating the public, doing it in a way where relative information can be seen easily, navigated to, as well as ways to be brought back to a destination seen earlier.
• Consolidating different aspects of the the legislature into large categories, as seen at the left menuing, that then filters down into tabbed segments, and then even further to related links with brief descriptions of what the user is headed to

virginiacapitol.gov

Worked with another designer to create a new, responsive website designed and developed for the WordPress platform for both the Virginia Capitol Foundation and Capitol Square Preservation Council. Customized viewports & breakpoints for menuing and navigation for a targeted set of mobile devices. While the Virginia Capitol Foundation is a independent, non-profit, non-partisan, tax-exempt, 501(c)(3) organization, this party’s role in the site is supporting the ongoing restoration, preservation, and interpretation of the Virginia Capitol, Capitol Square, and Executive Mansion. The site’s new look changes throughout the year during various fundraising efforts to help achieve the foundation’s mission. Various implementations of ecommerce and audience direction through social media enhance fundraising. Another facet of this site is the Capitol Square Preservation Council’s role in planning and review of projects that affect the State Capitol, its historic artifacts, other historic buildings on or adjacent to Capitol Square, and the landscape and archaeological features of Capitol Square.

Virtual Tours of the State Capitol

An in-depth educational, highly interactive application for all age groups of the public. The application is especially helpful for those who can’t be on-site to see the Capitol in person. The venue is complete with Virginia SOL content, resides on the VCF site, serving as the Virginia Capitol’s Virtual Tours web application. Along with educational information, the historic aspects of the Capitol are highlighted. The now “legacy” app (uses Adobe Flash), provides both a Capitol interiors and Capitol Square experience. Users are actually able to traverse rooms and floors of the Capitol and experience 360˚ panoramic experience of many rooms, highlighting the artifacts in each. Meticulous photography was used to generate this experience. The Capitol Square experience allows visitors to see the Capitol’s landscape develop over time, pre-dating public spaces like that of Central Park.

So many were involved in gathering and presenting content and resources for this large, multi-year project. While I lament the deprecation of Flash, I was proud to be a part of what is still a very interactive and relative project.

Virginia House of Delegates Intranet

Authenticated / Secure Microsoft Sharepoint™ portal and collection of Microsoft TeamSites™

I worked in a team effort to migrate Lotus Notes™ databases and forms to the Microsoft Office 365 SharePoint™ 2010-13 platform. The audience for this project was staff of the House of Delegates and individual departments within the Virginia House of Delegates Clerk’s Office. A customized. “At a glance” homepage venuue was designed with hovercards that had dynamic lists propagated to them via AJAX w/jQuery. Secure documents and external links could be listed as well as SharePoint TeamSites for individual departments’ use and information sharing. The intranet product became very flexible for creating presentation repositories for training and day to day resources. Custom illustrations for “tiles”.

VGA Publications

Tag team project to migrate a public facing web interface from Lotus Notes™ for dissemination and ordering of civics education, legislative and visitor’s information materials. The product that emerged was a web application built with Ruby on Rails along with heroku as PaaS.

There is an admin backend that uses the paperclip gem and Amazon Web Services to generate and store the publications in the cloud. Using the nature of these tools with Rails, each publication automatically gets a unique hash/url. Changing the content of the publication doesn’t require updating links to websites that already have a link in place. The integer of the publication always gets the latest version of the .pdf or other attachment which allows admins to frequently update content, without having to worry if the newest version will be seen. The theme of the Virginia General Assembly website, its components and brand were maintained in this application.

Users of the site can either download digital content or order physical media. On physical orders an email confirmation is submitted to the appropriate department, providing shipping info and any special instructions for the department to act on.

Rooms Scheduling Application

A meeting scheduling web application for both the Virginia House of Delegates and Senate of Virginia Committee Clerks’ Offices Committee Operations Departments’ use in making sure rooms are available and scheduling meetings in them. After meetings are created this application propagates the schedule on the Virginia General Assembly Website and BrightSign™ monitors throughout the temporary General Assembly Building.

The gallery here tells about the various interactions explained with captions. Much of the work done in the application is done by committee staff, however the app is secure for those in Active Directory to have a different experience, strictly to see the schedule and request rooms for meetings. A lot of data entry is done in the reservation form view, and much collaborative design meetings and work was done to accommodate these users’ needs. Ex. (Better legibility at-a-glance when working through forms quickly and having certain options at the ready). The flow of the form was broken up chronologically, with tab options made available, so that fields could be cruised through fast. The rate of call volume and email necessitated this ease of use when creating reservations.

More Projects:

Interim Studies Application: When trying to create legislation that solves complex challenges, it may be necessary to perform a legislative study or create a commission to deal with subject matter. Such studies and the commissions that carry out research for them often meet on Capitol Square. This joint House and Senate web application was built with Ruby on Rails, HTML, CSS, and javaScript. It allows departments to maintain commissions , created by the Virginia General Assembly to post and maintain memberships, assign roles and designate meeting locations.

“iHOD”- House of Delegates legislative tracking application: An authenticated/secure responsive web application that allows Virginia House of Delegates members to track and amend legislation while using it as a reference when speaking about legislation on the House Chamber floor on a variety of devices and form factors. It was my first introduction of using the jQuery Mobile framework within rails. There were many challenges, among them being JQM’s “cards” concept when using an MVC framework or inserting partials/includes and determing if this data was to be AJAX’d in or not. JQM likes to do this with everything (Example of one of many challenges on Stack Overflow). The project is large and maintained by backend devs, to use or distribute web services for or from the application.

Virginia General Assembly Building Remodel Webcam: A minimal bootstrap page to show webcam views and timelapse photography from a proprietary video workflow contracted by EarthCam Inc.©. I acted as a liasion with the video vendor staging implementations facilitating quotes on which products would work best for the project. The overall goal currently is to document the rebuild of the new building, while preserving the 1900s facade. Most mobile devices are showing the timelapse video correctly. Soon, there will be live streaming from the Broad Street/North side of the building using a combination of LTE cams and radio transmitters connected to a LAN for this large data accommodation.