Legislative Testimony Platform
Re-skinned and revisited UI/UX of a non-profit platform providing testimony about policies to legislators, sponsors, and committees.
Project overview
Overview
A few graduate students joined together to create a project that values:
- Transparency on legislations
- Empowering users to provide testimony
- Knowledge and content on how the Massachusetts Legislation Process works
With this, the Massachusetts Platform for Legislature Engagement was born. Shortened to the acronym MAPLE, this platform provides all the values required
Code for Boston
Students grouped together with the Non Profit Code for Boston to build out the Alpha version. Code for Boston provides opportunities for budding designers and developers to volunteer with projects that help the Massachusetts community and other nonprofit sectors.
process
Beta Goals
When I joined, the team was receiving their first feedback from their Alpha testing phase. They receive high praise on functionality but request to provide more user value with certain features as well as an overall rebrand and reskin.
This was how I got started.
Logo Exercises
I worked closely with stakeholders to establish what the product vision is and started to whittle it away. I did a quick competitive analysis and looked to social media platform for inspiration of how to drive UI and overall style to the current existing feature set.
With MAPLE, I leaned on the tree element and constructed a logo centered around a tree. From one perspective its just a simple MAPLE tree but standing away, one will notice the outline of the great Massachusetts state.
UI Strategy
Overall strategy here was to set up a UI Strategy and Design System set around the current tech stack of Bootstrap and Firebase as their database.
I worked closely with engineering and recruited a few other designers to start to break this up into sizable chunks of work. We establish primary colors, button styles, material design input fields, and other industry standard UI.
Branding Design
Branding relied on neutral tones for containers (with a deep tan as the background) and white spread sporadically through the page.
UI elements rely on tones of blues and red (with the mixture of white), this palette creates an essence of the American flag and politics, without being too heavy handed. The overall illustrations and other elements focus on flat styles and heavier border to serve as a contrast to the UI. The illustrations were created by me and my team.
deliverables
Features and UX/UI Improvements
As we rebranded and reskinned the UI, we tried to provide useful UX heuristics and easy win features throughout the project.
Testimonies
Testimonies have been restructured in the writing process to allow recognition over recall. Being able to see the information without forcing them to try to remember it. This is established through provide a side navigation, that allows users to reflect on a multitude of different information/use cases:
- The Policy - users can easily rely on this input to be able to recall exactly what and why their stance is a particular way when writing their testimony
- Sponsors and Committees - To serve as a reference point so users can easily enter in their emails to reach out to these parties.
- Their own legislators and their stances - If this testimony is to serve as a Call to Action for their legislators or a counterpoint/support of their stance, users can reference this information in addition.
Learn and About Pages
Current implementation was two long pages with nothing but text. The design was broken into the strategy of better information hierarchy and visual hierarchy by breaking these pages into separate and easily findable pages. The designer who led this wanted to introduce color and branding as well to provide a casual and fun spirit to the page.
All Bills Listing
Ease of use was key from alpha to beta with this page. We introduced a multitude of features:
- Filtering - Users can filter by sponsors, location, status, and if a hearing is in progress
- Search - Users can search by keywords in the policy or the overview of the policy
- List Item Design - We moved to list items over tables to make it easier to digest data and the filtering and search could have typographical element changes to make match reasons obvious.
Mobile
Mobile was top of mind for rebranding. Every layout respected Bootstrap grid and there was strict and easily predictable design styles going from desktop to mobile that made the design and implementation of the new UI easy.
Policy Details Page
Information Hierarchy was the main focal point here. I wanted to provide easy to find and scan through what other users' stances are of testimonies. I also reworked the branding into the page and how testimonies are entered.
Another key value is information, users want to be able to see who the sponsors are, legislations, etc. The other feature being implemented here is the idea of following policies. Users can now be informed on impactful changes or new testimonies with this new iteration of MAPLE.