Panviva: Document Manager layout
Project: Document management layout
Background
Panviva is a Knowledge Management System (KMS) that was acquired by Upland Software, which only implemented a UI refresh.
Originally built 20 years ago, the system had never been reviewed since, aside from the addition of new features based on customer requests.
Panviva demonstrated a low maturity level in UX design.
The user research and definition phases have already been completed.ere.
THE GOAL OF THE PROJECT
The goal is to address the problems identified during the user research and discovery phase:
- The layout is difficult to navigate, and chunking and layering for non-experts are challenging.
- Users want to fast-track content creation, needing to create multiple documents simultaneously and then delve deeper into each one later.
- There is a lack of simplicity in the layout and structure, making it hard to focus on the current task while consistently seeing the three mandatory panels.
- Users requested an easier experience for the limited time they have to navigate the folder tree and create new documents.
- They want the product to be more proactive; for example, the editor button should be easily accessible.
- There is a desire to reduce manual effort.
- Users expressed the need for personalized actions.
- The ability to right-click and drag-and-drop is essential.
Features that were redesigned
The features that were redesigned to achieve our goal of a usable and accessible document management system include:
- Document Management Structure (Layout)
- Left-Hand Menu
- Top Navigation Bar
- Navigate Folder Tree
- View Document Content Table
- View Folder Details & Actions
- Edit Folder Details & Actions
- View Document Details & Actions
- Edit Document Details & Actions
- Open Document Editor
- Copy Folder
- Move Folder
- Archive Folder
- Create Folder
- Copy Document
- Move Document
- Archive Document
- Create a New Document
- Create Bulk Documents
Old Layout
This is how the layout appeared when a user opened the Manager Portal, and the reasons for user dissatisfaction included:
- The chunking and layering of the layout made navigation difficult for non-experts, as three panels were always visible, even when the user was not interacting with one of them.
- There was no option to create multiple documents simultaneously.
- New users could not easily find a visible "Create New" button.
- A lack of simplicity in the layout and structure made it hard to focus on the current task with all three mandatory panels constantly displayed.
- It took several minutes to navigate to the needed document.
- There were no quick actions or shortcuts available for power users.
Design Process:
Ideation & Conceptualization
We conducted multiple brainstorming sessions with stakeholders to gather our ideas on a Miro board.
Next, we defined various user scenarios, including:
- As a user, I want to find a document to edit its metadata.
- As a user, I want to open the editor of a document to edit its content.
- As a user, I want to manage different document metadata simultaneously.
- As a user, I want to easily find the folder I recently opened when I log in.
- As a user, I want to move documents easily from folder to folder.
Prototyping
I decided against using hand-drawn sketches or very low-fidelity mockups, as the team preferred to see a more realistic representation of the UI due to their low maturity in design processes. Instead, I opted for low-fidelity mockups that incorporated elements close to the final UI, leveraging Upland's existing design system applied across various products.
To achieve this, I utilized modified screenshots from different products to provide a clearer vision of the final UI. I created the mockups in Miro, which allowed for effective communication with the team and served as a quick method to present our ideas.
The process involved interactive discussions followed by iterations. We went through eight iterations of low-fidelity mockups, and by the eighth iteration, we agreed to proceed with user testing.
The layout needed to retain three key panels:
- Folder Tree
- Document Table
- Metadata
The Challenge
The challenge was to maintain the three essential panels:
- Folder Tree
- Document Table
- Metadata
However, we needed to ensure that these panels did not distract users with unnecessary information, allowing them to focus on the task at hand.
ITERATION 1
We initially aimed to simplify the layout by creating two separate tabs: one for the Folder Tree and another for the Content Table. This approach was intended to accommodate various scenarios and use cases.
The Challenge:
However, we soon realized that this solution was overly complicated. During our discussions, we uncovered a new use case: managers wanted to view each folder alongside its documents to compare folder contents effectively.
ITERATION 2
We then considered making all three panels visible to accommodate various scenarios, aiming for an adaptive layout that users could drag to expand or collapse.
The Challenge:
However, we encountered a problem: if the Document Table overlapped the Metadata section, it would be difficult for new users to locate where to edit the metadata.
ITERATION 8
In this iteration, we ensured that all three panels were open simultaneously for the necessary scenarios while allowing each panel to be customized and collapsible. This approach makes it easy for users to focus on their current tasks without clutter from unrelated information.
Check the final iteration:
Usability Testing sessions
Testing Methods:We conducted online moderated usability testing sessions, followed by interviews to gather feedback on users' experiences.
We tested Iteration 4 and subsequently worked on three more iterations before testing Iteration 8, which allowed us to finalize the solution based on user feedback.
Results: We completed two rounds of testing during iterations 4 and 8, ensuring that Iteration 8 met customer needs. Users reported high levels of satisfaction, and we conducted a total of eight usability testing sessions.
Usability Testing Plan
Testing Plan Components:
- Objectives: Clearly define the aims of the testing and the questions you seek to answer.
- Participants: Identify the target user groups and recruit a representative sample of participants.
- Methodology: Choose the type of testing to be conducted (e.g., usability testing, A/B testing) and determine the testing environment (e.g., in-person, remote).
- Test Tasks: Define a set of tasks for participants to perform in order to evaluate the product or feature.
- Evaluation Criteria: Identify the success metrics to assess the product or feature.
- Script and Facilitation: Create a script to guide the testing session and designate the facilitator.
- Data Collection: Decide how data will be collected (e.g., observation, recording, surveys) and outline the analysis methods.
- Reporting: Determine how the results will be communicated and shared with relevant stakeholders.
- Implementation: Plan how to incorporate insights and recommendations from the testing into the product development process.
Breakdown
When users first land on the page, no folder is selected by default, leaving the right-hand side of the screen nearly empty. This design allows users to focus on their desired actions. When they open a folder, it’s cached so that users see the last folder they accessed during their previous session. Additionally, users can right-click on a folder or hover over it to open the metadata panel for that folder.
Delivery plan
We ensured that developers were aligned at each stage of the project, delivering the following to meet their needs:
- Design system alignment
- Structured delivery through prototypes
- Design handoff, including user stories and epics
THANKS 🙌
Copyright © 2024 salmasamh.com - All Rights Reserved.
This website uses cookies.
We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.