Embedded Files
Helping teachers deliver a Digital Learning experience to enhance Student Success
EXPERIENCE DESIGN | RESEARCH | PROTOTYPING | FEATURE REDESIGN | MOBILE
ROLE
Lead UX Designer at Barnes & Noble Education Inc.
TIMELINE
Mar 2016 - June 2018
TOOLS
Axure RP Team / Adobe XD / JIRA, Confluence / Optimal Workshop / GoogleForms
CLIENT
Multiple higher-ed institutions across the United States
*To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.
“Over 7 million students are taking at least one
online learning course in 2018”
- National Center for Education Statistics (NCES)
Overview
Learning Management Systems (LMS) are used in academic institutions across the world. They provide students of today, the education they need, to face tomorrow.
BNED (Barnes & Noble Education Inc.) needed to compete with the likes of BlackBoard, Canvas and other major players in the LMS market.
To do this, we had to re-imagine and design a Digital Learning experience that:
REDUCED STUDENT COSTS
ENABLED INSTRUCTORS TO EASILY PERSONALIZE LEARNING MATERIALS TO THEIR SYLLABUS
TRACK STUDENT PERFORMANCE
Open Education Resources (OER) are a more affordable way to provide the same learning quality in a digital format that helps instructors focus their time on teaching rather than creating digital content.
“Global Edtech investments reached US$18.66 billion in 2019 and the overall market for online education projected to reach $350 billion by 2025”
- Globe Newswire
Check out what we built!
Problem Statement(s)
A driving force for the Learning Management System was to address e-Learning issues that bring affordability, enhanced learning methods and effective teaching to students who struggled with difficulties and costs of learning, in an ever-changing classroom setting.
We uncovered that faculty and curriculum designers who used our LMS, struggled to create quality content and assessments in an efficient way. Quizzes are by far the most commonly used assessment device in the classroom setting.
When we took a magnifying glass to the quiz authoring flow, we found these alarming stats:
AVERAGE TIME TO CREATE AN QUIZ QUESTION
3min 45sec
AVERAGE NUMBER OF CLICKS
34
AVERAGE TIME TO SETUP A QUIZ
11min 15sec
AVERAGE NUMBER OF MODE JUMPS
12
“Openly licensed educational resources empower teachers as creative professionals by giving them the ability to adapt and customize learning materials to meet the needs of their students without breaking copyright laws..”
Users & Audience
My role as Lead UX Designer was to work closely with the product management team to design and test solutions for defined problems. Helping to prioritize features based on customer needs/wants.
I also coordinated efforts and processes with the engineering team to ensure feasibility and standards. I mentored my team in running heuristic reviews on many past features to identify problem areas and managed a junior visual designer to completely re-design a new experience.
To start, I had to compile a pattern inventory and gather the various UI patterns in-use across the app. These were so disjointed due to the number of past designers who had previously worked on it.
“Students could spend as little as $25 per course on materials compared to a national average of $153 per course
...Over the course of a year, the average college student spends more than $1,200 on books and materials, according to the College Board.”
Roles & Responsibilities
My role was to conduct research, lead design efforts, test the experience for the entire product as well as provide a seamless design-development handoff and benchmark success metrics.
I collaborated closely with visual designers, product managers and engineering/QA teams to launch this project. I was determined to know the efficacy of the design solutions we put out. As it was something the company hadn't ventured into before, I went to work to pick simple yet effective methods to test users and track success metrics. Insights from early usability testing helped the product managers avoid unnecessary features and validated our custom built UI patterns. I ensured these went into a modular design system that streamlined development efforts.
“Re-define and Re-design a high-performing learning system which doesn't require a steep learning curve”
“Over 81% of students use mobile devices to study - 77% of students surveyed said using technology has improved their grades, and 48% said using mobile devices while studying saves them time.”
Scope & Constraints
A student centric solution that was fully responsive and content-focused to let students study and take assessments anywhere. Allowing powerful personalizations by an instructor to tailor a “Learning Path” for their students and guide learning outcomes based on Open Education Resource materials.
The deadlines were stringent and we had to routinely meet critical dates driven by the academic calendar which affected the amount of discovery and testing activities we could realistically incorporate.
The existing development structure of the heavy weight features were impossible to re-engineer so we had to ensure designs complied with existing code and capabilities of our development team. We also specifically had to ensure that all our designs were ADA compliant; the accessibility standard for inclusive design that is mandatory for all higher-ed institutions to follow.
Old cluttered quiz authoring interface
The Process
Multiple aspects of the existing Competency Based Learning platform had to be adapted or completely scrapped and designed from the ground up.
The most challenging of these was to completely re-design the Quiz Engine used by teachers to produce assessment content to support and test students on Course Learning material or competency. This facet of the system is typically used to:
Create Questions & Quizzes
Import Questions from outside or inside the LMS
Easily find questions that are relevant to a particular quiz
Manage/organize all created questions
Align competencies to questions/quizzes as needed
“Learn,
Empathize,
Define,
Design,
Deliver
Test and Repeat”
FINDINGS FROM HEURISTIC REVIEW
Gathered from looking at the existing interface and workflow:
Dissimilar difficult looking & cluttered interface
Lack of support for optimal workflows supported by competitors
Jump to different areas/modes - increased cognitive load and forcing user to recall vague keywords rather than reference their own working sets
Poor Tab control, keyboard shortcuts & low accessibility support
Creating Quizzes and Questions is a tedious and disjointed experience as described by faculty and course/instructional designers. From sifting through direct feedback, blogs and community forums we found three key problem areas:
Filtering for Questions
Question Bank
Question Import
Three critical problem areas were frequently mentioned while combing through user feedback
Based on the purpose of the product, the target audience and a carefully aligned UX approach, we outlined a set of values for the system:
UX Values
[ Familiarity ] Employ familiar design patterns/feel in popular apps for students (ages 14-24) and Instructors (ages 25-45) like Social, e-Commerce etc.
[ Coherence ] Highly intuitive, comprehensible, manageable and meaningful to the user.
[ Fluency ] Smoothness, ease and speed of tasks - quick transition from novice to expert.
[ Integrated Experience ] A unified experience that aligns with the identity of our users.
Co-creating solutions with Product Management and getting constant feasibility checks with the Engineering team to ensure our designs were solving the right needs and were achievable...
01 Discover
Understanding User needs
Contextual Inquiry
Problem Definition
Analyze
Synthesize
We typically interacted with the Products teams, joined focus group calls with actual teachers and students to understand their pain points and categorize their needs and wants. Requirements and Features were loosely drawn out and shared with the Design team.
From there I would launch into my sketch pad or the whiteboard to break down these requirements and decide on the most effective ways to visually integrate new functionality into a mature product. A pattern study was conducted to take inventory of the many disparate UI patterns across the authoring side of the system. My reasoning at the time was to bring consistency and pattern re-usability across the platform.
02 DESIGN
Ideation and Sketches
Interaction Design
Wireframe & Prototype
Flow Diagrams
Cross-team collaboration
Feature Definition
Sketches and Whiteboarding
Interaction Flows
Interaction Flows
Then I went into wireframing and prototyping activities. It was a massive change in how the company previously ran their design process - using static PSDs or chopped up JPGs to visualize a complex feature that was in need of interaction design modeling.
For this, I had brought in my many years of Axure RP experience and taught the team of four how to prototype and most effectively use the power of this tool. It helped us all think through the user flow and interactions as we connected use-cases and click/tap through flows.
Being able to sit in tandem with the Product Managers who wrote up the requirements also helped to ensure there were no communication gaps, scope misses or confusion for when we had to convince the daunting Engineering team for feasibility checks.
Solution for the infamous Inception type - question within a question
Frequent considerations were made to help define features. I curiously explored and pitched techniques for prioritization to deliver the highest value to the user. These were weighed against development effort along with other constraints such as time and whether it made sense for the product roadmap.
The example below is a Quality Function Deployment matrix to assign scores based on Customer requirements against functional Product feature sets and capabilities. This effectively helped us decide which highest value features to define and build first.
Qualtity Function Matrix
03 Deliver
Visual Design Specs
UI Patterns
Design Guidelines
Frontend Review
Bug Resolution
One of the most intensive and challenging aspects of the Quiz redesign was the Search and Add aspect. We had to design this from the ground up as the previous interface was outdated and grossly inefficient.
Quiz authors had to manage thousands of questions in a Question Bank and be able to pull the relevant sets into individual quizzes. We brought in tagging and categorization for quick retrieval along with a robust Filtering criteria that was inspired by a familiar e-commerce style.
We iterated multiple times based on user testing feedback from teachers and instructional designers.
Empty State
No results
User Prompt
Loading State
Question Listing
Final UI and Experience*
A sleek, lighter version application with a contemporary design appealed to students, teachers and institutions.
outcomes
With the redesigned instructor quiz interface and the brand new student experience, the response to the Learning Management System (LMS) was overwhelmingly positive.
Instructional Designer and Teacher user testing sessions showed an almost 50% shorter Time-to-task completion (TTC) using the new, more efficient authoring workflows for questions and quizzes.
“Learning is the only thing the mind never exhausts, never fears, and never regrets.”
- Leonardo Da Vinci
POLK STATE COLLEGE (WINTER HAVEN, FLORIDA)
Students really liked the Courseware Program; it saved them 57 percent on their required textbooks with reported average savings of $132 per course material.
Eighty-nine percent of students said they were “somewhat to extremely satisfied” — and an astounding 93 percent said they would recommend it to other students.
COMMUNITY COLLEGE OF BALTIMORE COUNTY (CCBC) (BALTIMORE, MARYLAND)
CCBC enrolled a total of 646 students in Barnes & Noble College’s First Day inclusive access program and had less than one percent of students opt out, meaning nearly the entire class had their required learning materials on the first day of class. The participation rate in courses using First Day digital materials was 99.9 percent, offering an average savings for students upwards of 61 percent. Students, on average, saved approximately $65 per course with First Day. That translates to over $42,200 in savings to students over one semester. The initial success of First Day was so positive that CCBC is now expanding the program to six more classes — some with very large enrollments.
OPT-OUT RATE
0.90%
TOTAL ENROLLMENT (in semester trial)
646 students
AVERAGE SAVINGS ALL COURSES
61%
TOTAL STUDENT SAVINGS (across all users)
$42,259
AVG. SAVINGS PER STUDENT
$65.46
WRIGHT STATE UNIVERSITY (FAIRBORN, OHIO)
As a result, the Fall 2018 semester saw 6,000 WSU students participating in the First Day inclusive access program across 40 courses and 120 sections — saving more than $675,000. More importantly, the program is helping students prepare for class and improve their course work.
testimonials
Inclusive courseware has made doing homework a breeze, I don’t have to worry about getting the right materials for my class of having four different tabs open at once. The homework is all lumped together and easy to work with!- SHELBY P. WSU CLASS OF 2019 STUDENT
I can say with 100% certainty, the BNC courseware usage is correlating with an increase in exam scores and retention of course materials. - LYNN N. INSTRUCTOR OF PSYCHOLOGY AND EDUCATION, PENN STATE UNIVERSITY
I can say with 100% certainty, the BNC courseware usage is correlating with an increase in exam scores and retention of course materials. - LYNN N. INSTRUCTOR OF PSYCHOLOGY AND EDUCATION, PENN STATE UNIVERSITY
what we learned
Interactive Prototyping for the win!
Instilled a radical shift in design process from static mockups to using and testing with interactive prototypes.
Design systems and scalable processes
A combination of Agile and Lean UX helped us realize the benefits and efficiency gains from using modular design patterns and quick turnaround design sprints.
Explore solutions and chip away at UX Debt
Sometimes it's just not feasible to put out a perfect design solution due to various constraints, but we made it a point to learn from our users, track areas for improvement and prioritize them in the backlog.
Product Management and Design Team synergy
Learned how to effectively play off team strengths and know when to hand-off.
Thank you
Google Sites
Report abuse