Objective: To revamp a B2B, Netherlands-based document management portal adopted by the construction, energy and oil and gas companies for creating and maintaining a large number of engineering documents related to various projects.
The current portal is comprised of an outdated UI and lacklustre user experience due to poor content organization, visual hierarchy, user control and freedom, and system status visibility.
My role
Currently spearheading the UX Design and research endeavours for the client as the Senior Product Designer.
- To understand the whole ecosystem of the current portal and redesign it for a superior user experience.
- Effected the establishment of the ‘Customer Advisory Board’ (CAB)
- Organised prioritisation activities with stakeholders and the CAB using MoSCoW techniques.
- Carried out usability testing, qualitative user surveys (with 300+ users), and one-on-one user interviews
- Established the design system based on the Google material UI components
- Created high-fidelity mock-ups for adaptive and responsive design
Tools and techniques used
Research (Understanding the current document management portal)
This portal is used by engineers to review revisions of documents such as vendor contracts, engineering drawings, plant blueprints etc., and share it with external contractors. Additionally, it is also used to store and retrieve old revisions, when needed.
A document revision is sent via an internal or external transmittal and can contain four or more files: 1 publication file, 1 source file, comment file(s) and other file (s).
The workflow
The overview of the document review workflow between the internal and the external companies is as follows:
Understanding key personas
Understanding the user task flow
The reviewers and responsible engineers (RE) share the following tasks- (1) searching for various documents and (2) reviewing the documents assigned to them by adding their comments and closing them out. The RE, has a few additional tasks like accepting and rejecting of reviewer’s comments. The detailed workflow of the document review process for a RE is shown below.
Creating the user journey map
Analysing the current information architecture
The information architecture of the current ‘document search’ and the ‘document inbox’ screens was created. The screenshots of the respective screens are attached along the IA. Also, the design issues in various screens and their possible solutions are displayed together in black and red colours respectively.
Detailed UX issues in the current portal
The following images show the detailed UX issues identified with the ‘document inbox’ and the ‘document review’ screens.
What do users say?
User surveys
Designed and circulated online user surveys (using Microsoft forms) to collect qualitative responses regarding end-user frustrations with the current portal and expectations from the new design. Responses from 341 users were collected and analysed to derive user needs, pain points, features and actionable design insights.
Analysis
The answers to each of the survey questions were analysed by grouping and extracting similar themes.
Prioritization workshop with stakeholders
Virtual prioritization and story mapping exercises were carried out with the product owners, senior managers, subject matter experts, and other stakeholders to decide the most viable features to implement in the document inbox tab for the first release.
The MoSCoW prioritization technique was used to sort the extensive list of features for the document inbox into must-have, should have, can have and won’t have categories. The ‘Must haves’ were chosen for the MVP.
The redesign
The following screens were designed after understanding the user needs and discussions with the stakeholders. The new information architecture of the portal is as follows:
The redesigned document inbox screen is as follows:
The new review screen flyout shows a clear review summary as shown below:
The redesigned document review screen is as follows:
Usability testing
The designed screens were tested with 2 users with the help of 44 tasks.
The following were some of the testimonials given by the user:
“It looks more modern, up to date. If I compare it with the old one, because I am familiar with it, I know where to go and what to click, this UI will be easier.”
“I was specifically impressed with inbox. Because it not only shows the categorization of tasks now which is much more clear: what’s for action, what’s for info, what’s already completed. Those are the moments that engineers get lost. Now it is more convenient for users
“Is it more user friendly! Because there are no popping up windows, that will go somewhere at the bottom of the computer, and you keep trying to find where you were working.”
A few key insights from usability-testing
- Introduced new comment state icons to indicate the real-time state of the reviewer comments such as commenting in progress, reviewer comment final, RE comment etc. These were absent in the existing application.
- The ‘open’ checkbox column in the review screen was removed, as the users got confused and it did not add much value.
Changes made after Usability Testing:
- The column title ‘Reviewers’ progress’ was ambiguous to the user. It was not clear if this progress included the progress of the RE in addition to that of reviewers’. Thus the column title was renamed along with a clear tooltip.
- Users also tend to close comments in subsequent revisions. Thus, a new comment state icon of ‘Closed by RE’ and a new column of ‘Closed in revision’ were introduced in the ‘Comment history’ tab, as shown below.
- Current application does not give any warning about the pending open comments in the redline tool. It was added in the new design.
Other insights
- Users expected to see the filtered results retained in the inbox screen when they navigated back from the review screen. Changes were made as expected.
- The user could not find how to add bulk comments before closing out multiple documents. This screen was redesigned.
- A few minor bugs were also pointed out by the users and fixed by the product team.
Establishing the design system (Google Material UI)
