Jan 2019 - Apr 2019
SketchyMedical uses an internal administration tool to upload hundreds and thousands of videos, images and metadata values. I pushed for flexible, user-centered design to create a solution that was simple and easy to use. As a result, the app's user base expanded and the team released content on time.
Role
Sole designer leading end-to-end process
Team
1 PM, 3 Engineers, 1 Designer
Solution
High-fidelity prototype in Figma
Impact
No delay in planned content releases
SketchyMedical offers time-lapse videos that illustrate a scene. These scenes or sketches are accompanied by narration to tie crucial concepts in medicine to symbols. This method is highly effective in committing information to memory and speeding up the process of knowledge acquisition.
Custom tools were built outside of Active Admin to generate code and be imported into the database. Users would have to move back and forth between applications, copy-and-pasting HTML markups to create symbols on final sketches.
During the release of our new course, Internal Medicine, the team found that only 1 member knew how to navigate the admin app, which made uploading content slow and delayed the product’s release date.
When introduced to new users, the UI was inconsistent and the structure confusing to navigate because it broke several usability heuristics.
We needed to create a sustainable internal data management and administrative app that could be used by any stakeholder, regardless of department or experience level
I began the process by researching viable frameworks to replace the existing one and auditing management systems, and viewing examples of management systems for academia, customers, and projects.
Active Admin: Current screens for SketchyMedical’s administrative system
There are 2 primary user groups for SketchyAdmin: medical professionals and content members. Our team of medical professionals is responsible for creating course syllabus, outlines, and scripts. The content team is responsible for uploading related content to each course through the app.
Jobs to be done allowed me to lay out the tasks each user group needed to be able to perform and what their overarching goals were. I was able to paint a clearer picture of how each user group approached creating course curriculums through Admin and to frame needs to be more outcome focused.
Visually signify which comes first out of a course, unit, chapter, and video by establishing order of creation:
No longer use combination tools to generate course content, allowing admin to be a dynamic, all-in-one tool:
There were 3 main thematic groupings in which I brainstormed feature solutions: correct user feedback, dynamic control, and information hierarchy. I then took these solutions and iterated.
Visually, the user must understand how information is named and nested within one another, which object is expanded, and what exists inside of it.
Each video or “section” has a number of characteristics that make them unique from each other, including the name, release date, its quiz questions, and symbols.
Each video or “section” has a group of symbols. These symbols are given their order in the list, name, description, and coordinates in the video, all of which can be added after a video is created.
My teammate and front-end developer, Anna, expressed interest in learning UI. Because she primarily wanted to gain familiarity with Sketch and given her Git background, we chose to use Abstract to collaborate.
I was careful to mention relevant information when a user receives feedback for actions. This applied to different UI states that involved destructive actions: canceling and deleting.
Delete Section
Deleting 4.1 - Neisseria overview will also delete all symbols, questions, and images in the section. Are you sure you’d like to continue?
Discard Changes
Are you sure you’d like to discard changes made to Chapter 1: Gram Positive Cocci?
I wrote out error states that would appear when a user enters incorrect values. They were simple reminders to show the user what type of values were acceptable.
Dashboard
Quickly access courses, filter by exam type, add a course, or edit existing courses from the default home page.
Expand course content
Easily view contents of a course from its units to its sections. View what characteristics have been uploaded and edit inline.
View sections
Detailed description of sections and their attributes. A working draft of a section’s symbols is saved underneath its description and preview of attached assets.Quickly access courses, filter by exam type, add a course, or edit existing courses from the default home page.
List symbols in each video
Creating an inline editor for symbol name and description. Add a symbol at any point in the order or edit to select its position.
Position symbols on image
A user can expand the image to manually position the symbol, or enter X and Y coordinates. Saved symbols are also shown on the image.
Since launching the first version of SketchyAdmin, the content team has been able to expand its number of operators from 1 to 5. The main user groups gave positive feedback on how easy it was to understand the way content was structured, created, and uploaded. We have had updates to Pediatrics, Surgery, and Internal Medicine, which were all completed before their deadlines in Winter and Fall.
The main user groups gave positive feedback on how easy it was to understand the way content was structured, created, and uploaded.
By researching internal management systems that mimic enterprise-level products, and integrating learnings from adjacent markets, I’ve become more exposed to systems design. This project has sparked an interest in how any digital product is a living, breathing, and evolving ecosystem.
The power of language goes a long way when giving context and instructions to screens, modals, and actions. I’ve become more interested in exploring how language can improve the way we interact with products and create a human voice for digital experiences.
