Case Study: Animadeus

Animadeus is a web application that generates custom animations. Users can either choose from a selection of presets, or upload their own images to generated an animation using CSS3.

Visit Animadeus.

Team

Joel Field, Connor McLeod, and I collaborated on the UX design of this project. We found our own roles during development, Joel designing assets and layout, Connor developing the front end, and I developed the back end.

CSS3 Snow Animation

CSS3 Animations Gap

We had just learned how to animate on the web using CSS3 and wanted to see if anything existed already using CSS3 animations. We saw many different creative web apps, but we didn’t find anything that would animate images using CSS3.

We wanted to create a tool so that people could create web animations without having to know html and css.

Who Would Use Such a Thing?

People that use creative web apps, are young and tech-savvy, using sites like reddit and stumbleupon to find new creative outputs. They may get frustrated when something they are using is frustrating rather than fun.

Animadeus Persona

The UX Process

Before even touching a computer, we created a user scenario, diving into the mind of a potential user and how might they use our website, and what are some of things that would make it a great experience for them.

After coming up with a list of features that would make Animadeus great, we sketched up different versions of what it might look like, eventually creating mockups of those sketches, and then finally creating a prototype from those sketches. It was a long process, but it allowed us to focus and gain clarity on what we wanted our final product to be.

Testing

After creating a working prototype of a tool we thought was awesome, we tested it with a small group, finding out things that we had overlooked, like users looking for some instruction on how to use it. We went back to the drawing board to see how we could better arrange a hierarchy in our information architecture.

Sharing

What is creation without the ability to share? When people create something, they love to share it with their friends and family. We wanted the users of our tool to be able to save and share the animations they create. In order to do this, I developed a dynamic link generator so that when an animation is created, the creator has a unique link to share with the world.

The Outcome

After launching Animadeus, we were pleased to see friends sharing the site and their animations, seeing over one hundred users creating animations on our site. This being the first major project we had launched, it was exciting to see the positive reception.


Please reach out if you have any questions or comments, you can connect with me on twitter or by email: albert.jordan.coil@gmail.com

Jordan is a UX Designer and Web Developer, recently graduated looking to start his career creating useful and engaging work.