Mainstreet Advocates

Capitol Monitor Webapp

The Capitol Monitor system enables Mainstreet Advocates' clients to view, search, filter, save, and download legislative data that has been carefully curated for their business. MSA staff has full control over what legislation is presented to each of their clients, and how it is prioritized and bookmarked for each client's concerns. The staff at MSA have decades of legislation and regulatory monitoring experience, and their expertise is the value proposition for their clients. This system empowers them to deliver their expertise in a durable, flexible way.

A collaborative discovery process

The account team had already completed an exhaustive discovery phase that included user and admin interviews, creation of user personas and stories, and mapping out the business rules and process flow when I joined. I met with the account lead several times, making sure that I understood the business model and what the client's objectives for the project were. During this phase, I helped refine the user personas and stories so we were all on the same page.

Diving right in to wireframing

Once I was confident that I had thoroughly parsed the discovery information, I set out to do some desk research for inspiration on how to handle the delivery of large datasets to end client users in a way that they would be able to accurately find the legislation information relevent to their business. I found it in two places: online banking, and online dating.

With a few ideas in my head (and a few sketches lost to the sands of time) I embarked on wireframing the user stories. The client was insistent on a "slick" and clean interface, which made solving the problem of integrating lots of search, filter, and sort functionality challenging. Additionally, we needed to ensure admin users would be able to carefully curate the content for each end client.

Wireframes to Workflows

Since the business process flow had been documented during discovery, I felt confident in moving forward with utilizing the wireframes to create user workflow diagrams. We mapped out the majority of both the admin and end client user stories in this manner, and we were able to get client buy-in efficiently.

An active development process

To address budget concerns, we suggested utilizing a purchased theme to flesh out the look and feel of the wireframes. There were still small details to attend to such as ensuring the icons being used for display made sense with the functionality, creating buttons, and facilitating decisions on what features to display on mobile vs. desktop.

Ideating and iterating features

During the development process, MSA was in touch with their end users and we were in touch with MSA. The cycles of ideation and iteration would ebb and flow, and often start with an idea sketched out during a video conference and sent via text message into our Slack workspace. Instant communication like this, and not over-complicating the ideation process, was key to keeping our globally dispersed team in sync.

Having an established design aesthetic often afforded us the ability to skip the wireframing phase, and go straight from back-of-the-napkin sketches into high-fidelity mockups. These comps were presented to the client for validation and acceptance.

Refining UX/UI elements

Using a consistent feedback loop cycle we were able to identify a myriad refinements to the UI elements of the app, particularly in the search and filter features. The last phase of design prior to launching the product focused on providing a refined user experience for the client end user. More intuitive in-app navigation, tucking away filter UI elements in favor of an all-powerful Solr search feature, and making it easy to switch between document types were all included in this round of enhancements.