Introduction
This issue detail page is a key feature of the BIMcollab product. It was originally designed by developers without focusing much on user-centered design practice.
My design updates have made it easier to use, better organized, and more accessible for BIMcollab users.
Role
UX/UI Designer
Tools used
Figma / FigJam, Adobe Suite
Collaboration
Worked closely with a Product Owner and team of 6 developers
Design Framework
For the redesign of the Issue Details page, I combined User-Centered Design (UCD) with Lean UX. UCD helped ensure that the design was aligned with user needs and goals, while Lean UX allowed for fast iteration, collaboration, and continuous user feedback.
DEFINE
Problem identification
There were many complaints coming in to the Customer Success team and Support tickets created about the issue details page. The users were not happy with the way how the information was structures, it was hard to read, quickly define who is the assigned person responsible to solve the issue, and also quickly make edits and comments.
As a core feature of the web product, the issue details page became a top priority for redesign to improve usability, retain users, and reduce churn caused by dissatisfaction.
Legacy design
Issue details page
This legacy design provides all the necessary details for users to understand the issue.
Edit mode
In edit mode, users can modify the details of the issue.
When analyzing the legacy design from UX perspective, I've concluded the main problems:
1. Lack of information hierarchy
The text-heavy design makes it difficult to scan for key information quickly. Also the way information is structured and aligned is hard to read it for user.
2. Lack of buttons hierarchy
As an example, in the edit mode, the "Cancel," "Reactivate," "Close," and "Save" buttons are placed together but lack clear visual hierarchy. Their types, sizes and spacing make it harder for users to prioritize which action is most important.
3. Perception and grouping
The design lacks clear grouping of related elements which could make it harder for users to associate related information.
4. No device responsiveness
This design has no optimization for small laptop screens, tablets, or mobile devices.
5. Cognitive load management
The user must process a large amount of information at once such as issue details, comments, and actions. This can overwhelm users.
6. Aesthetic-Usability Effect
The design feels functional (as it is created by developers) but old-school, with minimal visual hierarchy or aesthetic appeal. This may affect users’ perception of usability.
Research
Analytics
Using the analytics tool, I conducted a thorough analysis of the rarely or never used features on the Issues detail page. This serves as a foundation for potential page cleanup and provides valuable insights for qualitative research through user interviews.
User interviews
I have also conducted numerous semi-structured user interviews online with our key customers from all over the world to identify their main pain points, needs, and wishes. This helped me to create user-centric redesigns of the page.
DESIGN
Final design
After multiple iterations, usability testing and discussing the redesign requirements with main stakeholders, the final design has been created.
Larger image
The primary request was for a larger image to provide a clearer view of the issue, enhancing visual understanding.
Information hierarchy
Information is organized into distinct containers, using a two-column grid for easier scanning and better access to key details.
Button hierarchy
The primary button is placed above the secondary ones for better clarity. Icon buttons for issue editing are also larger, improving accessibility and reducing the risk of misclicks.
Avatars for assigned persons
To highlight the assigned person, an avatar was added, making it easier to identify the responsible team member and boosting accountability.
Separated tabs
To minimize clutter, Comments, History, Clashes, and attached documents are organized into segmented tabs.
Edit mode layout
The edit mode features a two-column field layout, allowing users to update information easily. Overlay buttons on the main image also facilitate quick edits.
Improved editing experience
Unlike the legacy design, the edit mode now stays on the same page. This improves efficiency by eliminating the need to navigate between pages and allows for faster updates without losing context. Also, the user can add comments in the edit mode.
Going responsive
I have also created responsive versions of these web pages to be seen and used on smaller laptop screens, tablets and phones.
