← Back to Case Studies

Video Presentation Software Redesign

sparkol-logo.jpg
 

Platforms: Windows, Mac

Main Roles: User Research, UX Strategy, Software UI Design

Additional Roles: ActionScript Development

 

Project Summary

Sparkol was founded in 2008 and operates a number of presentation software products. Their biggest product, VideoScribe, is one that most people have seen. It produces “whiteboard animations” in which images or text are drawn by an animated hand and pen. Video presentations have been proven to improve problem-solving  by up to 75%, and boost subsequent recall of information by 15%.

This product had some loyal fans already but the user experience on this product was long overdue for a major overhaul. I was asked to come in and help bring the software up to date for a modern user base.

 

Research

Since the product had been in production for nearly 8 years, there were a lot of analytics to work from. I was given full access to support platforms and a detailed report was drawn up of where users difficulties were. We looked at performance, layout of actions, ux flows, interface design and all other areas of the software.

The company had previously compiled a list of loyal customers who were willing to work with us during the process as test users, so I wrote a questionnaire which was sent out to assess current impressions of the app features, and gather their hopes for future versions.

Responses were prioritised and a design & development plan was created.

 

Sketching & Wireframing

I started by taking a detailed outline of the current features and creating a list of which features have tried-and-true UX patterns that could be applied. Thee products were being designed simultaneously – VideoScribe and two new, unreleased products – so the process involved a lot of cooperative work between the products to make sure that I was designing patterns that could be used as a design language for Sparkol as a whole.

At various stages in the project, I held research and testing sessions with internal users, subscribed beta users, and people out of the community who had never used the product before. All feedback was prioritised and combined into future versions of the specification.

As a UX pattern neared completion, I created documents explaining my reasonings for making changes and outlining the research that supported my recommendations.

VideoScribe5.png
 
 

UI Design

As mentioned above, I was working on three products simultaneously so had to make sure that the UI was clean enough to work company-wide, and was appropriate for the platform that the user was on (mobile, web or tablet). In the end, we decided on a very simple UI which was designed to blend into the background of the app, allowing the user’s presentation content to be the star of the show.

I created designs on two levels: guideline templates and individual screen designs. I provided sample HTML/CSS markup for a good number of screens to guide the developers with specific vales and element sizes.

 

Specification & Development

I wrote the development specification including user stories for use in their development management system. I then worked with the development team in Jira and Confluence systems during build to answer questions and offer general support through launch.

VideoScribe6.jpg
 

For the web side of the product, I provided a GitHub repository with full HTML, CSS & jQuery templates which saved a large number of development days and ensured that the app would be built to our exact UI specifications.

At various stages through development, I performed detailed UX & design reviews highlighting areas of risk for a clean interface.

 

Toward the end of the project, development resource became a concern so I chose to dive into the code and learn the basics of ActionScript development so I could help ensure that the final product was pixel-perfect. This reduced the weeks to launch and allowed me to work more closely with the team so we saw eye to eye.

VideoScribe8.png
 
 
VideoScribe is addictive. It’s simple to use, but hugely effective.
— Primary School Management Magazine
 

Additional Before and After Screenshots

A number of areas in the app had UX patterns that were out of the norm. For example, where a dropdown or select menu would normally be, there was a scroller. These were replaced app-wide.

 

The login screen was very busy. It has now been redesigned with an interface that could be used across various applications, all of which have different colour schemes and main logo icons.

Folders in the  main screen were confusing for users, as they did not know the difference between a folder and a project file. A left sidebar navigation is now used so users can clearly see folders, and view more details about their project files.

The editor was redesigned for simplicity, with tools and options reorganised in a more obvious layout. The artboard colour was also changed to help the user see the boundaries of their presentation.

Modals were updated so that the “OK” and “Close” buttons were in more standard places. Also the standard form layouts were reorganised.

Interactive features and flows like recording audio were redesigned to follow more standard UX principles.