Elon Healthcare Inclusive Pictures

Overview

Type: UX/UI Designer, Capstone

Focus/Skills: Website Redesign, User Experience Design, User Interface Design

Technology: WordPress, Envira Gallery, Adobe Creative Cloud, Bootstrap Icons, User-Centered Design Process, Elon University’s Style Guide

Problem Statement & Purpose:

Currently, there are little to no pictures of technical hands-on demonstrations in textbooks, presentations and print products that black, indigenous, and people of color (BIPOC) and people with disabilities can relate to. In the healthcare industry, BIPOC and people with disabilities are underrepresented, which contributes to the healthcare education and medical treatment biases throughout the industry.

Elon Healthcare Inclusive Pictures (EHIP) is an online photo library of diverse, inclusive, medically accurate, and copyright-free imagery for healthcare education, where healthcare professionals, professors and students can access pictures to use in instructional materials.

Goals & Objectives

Considering this was a continuation of a project, the main goals of the EHIP website redesign were:

To rebrand and reflect the Elon University’s brand on the website.
To redesign the functionality of the website to be more user friendly.
To improve the user experience.

Sprint 0

According to my backlog for Sprint 0, the specific tasks planned for completion included contacting and meeting with Dr. Hannah and Dr. Scales, exploring the different types of users that would use the website interface to develop personas and comparing the different WordPress gallery plugins.

Research

With great thanks and much appreciation to the M.A. Interactive Media ‘22 graduate student, Julia Kocsis, who started the foundation of this project, she was able to conclude that educational institutions need to include diverse and inclusive representation for their BIPOC students and people with disabilities in order to enhance all healthcare student’s cultural competency and the classroom and clinical experience as a BIPOC student and/or person with disability.

As for my role and responsibilities, it was to focus on the functionality and technicalities of the website as a picture database that can store, manage and access pictures from anywhere.

Persona

During our meeting with Dr. Hannah and Dr. Lackaff, we went through how the website should function and what capabilities each type of user would have. Knowing this helped to develop different user personas to showcase the different types of users.

Sprint 1

According to my backlog for Sprint 1, the specific tasks planned for completion included creating user journey map(s) that matched the user personas developed in Sprint 0, meeting with Dr. Hannah to go over what content to include on the site, and rebranding the overall look and feel of the brand to mimic Elon University.

User Journey Map

Looking back at the user personas developed in Sprint 0, user journey maps were curated to showcase their experiences of finding and using the website interface

Content Inventory

For the most part, the content of the site stayed the same with revised and added copywrite of a private policy, terms and conditions, and a FAQs page to help users understand the purpose of the interface.

Branding & Style Guide

As regards to the branding, a new logo that captures what this project is about was designed and two style guides were created: one with Elon University branding and another one with similar branding.

Sprint 2

According to my backlog for Sprint 2, the specific tasks planned for completion included developing a sitemap, creating wireframes to layout the structure of the website and designing key visual elements that would be recognizable and comply with the new style guidelines.

Sitemap

Referencing the content inventory developed in Sprint 1, a new sitemap with details of what would be on each page of the site to include revised and added information was outlined.

Wireframes [Concept Sketches]

Remembering that the end goal is integration, the Today at Elon user dashboard page was a great format to base the users’ dashboard on. In addition, WordPress gallery plugins and the idea of structuring the site as ecommerce were being explored.

Variation of Key Visual Elements

Using Bootstrap Icons and the content inventory document, the necessary key visual elements needed for the structure and formatting of the website were identified.

Sprint 3

According to my backlog for Sprint 3, the specific tasks planned for completion included buying a WordPress gallery plugin and developing the first version of the rebranded and redesigned EHIP website interface.

Version 1 of Redesigned Website

The key functions that the gallery plugin needed to have: watermarking, ability to download multiple sizes, ease of use, searching, classification, customizable, filter/tags and role management capabilities. It was suggested to Dr. Hannah to purchase Envira Gallery to try out for a year and discontinue it if she doesn’t like it. With the Envira Gallery plugin, it was noticed that there was not a search bar ability until after a day or two of implementing its other widgets (or features). However, the idea of activating the ecommerce widget worked out pretty well. Continuing to play around with this idea, eventually this route was taken to showcase the concept of the overall project’s idea and purpose.

Sprint 4

According to my backlog for Sprint 4, the specific tasks planned for completion included conducting usability tests of the redesigned interface.

User Testing Report

The purpose of this user testing was to gather information about the user’s perception of the redesigned EHIP interface, and ways it can be improved. The study’s objectives included determining ecommerce functionality, efficiency and task completion rate, what features enhance the interface and which features confuse and/or frustrate users.

EHIP-Usability-Test-Report

Sprint 5

According to my backlog for Sprint 5, the specific tasks planned for completion included submitting a fully functioning Elon Healthcare Inclusive redesigned website.

Final Product

Implementing the recommendations received from the usability tests and refining the website, the redesigned WordPress website can be accessed here*! Please visit the site to see the finished product. Furthermore, take a look at my full capstone project summary and analysis. *As this is an ongoing project, changes are being made periodically.

Catchings-Capstone-Documentation

Acknowledgements

Elon Healthcare Inclusive Pictures is an interdisciplinary project, and I could have not done it without the software and tools, copywriters and the help of my project consultants. I would like to thank Dr. Mary Kay Hannah, Dr. Melissa Scales, Dr. Derek Lackaff, Elon University, the School of Communications, the Interactive Media Program faculty and staff, and the 2023 Interactive Media cohort for their support, feedback, and guidance throughout the duration of this project!