Energy Supplier Customer Experience Portal
How can we add value to the existing site? One major way is adding life and emphasis to important pages and interactions.
Process:
1. Meet with the client to pitch our idea
2. Analyze the existing site to decide which areas to focus on - we decided on 21 animations
3. Figure out development requirements
4. Get started in After Effects
5. Get client approval and prioritize
6. Develop and do QA!
Category 1: Interactive UI
Submit Compliance
When the user is ready to submit, this interaction gives positive feedback and assurance that their submission was done successfully. The progress loader accounts for longer load times and lets the user know that the submission is in progress.
Loading Data
Attention was paid to the way data loads in and adds some extra personality to dense pages.
Page Loading
We utilized our sites version of Clippy the Paperclip for pages that will likely take a long time to load and for a mobile page refresh.
Other Interactions
Motion was added in other small areas across the site.
Category 2: Error States
Larry the Lightbulb
We also used a sad version of Larry in scenarios where widgets or entire pages don't load properly.
Animated Illustrations
Each error page has an animated illustration to support the message and add a moment of delight to an often annoying situation. These animations will only play once when getting the error.
Category 3: Email Templates
A series of email templates have been created to automatically be sent in certain scenarios. These animations will only play once when opening the email.
----------------------------------------------------------------------------------------------------------
Space Side Project
I made the graphics following "Glass Planet Vector Illustration – Adobe Illustrator Tutorial" and then took it one step further by animating it in after effects.
