top of page
.png)
UTT core
Overview
UTT is a CRM system redesigned to enhance usability, streamline workflows, and improve user experience.
The Problem
The challenge was that the UX was poor because the system was originally developed by programmers who did not focus on user-centered design.
Role
Product Designer
The Solution
Enhance the usability and design by improving the user experience and user interface.
%202.png){kind=small}
Challenges and Constraints
The existing CRM system presented significant usability issues stemming from its development by a technical team without prior focus on user experience.
Key challenges included:
-
Complex and unintuitive navigation that frustrated users.
-
A lack of consistency in design elements, which caused visual and functional confusion.
-
An absence of a clear structure for user workflows, making the system inefficient for daily use.
-
Limited stakeholder buy-in initially, requiring robust justification of proposed changes.
Research
Our process began with comprehensive research, which included:
-
User Interviews: Conducted sessions with active system users to understand their pain points, needs, and preferences.
-
Stakeholder Workshops: Collaborated with decision-makers to align the redesign goals with business objectives.
Optimized User Flow and Design
-
UI Component Library: Built a cohesive design system including reusable components, typography, and color schemes, ensuring consistency across the system.
-
Streamlined Navigation: Reorganized the structure to prioritize the most-used features and minimize redundant actions.
-
Enhanced Visual Design: Applied modern UI principles for a clean, professional look that complemented the improved functionality.
History Log
The history log screen displays modified table values, including the date, user, and action performed. We were instructed to keep the existing color scheme, with each color indicating a specific status or action.
Before (Side by Side View)
This option displayed the values alongside one another, allowing users to see the original values next to the updated ones.
The screen is filled with both colors and content, which creates cognitive overload.
.png)
After (List view)
This option provides a clean and straightforward presentation, displaying the entries sequentially.
To further clarify changes, an arrow icon was included to visually represent the transition from the previous value to the updated one, additionally all actions performed on the same value can be viewed in a sidebar that opens upon clicking.
%20(1).png)
Before (Table View)
The original history log screen suffered from visual clutter and poor color differentiation, creating cognitive overload for users and making information difficult to parse.
_gif.gif)
After (Table View)
The redesign introduced clear visual hierarchy and improved spacing, enhancing readability and reducing cognitive load.
Permissions
Permissions are designed to grant different levels of access to each user in the system. Options include viewing, editing, and searching records, and the admin determines which permissions are assigned to each user.
.png)
Before
Many users in the system had similar permissions, yet the admin still had to configure permissions for each user from scratch.
_gif.gif)
After
The redesigned system allows admins to create teams, streamlining permission setup by assigning users to teams and customizing individual permissions within each team.
Additionally, admins can edit a team's permissions at any time, ensuring flexibility and efficiency in managing user access.
Create User
The screen is designed to add new users to the system.
.png)
Before
The screen lacked alignment and structure, making the form disorganized and visually confusing, which hindered effective navigation for users.
.png)
After
The form was reorganized into clear categories with proper grid alignment, improving clarity and usability.
Action Menu
The action menu included both actions that the user could and could not perform, with tooltips explaining the reasons why certain actions were unavailable.
.png)
Before
The menu was not organized according to a logical sequence of actions and lacked category divisions.
After
_gif.gif)
The menu was redesigned with the new color scheme and organized into categories. This streamlined structure reduces cognitive load, making actions easier to find and improving overall navigation.
.png)
.png)
.png)
bottom of page