Project Summary

Context

'Legislation App' is an all in one solution that allows the citizens to easily access legislation on the local and national level anywhere, anytime through a mobile app. Clean UI, bookmarks, search filters and notifications make finding a keeping up with legislation as it happens a breeze.

Accessibility and education are at the forefront of the design with a built in text to speech module, tooltips, glossary and color coded design.

Problem

Many tools for browsing and searching legislation at the local and national levels are often difficult to use and targeted towards professionals, as such access to these tools is often prohibitively expensive.

Solution

Develop a easy to use software tool (app), targeted at the general public that compiles legislative data into a single place to keep people informed about bills that affect their communities.

Student Work

Student project as part of the Google UX Certification Program on Coursera

Role

Lead UI/UX Designer

- Planning
- Wireframing
- Prototyping
- User Testing/QA
- Design

Timeframe

Version One | 1-year

User Personas

Name
Goal Statement
Pain Point
Name
Chidi, 26
Student
Goal Statement
Needs to be able to know what's happening in their local government as they happen.
Pain Point
Government legislation websites are often old and hard to navigate.
Name
Linda, 35
Manager
Goal Statement
Needs a way to keep up to date with specific bills and representatives activity locally.
Pain Point
Doesn't have a lot of time due to their busy schedule
Name
Cindy, 43
Accountant
Goal Statement
Needs a way to quickly search and read new legislation.
Pain Point
Legislation is often long and tiring to read and is straining on the eyes on small screens.
Images by pikisuperstar at freepik.com

Ideation

Initial Concepts

From the beginning the goal was to ensure ease of access and being informed as soon as things happen. I was able to brainstorm how to best design a system that leverages the advantages of mobile devices to deliver the most robust experience.
A drawing of the main user experience flow for the legislation viewer app. It showcases all of the various screens with notes and connections.

Wireframes

The initial wireframes were built around the user personas goals and consisted of three core flows. 'Searching', 'Bookmarking/Saving' and 'Subscribing/Notifications'.

These wireframes were combined into a prototype and user tested.
A mobile phone displaying the wireframe of the home page of the legislation viewer app.
A mobile phone displaying the wireframe of the search page of the legislation viewer app.
A mobile phone displaying the wireframe of the search filters page of the legislation viewer app.
A mobile phone displaying the wireframe of the search results page of the legislation viewer app.
A mobile phone displaying the wireframe of the notifications page of the legislation viewer app.
A mobile phone displaying the wireframe of the legislator/member profile page of the legislation viewer app.

User Testing Results

Usability Studies

Multiple rounds of moderated, task driven usability studies were conducted. Participants were given a number of tasks to complete within a core user flow, once completed were asked a number or questions ranging from their experience with the user interface, points of frustration and if there are features that they think are important that are missing in the design.
1
Feature Request
Most users in the study wanted a notifications page to bulk manage notifications and what they have notifications turned on for.
2
Feature Request
Many users want better a system for bookmark management.
3
Usability Problem
Many users became trapped in some areas of the prototype prompting us to reevaluate some design implementations.

Key Performance Indicators

In addition to task completion and open-ended questionnaires, user success was measured using KPI's and data collected through Maze's prototype testing platform.
Time on Task
User Error Rates
Drop-off Rates
System Usability Scale

Conclusions

Through user testing I was able to gain valuable insight into users needs and make improvements to designs that would not have been visible otherwise. The core user experience was proven and with this data future secondary features and further development will be more informed and successful.

Final Design

Mobile App Mockup

The usage of color in the app is restricted to be used mostly to make the browsing experience more efficient. The primary color of the product is blue to symbolize calm, trust and confidence.

Secondary colors primary purpose is to help in navigation and identification of important content. Blue being the primary interactive element color with reds, greens oranges...etc. being used to communicate content type.
A mobile phone displaying the home page of the legislation viewer app.
A mobile phone displaying the search results page of the legislation viewer app.
A mobile phone displaying the legislation text page of the legislation viewer app.
A mobile phone displaying the legislator/member profile page of the legislation viewer app.
A mobile phone displaying the notifications page of the legislation viewer app.
A mobile phone displaying the state selector page of the legislation viewer app.

Companion Website Mockup

As a part of this project a companion website was also developed. Initial plans were that the website would function as a desktop version of the mobile app with advanced features but as the target audience for the solution is the general public it was decided that the desktop site for now would act as a landing page with basic account and subscription management tools.

For now focusing on ensuring the best possible experience for mobile is the top-most priority with focus shifting to expanding into the desktop space afterwards.
© 2023. All Rights Reserved to Dominic Mendoza

Working from home, making magic.✨

Home

Welcome

Projects

UX Design3D ArtIllustration

Info

About MeContact