Illustration Process
There was a need for three onboarding animations to help the user understand how to embed the extension on their iOS device.
Scene 1: Shows the user how to Enable the Safari Extension
Scene 2-1: Shows user how to give access so we can always show the best deals when shopping
Scene 2-2: If the user does not see the Review banner in 2-1
Assets for Scene 1: A mobile Safari search bar, Safari menu, and toggle on the extensions menu were created.
Assets for Scene 2-1: A Review Banner, Always Allow menu, and Always Allow on Every Website menu were created.
Assets for Scene 2-2: A mobile Safari search bar, Safari menu, Always Allow menu, and Always Allow on Every Website menu were created.
Animation Process
Storyboard Breakdown
Scene 1: The Safari search bar starts in the frame and then moves up as the Safari menu bumps up and shows an emphasis on the Manage Extensions tag. Lastly, the Safari menu moves down as the extensions menu bumps up.
Scene 2-1: The Review Banner starts in the frame and then moves down as the Always Allow menu scales up in size to emphasize Always Allow. Lastly, the Always Allow menu scales down as the Always Allow on Every Website menu scales in size to emphasize Always Allow on Every Website.
Scene 2-2: The Safari search bar starts in the frame and moves up as the Safari menu bumps up and emphasizes the Manage Extensions tag. Then the Safari menu moves down as the Always Allow menu scales up in size to emphasize Always Allow. Lastly, the Always Allow menu scales down as the Always Allow on Every Website menu scales in size to emphasize Always Allow on Every Website.
Drop Shadow Assets
Lottie doesn’t support some After Effects treatments like drop shadows, but it supports embedded images. I worked around this by creating shapes that align with the vector visual art and added drop shadows in Figma, then exported them as PNGs at 2x the size. The larger size gives it some wiggle room to scale up or down since the animation is dynamic. I then exported the assets from Figma at 100% opacity and dropped the opacity to 18% in After Effects.
Honey's Mobile Safari Extension (MSE) Visuals and Animations
Prototype
Timeline
2 Months —
Area of Interest
MSE Product Onbarding Animation
My Role
Visual Designer / Animator
Tools
Figma, After Effects, Illustrator
Style
We wanted to show a happy path and keep it simple with low-fi illustrations that still looked like the iOS menus without all the unessential text and visuals. Only the steps to embed the Honey extension on iOS were emphasized. We used a color palette that distinguishes what action the user is on and contrasts nicely with the dark text. Then we continued the familiarity by using typography SF Pro, Apple's system font.
Context
On June 7th, 2021 at the WWDC event keynote, Apple announced mobile Safari extensions. This unlocked a huge potential for our business in a mobile market, where as previously, extensions were only available for desktop users. The target launch date was September 21st, 2021. Below is a review of my thought process for MSE onboarding visuals, animations, and solutions.
Team
Dayana Alvarez (Product Designer)
Patty Johnson (Product Manager)
Jose Torres (Visual Designer / Animator)
The Impact
I recommended Lottie as the best solution because it was future-proof for the internationalization efforts. Lottie is a lightweight dynamic asset type that allowed us to quickly make language updates on the backend. It has a faster load time which was crucial for these onboarding steps. We saw a ~85% total permissions rate as of 11/2021, and as of 5/2022, we see a ~60% enablement rate. There is a hypothesis that visual art and motion helped with the high permissions and enablement rate.
The Problem
Honey Mobile Safari Extension is an internationalization effort that will need to support English plus five more languages for these flows: THIS IS 30 VARIATIONS, plus additional exports at different resolutions. With a day one release and Apple changing the menu language in every bata released, we had to find the best format quickly and update as needed.