MHE Labs

Medici Builder

Overview

The Medici Course Builder is a browser-based tool to allow MHE’s content to be delivered to educators and students all over the world. The deep integration that the Medici Course Builder has with several of the leading Learning Management Systems means that users can seamlessly integrate McGraw Hill Education into their current solution, without the need to direct users to another tool.

My Role

As the UX Designer for Medici Builder, my role on this project ranged from helping the product team define a solid UX strategy that integrated with agile process/product design/dev process, research, wireframing and testing.

Team

Product Team – 3
Design Team – 3
Development – 10
Analytics – 2
Project Management – 1

Project Duration:

1 year 6 months

Location:

NYC/Boston

Responsibilities

UX/Product Strategy
Research
User Stories Definition
Persona Creation
Wireframing
Usability Testing

Tools

InDesign
Illustrator
Photoshop
Dropbox
Google Docs
Google Sheets
Whiteboard
Pencil & Paper

UX Strategy

The UX strategy for the product defined and detailed a set of coordinated, orchestrated, planned actions, which took the product team on a journey to reach a desired future state, over an established period of time. The design objectives were conditions that the project had to meet, often of tactical nature.

The UX team worked closely with Product Management on each user story. When creating user stories we employ Dickson Fong’s S.M.A.R.T. Design framework.

Product / Design / Development Process

The MHE Labs along with the team from Pivotal work in an integrated UX-Agile process throughout the lifecycle of the project.

User Stories

The product team was responsible to provide the information and format for each user story and for the developers to determine the technical solution.

Primary information
Secondary information

Story Prioritization

The development process used for Medici required a stringent and quantifiable method for establishing priority for each individual story and bug. We use a system for prioritizing ​bugs and ​stories​ developed by software development blogger and Agile expert, Michael Lant.

Stories

The priority rating for stories is based on Urgency and Business Value. To find the priority rating, we first rate the Urgency on a scale of 1 to 5, and then we rate the Business Value on a scale of 1 to 5.

Prioritization of Stories

Bugs

The priority rating for bugs is based on Scope and Severity. To find the priority rating, we first rate the Scope on a scale of 1 to 5, and then rate the Severity on a scale of 1 to 5.

Prioritization of Bugs

Personas

Through our research by sending out questionnaires and conducting internal interviews we were able to better identify the user roles and guidelines for creating personas.

Brainstorming

We would regularly conduct brainstorming sessions where we would whiteboard, sketch and discuss ideas per each user story before going into wireframing or design.

Wireframes

We’ve created wireframes based on each user story within an epic. Below are some examples for core features of Medici Builder.

Medici Builder workflow overview
Medici Builder workflow overview

Dashboard

User can view all their courses, view/edit their profile, see “My Collection”, running streams, receive notifications and access reports all from their dashboard.

Dashboard Wires

Discovery

Users can discover assets via recommended resources, sorting, keyword searches, focused searches, by applied filters, and via saved searches.

Discovery Wires

Streams

Users can post comments on cards, participate in conversations in the class by sending and replying to messages, search and sort comments and messaging.

Stream Wires

Syllabus

Users can view and edit a course syllabus, which aggregates on one screen course information, academic policies, learning objectives and outcomes, contact information, grading policies, and the course outline and schedule.

Syllabus Wires

Visual Design

Design worked in parallel with UX, creating the visual style guide/look and feel of the visual branding. The UI Designer was responsible for the color palette and UI components, type styles and icons.

Medici Builder Visual Style Guide
Medici Builder - Login Screen
Medici Builder - User Dashboard
Medici Builder - Course Overview
Medici Builder - Course Lesson Card
Medici Builder - Lesson Card with Video Asset

Usability Testing

We conducted to help us understand if users could effectively use Medici Builder or not, where they may get stuck and what should we do so that they don’t get stuck. We’ve created user testing scripts that took our user through various tasks. I ran 3 usability test we 3 remote viewers.

An example of a testing script is below:

Findings

From our testing results, we learned where users were successfully completed tasks and where users came across pain points. We then used our findings to either fine tune or redesign specific features of Medici Builder.