IBM: Daeja File Viewer
File Viewer component is used across all IBM products. It helps users to open, markup, or edit documents.
Time-frame:
3 months (Sep - Nov 2019)
My role:
Sr. Product designer
Deliverables:
UX flow & wireframes
Interaction design
Visual design based on Carbon design system
Iconography
Documentation
Product
Daeja is a web component to preview different types of documents. This component is used almost in any IBM product connected with content management. It lets users preview documents, edit documents, add annotations, and comments.
Before
After
Exploratory research
I started with exploratory research to better understand the product and the people who are using it.
I identified three groups of users:
🧑💻 Knowledge Workers: people who open a document and perform actions based on context; they need to analyze all details of the document.
🧑💻 Task workers: People who perform the same task all day long (for example, review the claim and pre-approve it). They can open up to 300 documents per day, in this case time is a key.
👨🔧 People who set up Daeja for end-users (providers/assemblers)
I conducted the first interviews with people from all three groups and created a flow of how people use the app. With the Mural app, I created a high-level user journey flow to share during my interviews. During the interviews, users added details, extended this flow, and identified the pain points.
Then I clustered feedback in 3 groups:
As-is working process and pain points
What users want (new features and ideas)
What surprised me
This exploratory research helped me to answer my questions and support or disprove some of my assumptions.
To share learnings from research with dev team and PM, I moved it to the digital format on Mural, where everyone could comment and contribute. I clustered nuggets based on a problem.
On the same Mural board, we started to add all the ideas and problems we knew before.
Goals
Based on research results, I put together goals for the project
Improve the usability of the app and bring standard modern interactions to the app. Users can perform the main tasks (merge and split documents, add annotations, and redact sensitive information) without tutorials.
Improve the accessibility of the component.
Enhance discoverability of the information in the document. Users can find particular information in the document in less than 30 seconds.
Add the possibility to measure metrics for the future
Process
Exploring options to structure navigation and different options to switch different modes
One of the hardest tasks for me was to understand what people use most, what we can simplify, and what we can hide from the main screen. Speaking with tech salespeople and the support team helped me learn such details as our customers not changing the layout of the panels and not needing many colors, as they just highlight pieces of information on the document. These details helped me to clean up the screen and combine functions into the dropdown.
What was done
In the new version of the component:
Identified all functionality users use a lot, and all features users use in some edge cases were hidden from the main interface.
User can set up viewer once and all preferences will be saved for the next time
Users can quickly find the action they need. I organized controls into meaningful groups and also minimized the number of operations exposed to the users. Decisions to keep or exclude widgets were made based on interviews with users and exploring tons of use cases with support team.
Document Details
Based on feedback from the users, we added the capability to review details and apply an action.
Comments
From our research, we learned that users spend a lot of time reviewing previously added comments. To save them time, I introduced a comments panel that displays all comments. Additionally, an indicator on each thumbnail shows how many comments each page has.
Users can directly add comments to a document and mention other users from the organization
History
In case of any problems with changes applied to the documents, users can always access the history to check what changes were made, by whom, and when.
Users can merge documents in less than 30 seconds.
Based on user interviews, the merge and split feature is used when a user wants to split a document into several documents or merge several documents. It’s not page-based but more a document-based operation.
In the old version, users needed to activate a special mode called ‘merge and split’ and copy-paste each page individually in this special mode. The whole process was pretty complicated and time-consuming.
In the new version, users can merge or split documents in just a few clicks; the user is guided through the process step by step by the interface. This flow was tested with UserTesting.com, and the results were great.
Improving accessibility
As a designer, part of my job is to provide directions for developers to develop applications that are accessible to everyone.
Together with the content designer, we provided labels for all buttons so that screen readers could read them. We made sure field labels persist and remain visible when the focus is inside the field.
I also described the implementation of keyboard features. For the interface with a toolbar, it’s essential to implement focus management, so the keyboard’s tab stops at the toolbar, and arrow keys move the focus among the controls in it, allowing people to use the application without a mouse. Focus indicators should be highly visible on fields and all interactions
What’s next?
The new version was tested with users in December 2019 and released in January 2020. Users well received it. Some changes were made to accommodate some edge use cases. Currently, this component is used by all new applications in content management at Data Business Analytics department.
This were just first steps to improve this components. Main purpose of annotating document is to communicate pieces of information with a colleague. This flow can be definitely improved by implementing comments and notification system. Unfortunately, it was out of scope till 2021. Also we didn’t have time to improve accessibility of canvas area (area with a document image), but team has backlog with all tickets for the accessibility issues.