This talk was given at the Swift Paris meetup in October 2018. Earlier this year, shiny animated cards started appearing in Zenly and now they’re all over the app! This talk reveals the origin of the idea, the tricks behind the execution and how the cards evolved through multiple iterations.

2. Dealing the Cards
SWIFT PARIS

4. An Overview of Upcoming Performances
Part 1: The Idea
Part 2: The Execution
Part 3: Iterating

5. Part 1: The Idea

6. The Mission
SHOULD YOU CHOOSE TO ACCEPT IT
One Designer + one iOS Developer with a purpose:
increase virality.
Mostly doing product research for a week.
Looking for new content to create for users to want
to share.

7. The Matrix of Coolness

8. New content?

9. Turning the Problem Around
LOOKING AT THINGS FROM ANOTHER ANGLE
Focused on making existing content more
delightful and sharable.
This would avoid relying on backend engineering.
Help us iterate fast using UI experiments only.

10. What Users Already Share
BUILDING ON OUR STRENGTHS
We already offer unlockable custom icons as an engagement
incentive.
We noticed some users also like to share them on Twitter.
But the sharable content could be improved.

11. How can we improve on this?

12. Let’s Go with Cards!
EVERYONE LOVES THEM
So playful it feels at home at Zenly.
Behaves like a physical object.
Gives a sense of ownership.
Highly customizable.

13. Prototyping it
KEEPING FOCUS
Designer and developer on a very fast feedback
loop.
Isolated from day-to-day operations for a week.
Iterating on a tiny scope in a dedicated test app.
Going fast and cutting corners when necessary.

14. The “Fancy Cards” app
THE RESULT AFTER ONE WEEK

15. Part 2: The Execution

16. UIMotionEffect

17. Trick #1 : Card Rotation
DID YOU THINK IT WAS THAT EASY?
Meet UIMotionEffect, our new friend. Can be
mapped to any animatable UIView property, within a
given range.
Mapped on transform.rotation.x or y.
…but…

18. Trick #1 : Card Rotation
THAT’S BETTER
Pro-tip: To obtain a perspective effect, you need to
set a value in m34 of the transform matrix of your
view.

19. How do they do it?
BLIZZARD IS SO GOOD AT PROVIDING DELIGHT

20. Behind the Scenes
MATTE PAINTING AS AN INSPIRATION

21. Trick #2: Depth
JUST MOVING THINGS AROUND
Add UIMotionEffect mapped to translation to
individual subviews of the card.
Useful for extruded text and hovering icons.

22. Adding More Shine
WHO ELSE IS A GREAT INSPIRATION?…

23. Trick #3: Shine
GUESS WHAT WE’RE USING FOR THIS ONE?
Use a UIView as a pattern (either an Image or a
Pattern Color) as a mask for a shine Gradient.
Attach a UIMotionEffect to the gradient with a wide
y translation range.
Can also be used inside text!

24. The Very First Card
JUST TESTING THE WATER
The purpose: release early, minimise risk, target
our most engaged users.
The card we chose: the hardest icon to unlock.
After that: release new cards every week for a few
weeks.

25. Part 3: Iterating

26. What’s in an iteration
IT’S NOT JUST GLITTER
Add new content.
Add new visual glitter.
Consolidate existing content.
Watch the usage stats and adjust accordingly.

27. Examples

28. The Flow
HOW TO MOVE FAST
Have the designer and developer working tightly
together.
Make changing visuals as easy as possible.
Have a small test app with data stubs to iterate
quickly on visuals.

29. Getting comfy

30. Username: a Special Case
THE CARD THAT BECAME A FEATURE

31. Creating delight in editing
NOW WITH MINDBLOWING ANIMATIONS
Auto-generated name suggestions.
Animated switching between editing and viewing
modes.
2 different implementations for each card :
Lottie & UIKit

32. Choose your flavor
CREATING AN ATMOSPHERE FOR EVERYONE
Breaking the 3-card limit in the carousel
Animated background and foreground changing
on the fly

33. Putting Android in the Loop
THERE’S NO EASY API FOR THIS HERE

34. Available on the Web
A new implementation using CSS

35. Video Generation
WHEN YOU CAN’T PARALLAX, YOU CAN ANIMATE
A dedicated team worked on a rendering library.
Using OpenGL for cross-platform compatibility.

36. Lessons Learned

37. Takeaways
WE’RE ALMOST THERE!
Developers can be included early in the design process.
Try experimenting with what you already have before attempting to add new features.
When experimenting, get the learnings ASAP.
You can cut corners at the beginning, but clean up the mess at some point.

38. A small experiment can become
something huge

39. Thank You!
🙏❤🍦