MTL

18:37

La Boîte Rouge VIF

La Boîte Rouge VIF

La Boîte Rouge VIF

Faster search, simpler management

La Boîte Rouge VIF needed a system to efficiently manage a large media archive related to Indigenous cultures. The project designed a new desktop-based admin web app that includes core archive management features such as search, upload, detail view, edit, and delete.

Within a limited budget and timeline, we focused on the highest-priority features.

My role

Lead UX/UI Designer – Wireframing, UX/UI, IA, Design System

Type

Desktop Admin Application

Team

PM · Front-end Developer(2) · Back-end Developer

Timeline

Jan 2025

1.

1.

Outcome

Outcome

Simpler

The client found the archive management process simpler and easier to understand

The client found the archive management process simpler and easier to understand

Scalable

The interface remained clear and manageable, even with large amounts of content

The interface remained clear and manageable, even with large amounts of content

Reduced learning effort

Reduced learning effort

Defined a focused management flow

Defined a focused management flow

Improved search accuracy

Improved search accuracy

Built reusable UI components

Built reusable UI components

2.

2.

Client needs

Client needs

"Admins needed to find archive items faster"

"Admins needed to find archive items faster"

"Archive items needed to be organized with tags and categories"

"Archive items needed to be organized with tags and categories"

"Admins needed to manage archive items easily"

"Admins needed to manage archive items easily"

3.

3.

Design Challenge

Design Challenge

1

Maintain the existing archive management workflow while making exploration more intuitive

Maintain the existing archive management workflow while making exploration more intuitive

2

Include core features such as search, upload, edit, and delete without making the interface feel complex

Include core features such as search, upload, edit, and delete without making the interface feel complex

3

Allow users to enter a large amount of archive information in a simple way and easily review the information

Allow users to enter a large amount of archive information in a simple way and easily review the information

4

Use an admin mode to safely control edit and delete actions

Use an admin mode to safely control edit and delete actions

4.

Highlights

Existing users were already familiar with searching the archive through categories and tags

To keep this familiar flow, the category/tag filter was placed on the left, allowing users to filter archive items in the same way they were used to. Search results are displayed on the right, so users can quickly check relevant archive items.

To keep this familiar flow, the category/tag filter was placed on the left, allowing users to filter archive items in the same way they were used to. Search results are displayed on the right, so users can quickly check relevant archive items.

Designing a filter search with combined conditions

The filter panel allows users to search for categories or tags and select multiple tags directly. By combining selected tags, users can narrow down archive results faster and find relevant items with less effort.

The filter panel allows users to search for categories or tags and select multiple tags directly. By combining selected tags, users can narrow down archive results faster and find relevant items with less effort.

Supporting more precise keyword search

A keyword search bar was added to the results area to help users find archive items that are difficult to locate with filters alone. Users can search by details they remember, such as title, description, author, or device, and narrow down results.

A keyword search bar was added to the results area to help users find archive items that are difficult to locate with filters alone. Users can search by details they remember, such as title, description, author, or device, and narrow down results.

Existing users were already familiar with searching the archive through categories and tags

To make the app easier for administrators to use, the same tag selection pattern from the search flow was reused when adding tags to a new archive item.
Creating a new archive required several types of information, including basic details, thumbnail image, tag, file upload and metadata. To reduce cognitive load, related input fields were grouped into clear step-by-step sections.

To make the app easier for administrators to use, the same tag selection pattern from the search flow was reused when adding tags to a new archive item.
Creating a new archive required several types of information, including basic details, thumbnail image, tag, file upload and metadata. To reduce cognitive load, related input fields were grouped into clear step-by-step sections.

Reduce unintended mistakes through administrator mode

Since the initial version lacked a login feature, we separated browsing and management tasks using an Administrator Mode toggle. Users can access edit and delete actions only when admin mode is turned on, reducing accidental changes and making archive management safer.

Since the initial version lacked a login feature, we separated browsing and management tasks using an Administrator Mode toggle. Users can access edit and delete actions only when admin mode is turned on, reducing accidental changes and making archive management safer.