Nina Betts

Linkedin

Nursing Website Redesign

My Role: Lead UX/UI Designer
Tools: Axure, Figma, Google Docs

Project Overview

The project was to redesign a legacy Nursing Website that provides online features such as issuing licenses, approving education programs, and protecting the public from unsafe practices. The goal was to enhance the user experience by improving navigation, accessibility, and overall design while adding new features to support the users’ needs and business objectives.

Problem

The legacy nursing website was outdated, poorly organized, and lacked a user-friendly interface. It needed a complete overhaul to make it more intuitive, accessible, and efficient for nurses and board members.

View My Design Process

My Design Process

Research & Discovery

Website Evaluation & Critique

I conducted a heuristic evaluation of the website and identified the following issues that negatively impacted the user experience:

Confusing and inconsistent, making it difficult for users to find the information they need.

The website’s design and layout appeared outdated, which could affect users’ perception of the website’s credibility.

The website did not adapt well to different screen sizes and devices, causing usability issues for mobile users.

The website did not follow accessibility best practices, potentially excluding users with disabilities from accessing information and services.

Analytic Report

I analyzed existing website analytics to gain insights into user behavior and pain points.

Key findings included:

A high bounce rate indicated that users were not finding the content they needed or were discouraged by the website’s usability issues.

The low conversion rate on key tasks, such as license applications, suggested that users had difficulty completing these tasks.

A short average session duration implied that users were not engaging with the website content as intended.

Lower engagement from mobile users than desktop users highlighted the website’s mobile usability issues.

Content Audit

I conducted a content audit to assess the current content on the website and identify redundancies and outdated information.

Key findings included:

  • Inconsistent content organization: Content was not consistently organized or categorized, making it challenging for users to locate relevant information.
  • Outdated or irrelevant content: Some content was outdated or irrelevant, leading to user confusion and mistrust.
  • Lack of clear calls-to-action: Users were not provided with clear calls-to-action, making it difficult to understand the next steps.

Interviews

I interviewed various stakeholders, including nurses, licensing board members, and nursing educators, to better understand their needs, expectations, and pain points while using the legacy Nursing Website.

“

The license renewal process should be more transparent, with updates on the status of the application.

- Sarah, Registered Nurse

Analyze Feedback

I conducted an affinity mapping exercise to analyze and group the feedback from the interviews.

Pain points and key insights:

  • The need for improved navigation and search functionality.
  • Simplified forms.
  • Poor mobile experience.
  • Frustration with license renewal processes
  • Lack of clarity around continuing education requirements.
  • Difficulty finding relevant information
  • Outdated and unappealing design
  • Inaccessible content

Comparative Review

I reviewed other nursing websites for inspiration and benchmarking. The analysis provided insights into the strengths and weaknesses of each nursing board’s website.

Define

Personas & User Journey Mapping

I developed user personas to represent different types of users who would be using the website. We then mapped user journeys for each persona, identifying key touchpoints and pain points. This information helped us create a list of functional requirements, which we prioritized based on user needs and business objectives.

Functional Requirements

Based on user needs and business objectives, we defined key features for the redesigned website:

  • Intuitive Navigation and Information Architecture – clear and easy-to-understand main menu with organized categories and subcategories.
  • Mobile-Responsive Design – a responsive layout that adapts to various screen sizes and devices.
  • Improved Accessibility – adherence to web accessibility best practices, such as proper use of headings, alternative text for images, and keyboard navigation support.
  • Search Functionality – a search feature that allows users to quickly find relevant information and resources.
  • Support Resources – a comprehensive FAQ section addressing common user questions and concerns.

Information Architecture

Card Sorting & Information Architecture

Based on the insights from user interviews and analysis, I conducted a card sorting activity to inform our information architecture. This helped me define the site’s navigation system and organize the site content in a way that made sense to the users.

Sitemap

I developed a sitemap and a user-friendly navigation menu based on our card sorting activity and analytics data.

User Flow

I created user flows for the main tasks to help illustrate how users interact with the website: applying for a license, renewing a license, finding courses, and reporting unsafe practices.

Apply for a License:

Start > Home > Click "Apply for License" CTA > License Application Page > Select License Type (RN, LPN, APRN) > Application Form > Fill in details > Submit Application > Confirmation Page > End

Renew a License:

Start > Home - Click "Renew License" CTA > License Renewal Page > Select License Type > Renewal Form > Fill in details > Submit Renewal - Payment Process > Confirmation Page > End

Find Courses:

Start > Home > Click "CE Courses" CTA > Continuing Education Page > Browse CE Course Listings > Select Desired Course > View Course Details > Enroll in Course > Confirmation Page > End

Report Unsafe Practices:

Start > Home > Click "Report Issues" CTA > Reporting Unsafe Practices Page > Read the process and confidentiality policy > Fill in Report Form > Submit Report > Confirmation Page > End

Visual Design

Wireframing

Wireframes were created to visualize the structure and page layouts. Call-to-action buttons were strategically placed on the home page to drive user engagement and facilitate easy access to key online services.Wireframes were created to visualize the structure and page layouts. Call-to-action buttons were strategically placed on the home page to drive user engagement and facilitate easy access to key online services.

Style Guide

I developed a style guide for future reference and maintenance that included typography, color palette, iconography, and other design elements aligned with the Nursing Board’s branding.

Prototyping

I then created high-fidelity mockups for a prototype to conduct usability testing to validate design decisions and gather feedback.

NB-Home
NB-LR
NB-LA
NB-CE

Usability Testing

I created a test plan and conducted usability testing to evaluate the design and functionality of the redesigned website. Feedback was gathered to refine the design and ensure it met user needs and expectations.

1. Objective

Evaluate the usability and effectiveness of the redesigned Nursing Website and provide recommendations for design updates to enhance the user experience.

4. Data Collection

Task Success rate: Percentage of successfully completed tasks.

Task completion time: Time taken to complete each task.

User satisfaction: Feedback on the overall experience, and ease of use.

2. Method

Moderated remote usability testing was conducted with 5 participants familiar with the previous Nursing Board website, including registered nurses, nursing students, and nursing program administrator. The testing involved a combination of task-based scenarios and open-ended feedback collection.

5. Test Summary

Task success rate: 85% of users successfully completed the tasks.

Task completion time: The average task completion time was within the expected range, indicating efficient navigation and interactions.

User satisfaction: Users expressed satisfaction with the redesign, noting improved clarity of instructions and ease of use compared to the previous version.

3. Testing Scenarios

License Renewal: Participants navigated the website and completed the license renewal process.

Continuing Education Selection: Participants were given a scenario of enrolling in a continuing education course.

Reporting an unsafe nursing practice: Users navigated the website and reported a potential unsafe nursing practice.

6. Recommendations for Design Updates

- Add a Home link to the navigation to ensure users can easily find their way back to the main page.

- Incorporate filtering and sorting option for courses, allowing users to easily narrow down their choices.

Development & Implementation

After the designs were refined, I handed them off to the development team and collaborated with them to ensure the designs were implemented accurately. We conducted thorough quality assurance testing to ensure the website functioned as intended on various devices and browsers.

Results

I successfully redesigned the legacy Nursing Website to be more user-friendly, efficient, and visually appealing.

Post-launch metrics showed:

  • Increased user engagement
  • Reduced bounce rates
  • Higher success rates in completing key tasks.


The redesigned website now better serves its users and effectively supports nursing professionals in their work.

Nina Betts

Copyright © 2023. All rights reserved.