Case Study
Knowbly.com
Knowbly is a powerful collaboration eLearning application that offers its users the ability to create and deliver content through its suite of interactive authoring tools; A course creator, interactive widget creator, theme builder, and content manager.
Project Involvement
Over the two and half years I worked at Knowbly, I was responsible for the creation and maintenance of Knowbly’s components library, design, and prototyping of Interactive Widgets, spearheaded the UI design of the Course Creator experience, and closely worked with the Art Director in developing Knobly’s UI design system used through the application.
Course Creator
Working with the VP of Product, I designed and prototyped the Course Creator experience of Knowbly. This is a key component of the application, as it is the place where users can put together their courses without a single line of code. Built much like CMS, users can create modules, lessons, assessments, or activity pages.
As part of this process, there was a lot of iterative design based on research, user feedback, and testing. As changes were made, new features were added to the platform, the user experience improved to what it is now. Below is the user flow for creating a course in Knowbly.
The image sequence below has prototypes showing some of the changes and iterations that the Course Editor went through in order to improve the user experience.
UI Pattern Library
When the company decided to switch from Sketch & InVision to Figma, I was responsible for setting up and maintaining Knowbly’s UI pattern library. Up until that point, Sketch’s shared components hadn’t worked very well with our team.
This approach changed dramatically the way the product team worked in prototypes. It allowed for a more efficient design system that was easier to maintain but most importantly, ensured consistency across all mockups.
The library has a huge collection of elements ranging from line dividers, media players, buttons in all their different states, to all components used in the entire user interface used across the application.
Interactive Widgets Design
Working with the Product Manager (PM), I designed and prototyped a total of 10 widgets that are part of the suite of tools that Knowbly offers. All widgets design are responsive, theme-able, customizable, and work easily and intuitively.
Interactive Video Widget
Knowbly added a fully responsive, element accessible, mobile-driven, interactive video and video assessment experience to the list of interactive widgets. This experience was designed to include:
- A Fully responsive interactive video player
- Responsive interstitial layers
- Full-screen mobile interactive video
- Closed-caption controls
(The video shown here is from a prototype used to present the idea to the team)
Process: The Product Manager (PM) and I spent time doing research, creating wireframes, and doing several rounds of design iterations of the widget before presenting it to the rest of the product team.
Product Acceptance
Part of my role also included working with the engineering team ensuring that implementations meet product requirements. As part of this process, I would create detailed design annotations and blueprints that were reviewed with them during handoffs.
Challenges and Opportunities
Given the scale and complexity of working in a SaaS project, multiple things always had to be considered when planning and designing new components.
Changes
Since Knowbly is a content delivery platform, all potential changes to the application, either Interactive Widgets and Courses features, had to consider if and how those changes would affect current clients’ content.
This made for any potential changes to be more time-consuming, but it also meant a lot more emphasis on planning and iteration of tools before becoming part of the platform.
Theme-ability
Content creators have the ability to apply and/or customize a theme for their content. This meant that all Interactive tools had to be designed with that mind.
Sometimes this proved to be restrictive, and certain elements would have to be redesigned or not implemented.
Accessibly
We constantly reviewed and tested designs to ensure that all components followed specific guidelines and best practices.
Final Product
Knowbly has since then been acquired by Turning Technologies.
