Evolving the Xodo UWP Toolbar Experience
Problem
The existing toolbar suffers from hidden and confusing tools, lacks organization, and is difficult to discover, resulting in a poor experience and hinders efficient navigation and usage.
Solution
Redesign and rehaul the toolbar to improve cohesiveness, user experience, and tool organization. Keep important tools visible and first in slot, add labels, categorize tools, and enable one-click actions.
Outcome
Users experience a more cohesive and user-friendly interface, with two fewer clicks to perform tasks. Feedback confirms the ease of use and non-disruptive UI change, resulting in improved efficiency.
1
Overview
Summary
This redesign project aimed to improve the overall user experience by addressing issues with hidden tools, lack of organization, and poor discoverability. The old toolbar presented challenges for new users to discover and understand the available tols, leading to a steep learning curve. The project involved keeping important tools visible, adding labels for tool identification, categorizing the tools, and streamlining the user flow.
Through iterative design and user feedback, the project aimed to enhance tool accessibility and optimize user interactions. The outcomes of the project were geared towards achieving a more intuitive and efficient toolbar experience for Xodo users.
Through iterative design and user feedback, the project aimed to enhance tool accessibility and optimize user interactions. The outcomes of the project were geared towards achieving a more intuitive and efficient toolbar experience for Xodo users.
Key Objectives
- Create a more cohesive and user-friendly toolbar that would benefit both new and existing users.
- Organize tools in categories similar to Xodo on Android/iOS and order tools in each category from most used to least used.
- Go through all tools/features and redesign the ones that aren't actionable with one click.
2
Design Approach
Original toolbar designs
Click the image to scroll through all wireframes
.png)
We are embarking on a redesign project for the original designs displayed here. I'd like to draw attention to the flow depicted in these screenshots, particularly the first one in the thumbnail, which represents the initial view when opening a document.
The primary issue lies in users being confined to a 'view only' mode until they access the edit or other actions. Furthermore, the arrangement of features on the toolbar lacks coherence, with no clear rationale behind their grouping. For instance, the edit button, which is the most frequently used option on this screen, is inconspicuously positioned as the fourth button on the right side. This arrangement poses a challenge for new users who might not even realize its presence unless they hover over or click on it, which makes it difficult for users who rely on touch actions.
Moreover, we observed that the arrangement of features on the toolbar lacks coherence, with no clear rationale behind their grouping. Some tools are one-touch actions, while others lead to additional tools or color presets, causing confusion for users who do not know how to initiate these actions. To address this, we meticulously examined all non-one-touch action tools to make them more cohesive with the rest and enhance their usability. By doing so, we aim to improve the overall user experience and ensure seamless navigation for both new and existing users.
The primary issue lies in users being confined to a 'view only' mode until they access the edit or other actions. Furthermore, the arrangement of features on the toolbar lacks coherence, with no clear rationale behind their grouping. For instance, the edit button, which is the most frequently used option on this screen, is inconspicuously positioned as the fourth button on the right side. This arrangement poses a challenge for new users who might not even realize its presence unless they hover over or click on it, which makes it difficult for users who rely on touch actions.
Moreover, we observed that the arrangement of features on the toolbar lacks coherence, with no clear rationale behind their grouping. Some tools are one-touch actions, while others lead to additional tools or color presets, causing confusion for users who do not know how to initiate these actions. To address this, we meticulously examined all non-one-touch action tools to make them more cohesive with the rest and enhance their usability. By doing so, we aim to improve the overall user experience and ensure seamless navigation for both new and existing users.
Defining design principles
We wanted to focus on creating a seamless user experience that catered to the needs of both new and existing users. The team aimed to enhance tool accessibility, improve organization, and streamline the toolbar's user flow.
To achieve this, the following design principles were adopted:
To achieve this, the following design principles were adopted:
- Visibility: Keeping most important features visible upon document upload to reduce search efforts.
- Clarity: Adding clear labels to each tool for better identification.
- Organization: Categorizing tools based on functionality for improved discoverability and putting the most frequently used tools first.
- Efficiency: Implementing one-click actions for each tool to reduce navigation steps.
3
Design Process
User research
Qualitative data analysis was conducted to gain insights into user pain points, gather feedback, and most frequently used tools and patterns in user workflows, which allowed us to prioritize the redesign efforts effectively.
We conducted a thorough analysis of data from all three platforms to verify whether the most frequently used tools in the Windows platform align with those in Android and iOS. Our aim was to address the disparity between the Windows platform toolbar and the Android/iOS counterparts. By comparing the performance of the other platforms, we sought to validate the rationale for aligning the toolbars more closely. If we found that the other platforms performed equally or better, it would strengthen our justification for the proposed alignment.
We conducted a thorough analysis of data from all three platforms to verify whether the most frequently used tools in the Windows platform align with those in Android and iOS. Our aim was to address the disparity between the Windows platform toolbar and the Android/iOS counterparts. By comparing the performance of the other platforms, we sought to validate the rationale for aligning the toolbars more closely. If we found that the other platforms performed equally or better, it would strengthen our justification for the proposed alignment.
Creating new user flows
Initially, this project was meant to be a quick rework of the toolbar displayed when users upload a new document, along with a reorganization of tools based on their usage frequency, complete with labels underneath. However, as I delved into the designs and reviewed the user flow, it became evident that these changes wouldn't be sufficient.
I discussed the arising issues with the product manager, exploring potential solutions that could be implemented based on the available time and resources. We both agreed that dedicating more time to the project would allow for a more comprehensive redesign, ultimately enhancing the overall user experience.
As a result, I decided to create a new user flow to better organize the tools and provide clear guidance for the developer on where each tool should be placed. This new approach ensures a more cohesive and intuitive arrangement, leading to an improved user experience.
I discussed the arising issues with the product manager, exploring potential solutions that could be implemented based on the available time and resources. We both agreed that dedicating more time to the project would allow for a more comprehensive redesign, ultimately enhancing the overall user experience.
As a result, I decided to create a new user flow to better organize the tools and provide clear guidance for the developer on where each tool should be placed. This new approach ensures a more cohesive and intuitive arrangement, leading to an improved user experience.
4
Implementation
Collaborating with the developer
As this project evolved into a larger rework of the toolbar, I scheduled a call with the developer to walk them through the new user flow and the details of the redesigned designs. To ensure alignment and clarity, I also invited the product manager to join the call, providing an opportunity for them to add any valuable insights or seek clarification.
This call proved to be crucial as the developer shared valuable feedback based on their understanding of typical user behavior and potential pain points. Through this collaborative discussion, we identified and resolved minor inconsistencies that could impact the overall flow and user experience. By addressing these issues, we aimed to create a more intuitive and seamless experience for both new and existing users.
Collaboration and clear communication between the two teams were essential in ensuring the design vision was faithfully translated into the final product. REgular meetings and progress reviews helped address any technical challenges that were encountered during implementation
This call proved to be crucial as the developer shared valuable feedback based on their understanding of typical user behavior and potential pain points. Through this collaborative discussion, we identified and resolved minor inconsistencies that could impact the overall flow and user experience. By addressing these issues, we aimed to create a more intuitive and seamless experience for both new and existing users.
Collaboration and clear communication between the two teams were essential in ensuring the design vision was faithfully translated into the final product. REgular meetings and progress reviews helped address any technical challenges that were encountered during implementation
New designs
Click the image to scroll through all wireframes
.png)
In these designs, my goal was to showcase the comprehensive view of all the toolbars, including the prospective tools, in both regular and tablet modes. Additionally, I wanted to illustrate the newly introduced one-click experience, which utilizes a popup modal on the right side. The decision to incorporate the popup modal was driven by the need to maintain a consistent toolbar layout while providing ample space for the functionality of the in-depth toolbar features.
Towards the end of the project, we made a significant addition by integrating the capability to upload files directly to our new cloud drive, Xodo Drive. I included designs depicting a successful upload scenario as well as how the interface would handle errors if the upload failed. Furthermore, we ensured that users could easily download files locally, and the designs demonstrate the success and error messages associated with this feature. This comprehensive set of designs aims to provide users with a seamless and efficient experience while interacting with the toolbar and managing their documents.
Towards the end of the project, we made a significant addition by integrating the capability to upload files directly to our new cloud drive, Xodo Drive. I included designs depicting a successful upload scenario as well as how the interface would handle errors if the upload failed. Furthermore, we ensured that users could easily download files locally, and the designs demonstrate the success and error messages associated with this feature. This comprehensive set of designs aims to provide users with a seamless and efficient experience while interacting with the toolbar and managing their documents.
5
Results & Impact
Analytical data
To gather more feedback on the redesigned toolbar, we decided to implement a button in the settings, allowing users to revert to the old toolbar if they preferred. Additionally, we introduced a popup where users could provide their reasons for switching back. Our aim was to understand how many users were not satisfied with the new design and gain insights into their specific concerns. We recognized that while many users might not leave feedback, even a single response could prove valuable.
In the following months, we observed promising changes in user behavior. Users spent less time on the landing page after uploading a new document, indicating an improved ability to find the next steps they wanted to take more efficiently. Moreover, there was a decrease in the time spent between switching to different tools, suggesting improved ease in locating the desired tools, now that they were labeled and categorized.
However, despite these positive results, we acknowledged that to truly understand the reasons behind user behavior, conducting interviews with users would be ideal. Unfortunately, at this moment, conducting interviews is not feasible. Nevertheless, the data and observations provided valuable insights, helping us fine-tune the toolbar and optimize the user experience based on user preferences and behavior.
In the following months, we observed promising changes in user behavior. Users spent less time on the landing page after uploading a new document, indicating an improved ability to find the next steps they wanted to take more efficiently. Moreover, there was a decrease in the time spent between switching to different tools, suggesting improved ease in locating the desired tools, now that they were labeled and categorized.
However, despite these positive results, we acknowledged that to truly understand the reasons behind user behavior, conducting interviews with users would be ideal. Unfortunately, at this moment, conducting interviews is not feasible. Nevertheless, the data and observations provided valuable insights, helping us fine-tune the toolbar and optimize the user experience based on user preferences and behavior.
Iteration and future enhancements
As part of the commitment to continuous improvement, the team plans to iterate on the redesigned toolbar based on user feedback and evolving needs. Regular updates will be released to address emerging user preferences and potential pain points. The team is also exploring opportunities to introduce personalized tool customization options, allowing users to tailor the toolbar to their specific workflows.
Conclusion
In conclusion, the redesign of the UWP tool has successfully addressed user pain point sand improved overall user experience. The user-centric design approach, combined with ongoing user engagement and feedback, contributed by the project's success. The redesigned toolbar offers a cohesive and user-friendly interface, positively impacting both new and existing users. The insights gained from this project will inform future design iterations, ensuring the Xodo UWP toolbar remains avaluable and efficient tool for its users.