UX/UI DESIGN

Content Creation Platform

Knowbly is an open, extensible platform for narrative educational content development. The application consists of a content manager (CMS), WYSIWYG content composer, and interactive widget composer.

 

CLIENT

Metrodigi

DATE

August 2016

tools

Sketch
Illustrator
Photoshop

ROLE

Research
UX/UI Design

 
 
 
 

Project Goals

Design a feature set and accompanying UI that allows users to create interactive content for educational use. Our team was given 4 weeks to determine the site architecture and design mockups for the Knowbly application. The ultimate goal was to design a prototype of the MVP, which would then be built and released in private beta for testing.
 

My Individual Role

  • User research
  • Wireframing
  • UI Design (working closely with the Art Director)
  • Clickable prototypes
 
 
gray-bg.png
 
 

Research & Application Mapping

User Personas

Before jumping into design, we wanted to better understand our target users. We took the feedback of our existing enterprise customers who had expressed the need for an interactive content creation platform. From there, we developed 3 personas: The Educator, The Trainer, and the Instructional Designer. These personas would help guide us through the rest of the design process.
 

 
 
john_persona.png
donna_persona.png
kim_persona.png
 
 
 

Application Mapping

One of the initial steps of the design process was to create a structural framework for the Knowbly platform. Mapping out how each interface would interact with the rest of the application was a critical first step.
 

 
 
application-1.png
 
 
 
 

Designing the Experience

Sketching

Once we knew who we were designing for and agreed on a high-level application map, we were ready to start ideating. We started with the user dashboard because it would serve as a central hub for the rest of the Knowbly application. From there, we were able to conceptualize design patterns that would exist throughout the site. I sketched my initial thoughts in a notebook to process my ideas quickly.
 

 
 
dash_sketches.jpg
 
 
 

Low-Fidelity Concepts

Once I had narrowed down a concept from sketching, I translated it into digital wireframes to refine the concept further. I worked in parallel with our Art Director while she developed a style guide for the application, which would take us into the next phase of the design.
 

 
 
An early concept of the user dashboard showcasing a collection of user projects.

An early concept of the user dashboard showcasing a collection of user projects.

 
 
gray-bg.png
 
 

The Good Stuff

High Fidelity Mockups

The main objective of the design was to provide an intuitive interface for creating interactive learning content. The visual design was meant to be simple, clean and un-distracting so the emphasis was on the users creation.

I worked closely with the Art Director to develop a visual baseline that would translate across the application. We worked as a team to build out our UI kit, high-fidelity mockups, and clickable prototypes.
 

 
 
main.png
 
 
 

Content Manager

The content manager allows users to manage their image, audio, video and interactive assets in a centralized place. Users can export them in multiple instances from a single source.
 

 
 
content manager.png
 
 
 

Content edtior

The content editor provides a WYSIWYG interface for creating and editing content blocks. Users can format and style their content with robust editing tools.
 

 
 
content editor.png
 
 
 

collaboration tools

Publishing educational content often requires a team. We designed collaboration tools that allowed users to make comments and assign tasks to collaborators throughout the authoring process.
 

 
 
comments.png
 
 
 
 

Conclusion

Challenges

Our product team attempted to solve ALL the problems at once, making it difficult to narrow our focus and define a true MVP. Several of the cool features we wanted to build had to be thrown on the back burner so that we could focus on releasing the core feature set in private beta.
 

Next Steps

Our private beta is currently underway and we are collecting valuable user feedback. Our goal is to release the application in a public beta next year and continuously improve the product until we determine it's deemed a solid release candidate.

 
 
dark-bg.png