simucase logo

Simucase

Simucase is an application that allows students and professionals to practice their clinical skills in a virtual environment. For this project, we were tasked with overhauling the entire experience of the app. After many rounds of design revisions and strategy sessions around the learning process within the app, we decided a guided process with progress meters was the most effective UI element we could add. Working with the lead Simucase developer, I helped refactor hundreds of lines of javascript and wrote hundreds more in order to build out this new feature set.

Overall, a fresh new design, progress meters for each step in the patient interview process, automatic flash positive/negative feedback, and an interactive clipboard all add to the usability and usefulness of this application, which is now used in over 230 institutions nationwide.

My Contributions

  • - UX Research
  • - UI Design
  • - User Flow
  • - Strategy
  • - Prototyping
  • - Front-End Development

Planning & Research

Working with the Simucase team and the lead developer, we formulated a plan to improve every detail of the application. It had great core functionality, but the feature set needed to be more engaging and provide an active learning experience that SLP instructors and students could rely on.

Project Needs

  • - New branding
  • - New layout and redesign
  • - Progress meters for each interview section
  • - Live feedback based on user actions
  • - Better evaluation presentation
  • - Clipboard redesign and interactivity

Application Before

Simucase Before

Evolution of Design

There were a few different ways we could go with the progress meters. One such way we mocked up was simple line-style progress bars. These seemed to work alright, but could there be a better option? After some research and brainstorming sessions, we arrived at slightly different design solution to our UI requirement.

Simucase Before

Finished Launched Product

Progress Meters

In the end, round 360° progress meters were chosen. Because everyone is familiar with a circle, it is easier for users to approximate the percentage remaining in the section. It also provides more flexibility in terms of size and placement and lends some additional space between the section buttons. All in all, this solution works better and looks better. The meters change from yellow to orange to green as you progress through each section, letting the user know exactly how much of each section they have left to work on.

Interactive Clipboard

The hide/show clipboard was made detachable so you can drag it around the screen to accomodate smaller screen sizes. We also made it possible to save notes to each section. I implemented a new custom JS plugin to accommdate these needs.

Live Feedback

The live feedback was placed at the bottom of the screen to avoid intrusion with the other app functions. These notices are user-dismissable but also fade out. They function based on direct user actions in series within the app. If you select too many incorrect methods for the case, you'll get a warning. If you select correct methods, you get a confirmation, and you'll see your progress meters increase.

Simucase - Launched Product