Project Overview
The Challenge
Users of Complete Anatomy can create different types of interactive media (screens, recordings and quizzes).
Our goal was to allow education professionals to create anatomical lectures and courses that they could use in their class or share with their students, by aggregating screens, recordings and quizzes.
My Role
Senior UI/UX Designer
Contribution
User research, interaction flow diagram, low and high-fidelity prototyping, motion design, validation and feedback loop.
My Role
Senior UX/UI Designer
__________
I joined 3D4Medical at the start of 2017 as Senior UX/UI Designer for Complete Anatomy, thrilled to work on an amazing app and to be part of an innovative company handpicked by Apple Editorial Team from over 2 million apps to be showcased as the Best of 2016.
I led the UX and UI work for the creation and publication of Anatomical Courses, producing all major deliverables and presenting these to the Director of Design. I worked alongside other members of the UX team who focused on related features of the application.
LEADERSHIP
I believe in a strong sense of team and a lean approach, and I'm always working towards the best ways of working to free-up the team's time for creative work.
During the time at 3D4Medical, I worked with the teams to understand and improve their collaborative process. After doing an analysis of their product design process that focused on minimising redundancy and improving collaboration, I suggested and assisted in the transition to new ways of working and tools that would support them.
I promoted early collaboration with the development team and more regular and varied design sessions and workshops.
I also introduced a process of collaboration with Customer Support, with monthly reviews to share customer insights and bring them back into the product design.
Overview of Complete Anatomy
3D4Medical
__________
3D4Medical's 3D applications have become the tool of reference for anatomy students around the world, expanding the constraints of the printed text books and their 2D anatomical illustrations.
In 2016, 3D4Medical’s flagship, Complete Anatomy, featured in Apple’s ‘App Store Best of 2016’. Complete Anatomy allows students to investigate every detail of the anatomy in beautiful, interactive 3D; zooming, rotating, or cutting through structures and discovering what is behind each layer.
COURSES
2017 was a year of significant transformation for Complete Anatomy. That year, 3D4Medical were expanding their technology to educational institutions, creating a learning platform with their 3D anatomical model at the core, allowing educators to create and share custom lectures and courses, or offering content developed by 3D4Medical's team of experts.
What are courses?
Courses are guided anatomical lessons, created by subject matter experts. Each lesson consists of 3 types of interactive media assets: Screens (labeled anatomical set-ups of the model), Recordings (animated clips with voiceover) and Quizzes (anatomical tests).
3D4Medical courses
3D4Medial’s team of Anatomy experts also needed a way to create courses that could be sold individually within the application.
The audience for this content are:
• Students not enrolled in an official course yet that want to prepare in advance.
• Students that want extra information on a particular topic.
• Educators that can use these courses to build upon when preparing their classes.
• Anatomy enthusiasts.
• Students not enrolled in an official course yet that want to prepare in advance.
• Students that want extra information on a particular topic.
• Educators that can use these courses to build upon when preparing their classes.
• Anatomy enthusiasts.
Sample Screen in Complete Anatomy.
Sample Recording in Complete Anatomy.
Sample Quizz in Complete Anatomy.
Discovery
An overwhelming amount to learn
__________
Education institutions are constantly striving to improve their learning methodologies and differentiate themselves with engaging, project-based learning methods.
LECTURERS
From university professors we learned that they only have a couple of touch points with the students throughout the year, so their ability to track their progress is minimal. They don’t have effective ways of knowing if students are struggling with the content until it’s too late, when the exams results are available. A system that would alert them of how those students are doing well before exam time, would be of great help to them.
STUDENTS
Our interviews with medical students showed that they are overwhelmed by the sheer volume they need to learn. 1st and 2nd year students, in particular, welcome the guidance of well structured, step-by-step teaching methods. They found the anatomical model can be quite “intimidating”, while more advanced students however, are more comfortable exploring by themselves and diving into the detail.
Our focus was to provide education professionals with a way to create interactive, engaging content for their students, while giving them visibility on students’ work and their progress throughout the academic course.
Ideation
__________
FOR EDUCATORS
We focused on the most relevant information about the course (learning outcomes, lecturers bio, for example).
Simple step-by-step creation flow focusing on 4 elements: course cover, course overview, course video and course content.
Clear preview of how their course would look.
Simple way to edit and save changes.
______
Based on interviews with our panel of university experts, we distilled the essential information and developed a flow where we guide the user along a simple 4-step flow to create their course.
The next steps would be to give the ability to share the course with their students and track their progress through a KPI dashboard.
Hierarchical relationship between assets, lectures and courses.
FOR STUDENTS
We focused on what they needed to know about the course before starting (Learning outcomes, course preview, for example.)
Simple step-by-step viewing flow.
Simple way to see progress.
Initial concepts for the Content Library
Content Library - final design
Demo: Course Creation
___________
___________
We broke down the course creation process into 4 simple steps with visual cues so users know what to do at every stage:
1. Build course cover: image, title, subtitle and authors.
2. Add course information: description, learning outcomes and credits.
3. Include overview video (optional).
4. Select course content: modules and lectures.
2. Add course information: description, learning outcomes and credits.
3. Include overview video (optional).
4. Select course content: modules and lectures.
Demo: Viewing Courses
___________
___________
We had a ‘visual-first philosophy’. Our goal was to avoid overwhelming students with tonnes of information up-front, and instead motivate them and excite them about the learning ahead.
We achieve this with striking visuals, overview videos, interactive content, chunked information and a highly visual breakdown of the course showing thumbnails of screens, recordings and quizzes…