Reporting Library
In the dynamic environment of the healthcare industry, the Reporting Library serves as an expansive database that offers doctors, nurses, and head office employees access to essential dashboards, documents, and more, facilitating their day-to-day tasks. As a member of the UX team, I was entrusted with the challenge of addressing the following issues within the new Reporting Library. Through meticulous research and innovative design solutions, the outcomes achieved were truly remarkable.
My Role
As the lead UX designer, I assumed responsibility for spearheading the research and design efforts of this project. Collaborating closely with Melissa, the product designer, and Morgan, the product owner, we maintained constant communication and coordination throughout the entire project lifecycle. Employing the Scrum methodology, we ensured efficient project execution, and successful outcomes.
Problem
With the progressive expansion of the user base for the Reporting Library, the System Optimization team has experienced a rising influx of complaints regarding its functionality and usability. Regrettably, due to the lack of a specialized design team and limited financial resources, the library has remained stagnant since its initial launch without receiving any updates.
Outdated visual appearance
Since its inception, the user interface of the Reporting Library has remained unchanged, resulting in numerous user complaints regarding its outdated design reminiscent of the 90s era. Users have expressed dissatisfaction with the poor quality of the overall user experience.
Difficulties in locating and accessing resources
The existing database setup prioritizes the display of the most viewed and popular items on the initial page, while relegating other documents and resources to a single section. However, this approach poses challenges as users may struggle to locate specific information, and even if they do find it, many encounter restricted access despite the need for it. Furthermore, there is currently no established procedure in place for users to request access to the desired information, further hindering their experience.
Unclear contact information
The absence of a dedicated contact page within the System Optimization framework presents challenges for end users seeking to reach out to their site contacts for information, resources, and other inquiries. As roles frequently change, end users face difficulties in staying updated on their current site contact.
Frustration in finding specific information
The challenges posed by the reporting library's database often lead to users repeatedly requesting the same information due to difficulties in locating specific details. Consequently, many end users find themselves submitting similar requests with minor variations, as the available resources do not align precisely with their search criteria.
Goal
The primary goal of the project is to create a modern and minimalistic design for the platform. This will involve implementing an organized navigation menu, intuitive filters, and a search bar to enhance user accessibility. Additionally, building an efficient email system for requesting resources and developing a streamlined Contact Us page will facilitate smooth communication with users. Furthermore, the project aims to emphasize and promote "Our Products" and "Our Services" sections to showcase the platform's offerings effectively.
Early Ideation
These low fidelity wireframes present an initial exploration of the Our Products overview page, aiming to maintain a familiar structure and content from the previous Reporting Library, including the prominent display of most popular products. These wireframes serve as a starting point to gather feedback and refine the design, ensuring a seamless transition for users while enhancing the overall user experience.
These wireframes showcase the product page, highlighting the embedded feature that allows seamless access to various types of documents. For the About Us page, the focus is on conveying System Optimization's goals and agile methodology, with a minimalist approach to text content. The contact page aims to effectively display all site contacts and their relevant information, balancing clarity and details.
To address the lack of a search feature in the old Reporting Library, I created wireframes to explore potential solutions and brainstorm ideas for its implementation on the Sharepoint platform.
Medium-fidelity wireframe for the landing page, featuring the key components and incorporating both actual content and filler text. This included the integration of icons, profile images placeholder, and logos to enhance the visual appeal. While retaining the positive aspects of the previous reporting library, such as the inclusion of popular resources, as well as incorporating a section for resources.
The products page is meticulously organized, categorizing resources into specific departments for enhanced user convenience. The wireframe incorporates image placeholders, document types, last updated information, and other relevant details. This thoughtful design approach allows users to easily locate and access the desired resources within a consolidated and intuitive interface.
This wireframe showcases the product page design, with the objective of seamlessly embedding the product within the page. This integration enables the activation of documents like dashboards while still providing the capability to open PDF files. The primary emphasis of this page is simplicity, focusing on the essential elements such as the document, title, description, and a convenient breadcrumb trail for easy navigation.
The medium wireframe presents a comprehensive overview of System Optimization's goals and process, while consistently highlighting our range of products and services. It effectively communicates the core objectives and value proposition of our team, ensuring that the user remains engaged and informed throughout their interaction with the platform.
The implementation of this wireframe serves as a crucial solution by providing departments and hospitals with clear visibility of their designated site contacts and the means to establish communication with them. Additionally, it streamlines the process of requesting document creation or gaining access to specific files by providing users with a centralized point of contact within the System Optimization team. This enhancement ensures efficient and effective communication channels within the reporting library.
The search page, showcases the seamless integration of the feature with Sharepoint. It includes image placeholders and detailed descriptions of the available resources, along with pertinent information such as document types, last update dates, and publication details. This design ensures an intuitive and informative user experience when searching for specific documents within the platform.
Skills & Tools
Skills
Research
Sketching
Web Design
Wireframing
Prototyping
Graphic Design
Tools
Illustrator
Photoshop
Figma
Process
Recognizing the pain points present in the current Reporting Library, Melissa and I initiated the project with a comprehensive case study involving staff members, including managers and directors who regularly utilize the platform. To gain valuable insights, we conducted usability testing using the think-aloud strategy, wherein participants performed specific tasks followed by in-depth interviews. This case study enabled us to pinpoint key pain points, paving the way for phase two of the project.
To ensure a professional and consistent look, I prioritized the creation of a style guide. Collaboratively selecting font types, colour schemes, and assets such as icons and buttons, Melissa and I proceeded with sketching and wireframing. Our primary objective was to maintain the intuitive functionality of the Reporting Library while avoiding any significant relocations of popular files. Leveraging Figma as our design tool allowed seamless collaboration, as both of us could work simultaneously, overcoming any delays caused by remote work necessitated by Covid-19.
Upon concluding the UI design phase, we obtained the product owner's approval to proceed with prototyping. Leveraging the capabilities of Figma, we presented a compelling demonstration of the website's functionality and seamless navigation to our audience. Following their positive feedback, we seamlessly incorporated the finalized style guide, making necessary refinements to deliver a polished high fidelity working mock up.
Final Designs
This high fidelity prototype demonstration showcases the main page of the reporting library, highlighting the product section and its interactive filtering feature. It provides a seamless user experience by simulating the process of opening a document, exemplifying how a live dashboard would be displayed within the platform. The demonstration effectively conveys the user journey and functionality of the reporting library, reinforcing its intuitive design and practicality.
Continuing with the high fidelity prototype demonstration, it also exhibits the search feature, empowering users to easily locate their desired documents by searching through document names. Additionally, the prototype includes an "About Us" page that succinctly presents the overarching goals and objectives of System Optimization. These elements contribute to a comprehensive and user-friendly reporting library experience, ensuring efficient document retrieval and providing valuable insights into the team's purpose and mission.
The contact page serves as a central hub for users within Fraser Health to connect with System Optimization and request necessary resources. To enhance user familiarity and engagement, I incorporated profile pictures of each contact alongside their respective responsibilities, fostering a personal connection beyond email addresses alone. Moreover, while prioritizing user convenience, the contact page seamlessly promotes our products and services, ensuring a holistic experience for visitors navigating the reporting library. For a more comprehensive view of the Reporting Library, please refer to the provided link to the full document.
This style tile serves as a visual representation of the key elements and components derived from our comprehensive style guide for the Reporting Library. It showcases the cohesive design language and aesthetic choices that were carefully crafted to ensure consistency throughout the website. For a more comprehensive view of the style guide and its application across various pages, please refer to the provided link to the full document. Link to style guide & components.
Reflection
The project garnered significant success, obtaining approval from both the director and managers to proceed with the website development. However, as a result of the Covid-19 pandemic, the project had to be temporarily put on hold due to the emergence of a higher-priority initiative.
We encountered several challenges, including the need to adapt to using Figma as a design tool and conducting research remotely to identify pain points amidst the early days of the Covid-19 outbreak. Adding to the complexity, we faced restrictions in making font and department logo changes and implementing the new design within the Sharepoint platform. Unfortunately, conducting on-site research with doctors and nurses was not possible due to restrictions, and recruiting participants for the study proved challenging as they were preoccupied with their Covid-19-related projects and responsibilities. Despite these challenges, we persevered and leveraged alternative methods to gather valuable insights and deliver a successful design solution.
During this period, I embraced the opportunity to create a mockup website using Figma, further enhancing my proficiency with the tool. Additionally, I spearheaded the creation of a new Reporting Library for System Optimization, prioritizing the promotion of their products and services. Throughout the project, I reaffirmed the importance of visual consistency in delivering a seamless user experience. The development of a comprehensive style guide emerged as a crucial aspect, ensuring consistency and efficiency across websites and other large-scale endeavours.