0
25
50
75
100
%
Web Design

UNIS Client Portal

Role

Lead UI/UX Designer

Client

UNIS

Duration

5 weeks

UNIS Client Portal

Overview

As part of an ongoing project to enhance user experience, our team embarked on redesigning the tracking page of a client portal website. The existing tracking page lacked versatility, providing users with only one standard view of their tracking IDs and their statuses. This limitation led to a lack of customization and flexibility in tracking orders, resulting in a suboptimal user experience.

Goals

We've revamped our tracking system to offer users multiple viewing options, including a visually engaging Grid View and a detailed List View. Users can now customize their experience by selecting their preferred view and adjusting display settings. We've prioritized clarity and accessibility with intuitive design elements, empowering users to navigate tracking information effortlessly. These enhancements ensure a streamlined and personalized experience, enhancing overall user satisfaction and engagement.

Enhancing user productivity by overcoming interface challengers

Analyzing the problem

In this project, our primary goal was to overhaul the outdated client portal tracking page, which suffered from significant limitations. The previous design inundated users with an overwhelming amount of tracking information, all crammed into a single, uninspiring table format. This approach not only failed to effectively communicate the status of shipments but also hindered users' ability to navigate and comprehend the data efficiently. Our objective was to reimagine the tracking experience by addressing these shortcomings and creating a more intuitive and user-friendly interface that would empower users to track their shipments effortlessly.

Description of the image

How we approach

Before starting this project, we had already heard from both internal and external users that the existing client portal was somewhat inconvenient and that improvements were desired to enhance work efficiency. Therefore, we began by listening to and analyzing the current users' pain points and identifying elements that could be improved or added.

Key pain points

1. information Overload

Users were inundated with a plethora of tracking information presented in a single table format, making it difficult to focus on relevant details.

2. Lack of Clarity

The table format lacked visual hierarchy and clarity, making it challenging for users to differentiate between different tracking IDs and their corresponding statuses.

3. Limited Customization

Users had little to no control over how they viewed their tracking orders, leading to a one-size-fits-all approach that didn't cater to individual preferences.

4. Inefficient User Experience

The design's dull and slow interface contributed to a frustrating user experience, leading to decreased productivity and satisfaction.

Addressing these pain points was crucial in designing a revamped tracking page that would enhance user experience and streamline tracking operations within the client portal. Through our conversations with users, we found that everyone experienced similar issues. However, some users expressed a desire to slightly improve and preserve the current UI along with the enhancements. They were already accustomed to the existing interface and were concerned about the additional time it would take to adapt to the new changes. Therefore, our design approach balanced the need for significant improvements with the users' preference for familiarity, ensuring a smoother transition to the new system.

Solutions

Information Overload:

Introduced multiple viewing options such as Grid View and List View. Grid View provides a concise overview of multiple orders at once, while List View offers detailed information for each order. This allows users to choose the level of detail they prefer.


Real-Time Updates:

Integrated real-time updates and notifications, so users are instantly informed about any changes in their order status. This reduces the need for manual refreshing and keeps users up-to-date with the latest information.


Better Visual Hierarchy:

Redesigned the interface with a clear visual hierarchy using distinct headings, labels, and intuitive icons. This helps users quickly understand and process the information, improving overall readability and usability.


Balancing Familiarity with Innovation

While introducing new features and improvements, retained elements of the existing UI that users were familiar with. This includes similar layout structures and familiar terminology to ease the transition and reduce the learning curve for existing users.

Design solutions

Table View

The Table View retains the existing UI structure but has been made cleaner and more user-friendly.

Description of the image

List View

Transitioning to a List View format significantly enhances readability by providing more space for each data entry, allowing users to scan through items without feeling overwhelmed by densely packed data. This better organization enables users to focus on one order at a time, with detailed information clearly displayed for each entry. Additionally, the List View improves the overall hierarchy and organization of information by utilizing visual hierarchy elements such as headings, subheadings, and icons. This clear structure enables users to quickly identify important details, enhancing the usability and effectiveness of the client portal.

Description of the image

Map View

Transitioning to a Map View provides a visual representation of tracking information, making it more intuitive and engaging than a traditional table format. Users can easily see the geographic locations of their orders, allowing them to understand the status and progression of shipments at a glance. This visual context enables users to quickly identify potential issues or delays based on the geographic location of their orders, helping them spot trends and patterns such as clustering of delayed shipments in a particular region. By offering the ability to customize the experience—showing specific types of orders, filtering by status, or focusing on particular regions—users can tailor the view to their specific needs. This flexibility makes it easier to manage and track orders based on individual preferences, enhancing usability and ensuring users can focus on the most relevant information, thereby improving their overall experience with the client portal.

Description of the image

Card View

Transitioning to a Card View offers a visually appealing and modern interface, enhancing readability by organizing information into discrete, digestible chunks. Styled with imagery, colors, and typography, cards make information more engaging and easier to digest. Interactive elements such as buttons, icons, and clickable areas enhance user interaction, allowing actions like updating status or viewing details directly from the card. Cards can be grouped by categories, statuses, or other criteria, providing contextual understanding and helping users quickly grasp relationships between different pieces of information. This organization makes it easier to manage multiple orders or tasks, improving efficiency and the overall user experience.

Description of the image

Employee feedback

Task Completion: Employees reported a 25% increase in task completion rates compared to the previous design, indicating improved efficiency.

Time on Task: On average, employees spent 35% less time on individual tasks with the new design, leading to greater productivity.

Error Rates: The new design resulted in a 40% reduction in error rates among employees, highlighting improved usability and user experience.

Client feedback

Task Completion: Clients also experienced a 20% increase in task completion rates with the new design, indicating enhanced usability.

Time on Task: Clients reported spending 30% less time on tasks compared to the previous design, reflecting improved efficiency and user satisfaction.

Error Rates:Error rates among clients decreased by 50% with the new design, demonstrating improved usability and a smoother user experience.

Outcome

Following the comprehensive feedback sessions with employees and clients, the redesign of the client portal tracking page has yielded significant improvements in usability and user satisfaction. The integration of real-time updates and enhanced customization options has resulted in a more efficient and personalized user experience for all user groups. Employees reported a 25% increase in task completion rates and a 35% reduction in time spent on tasks, leading to improved productivity and workflow efficiency. Similarly, clients experienced a 20% increase in task completion rates and a 30% decrease in time on task, indicating enhanced usability and user satisfaction. Both employees and clients expressed high levels of satisfaction with the new design, particularly appreciating its improved visual layout, customization options, and real-time updates. Moving forward, continued refinements based on user feedback will ensure that the client portal remains intuitive, efficient, and tailored to the needs of all users.

Get Template