OVERVIEW
A centralized website that enhances kidney health, advances collaborative care and empowers communities.
The Nefros website serves as the official online platform for the Kidney Health Education and Research Group (KHERG) at UHN (University Health Network). With a diverse audience in mind, it caters to both internal employees and external users, including patients, healthcare professionals, researchers, and organizations.
However, the Nefros website has encountered challenges in recent years, including a lower donation rate. Additionally, feedback from internal workers indicates a preference for seeking information directly from supervisors or coworkers, rather than relying on Nefros, due to difficulties in navigating the website.
TIMEFRAME
Aug 2022 - Mar 2023
MY ROLE
Lead UX Designer
TOOLS
Figma
Photoshop
Google sheets
DELIVERABLE
Hi-fi prototype
Content audit report
PRIMARY RESEARCH
Confusion about the website.
To kickstart the project, I initiated the process by conducting a comprehensive content audit of both the external and internal websites. This involved thoroughly reviewing all the pages and carefully mapping out the existing information architecture of the website. Additionally, I conducted interviews with internal workers to gather valuable insights and perspectives.
Outlined below are the main findings:
-
User Confusion: The information and content on the website were presented in a manner that inadequately conveyed its purpose, resulting in users being uncertain about how the website functioned.
-
Internal Information Accessibility: Internal workers faced challenges in locating the information they needed, suggesting that the current structure of the website hindered efficient information retrieval.
-
Broken Links: The presence of broken links significantly impeded users from effectively utilizing the website, hampering their ability to access desired resources or navigate to specific pages.
-
Inadequate Onboarding: The onboarding system for new members was found to be lacking, indicating the need for improvements to ensure a smooth and effective integration process.
-
Inconsistent Visuals: The visuals on the website were inconsistent, contributing to a cluttered design that made navigation difficult for users.
How might we establish users' trust for the external site while also making it easier for internal staff to use the internal site on a daily basis?
DESIGN GOAL
External site
-
Enhance Clarity and Trust: Simplify the presentation of information on the external site to minimize user confusion. Clearly showcase the research conducted by researchers and students and eliminate broken links to instill trust in potential sponsors, ultimately encouraging increased donations.
Internal site
-
Improve Information Accessibility: Optimize the internal site's navigation and search functionality to help internal workers easily locate the information they require. This will reduce the need for excessive emailing and improve efficiency in accessing necessary resources.
-
Streamline Work Processes: Identify pain points in the daily work processes of internal researchers and implement solutions to streamline and simplify their tasks. This may involve creating a centralized hub for research-related tools and resources, optimizing collaboration platforms, or automating repetitive tasks where possible.
PROPOSED SOLUTION
External site
-
Information Architecture: Begin by reorganizing the information architecture of the external website. Evaluate the existing sections and prioritize them based on relevance and importance. Ensure a clear and logical hierarchy of information that guides users to the content they are seeking.
-
Homepage Restructuring: Review the current homepage and identify sections that require improvement in terms of organization. Streamline the layout, consider reordering sections based on importance, and ensure that the most critical information is prominently displayed.
-
Page Revamping: Perform a thorough revamp of the other pages on the external site. Focus on enhancing the clarity of content, improving visual design, and ensuring consistency in the overall presentation. Highlight the research conducted by researchers and students, showcasing their achievements and the impact of their work.
Internal site
-
Entrance Page Organization: Start by reorganizing the entrance page of the internal site to improve usability. Clearly present key resources, tools, and links that internal workers frequently access. Implement an intuitive and user-friendly layout that allows for easy navigation and quick access to essential information.
-
Page Revamping: Similar to the external site, revamp the other pages on the internal site. Pay special attention to the content relevant to internal workers' needs, making sure it is well-structured and easily searchable. Consider implementing features such as filters, tags, or robust search functionality to facilitate information retrieval.
DESIGN PROCESS
External website - Information Architecture Overhaul
As the lead UX designer on the project, I played a central role in driving the website redesign process. During the design process, one of the areas I focused on was the information architecture for the top navigation and bottom navigation of the external site. After a thorough review, I noticed that there is duplicated content between the parent menus and their respective sub-menus. Additionally, the presence of a "v" icon next to each parent menu often leads users to click on the child menu instead of accessing the parent menu.
To address these issues, I suggested integrating the content from each parent menu into their respective child menus. This consolidation of content will help streamline the navigation experience and eliminate redundancy. By eliminating the duplicated content and ensuring that the parent menus primarily serve as navigational entry points to their child menus, users will have a clearer understanding of the website's structure and be able to navigate more intuitively.
Landing Page Overhaul
Then I started off by redesigning the homepage of the external website.
Before
After
Top Nav
-
Emphasize the "Donate to support our research" as the main call-to-action button.
-
Include a secondary button for "Team Login".
-
Reorganize the layout of the top navigation bar.
Banner
-
Add a banner section to showcase current studies and research.
-
Place "Our Mission" under the banner to clearly communicate the organization's mission.
Our Research
-
Rename the section to "Our Research".
-
Separate the survey about kidney transplants and the donation entrance into two distinct sections: "Tell us" (survey) and "Support us" (donation button).
Recent Publications
-
Reorganize the layout to display publications in a left-right card alignment.
-
Implement a sliding feature to showcase different publications.
-
Include a "More recent publications" button for users to explore additional publications directly from the homepage.
News & Events
-
Reorganize the layout of the section.
-
Add a "More News & Events" section, allowing users to navigate to the dedicated page.
-
Display the latest news on the left and past news on the right.
Footer
-
Reorganize the footer sections based on the mapped information architecture.
-
Categorize the sections into three main categories for better functionality.
-
Ensure that the footer provides quick access to essential resources, such as navigation links and key contact information.
DESIGN PROCESS
Internal platform - Log in flow & Dashboard
-
Lack of Return to Dashboard Option
-
The current login flow of the internal platform directs users to the main dashboard upon logging in. However, a significant issue arises as there is no direct way for users to navigate back to the dashboard if they visit other pages within the platform. They are left with the only option of using the browser's back button.
-
-
Outdated and Inaccessible Content on the Dashboard
-
The content displayed on the dashboard is outdated and fails to provide users with direct access to valuable information. Consequently, users struggle to find the relevant content they need, resulting in a suboptimal user experience.
-
Improved Login flow and dashboard content
-
Return to Dashboard Option
-
Introduce a dedicated and prominently placed navigation element - the “Dashboard" button, accessible across all pages within the internal platform.
-
This persistent navigation option will enable users to effortlessly navigate back to the dashboard, irrespective of their current location within the platform.
-
-
Content Updates and Relevance
-
By conducting content audits and user interviews, we determined what are the most crucial and frequently sought-after information to showcase on the dashboard.
-
Here is the new design:
FINAL DESIGN
A revamp for both external and internal websites.
Throughout the website redesign process, I collaborated closely with a team of talented individuals to ensure a cohesive and consistent experience across all pages of the external website. As the lead UX designer, my role encompassed overseeing the entire UX design process, from research and strategy to visual design and implementation. By leading the team and driving the project forward, I played a key role in delivering a successful website redesign that met the needs of the target audience and achieved the desired project goals.
FUTURE THOUGHTS
Further exploration of the advanced search function.
In the existing design, the search function incorporates an advanced search feature. However, there is room for improvement as clicking on the "Advanced Search" button below the search bar currently redirects users to a separate page, which deviates from expected user behaviour. To enhance the user experience, it would be more effective to implement a pop-over instead, allowing users to access advanced search options seamlessly without being taken to a different page.
OUTCOME
Feedback from our co-workers.
