Chaucer Interactives Case Study

A new strategy for designing and producing interactives

Roles: UX Design | User Interface Design | Visual Design

Intro to Chaucer Interactives
Chaucer is a digital-first authoring and production tool for content creators. A big part of Chaucer's attraction to our stakeholders is it's ever-expanding suite of widgets which are Javascript-based interactive elements that can be added to any product. These include anything from simple slideshows to complex learning and assessment tools.

Screen Shot 2015-09-28 at 11.28.21 AM.png

CHALLENGES

1. Inconsistent User Authoring Experience
These interactives require an authoring environment. Because the initial batch of these widgets were built at break-neck speed, they were built without a consistent UI or UX.

Screen Shot 2015-09-28 at 3.13.48 PM.png

2. Not meeting users needs
Many of these were built without a clear understanding of the goals of the user or the context.

3. Not Agile/Dev friendly
Because these widgets were not built with a universal spec in mind, it caused extra work and unnecessary iteration for the developers.

4. Lack of mobile strategy
Concern of the ability to make these widgets usable in a mobile environment and without time/impetus for a mobile strategy, a poor 'scaling' solution was enacted.

Screen Shot 2015-09-28 at 3.35.09 PM.png

SOLUTIONS

1. Create a consistent User Authoring Experience
Through analyzing the necessary interactions, I was able to greatly limit the number of affordances needed. This also extended to a harmonous and consistent visual design as well.

Screen Shot 2015-09-28 at 4.05.13 PM.png

2. Meeting users needs
To ensure we were building a product that would meet our user's needs, initiated 1) kick-off meetings to discuss goals/expectations, 2) consistent client engagement via walkthroughs during the wireframe review stage and 3) implemented a testing ground that afforded the client's the ability to test the widgets and provide pre-release feedback for early iteration.

3. Agile/Dev friendly
By limiting the amount of affordances and creating a living design language, it was easy for the developers to understand and reuse code which also resulted in a more bug-free product.

Screen Shot 2015-09-28 at 3.47.32 PM.png

4. A mobile strategy
Took the effort to validate an effective responsive mobile design strategy by creating Proof of Concepts of our more content-heavy widget types.