The Task Record page is an existing feature within the BlueB portal, serving as a hub for users to manage and complete tasks. In Q3 2024, we embarked on a project to redesign this page, leveraging the Blueprint design system to create a consistent and scalable layout. The ultimate goal was to create a design system and layout for the record page that could serve as a template for future page redesigns.
As the UI/UX Designer on this project, I created user flows, wireframes, and final mockups, as well as collaborated with the team to ensure the design met both user and business needs. The project team included two UI/UX designers, two back-end engineers, one front-end engineer, a product manager, and product leadership. The timeline spanned from Q3 2024 to Q1 2025, with development and testing currently underway.
UX/UI Design
User Research
Process:
To begin the redesign, I conducted research to understand the existing flows and functionalities of the Task Record page. This involved documenting all possible user actions, expected outcomes, and identifying gaps in the current experience. Additionally, we formed a user focus group of 15 individuals from across the company to provide feedback, participate in user testing, and answer questions throughout the design process. This hands-on approach ensured that the redesign was grounded in real user needs and pain points.
Insights:
The research revealed several key findings that shaped our approach:
- Complex Navigation: At the time of the research, each tab within the task page had different reference panels. Users found the reference panels across multiple tabs confusing and inefficient. They never knew what tab to use to find the information they needed.
- Inconsistent Workflows: The actions available to users were not aligned with their workflows, leading to frequent errors and frustration.
- Form Redundancy: Many forms within the task page had overlapping fields and inconsistent error handling, which added unnecessary complexity.
Our design approach was rooted in the Blueprint design system, specifically utilizing what we called “Form Patterns.” These pre-generated flows were designed to standardize forms across the portal, with five distinct patterns based on whether the form required single or multiple entries. The first step was to document and layout these patterns to determine how many forms would be needed for the final design.
Once the form patterns were established, we broke the Task Record page into distinct sections to tackle each component individually
.png)
The final design represents a significant improvement in usability and consistency. By leveraging the Blueprint design system and creating reusable components, we established a scalable framework that can be applied to other pages within the portal. The redesigned Task Record page features a streamlined Action/Header section that aligns with user workflow, a unified Reference Panel that consolidates all relevant information, and modular forms that are consistent, intuitive, and easy to complete. We are currently in the development and testing phase, and I’m excited to see how users respond to the new design.
This project was both challenging and rewarding, pushing me to think creatively about how to adapt existing components to meet user needs while maintaining design consistency. The process required the creation of several new components, including a redesigned reference panel, text inputs, currency inputs, and a media uploader. It was a deeply collaborative effort, and I’m proud of how the team came together to solve complex problems and deliver a design that not only improves the Task Record page but also sets a standard for future portal updates. This project reinforced the importance of user-centered design and the value of iterative testing in creating solutions that truly meet user needs.
I’m a UI/UX designer with a passion for creating user-centered experiences and a knack for solving problems. When I’m not designing, you’ll find me illustrating, reading, or chasing my corgi, Buttercup, around the beach. Let’s make something awesome together!
