SketchyAdmin

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

Background
Problem
Research
Findings
Ideation
Iterations
MVP 
Impact

Background

What is SketchyMedical? 

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.

Problem

Admin was built for one user, which caused bottlenecks in the handoff process

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

Research

Auditing existing management systems

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.

Evaluating current system's usability heuristics

  • Match between system and real world - UI interactions must match existing mental models
  • Consistency and standards - taxonomies and labels of data in the admin app must make sense to medical professionals and internal stakeholders
  • User control and freedom - data was not dynamic, and the process of creating, deleting, and rearranging was strictly linear

Active Admin: Current screens for SketchyMedical’s administrative system

Conducting user interviews

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

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.

Findings

🚫 When creating a course...

  • Flat navigation system - Every item is a separate tab in the navigation for the current admin app. No hierarchy and visual for nested information, therefore no structure.
  • Mismatch in vocabulary - Medical professionals' interpretation of a label may be different to that of the marketing team's
  • Unnecessary data surfaced - Rendered data cells do not address the needs of each user group
  • Data is not dynamic - Process of creating, deleting, and reordering data is strictly linear and inflexible

🚫 Details are difficult to manage

  • Inability to reorder symbols - if you want to move object 17 to 5, you must delete all objects from 5-17 and resubmit the information
  • Switching between different tools - creating a symbol and positioning it on the image where it appears require 2 different tools
  • Generating unformatted HTML markups for symbol positioning and content - must use separate tool to generate raw HTML code for coordinates and content

❇️ Show hierarchy

Visually signify which comes first out of a course, unit, chapter, and video by establishing order of creation:

  1. Nested grouping for navigating course material
  2. Creating content in their hierarchical order
  3. User knowing where they're located in the app

❇️ Consolidate tools into one

No longer use combination tools to generate course content, allowing admin to be a dynamic, all-in-one tool:

  1. Ability to add symbols after section has successfully been created
  2. Define symbol location and symbol definition in one action
  3. Reorder symbols in list

Feature Ideation

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.

Iterations

Course view

Visually, the user must understand how information is named and nested within one another, which object is expanded, and what exists inside of it.

Video details

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.

Creating 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.

Onboarding another designer

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.

States and microcopy

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.

MVP Solution

Courses

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.

Sections

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.

Symbols

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.

Next Steps

  1. Integrating graph views into the Dashboard view to allow stakeholders in marketing to view and gauge customer engagement
  2. Tracking changes made by users, maintaining record or history that will encourage transparency among remote and in-house members
  3. Understand how quiz questions are uploaded, finalized, and organized by medical professionals, as well as made available to end-users

Impact & Takeaways

More content releases on time, more users onboarded

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.

Systems design and ecosystems

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.

Microcopy and UX writing

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.