Kenneth Ni

Responsive Web

Victim Law (DOJ)

Modernized the search experience so advocates and lawyers can find resources faster and more reliably.

Redesigned VictimLaw.org with the USWDS to modernize search, enhance accessibility, and streamline navigation

My Role

Lead UI/UX Designer

Skills

Figma
Low and High Fidelity Designs
Stakeholder Management
Competitive Analysis

Timeline

4 Months

Team

2 UX/UI Designers, 2 Developers, 1 Product Manager (PM), 1 Legal Reviewer, and 1 Content Strategist2 UX/UI Designers, 2 Developers, 1 Product Manager (PM), 1 Legal Reviewer, and 1 Content Strategist

Constraints

Government restrictions prevent sharing design file screenshots. Only the live site and limited pre-redesign visuals are available.

Understanding the Problem

Some Context

Prior UX research on the legacy site highlighted usability issues with the homepage and search. I led alignment workshops with the team to prioritize usability issues we can address within our 4 month time frame and translated the issues into user-centered design goals.

What we Learned

Lawyers and advocates faced an outdated homepage and dense layout

→

Slowed scanning and delayed access to resources

→

Required extra clicks before reaching relevant content

→

Wasted time during case prep and reduced efficiency

Search experience was step-based and overly complex

→

Forced into rigid steps instead of modern keyword-first search

→

Added cognitive load and broke natural search patterns

→

Especially difficult for new users trying to refine queries

New lawyers and general users encountered the same friction

→

Non-experts struggled with confusing flows

→

Reduced confidence and trust in the platform

→

Undermined mission to make legal guidance broadly accessible

Competitibe Analysis

Using LexisNexis as our north star

LexisNexis is a popular legal research tool that provides their users easy search functionalities but is gated by a pay wall. Our SME has access to the tool so they were able to provide a demo and some key design aspects that we should consider in the redesign.

→

Use collapsible facets/accordions to reduce clutter

→

Lexis provides pre-filters for faster searching

→

Mobile Responsive

The Goal

Redesign VictimLaw.org to deliver a WCAG-compliant, USWDS-based experience with a modern homepage and simplified navigation

1.

Setup the Design System

2.

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users

3.

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently

4.

Redesign the layout to make scanning faster, cut extra clicks, and save time

5.

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site

The Design Journey

Milestone 1 - Positioning the Project for Success

Building the Foundation

Created the VictimLaw Design System leveraging USWDS tokens and guidelines.

Created a full Figma system since no official file existed at the time. I used the USWDS system and state tokens as the base and adjusting the theme tokens to client branding.

Set foundation for scalability and responsiveness

Established responsive variables for desktop and mobile, and standardized spacing, padding, and margins on an 8px scale for consistency across components. Reviewed breakpoints and responsive behaviors with the PM and dev team to ensure alignment.

Drove accessibility and design standards

Applied WCAG-compliant colors and states, and structured components with auto layout and variants to support long-term growth.

Collaborated closely with developers to meet tight deadline

Created daily 15 minute stand-ups to sync with developers to ensure I structure the design file around their workflow, streamlining handoff and reducing friction between design and development. Once completed, I walked the developers through the Figma file to familiarize them with the USWDS.

Milestone 1: Positioning the Project for Success

✓

Setup the Design System

2.

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users

3.

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently

4.

Redesign the layout to make scanning faster, cut extra clicks, and save time

5.

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site

Milestone 2 - Experience and Design Fine-tuning

Resolving our Conflicting Opinions

While my primary responsibility was delivering high-fidelity designs, I took initiative to collaborate with the low-fidelity designer to keep the project on track. By leading the design reviews, I ensured the homepage and search experience aligned into a modern, cohesive solution.

Balancing usability with established conventions

During the wireframe review, we had different visions for the search filters:

→

“Should the filter accordions be fully expanded or collapsed by default?”

Expanding all filters would give users full visibility, but at the cost of scannability. While seeing everything upfront offers context, competitive analysis (e.g., LexisNexis) showed that most platforms use a mix of expanded and collapsed states. Since we plan to use pre-filters, I suggested expanding accordions only after a filter selection.

→

“Should the filter container adapt to content height or be fixed?”

With over 50 items in the states filter adapting it to the content height created vertical scrolling issues. One designer proposed adapting filters to content height since a lot of search experiences have that. I suggested a fixed height for long filters, paired with a search bar to maintain usability.

Balancing inconsistent metadata with responsive design

→

“Should metadata (e.g., Law Type) be displayed as tags or plain text?”

During wireframing, chips were proposed for metadata, but I asked what real data would populate them. After clarifying with the PM and SME, we found metadata length varied widely from short labels to long strings, which made chips impractical. While chips could improve scalability, they hurt responsiveness and readability, especially on mobile. I suggested that we use plain text with dividers, a simpler approach that handled inconsistent metadata while keeping the design responsive.

Identifiying the gaps

Aligning with modern search standards

During my initial review with the wireframe designer, there were some features/designs missing that most, if not all, search experiences have:

→

Missing a “Zero State” for the search results when there are no results.

→

Missing a “Clear Filters” button

→

Missing a “Select All” for longer filters

→

Missing a “Sort By” button

Identifiying the gaps

Once the designer and I came to an agreement, I led another workshop to include the rest of the team. We showcased both design examples for each of the conflicting opinions to make them aware of how we came to some of our design decisions. They agreed that out suggestions were the best course and we were ready to move on to applying the design system.

Milestone 2: Experience and Design Fine-tuning

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time

5.

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site

Milestone 3 - Apply the Design System

Wireframes to High Fidelity

Client restrictions prevent sharing design file screenshots. Only the live site and limited pre-redesign visuals are available. I am able to walk you through the process though!

The process

Connect the Design System

Duplicate and archive the original wireframes for reference

Apply auto layout and fill/hug constraints to the existing patterns to ensure responsiveness

Start replacing patterns with its respective Design System component

Ensure Desktop/Mobile variables were applied appropriately

Test and fix responsiveness by resizing the frames manually

Present the designs to PM and adjust if needed

Present designs to client and adjust if needed

Milestone 3: Applying the Design System

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users.

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently.

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time.

✓

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site.

Handoff & Design QA

Milestone 4 - Consistency across the site

Collaborating with the Developer & Product Manager

There was a learning curve during handoff since it was the developers’ first time using Dev Mode. I walked them through the features to the best of my knowledge and supplemented with the Specs Plugin to clearly outline every container, variable, and size tokens. With the deadline approaching, I focused on ensuring the team had the clarity needed to deliver on time.

Utilizing Jira

With the stellar work from our PM, all tickets for Development and Design QA were prepared ahead of time. I collaborated closely with the developer and product manager during implementation, reviewing builds against the designs and fine-tuning details like spacing, typography, and component behavior. Through the QA sessions, we identified inconsistencies ensured the final product matched the intended experience.

Although all Design QA was finalized, there was not enough time to fine-tune minor issues. As with most projects, major technical bugs in search took priority over cosmetic adjustments.

Milestone 4: Consistency across the site

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users.

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently.

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time.

✓

Apply the Design System to wireframes

✓

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site.

Final Designs

Goal Achieved

Redesign VictimLaw.org to deliver a WCAG-compliant, USWDS-based experience with a modern homepage and simplified navigation

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users.

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently.

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time.

✓

Apply the Design System to wireframes

✓

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site.

More About Me

Currently Learning:

Ways to integrate AI into my workflow streamline traditional design and research processes.
Figma Sites and Make (Please excuse the “Coming Soons” as I am migrating my portfolio from Webflow to Figma Sites)

P.S. Definitely do not click the slimes! :)

Responsive Web

Victim Law (DOJ)

Modernized the search experience so advocates and lawyers can find resources faster and more reliably.

Redesigned VictimLaw.org with the USWDS to modernize search, improve accessibility, and streamline navigation

My Role

Lead UI Designer

Skills

Figma
Low and High Fidelity Designs
Stakeholder Management
Competitive Analysis

Timeline

4 Months

Team

2 UX/UI Designers, 2 Developers, 1 Product Manager (PM), 1 Legal Reviewer (SME), and 1 Content Strategist

Constraints

Government restrictions prevent sharing design file screenshots. Only the live site and limited pre-redesign visuals are available.

Understanding the Problem

~ 1 Month

Some Context

Prior UX research on the legacy site highlighted usability issues with the homepage and search. I led alignment workshops with the team to prioritize usability issues we can address within our 4 month time frame and translated the issues into user-centered design goals.

What we Learned

Lawyers and advocates faced an outdated homepage and dense layout

→

Slowed scanning and delayed access to resources

→

Required extra clicks before reaching relevant content

→

Wasted time during case prep and reduced efficiency

Search experience was step-based and overly complex

→

Forced into rigid steps instead of modern keyword-first search

→

Added cognitive load and broke natural search patterns

→

Especially difficult for new users trying to refine queries

New lawyers and general users encountered the same friction

→

Non-experts struggled with confusing flows

→

Reduced confidence and trust in the platform

→

Undermined mission to make legal guidance broadly accessible

Competitibe Analysis

Using LexisNexis as our north star

LexisNexis is a popular legal research tool that provides their users easy search functionalities but is gated by a pay wall. Our SME has access to the tool so they were able to provide a demo and some key design aspects that we should consider in the redesign.

→

Use collapsible facets/accordions to reduce clutter

→

Lexis provides pre-filters for faster searching

→

Mobile Responsive

The Goal

Redesign VictimLaw.org to deliver a WCAG-compliant, USWDS-based experience with a modern homepage and simplified navigation

1.

Setup the Design System

2.

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users

3.

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently

4.

Redesign the layout to make scanning faster, cut extra clicks, and save time

5.

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site

The Design Journey

~ 2 Months

Milestone 1 - Positioning the Project for Success

Building the Foundation

Created the VictimLaw Design System leveraging USWDS tokens and guidelines.

Created a full Figma system since no official file existed at the time. I used the USWDS system and state tokens as the base and adjusting the theme tokens to client branding.

Set foundation for scalability and responsiveness

Established responsive variables for desktop and mobile, and standardized spacing, padding, and margins on an 8px scale for consistency across components. Reviewed breakpoints and responsive behaviors with the PM and dev team to ensure alignment.

Drove accessibility and design standards

Applied WCAG-compliant colors and states, and structured components with auto layout and variants to support long-term growth.

Collaborated closely with developers to meet tight deadline

Created daily 15 minute stand-ups to sync with developers to ensure I structure the design file around their workflow, streamlining handoff and reducing friction between design and development. Once completed, I walked the developers through the Figma file to familiarize them with the USWDS.

Milestone 1: Positioning the Project for Success

✓

Setup the Design System

2.

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users

3.

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently

4.

Redesign the layout to make scanning faster, cut extra clicks, and save time

5.

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site

Milestone 2 - Experience and Design Fine-tuning

Resolving our Conflicting Opinions

While my primary responsibility was delivering high-fidelity designs, I took initiative to collaborate with the low-fidelity designer to keep the project on track. By leading the design reviews, I ensured the homepage and search experience aligned into a modern, cohesive solution.

Balancing usability with established conventions

During the wireframe review, we had different visions for the search filters:

→

“Should the filter accordions be fully expanded or collapsed by default?”

Expanding all filters would give users full visibility, but at the cost of scannability. While seeing everything upfront offers context, competitive analysis (e.g., LexisNexis) showed that most platforms use a mix of expanded and collapsed states. Since we plan to use pre-filters, I suggested expanding accordions only after a filter selection.

→

“Should the filter container adapt to content height or be fixed?”

With over 50 items in the states filter adapting it to the content height created vertical scrolling issues. One designer proposed adapting filters to content height since a lot of search experiences have that. I suggested a fixed height for long filters, paired with a search bar to maintain usability.

Balancing inconsistent metadata with responsive design

→

“Should metadata (e.g., Law Type) be displayed as tags or plain text?”

During wireframing, chips were proposed for metadata, but I asked what real data would populate them. After clarifying with the PM and SME, we found metadata length varied widely from short labels to long strings, which made chips impractical. While chips could improve scalability, they hurt responsiveness and readability, especially on mobile. I suggested that we use plain text with dividers, a simpler approach that handled inconsistent metadata while keeping the design responsive.

Identifiying the gaps

Aligning with modern search standards

During my initial review with the wireframe designer, there were some features/designs missing that most, if not all, search experiences have:

→

Missing a “Zero State” for the search results when there are no results.

→

Missing a “Clear Filters” button

→

Missing a “Select All” for longer filters

→

Missing a “Sort By” button

Identifiying the gaps

Once the designer and I came to an agreement, I led another workshop to include the rest of the team. We showcased both design examples for each of the conflicting opinions to make them aware of how we came to some of our design decisions. They agreed that out suggestions were the best course and we were ready to move on to applying the design system.

Milestone 2: Experience and Design Fine-tuning

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time

5.

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site

Milestone 3 - Apply the Design System

Wireframes to High Fidelity

Client restrictions prevent sharing design file screenshots. Only the live site and limited pre-redesign visuals are available. I am able to walk you through the process though!

The process

Connect the Design System

Duplicate and archive the original wireframes for reference

Apply auto layout and fill/hug constraints to the existing patterns to ensure responsiveness

Start replacing patterns with its respective Design System component

Ensure Desktop/Mobile variables were applied appropriately

Test and fix responsiveness by resizing the frames manually

Present the designs to PM and adjust if needed

Present designs to client and adjust if needed

Milestone 3: Applying the Design System

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users.

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently.

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time.

✓

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site.

Handoff & Design QA

~ 1 Month

Milestone 4 - Consistency across the site

Collaborating with the Developer & Product Manager

There was a learning curve during handoff since it was the developers’ first time using Dev Mode. I walked them through the features to the best of my knowledge and supplemented with the Specs Plugin to clearly outline every container, variable, and size tokens. With the deadline approaching, I focused on ensuring the team had the clarity needed to deliver on time.

Utilizing Jira

With the stellar work from our PM, all tickets for Development and Design QA were prepared ahead of time. I collaborated closely with the developer and product manager during implementation, reviewing builds against the designs and fine-tuning details like spacing, typography, and component behavior. Through the QA sessions, we identified inconsistencies ensured the final product matched the intended experience.

Although all Design QA was finalized, there was not enough time to fine-tune minor issues. As with most projects, major technical bugs in search took priority over cosmetic adjustments.

Milestone 4: Consistency across the site

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users.

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently.

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time.

✓

Apply the Design System to wireframes

✓

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site.

Final Designs

Goal Achieved

Redesign VictimLaw.org to deliver a WCAG-compliant, USWDS-based experience with a modern homepage and simplified navigation

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users.

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently.

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time.

✓

Apply the Design System to wireframes

✓

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site.

More About Me

Currently Learning:

Ways to integrate AI into my workflow streamline traditional design and research processes.
Figma Sites and Make (Please excuse the “Coming Soons” as I am migrating my portfolio from Webflow to Figma Sites)

P.S. Definitely do not click the slimes! :)

Responsive Web

Victim Law (DOJ)

Modernized the search experience so advocates and lawyers can find resources faster and more reliably.

Redesigned VictimLaw.org with the USWDS to modernize search, improve accessibility, and streamline navigation

My Role

Lead UI Designer

Skills

Figma
Low and High Fidelity Designs
Stakeholder Management
Competitive Analysis

Timeline

4 Months

Team

2 UX/UI Designers, 2 Developers, 1 Product Manager (PM), 1 Legal Reviewer (SME), and 1 Content Strategist

Constraints

Government restrictions prevent sharing design file screenshots. Only the live site and limited pre-redesign visuals are available.

Understanding the Problem

~ 1 Month

Some Context

Prior UX research on the legacy site highlighted usability issues with the homepage and search. I led alignment workshops with the team to prioritize usability issues we can address within our 4 month time frame and translated the issues into user-centered design goals.

What we Learned

Lawyers and advocates faced an outdated homepage and dense layout

→

Slowed scanning and delayed access to resources

→

Required extra clicks before reaching relevant content

→

Wasted time during case prep and reduced efficiency

Search experience was step-based and overly complex

→

Forced into rigid steps instead of modern keyword-first search

→

Added cognitive load and broke natural search patterns

→

Especially difficult for new users trying to refine queries

New lawyers and general users encountered the same friction

→

Non-experts struggled with confusing flows

→

Reduced confidence and trust in the platform

→

Undermined mission to make legal guidance broadly accessible

Competitive Analysis

Using LexisNexis as our north star

LexisNexis is a popular legal research tool that provides their users easy search functionalities but is gated by a pay wall. Our SME has access to the tool so they were able to provide a demo and some key design aspects that we should consider in the redesign.

→

Use collapsible facets/accordions to reduce clutter

→

Lexis provides pre-filters for faster searching

→

Mobile Responsive

The Goal

Redesign VictimLaw.org to deliver a WCAG-compliant, USWDS-based experience with a modern homepage and simplified navigation

1.

Setup the Design System

2.

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users

3.

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently

4.

Redesign the layout to make scanning faster, cut extra clicks, and save time

5.

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site

The Design Journey

~ 2 Months

Milestone 1 - Positioning the Project for Success

Building the Foundation

Created the VictimLaw Design System leveraging USWDS tokens and guidelines.

Created a full Figma system since no official file existed at the time. I used the USWDS system and state tokens as the base and adjusting the theme tokens to client branding.

Set foundation for scalability and responsiveness

Established responsive variables for desktop and mobile, and standardized spacing, padding, and margins on an 8px scale for consistency across components. Reviewed breakpoints and responsive behaviors with the PM and dev team to ensure alignment.

Drove accessibility and design standards

Applied WCAG-compliant colors and states, and structured components with auto layout and variants to support long-term growth.

Collaborated closely with developers to meet tight deadline

Created daily 15 minute stand-ups to sync with developers to ensure I structure the design file around their workflow, streamlining handoff and reducing friction between design and development. Once completed, I walked the developers through the Figma file to familiarize them with the USWDS.

Milestone 1: Positioning the Project for Success

✓

Setup the Design System

2.

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users

3.

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently

4.

Redesign the layout to make scanning faster, cut extra clicks, and save time

5.

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site

Milestone 2 - Experience and Design Fine-tuning

Resolving our Conflicting Opinions

While my primary responsibility was delivering high-fidelity designs, I took initiative to collaborate with the low-fidelity designer to keep the project on track. By leading the design reviews, I ensured the homepage and search experience aligned into a modern, cohesive solution.

Balancing usability with established conventions

During the wireframe review, we had different visions for the search filters:

→

“Should the filter accordions be fully expanded or collapsed by default?”

Expanding all filters would give users full visibility, but at the cost of scannability. While seeing everything upfront offers context, competitive analysis (e.g., LexisNexis) showed that most platforms use a mix of expanded and collapsed states. Since we plan to use pre-filters, I suggested expanding accordions only after a filter selection.

→

“Should the filter container adapt to content height or be fixed?”

With over 50 items in the states filter adapting it to the content height created vertical scrolling issues. One designer proposed adapting filters to content height since a lot of search experiences have that. I suggested a fixed height for long filters, paired with a search bar to maintain usability.

Balancing inconsistent metadata with responsive design

→

“Should metadata (e.g., Law Type) be displayed as tags or plain text?”

During wireframing, chips were proposed for metadata, but I asked what real data would populate them. After clarifying with the PM and SME, we found metadata length varied widely from short labels to long strings, which made chips impractical. While chips could improve scalability, they hurt responsiveness and readability, especially on mobile. I suggested that we use plain text with dividers, a simpler approach that handled inconsistent metadata while keeping the design responsive.

Identifying the Gaps

Aligning with modern search standards

During my initial review with the wireframe designer, there were some features/designs missing that most, if not all, search experiences have:

→

Missing a “Zero State” for the search results when there are no results.

→

Missing a “Clear Filters” button

→

Missing a “Select All” for longer filters

→

Missing a “Sort By” button

Joint Efforts = Unified Vision

Once the designer and I came to an agreement, I led another workshop to include the rest of the team. We showcased both design examples for each of the conflicting opinions to make them aware of how we came to some of our design decisions. They agreed that out suggestions were the best course and we were ready to move on to applying the design system.

Milestone 2: Experience and Design Fine-tuning

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time

5.

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site

Milestone 3 - Apply the Design System

Wireframes to High Fidelity

Client restrictions prevent sharing design file screenshots. Only the live site and limited pre-redesign visuals are available. I am able to walk you through the process though!

The process

Connect the Design System

Duplicate and archive the original wireframes for reference

Apply auto layout and fill/hug constraints to the existing patterns to ensure responsiveness

Start replacing patterns with its respective Design System component

Ensure Desktop/Mobile variables were applied appropriately

Test and fix responsiveness by resizing the frames manually

Present the designs to PM and adjust if needed

Present designs to client and adjust if needed

Milestone 3: Applying the Design System

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users.

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently.

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time.

✓

Apply the Design System to wireframes

6.

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site.

Handoff & Design QA

~ 1 Month

Milestone 4 - Consistency across the site

Collaborating with the Developer & Product Manager

There was a learning curve during handoff since it was the developers’ first time using Dev Mode. I walked them through the features to the best of my knowledge and supplemented with the Specs Plugin to clearly outline every container, variable, and size tokens. With the deadline approaching, I focused on ensuring the team had the clarity needed to deliver on time.

Utilizing Jira

With the stellar work from our PM, all tickets for Development and Design QA were prepared ahead of time. I collaborated closely with the developer and product manager during implementation, reviewing builds against the designs and fine-tuning details like spacing, typography, and component behavior. Through the QA sessions, we identified inconsistencies ensured the final product matched the intended experience.

Although all Design QA was finalized, there was not enough time to fine-tune minor issues. As with most projects, major technical bugs in search took priority over cosmetic adjustments.

Milestone 4: Consistency across the site

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users.

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently.

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time.

✓

Apply the Design System to wireframes

✓

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site.

Final Designs

Goal Achieved

Redesign VictimLaw.org to deliver a WCAG-compliant, USWDS-based experience with a modern homepage and simplified navigation

✓

Setup the Design System

✓

Replace rigid step-based flows with intuitive, keyword-first search that supports both experts and new users.

✓

Use collapsible filters, smart pre-filters, and responsive layouts to guide users efficiently.

✓

Redesign the layout to make scanning faster, cut extra clicks, and save time.

✓

Apply the Design System to wireframes

✓

Quality Assurance testing with developers to ensure the text, spacing, color, and experience remained consistent across the site.

More About Me

Currently Learning:

Ways to integrate AI into my workflow streamline traditional design and research processes.
Figma Sites and Make (Please excuse the “Coming Soons” as I am migrating my portfolio from Webflow to Figma Sites)

P.S. Definitely do not click the slimes! :)