Redesign CNA Simulations Website
Problem
CNA Simulations is an educational technology startup that has created virtual clinical simulations for caregiver education, starting with certified nursing assistants (CNA).
CNA’s instructor dashboard is not fully meeting instructors’ needs. We need to find a way to make the dashboards usable and valuable for instructors across all school types.
The main goal is for instructors to be able to understand what CNA platform offers, what’s inside each simulations, and how to assign it to students.
Considerations
Timeline: Nov. 2022
Team: Elnaz Talaei, Caroline Koerschner, Charles Ludeke, Chelsea Turnbo
My Role: UX Researcher, Visual Designer
Tools: Figma, Dovetail, Google Docs, Maze
Collected data from the interviews indicates the problems we need to solve
Click Here!
First, we conducted interviews with CNA Simulations’ instructors. From the data we collected, we were able to gather a number of common concerns that all of the instructors expressed. Then, by color coding the information, we could prioritize the problems we wanted to address in order.
Four main problems we focused on solving
Problem I:
Difficulty in navigation through the website and different parts of scenarios.
Problem II:
Scenario breakdown was confusing and it required an ever lasting scrolling.
Problem III:
Grading system and the grades’ weight are not clear.
Problem IV:
Not having an onboarding page.
Comparing CNA Simulation's website with its competitors has helped our decision makings toward the final design
-
We conducted a C & C analysis on a few teaching platforms to find out the best practices we could incorporate on CNA Simulations’ dashboard:
-
We learned that most teaching platforms had a left hand column navigation bar either intact or with a drop down menu.
-
Navigation icons are also a common web standard used on these websites. The navigation bars could include resources, grades, help pages, and teacher profiles.
-
Also, Cards which are small containers that group together connected bits of information are commonly used on these websites.
CNA Simulations platform only allows instructors to assign a Scenario as a whole.
Instructors delay assigning Scenarios because sections are taught at different points in their lesson plans. When Instructors finally do assign Scenarios, students get burnt out from doing ~2 hour assignments.
After prioritizing our problems, our group spent some time using Crazy 8 Technique to sketch solutions for each page. Deciding about a common path, we moved forward by creating wireframes, low-fi and prototype.
Here's a list of classes instructors can choose from by clicking on the boxes.
This box shows the college or school's logo in which the instructor works at.
Each card contains a specific lesson with an image and a summary.
Calendar to choose the assignments' date from.
Instructors can add or remove students from here.
This is a breakdown of moducles for each lesson..
Side navigation bar that contains information about the classes.
By clicking on picture, instructors will be taken into their profile.
Simulations breakdown to ease assigning the homework.
Due to lack of time during Thanksgiving Holidays, we did an unmoderated usability testing using Maze.
Challenge
Due to time constraints, we didn't rely on our internal stakeholders only, and we reached out to some external users with teaching backgrounds who have previously used such platforms to conduct our usability testing. Then based on the results received from Maze through our users' interactions with the prototype, their comments and the heat map, my team and I made some decisions about our user's needs to incorporate into our design in the next step.
Task 1: Navigate to Demo Class 1, Then Add a Student to class
Choosing Demo Class 1 from dashboard.
Heat Map 1
Adding a student from the list.
Adding student's name, email address, click add and get a confirmation.
Task 2: Quick Assign the pre-sim, Then Navigate to Module 1
From module 1, instructors are supposed to click on "Quick Assign". Then, assign the specific part of the simulations to students and get a confirmation.
Heat Map 2
Heat Map 3
Task 3: From Module 1, Assign Sim 3 to All Students
Click on the simulations to open the drop-down menu to have access to different parts of simulations.
Choosing the sims to assign to students.
Assigning the students, set a date, and receive a confirmation.
What our users think about the product
Steph
For Sim 3, I wouldn't click assign before choosing the module. I would click the module first, maybe look for a highlight, then click assign.
Markita
I really like the idea of being able to assign specific sim tasks within a module and to specific students as needed!
Milaina
I found the Sim 3 task in the simulation drop down menu, but couldn't determine how to assign it to students.
We created a new style guide considering the existent CNA Simulations' design system
Introducing different colors into the overall palette that is accessible as well as it is aligned with the current purple color scheme. The two new colors, blue & yellow differentiate the sections in the Dashboard: Skills and Simulation, respectively. They will give visual clues to help Users know where they are. The color yellow compliments the purple, and the color blue was chosen since this color is conceived as trust color that is usually used in the healthcare companies.
Primary Colors
#5A1B58
#8FB8F6
#EFD797
Secondary Colors
#9F80A7
#4D62CC
#D2A529
We created a new style guide considering the existent CNA Simulations' design system
Introducing different colors into the overall palette that is accessible as well as it is aligned with the current purple color scheme. The two new colors, blue & yellow differentiate the sections in the Dashboard: Skills and Simulation, respectively. They will give visual clues to help Users know where they are. The color yellow compliments the purple, and the color blue was chosen since this color is conceived as trust color that is usually used in the healthcare companies.
Primary Colors
#5A1B58
#8FB8F6
#EFD797
Secondary Colors
#9F80A7
#4D62CC
#D2A529
We created a new style guide considering the existent CNA Simulations' design system
Introducing different colors into the overall palette that is accessible as well as it is aligned with the current purple color scheme. The two new colors, blue & yellow differentiate the sections in the Dashboard: Skills and Simulation, respectively. They will give visual clues to help Users know where they are. The color yellow compliments the purple, and the color blue was chosen since this color is conceived as trust color that is usually used in the healthcare companies.
Primary Colors
#5A1B58
#8FB8F6
#EFD797
Secondary Colors
#9F80A7
#4D62CC
#D2A529
For Typography, we decided to keep the existing Roboto typeface, while adding Libre Baskerville.
Our reasoning for adding Libre Baskerville as a new typeface was that Serif fonts are considered trustworthy, established, and reliable and are typically used for reputable, academic situations and we found it suitable for CNA Simulations which is a teaching platform.
Next steps
-
Keep Testing: We believe that this prototype needs to be tested again with both previous and new users within a 30-60-90 day timeline to determine how these changes have been helpful.
-
Designing new features: Based on the feedbacks we received, we need to develop and design new pages and features for the website. These features are listed here:
-
Grading: Simplifying the grading page to be one screen, and showing the weight of each section for the overall grade.
-
Onboarding: An onboarding process would help new users understand the platform and where to find resources.
-
FAQs: Having a FAQ / Help page so users can get answers to questions easily.
-
Profile: Building a teacher profile page to personalize the experience.
Reflection
1. Facing challenges and conflicts of interests are common when working on a project with other stakeholders. But it's important to keep in mind that these challenges can be solved by presenting data and communication.
2. Holding workshops to brainstorm and/or giving feedbacks to other team members are both fun and productive.
Challenges
1. Prioritizing different problems and how we wanted to approach them was very important and needed to take place in the beginning.
2. Having limited time coinciding with Thanksgiving holiday made it harder for our team to run our usability testing.
3. Group dynamic is a key in collaborative projects and we were able to resolve our conflict of interests by doing a Figma workshop.