UI/UX Web Design Branding

We Are All Criminals

A UX/UI redesign focused on reducing barriers for people with criminal records seeking employment.

Client

We Are All Criminals

Role

Research, Stakeholder Management, Visual Design, Prototyping, Technical Direction

Timeline

3.5 weeks (school project) + ongoing (paid engagement)

Role: Research, Stakeholder Management, Visual Design, Prototyping, Technical Direction
Timeline: 3.5 weeks (school project) + ongoing (paid engagement)
Client: We Are All Criminals

A school project that became a paid client engagement

What started as a three-week UX design exercise for a nonprofit ended with a fully launched website debuting at the Weisman Art Museum on the University of Minnesota campus. That’s not how these projects usually go.

I found We Are All Criminals through my own research, pitched them on the project, and managed the client relationship from our first stakeholder interview through final delivery. Working alongside Stephany Reck and Jasmin Bannister, I handled stakeholder communications, wrote the technical specifications, built the master style guide, and designed the bulk of the page layouts. When Emily Baxter — criminal defense attorney and founder of WAAC — saw the final prototype, she hired us to make it real.


DISCOVER

What is WAAC?

We Are All Criminals is a 501(c) nonprofit working to change how society thinks about criminal records. Their core argument is both simple and powerful. One in four Americans has a criminal record, but four out of four have criminal histories. The difference between a record and a history often comes down to resources, race, and luck.

When I found WAAC and brought them to the team, I knew it was the right fit. The organization ideologically aligned with all three of us, and when we reached out, Emily Baxter was genuinely excited to work with us.

Stakeholder Interview

Before our first meeting with Emily, I did as much background research as I could. I watched her TED Talk, her Talks at Google appearance, and read everything publicly available about the organization. That prep paid off. The interview gave us a clear picture of what she needed: a site that was easier to navigate and better at telling the stories that drive WAAC’s mission.

Stakeholder Interview

Survey Data

Concurrently with the stakeholder interview, we deployed a Google Forms survey to gauge public attitudes on the criminal justice system. Fifteen responses gave us a clear trend. Most people didn’t find the current justice system fair, and there was strong agreement that Black, Indigenous, and people of color faced disproportionately harsher treatment.

Survey Results


DEFINE

Finding an Opportunity

With research in hand, it was time to define our user. This was trickier than it sounds. WAAC’s current site was built to shift narratives for people with the power to create change, like policymakers and employers. Given our timeline and scope, we focused our redesign on that employer segment.

User Persona

Meet Thomas Singer, a restaurant owner struggling to find reliable employees. He’s at a point where he’s open to rethinking his hiring practices. He just needs the right information and a nudge in the right direction. Thomas represented the user we were designing for.

User Persona

User Scenario

A likely entry point for users like Thomas would be one of WAAC’s exhibits at art museums and venues around the country. From there, if we did our job right, he’d end up on the website and commit to changing his hiring practices through a digital pledge.

User Scenario

Opportunity

Changing hiring practices requires both business reasoning and public recognition. There’s an opportunity to inform employers and showcase their commitment to more equitable hiring, increasing WAAC’s impact while giving employers a reason to act.


DEVELOP

Organization and Visual Design

WAAC already had compelling content. The challenge wasn’t starting from scratch. It was creating clarity around what was already there.

Information Architecture

The existing site had a labeling problem. Content was grouped in ways that made it hard to tell which stories were related and whether anything was sortable. We restructured the navigation to surface series content more clearly and gave the standalone flagship series a dedicated, prominent home on the homepage.

Sitemap

Visual Design and UI Kit

I built the master style guide and UI kit for the project. Typography was anchored by Rubik in extra bold for display text, loud, a little rough around the edges, and distinctly human. Karla handled body text, providing contrast and rhythm. The color palette leaned into saturated, high-contrast tones with a deliberate nod to the subject matter — the orange is no accident.

Type Specimen

Color Palette

UI Kit


DELIVER

Prototype Iterations

Each team member created initial wireframe concepts, then we dot-voted on the strongest ideas and merged the best elements into subsequent rounds of fidelity. Collaborative by process, decisive by outcome.

Mid-Fidelity Wireframes

The collaborative wireframe process let us pressure-test ideas early before committing to high-fidelity work. We added detail progressively, refining the layout and navigation with each pass.

Mid-Fidelity Wireframes

High-Fidelity Prototype

The final prototype brought everything together, visual identity, UI kit, and three rounds of fidelity. We ran five-second usability tests and A/B testing to refine before presenting to Emily.

She loved it.

From Classroom to Client

Emily didn’t just approve the design. She hired Stephany and me to make it real. I sourced a front-end developer to handle the Wordpress theme build, managed the technical specifications for the full implementation, and saw the project through to launch.

The WAAC exhibit at the Weisman Art Museum

The finished site debuted at the Weisman Art Museum on the University of Minnesota campus. A school project that started as a three-week exercise ended up on the wall of one of Minneapolis’s most respected cultural institutions.

Not bad for a class assignment.