Clearviction
Clearviction
Clearviciton is a civic-tech open-source project working to make the conviction vacation process easier and more straightforward. When a court vacates a conviction, it withdraws a guilty verdict and dismisses the case. Sadly, the process of vacating in Washington State is still difficult, slow and inefficient, making it inaccessible for most who need it.
This is why Clearviction has created a calculator where potential vacators can check their eligibility.
Live website at www.clearviction.org
Role: UX and UI Design, Team Leader
Tools: Figma, Material UI, Miro
Team: Sebastian Page, Tiffany Park, Madeline Stoltz
The challenge
A lesson in cross-team communication
As the main tool, the eligibility calculator, was getting ready to launch, Clearviciton needed to create a supporting website that would guide and encourage potential users, as well as drive donations and volunteers. After going through the whole design process, I had my first handoff conversation with our main developer.
Turns out, our design was very difficult to implement in the existing developing environment. The team was using Material UI’s javascript to build the website, and because the designs were complex, they were implementing everything with custom code, which took a long time and still left inconsistencies from the designed wireframes.
Original design
Design implementation
It was then when we realized that, if we wanted the design handoff to be smoother, we had to have more conversations and work together. Being a volunteer-led project, it is important that processes are easy and clear, so they can be followed by anyone at any point in time. This is what we were lacking, and it ended up creating a design that could not be implemented easily or accurately.
Once presented to the team, I was designated team leader of the Material UI redesign, which included creating a detailed design system and remaking the existing screens accordingly.
The stepping stone
Building a new Design System with Material UI
The main focus for this redesign was to create a new design system that would leverage MUI components as much as possible to alleviate customized code work. But on the other hand, this was also a great opportunity to set up a well built, detailed, understandable design system that would help the design process in further iterations and support growth of the project.
Above is the existing design system, which only included a few components and was outdated and inconsistent.
Styles
The main styles were defined by Material Themes. Theming made it easy to customize Material Design elements to match the look and feel of our website with colors, typography styles, and shapes.
Components
These are the most important part when it comes to facilitating code: Material UI’s components are interactive building blocks with a built-in system to signify states. This allowed us to create components with our already determined styles.
Other Resources
It was important to include all resources in our design system, so I also included logos, illustrations and icons. This gives designers a tool to easily incorporate those in our files, and lets developers easily download all resources used.
References and Best Practices
On top of having a solid file organization and good navigation within the design system, I incorporated best practices, references and even a Material UI guide. Given that we are a volunteer based non-profit, it’s important to maintain detailed records.
Website Redesign
A chance to reevaluate the Information Architecture
Since we were already set up for a redesign of the whole website, we decided it was a good opportunity to run user and accessibility testing on our old designs. That way we ensured we could fix existing problems during our redesign. There were two new challenges uncovered during testing regarding the pages “Resources” and “Why Vacate”.
Both pages shared similar points of information, and our users were not sure how to properly navigate between the two.
Solution
We solved this by collapsing both pages into one, categorizing, and creating a strict structure for all categories to follow. This created a stronger hierarchy in the information displayed and made it more easily accessible by creating a more organized source.
Problem #1
The resources page had an excessive amount of information in it, and a big part of it was improperly cited or not cited at all. This could put the website’s credibility and trustworthiness in question.
Solution
To solve this issue, a researcher went through all information and arranged them by their content, credibility and origin. This helped us solidly establish what information should be displayed, and I later used the components I had previously designed to clearly classify all resources.
Problem #2
Creating new wireframes and prototyping
On top of the user testing, I looked back at all of our research documentation (empathy maps, journey maps and user flows) to evaluate how our old design had adapted, and to not lose sight of it during this redesign.
With that information, the redesign was underway. Here are the key elements of the redesign process:
Mobile-first design and responsiveness
In the previous iteration, designed first in desktop, the developers encountered problems when scaling down. The design was not responsive, so we decided to design in mobile first, ensuring that our design would display correctly in all interfaces.
Implementation of old website in smartphone size with small text and improper spacing (left) and new design in smartphone implementation (right).
Simplification of elements
One of the central problems the non-profit is trying to solve is the difficulty of accessing the knowledge and resources when trying to vacate. Therefore, it is vital the website is as easy to navigate as possible. The previous design was convoluted and lacked proper hierarchy. In the redesign we made sure we presented users with cleaner, simpler layouts that guided them through the pages, leveraging type, colors and components.
Old implementation of the volunteer page (left) and new version (right).
Annotations and cleanliness
Maintaining a clean file is vital to allow multiple people to work together, especially when it comes to providing developers with all the needed materials for implementation. In this redesign I made sure all screens were properly named, organized and included annotations when needed. This proved to be helpful during our design handoff process.
Some examples of my annotations in the designs.
Next Steps
The Clearviction website launched May 2022. We are currently going through bugs and small design issues so that we can soon start a new iteration.
The website we redesigned serves as a good start to guide users to our tool and to give assistance, but that’s just the MVP. Here are some next steps we have already started to look into:
Using google analytics for user testing and research to promote next iterations, exploring page abandonment and time spent on specific pages.
Introducing new features, including calendly links for volunteer meetings and expanding the back end to allow for profile creation.
juditserral.design@gmail.com