MySky app animation and interactions
Bringing the MySky app concept to life through motion and interaction
Client
Sky
Role
UI design, product motion
Outcomes
Through client demos, this work made the case for motion at Foolproof and secured the follow-on Sky app prototyping project, worth £50K+ including research. Sky’s HOD said it “set the benchmark for what we should be doing going forward.”
Through client demos, this work made the case for motion at Foolproof and secured the follow-on Sky app prototyping project, worth £50K+ including research. Sky’s HOD said it “set the benchmark for what we should be doing going forward.”
Through client demos, this work made the case for motion at Foolproof and secured the follow-on Sky app prototyping project, worth £50K+ including research. Sky’s HOD said it “set the benchmark for what we should be doing going forward.”
Background
Sky and Foolproof set out to reimagine the underperforming MySky app. Another team designed the app, and I was brought in for the motion: the splash screen, hero, navigation and page transitions.
Sky and Foolproof set out to reimagine the underperforming MySky app. Another team designed the app, and I was brought in for the motion: the splash screen, hero, navigation and page transitions.
The challenge
I had one to two weeks for a lot of finessing, with decision-makers on both the Sky and Foolproof sides. Sky’s HOD had sketched the core idea: tap a category like Broadband and the hero image powers on instead of sitting static. Once it was nailed, it needed to template across every category.
I had one to two weeks for a lot of finessing, with decision-makers on both the Sky and Foolproof sides. Sky’s HOD had sketched the core idea: tap a category like Broadband and the hero image powers on instead of sitting static. Once it was nailed, it needed to template across every category.
Why Rive
After Effects would have worked, but Rive was faster and closer to Figma. I could paste straight from Figma, the files stayed tiny, there was no video export, and it handled real nav bar interactivity. It was also a chance to show the team what the tool could do.
After Effects would have worked, but Rive was faster and closer to Figma. I could paste straight from Figma, the files stayed tiny, there was no video export, and it handled real nav bar interactivity. It was also a chance to show the team what the tool could do.
Scaling the system
The first hero became the template for TV/Glass, Broadband, Mobile and Protect. Mobile was the outlier, because it also had to show remaining data and minutes. I also animated the Design System’s nav icons, which had never moved before, and built their interactive states in Rive.
The first hero became the template for TV/Glass, Broadband, Mobile and Protect. Mobile was the outlier, because it also had to show remaining data and minutes. I also animated the Design System’s nav icons, which had never moved before, and built their interactive states in Rive.
Bringing it all together
Luke, a fellow designer, combined my motion work with his page designs in a Principle prototype so Sky could test it hands-on.
He had a lot of work to do on tying it all together and creating that final piece. My bit was feeding into that larger project. Seeing it all together and in-situ was a great feeling for a lot of work.
Luke, a fellow designer, combined my motion work with his page designs in a Principle prototype so Sky could test it hands-on.
He had a lot of work to do on tying it all together and creating that final piece. My bit was feeding into that larger project. Seeing it all together and in-situ was a great feeling for a lot of work.
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
…SOMETHING
…SOMETHING
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
…SOMETHING
…SOMETHING