SOLUTION

How Might We Question:

How might we help the residents become more knowledgeable, proficient, and efficient at performing procedures?

How might we help medical students efficiently prepare for medical examinations?

IDEATION

Exercises:

1. Established our must have, should have, and nice to have features

2. conducted card sorting exercises and user flow

3. Developed sketches and low-fi mock ups based on our research and exploration.

Must Have/Nice To Have/Will Not Have:

Must Have

• Multimedia Page

• Filter by Condition

• Contact Page

• Post-Op Care Information

Nice To Have

• FAQ’s

• Offline Access

• Ability to Annotate

Will Not Have

• Tracking patients

• Ask for Help

• Voice Recognition

Ideation Conclusion:

Information Architecture:

• Established groupings

• Priority of information on pages

• Gained understanding on pre, intra, and post-operative events

Uncovered Need For:

• Multimedia page

• Branding differentiation

• Footnotes

LOW-FIDELITY PROTOTYPE

Low-fi Goals:

• Synthesize the research and ideation phases to develop prototypes of the experience.

• Brainstorm potential features and consolidate flows to prepare for user testing.

MID-FIDELITY PROTOTYPE

Mid-fi Goals:

• Continue iterations and create finalized mid-fi prototypes in preparation for A/B testing with medical residents.

• Synthesize and compare the feedback, pain points and heatmaps taken from usability testing to create a better overall solution

A/B Testing:

HIGH-FIDELITY PROTOTYPE

2. Homepage:

• Purpose: The purpose of the Home Page is to allow users to have access to the listed conditions at first glance. To ensure that the website is optimized for educational purposes, our team decided to move the introductory content to the About Us page and design the Home Page to work like an index.

• Home Page Header: The “Conditions” page will be the landing page of the website. The header should provide a short description on the kind of information users can find throughout the site.

• Search bar: Through our survey results, our team concluded that a search bar was a must-have feature, especially if there will be a lot of conditions to scroll through. After synthesizing the feedback from our usability tests, we found that most users did not notice or utilize the global search bar in the navigation bar compared to when it was shown specifically to the page.

• Cards:

  • Condition images: A visual representation of the condition to allow users to look through the condition cards quickly and have a visual aid

  • One-liner condition descriptions: A quick glimpse of what the condition may be about before users decide to learn more about it. Our team released a survey comparing two designs, one with the conditions having a short description and one without the descriptions. Based on our results, we were able to conclude that most residents found the short descriptions helpful.

  • Associated procedures: A list of procedures associated with the condition to give the users a better understanding

  • Card Navigation: Clicking on the image and/or the hyper-linked name of the condition will direct users to the appropriate page of the conditions.

3. Condition Page:

• Purpose: The condition page contains the information that the resident is interested in reading regarding a certain condition. This page also houses the different procedures that can be used to treat the condition. 

• Page Header -- Breadcrumb Trail: A secondary navigation tool that helps users understand their location on a page (i.e. the condition page) and higher level pages (i.e. the home page). Users can easily find their way back when they reach a page.

• Condition Page Directory: The directory serves as a main navigation tool for users throughout the page. The directory is divided by the sections on the page: Overview, Typical Treatment Course, Anatomy, Procedures, and References. This directory follows the users as they scroll through the page, allowing them to easily access other sections on the page without scrolling.

• Content Layout: content was designed by the client and residents from user testing sessions. In general, content is kept concise for easy skimming, and laid out in lists, bullet points, or tables when applicable. Key terms are bolded for easy scannability as well.

• Typical Treatment Course: This section is displayed in sequential order of when the patient will receive certain treatments. This hierarchy of information allows the treatment course to be scannable. The procedures mentioned in this section are hyperlinked to allow users to easily navigate to the procedure page and reduce cognitive load.  

• Anatomy: The anatomy section contains anatomic images with relevant captions. The creator of the page has the ability to include other forms of media and text if necessary.

• Procedures: Includes the secondary nav bar + the different components within it

  • Tab navigation: To allow users to view all the procedures without leaving the page. Through our user research, most users preferred this nested view which allowed them to learn more about the different procedures associated with the condition without leaving the condition page. In addition, this also led to the opportunity for the procedures to be placed in sequential order according to when they were to be performed in the treatment process. Nested view 

  • Methodology: Images of the methodology are placed side by side to provide users with a clear visual representation of the methods they will be performing. 

• References: All references used for the content of the page are listed in the final section, so interested visitors of the page are able to look them up for more information.

4. About Us Page:

• Purpose: Serves as a background introduction to all the organizations and partners hosting the website. 

• Research summary: Through the card sorting activity, we concluded that while the “About Us” page was essential to the site, the information on the page itself isn’t as important or relevant to the users.

• Page Layout: The page was designed considering a hierarchy in who users should be contacting first in the case of any need. Therefore, the Department of Pediatrics & Oral Surgery is shown first, with the BCH and HMS descriptions following below it in a 2-column layout.

5. Multimedia Page:

• Purpose of the page: This page serves as a quick access directory of all the conditions and procedures media such as lectures and videos which overall allows users to easily access various forms of media without digging into a condition or procedure page. 

• Design layout:  The page is sorted by media. Within each media category, lectures and videos, the content is alphabetized to allow users to easily navigate through.