DESIGN TEAM:
Erik Soriano

ROLE:
UX Research
Data Analysis
UI Redesign
TIMELINE:
Summer 2022

TOOLS:
Figma
Microsoft Office
Adobe Photoshop
Maze.co
Executive Summary:
Over the summer of 2022, I interned at the Gordon Center For Research in Medical Simulation. During my experience, I learned a lot about medical simulation, and how it has evolved throughout the years, as well as its importance in the medical training field. My main project involved redesigning the Gordon Center website via user experience research techniques to inform the design decisions, as well as study the effectiveness of the navigation of the website. Since I was working with established medical content and terminology, the focus was on the hierarchy and flow of the website. 
Objectives:
• Perform a heuristic evaluation to assess and understand overall navigation and user experience of the site, as well as uncover any opportunity for improvement
• Analyze data to help us inform design, plus generate a report to present to the stakeholders
• Perform a tree test study to assess established navigation on the website
• Redesign the products with a new, modern look and feel that communicates the worldwide reach that the Gordon Center has through their products and educators
Part One:
Heuristics Evaluation
(Getting to know the website)
The first step was asking a few questions to the head of the multimedia dept., to establish what their goals are for the website redesign, etc. Over the course of one week, I performed the heuristics evaluation using the 10 heuristic principles created by Jakob Nielsen, this helped me get familiar with the Gordon Center and its mission/vision and programs offered, since I was new there and had no prior knowledge. After the evaluation, I noted all the opportunities found, as well as the good features (or keepers) that the website had and proceeded to generating a report for the design team.

Product Description
For this research study, a single researcher was tasked with performing a deep evaluation on the website for the Gordon Center department, itself, part of the larger University of Miami.
The Gordon Center (GC) is a renowned research center that focuses in Medical training and education via simulation, and is best known for their signature product: Harvey the simulator. They also offer training courses and curricula, including UMedic, and train first respondents, students at the University of Miami, and also international visitors interested in their work. The website’s structure is divided according to the top navigation: some items have sub navigation pages that serve as “anchor” points for all the sections within that given page. Their website is responsive and its main focus is to provide information for people interested in medical simulation.

Please Note: For the purpose of showcasing this project, only some of the pages from the reports will be included herein, therefore, you will see page numbers not following a direct sequence.
The four photos below show some examples of the highest severity problems encountered; any duplicate problems were merged, and I focused on the highest level issues. This would be pivotal when I moved on the next phase to determine whether the issues I encountered were in fact hindering usability.
Part Two:
Tree Testing
Since the website uses established medical terminology, I originally intended to do a closed card sort study to confirm whether users make sense of the existing labels and sub navigation items, however, after a couple of tests, I realized this was not the right approach, and thus, I moved on to plan B, tree testing. Due to time constraints during this project, I was not able to perform usability tests, so tree testing was a fast way to get additional insights into how users can performs tasks on the existing website.
I performed the test in a span of one week, using participants who were familiar with the Gordon Center, and its medical terminology and products. 
Below you will find the 6 tasks used during the tree test study. All were core functions that the website offered, and were approved by the stakeholder team.
Part Three:
Wireframes + Mockup

Low-Fidelity Prototype in black and white to establish layout and sections. Circle thumbnails were comments left in certain areas for the designer, explaining our design decisions and sources.

High-Fidelity Prototype after using colors, and several revisions after communicating with the stakeholder team. Using the official University of Miami branding colors.

High-Fidelity Prototype after using colors, and several revisions after communicating with the stakeholder team. Using the official University of Miami branding colors.

New sitemap of the Gordon Center website, after revisions and comments, using some of the findings from our studies.

See Demo Video of the redesigned website below
Other Graphics Created For The Gordon Center:
A Multi-Page digital flyer
Using an infographics-driven approach to replace standard bullet points, this was one of the templates created for the Gordon Center.
Back to Top