Functional Animations

As the UX was developed for GoDaddy hosting products, animations and transitions were missing pieces. I spearheaded the implementation of functional animations within the product apps to enhance the experience for our customers.

Problem

As more features were being added to the GoDaddy Hosting product set and more customers used the products, it became apparent that there was a missing piece in the user experience. Customers provided feedback that certain interactions were jarring or clicking on items on the page triggered an unexpected action.

Incorporating Animations

If a user's WordPress site had plugin updates, the UI displayed which updates were available. Clicking 'Update' next to the corresponding plugin name would trigger the update. However, what the user saw was that clicking 'Update' would make the entire panel immediately disappear. Users were unsure whether or not they successfully initialized an update.

To acknowledge the users' clicks, we simply added a spinner and collapsed the row.

Functional animations serve an intentional, logical purpose.

Defining Animations Within the Brand

GoDaddy has a style guide for UI components, and it made sense to extend this to animations. I wrote up an initial doc for implementing animations and published this to the company's internal style guide. Most of the inspiration came from this Smashing Magazine article. Within the hosting apps, I created a shared wrapper component that teams could use to apply simple transitions and animations, e.g. slide and fade, to elements in a consistent manner.