Home/Works/Upgrading the Information Architecture of the Ministry of Justice Website
UX

Upgrading the Information Architecture of the Ministry of Justice Website

  • My role:
    Research, Analysis, Workshop Hosting, Website Design, Usability Testing
  • Timeline:
    March - May, 2024
  • Scope:
    User Experience Design

An UX team project in Victoria University of Wellington, cooperating with the Ministry of Justice, involving information architecture, design system and website design.

# UX Case Study

Background

In the university’s Capstone project, our client was the Digital Channels team of the Ministry of Justice. They recently completed the redesign and development of the “Care of Children” area within Family section of the ministry’s website. Because the redesign was outsourced, the Digital Channels team was eager to learn the strategies for extending the new design to the entire Family section, including applying the new visual style and reorganizing the web page structure.

Problems

I have to jump around a lot (between the website pages), and my attention is in all other places.

-- participant A

We conducted a comparative usability testing to identify the pros and cons in both new and old design of the ministry’s website, and the main challenges were identified as bellow:

  • Complicated information architecture

    From our comparative usability test between new and old parts of website, we noticed the newly designed Care of Children area has a more complicated IA structure, which frustrated participants.

  • Text-heavy content and legal terms

    The old parts of the website contains dense legal instructions, leading to a lack of comprehension among users.

  • Interconnected links and navigational dead ends

    The website’s workflow is not smooth, requiring users to click through several links to complete a task or find desired information. Besides, users tended to encounter dead ends, forcing them to backtrack and search for more hints.

Goals

Based on the ministry’s needs for upgrading website and usability challenges, the objective of this project were narrowed down:

  • Re-arrange the website structure with a better navigation experience.

  • Initiate the ministry staff the technics of upgrading the website.

Solutions

Information architecture workshop (IA Workshop)

To find out how people categorize Family section pages and prioritize page content, the IA workshop was conducted with the participation of the Digital Channels team and policy advisors.

Card sorting

Categorize the cards with titles of web pages related to separation and divorce.

Title renaming

Ensure consistency in wording and grammar across the titles.

Content rearrangement

Rearrange the paragraphs of key pages.

Information architecture principles : based on the IA workshop

  • Categorize by tasks

    Organize the pages by grouping relevant tasks together, making it easier for users to find the information they need based on the task they want to accomplish.

  • Consistency

    Make sure the consistency in the titles and contents across all pages, helping users understand and navigate the website more easily.

  • Focus the user on the task

    Ensure all relevant information for task completion is on a single page, eliminating the need to navigate to additional pages for supplementary information.

Design system : built upon optimized Care of Children design

A comprehensive design system was created by my team members Nicolette, Matias and Julia, incorporating components from the previous outsourced design of the Care of Children section.
Design System Figma

Website prototype : showcasing our design system and IA principles

To demonstrate the usage of the design system and IA principles, we created a website prototype for the two areas within Family section: Separation & Divorce and Relationship Property. These areas were selected because they are the most visited pages according to Google Analytics.
An usability testing was conducted with our low-fidelity wireframe. Participants still found some wording hard to understand. To address this issue, we consulted with the ministry’s policy content experts and developed the guidelines of writing titles and page overviews.
Website Prototype Figma

Key Features

Simplified section map

The section map was re-arranged into a simpler and more consistent structure
Simplified section map

Consistent titles

The titles have been renamed into a more consistent manner while maintain the original title’s wording, ensuring minimal transition effort for returning users.
Consistent titles

Task-focused pages

The necessary information for each task was collected into a single page to avoid extra navigations for users.
Task-focused pages

Self-descriptive links

Links were made more self-descriptive so that users can easily understand the destination and purposes of each link, aiding their decision on whether to click.
Self-descriptive links

Future Steps

  • User testing with target users

    Conduct usability test with target users, such as people seeking separation-related legal supports, to evaluate the effectiveness of the new structure and wording.

  • Online form

    Convert all forms in the ministry’s website to digital format, allowing users to complete without the need to print. Digital forms streamline the application process, keeping it online and efficient. Additionally, online forms with progressive disclosure will prevent cognitive overload by presenting questions gradually.

  • Branching logic

    Implement branching logic to provide a custom path based on a user's response. This will ensure users see the content relevant to their specific situation. The information gathered can be automatically brought into application forms, saving users time and effort on replying repetitive questions.

# UX Case Study
Design System Figma Website Prototype Figma

More Works

Copyright © 2024 717 - All Rights Reserved.
Front-end Developer
717 About
Drop me a line and discuss new projects~
✧◝(⁰▿⁰)◜✧