MySky app animation and interactions
Industry
media and entertainment
Client
Sky
MySky app animation and interactions
Industry
media and entertainment
Client
Sky
Background
Background
The story behind this work is, the existing MySky app (at the time), was not really the best it could be.
With that in-mind, Sky works closely with Foolproof and wanted to bring to life a new vision of what that app could look like in a concept.
From an app design side, I was not involved in that part, this was created by a different team.
Where I was brought in and needed, due to my love of motion and interaction, was to bring it to life. Mainly around a splash screen, hero section, navigation and transitions between pages.
Being able to make UX SING!!! is what I love to do, so I was super happy to get involved.
The story behind this work is, the existing MySky app (at the time), was not really the best it could be.
With that in-mind, Sky works closely with Foolproof and wanted to bring to life a new vision of what that app could look like in a concept.
From an app design side, I was not involved in that part, this was created by a different team.
Where I was brought in and needed, due to my love of motion and interaction, was to bring it to life. Mainly around a splash screen, hero section, navigation and transitions between pages.
Being able to make UX SING!!! is what I love to do, so I was super happy to get involved.
The Challenge
As with anything, time is always a factor. I want to say a week or 2 on this. Which is not a lot of time for this type of work. Lots to finesse.
There were a few decision makers higher-up from Sky and Foolproof over this work, so that was factor to manage exceptions on.
The main hero power-up idea had already been sketched out by the HOD at Sky. This idea was to give the indication of, as an example, a user would tap on the Broadband navigation tab, the page would appear and the hero image would should the Sky Hub and surrounding image powering on in some way. Rather than it just being static.
He talked me through what he was thinking. Which was fine but also if there is a better way to do it, I would offer that too.
Once this idea could be locked down, it could then be applied to other hero imagery for the different categories.
The Challenge
As with anything, time is always a factor. I want to say a week or 2 on this. Which is not a lot of time for this type of work. Lots to finesse.
There were a few decision makers higher-up from Sky and Foolproof over this work, so that was factor to manage exceptions on.
The main hero power-up idea had already been sketched out by the HOD at Sky. This idea was to give the indication of, as an example, a user would tap on the Broadband navigation tab, the page would appear and the hero image would should the Sky Hub and surrounding image powering on in some way. Rather than it just being static.
He talked me through what he was thinking. Which was fine but also if there is a better way to do it, I would offer that too.
Once this idea could be locked down, it could then be applied to other hero imagery for the different categories.
the right tool for the job
As well as getting the designs created in the right way, they needed to be animated at speed also.
I am always advocating for looking at tools outside of Figma for motion, that gives more control to the designer, plus also speed and possibililites.
I suppose I could have used After Effects for some of this but its not something I use on a daily basis. It can be quite intimidating and I wanted to use something that felt like Figma but did more but faster.
This is where Rive came into the picture and something I have been looking at for quite a while anyway.
It allowed me to just copy and paste from Figma, see all my designs side by side, create very small file sizes, did not need to be a video format, plus let me do the interactivity for the navigation.
It was also a way to promote the tool being used more and the benefits it can bring to the work.
the right tool for the job
As well as getting the designs created in the right way, they needed to be animated at speed also.
I am always advocating for looking at tools outside of Figma for motion, that gives more control to the designer, plus also speed and possibililites.
I suppose I could have used After Effects for some of this but its not something I use on a daily basis. It can be quite intimidating and I wanted to use something that felt like Figma but did more but faster.
This is where Rive came into the picture and something I have been looking at for quite a while anyway.
It allowed me to just copy and paste from Figma, see all my designs side by side, create very small file sizes, did not need to be a video format, plus let me do the interactivity for the navigation.
It was also a way to promote the tool being used more and the benefits it can bring to the work.
Nav bar interactive in Rive.
Use it yourself https://rive.app/s/jhfMCwO-30ycnoOgf9tOMA/?runtime=rive-renderer
Nav bar interactive in Rive.
Use it yourself https://rive.app/s/jhfMCwO-30ycnoOgf9tOMA/?runtime=rive-renderer
Next steps and a 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 steps and a 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.
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.
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.
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.
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.
The outcome
The outcome
All of this work through client conversations and demos to make the case for more motion and prototyping at Sky, which helped secure the future Sky app prototyping project at Foolproof (£50K+ revenue incl. the research phase)
The HOD also mentioned that the work we had all done, has set the benchmark for what we should be doing going forward.
Doesn't get much better than that :)
All of this work through client conversations and demos to make the case for more motion and prototyping at Sky, which helped secure the future Sky app prototyping project at Foolproof (£50K+ revenue incl. the research phase)
The HOD also mentioned that the work we had all done, has set the benchmark for what we should be doing going forward.
Doesn't get much better than that :)
Background
The story behind this work is, the existing MySky app (at the time), was not really the best it could be.
With that in-mind, Sky works closely with Foolproof and wanted to bring to life a new vision of what that app could look like in a concept.
From an app design side, I was not involved in that part, this was created by a different team.
Where I was brought in and needed, due to my love of motion and interaction, was to bring it to life. Mainly around a splash screen, hero section, navigation and transitions between pages.
Being able to make UX SING!!! is what I love to do, so I was super happy to get involved.
The Challenge
As with anything, time is always a factor. I want to say a week or 2 on this. Which is not a lot of time for this type of work. Lots to finesse.
There were a few decision makers higher-up from Sky and Foolproof over this work, so that was factor to manage exceptions on.
The main hero power-up idea had already been sketched out by the HOD at Sky. This idea was to give the indication of, as an example, a user would tap on the Broadband navigation tab, the page would appear and the hero image would should the Sky Hub and surrounding image powering on in some way. Rather than it just being static.
He talked me through what he was thinking. Which was fine but also if there is a better way to do it, I would offer that too.
Once this idea could be locked down, it could then be applied to other hero imagery for the different categories.
the right tool for the job
As well as getting the designs created in the right way, they needed to be animated at speed also.
I am always advocating for looking at tools outside of Figma for motion, that gives more control to the designer, plus also speed and possibililites.
I suppose I could have used After Effects for some of this but its not something I use on a daily basis. It can be quite intimidating and I wanted to use something that felt like Figma but did more but faster.
This is where Rive came into the picture and something I have been looking at for quite a while anyway.
It allowed me to just copy and paste from Figma, see all my designs side by side, create very small file sizes, did not need to be a video format, plus let me do the interactivity for the navigation.
It was also a way to promote the tool being used more and the benefits it can bring to the work.
Nav bar interactive in Rive.
Use it yourself https://rive.app/s/jhfMCwO-30ycnoOgf9tOMA/?runtime=rive-renderer
Next steps and a 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.
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.
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.
The outcome
All of this work through client conversations and demos to make the case for more motion and prototyping at Sky, which helped secure the future Sky app prototyping project at Foolproof (£50K+ revenue incl. the research phase)
The HOD also mentioned that the work we had all done, has set the benchmark for what we should be doing going forward.
Doesn't get much better than that :)