MySky app animation and interactions
Bringing the MySky app concept to life through motion and interaction
Role
Motion and interaction design
Client
Sky
Outcomes
This work—through client conversations and demos—made the case for motion at Foolproof, securing the future Sky app prototyping project. £50K+ revenue including the research phase.
This work—through client conversations and demos—made the case for motion at Foolproof, securing the future Sky app prototyping project. £50K+ revenue including the research phase.
This work—through client conversations and demos—made the case for motion at Foolproof, securing the future Sky app prototyping project. £50K+ revenue including the research phase.
This work—through client conversations and demos—made the case for motion at Foolproof, securing the future Sky app prototyping project. £50K+ revenue including the research phase.
The HOD said the work “set the benchmark for what we should be doing going forward.” Doesn’t get much better than that :)
Background
The MySky app wasn’t living up to its potential. Sky and Foolproof set out to reimagine it — a concept for what the app could be.
Another team handled the app design. I was brought in for the motion: splash screen, hero, navigation, and page transitions.
Making UX sing is what I love, so I was glad to get involved.
Background
The MySky app wasn’t living up to its potential. Sky and Foolproof set out to reimagine it — a concept for what the app could be. Another team handled the app design. I was brought in for the motion: splash screen, hero, navigation, and page transitions.
Making UX sing is what I love, so I was glad to get involved.
Background
The MySky app wasn’t living up to its potential. Sky and Foolproof set out to reimagine it — a concept for what the app could be. Another team handled the app design. I was brought in for the motion: splash screen, hero, navigation, and page transitions.
Making UX sing is what I love, so I was glad to get involved.
Background
The MySky app wasn’t living up to its potential. Sky and Foolproof set out to reimagine it — a concept for what the app could be.
Another team handled the app design. I was brought in for the motion: splash screen, hero, navigation, and page transitions.
Making UX sing is what I love, so I was glad to get involved.
The challenge
The challenge
Time is always a factor. A week or two on this—not a lot for this type of work. Lots to finesse. There were also a few decision makers from Sky and Foolproof to manage expectations with.
Time is always a factor. A week or two on this—not a lot for this type of work. Lots to finesse. There were also a few decision makers from Sky and Foolproof to manage expectations with.
The main hero power-up idea had been sketched by the HOD at Sky. As a user taps on, say, the Broadband tab, the hero image powers on rather than sitting static. Once locked down, it could be templated across all categories.
The main hero power-up idea had been sketched by the HOD at Sky. As a user taps on, say, the Broadband tab, the hero image powers on rather than sitting static. Once locked down, it could be templated across all categories.
The right tool for the job
The right tool for the job
I’m always advocating for tools outside of Figma for motion—more control, speed and possibilities. I could have used After Effects but wanted something that felt like Figma, did more and did it faster. Enter Rive.
I’m always advocating for tools outside of Figma for motion—more control, speed and possibilities. I could have used After Effects but wanted something that felt like Figma, did more and did it faster. Enter Rive.
Rive let me copy and paste from Figma, keep file sizes tiny, skip video formats, and handle nav bar interactivity. A way to promote the tool’s benefits too.
Rive let me copy and paste from Figma, keep file sizes tiny, skip video formats, and handle nav bar interactivity. A way to promote the tool’s benefits too.
Bringing it all together
Bringing it all together
Another part of this project was Luke, a fellow designer (great guy too), who was creating the page designs, putting all of this together into a Principle prototype, so we could give it to someone at Sky to actually use.
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. See ing it all together and in-situ was a great feeling for a lot of work.
Another part of this project was Luke, a fellow designer (great guy too), who was creating the page designs, putting all of this together into a Principle prototype, so we could give it to someone at Sky to actually use.
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. See ing it all together and in-situ was a great feeling for a lot of work.
More to do
With the initial animation(s) approved, I was able to move onto the other categories for the animation. That would be Sky TV/Sky Glass, Broadband, Sky Mobile and Sky Protect, plus tweaking all of it all the time, to make it feeeeeeeeeeeeel…right.
Similar animations but with differing assets/branding etc. Mobile was quite different as it also needed to show how much phone data/mins they had left.
Other than that, there was a splash screen for when the app was booted up. Which was fairly simple to do.
Lastly there was the nav bar using the icons.
These icons already existed in default/filled/outlined states in the Sky Design System but not animated in anyway.
So I needed to figure out what how they animate in/out, plus the logic in Rive of making it interactive. Some of that was new-ish to me too.
With the initial animation(s) approved, I was able to move onto the other categories for the animation. That would be Sky TV/Sky Glass, Broadband, Sky Mobile and Sky Protect, plus tweaking all of it all the time, to make it feeeeeeeeeeeeel…right.
Similar animations but with differing assets/branding etc. Mobile was quite different as it also needed to show how much phone data/mins they had left.
Other than that, there was a splash screen for when the app was booted up. Which was fairly simple to do.
Lastly there was the nav bar using the icons.
These icons already existed in default/filled/outlined states in the Sky Design System but not animated in anyway.
So I needed to figure out what how they animate in/out, plus the logic in Rive of making it interactive. Some of that was new-ish to me too.
NExt steps and nice moments
I created the first hero animation in Rive, which I think was Sky Glass or Sky Tv, I can’t remember exactly but was pretty straightforward to do the initial design.
After than I used it as a template for what the other hero images would be.
Funny story, I was visiting the Sky offices the following day or so and the HOD was there too. I called him over to show the progress on my laptop.
His excitement was so lovely to see and he hugged me. Which is a first from a client for me.
At which point he called the other Sky designers and Foolproof designers around, for me to show them.
He said, going forward, this is what we should be aiming for. Which was a really nice moment.
I created the first hero animation in Rive, which I think was Sky Glass or Sky Tv, I can’t remember exactly but was pretty straightforward to do the initial design.
After than I used it as a template for what the other hero images would be.
Funny story, I was visiting the Sky offices the following day or so and the HOD was there too. I called him over to show the progress on my laptop.
His excitement was so lovely to see and he hugged me. Which is a first from a client for me.
At which point he called the other Sky designers and Foolproof designers around, for me to show them.
He said, going forward, this is what we should be aiming for. Which was a really nice moment.
Next project
Sky Mobile piggybank animation
Sky Mobile piggybank animation
ALWAYS THINKING… ALWAYS LEARNING… ALWAYS CREATING…
ALWAYS THINKING… ALWAYS LEARNING… ALWAYS CREATING…
…SOMETHING
ALWAYS THINKING… ALWAYS LEARNING… ALWAYS CREATING…
…SOMETHING
ALWAYS THINKING… ALWAYS LEARNING… ALWAYS CREATING…
…SOMETHING
ALWAYS THINKING… ALWAYS LEARNING… ALWAYS CREATING…
…SOMETHING