SlideShare a Scribd company logo
Dealing the Cards
SWIFT PARIS
An Overview of Upcoming Performances
Part 1: The Idea
Part 2: The Execution
Part 3: Iterating
Part 1: The Idea
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.
The Matrix of Coolness
New content?
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.
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.
How can we improve on this?
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.
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.
The “Fancy Cards” app
THE RESULT AFTER ONE WEEK
Part 2: The Execution
UIMotionEffect
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…
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.
How do they do it?
BLIZZARD IS SO GOOD AT PROVIDING DELIGHT
Behind the Scenes
MATTE PAINTING AS AN INSPIRATION
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.
Adding More Shine
WHO ELSE IS A GREAT INSPIRATION?…
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!
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.
Part 3: Iterating
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.
Examples
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.
Getting comfy
Username: a Special Case
THE CARD THAT BECAME A FEATURE
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
Choose your flavor
CREATING AN ATMOSPHERE FOR EVERYONE
Breaking the 3-card limit in the carousel
Animated background and foreground changing
on the fly
Putting Android in the Loop
THERE’S NO EASY API FOR THIS HERE
Available on the Web
A new implementation using CSS
Video Generation
WHEN YOU CAN’T PARALLAX, YOU CAN ANIMATE
A dedicated team worked on a rendering library.
Using OpenGL for cross-platform compatibility.
Lessons Learned
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.
A small experiment can become
something huge
Thank You!
🙏❤🍦
Swift Paris - Dealing The Cards

More Related Content

What's hot

12 Mobile Growth Tactics for App Launch, Acquisition and Retention
12 Mobile Growth Tactics for App Launch, Acquisition and Retention12 Mobile Growth Tactics for App Launch, Acquisition and Retention
12 Mobile Growth Tactics for App Launch, Acquisition and Retention
Adrien Montcoudiol
 
Snapchat Advertising
Snapchat Advertising Snapchat Advertising
Snapchat Advertising
Brianna Hanson
 
Mobile Growth Marketing: Strategy, Hacks and Tools
Mobile Growth Marketing: Strategy, Hacks and ToolsMobile Growth Marketing: Strategy, Hacks and Tools
Mobile Growth Marketing: Strategy, Hacks and Tools
Adrien Montcoudiol
 
Instagram Best Practices 2017
Instagram Best Practices 2017Instagram Best Practices 2017
Instagram Best Practices 2017
The Orchard
 
21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking Tactics21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking Tactics
Jon Yongfook
 
Snapchat Storytelling
Snapchat StorytellingSnapchat Storytelling
Snapchat Storytelling
Louisville Digital
 
Snapchat
SnapchatSnapchat
Snapchat
Allison Brown
 
The Art & Science of Growth Hacking
The Art & Science of Growth HackingThe Art & Science of Growth Hacking
The Art & Science of Growth Hacking
David Skok
 
Introduction of Instagram inc. (power point presentation)
 Introduction of Instagram inc. (power point presentation) Introduction of Instagram inc. (power point presentation)
Introduction of Instagram inc. (power point presentation)
sai guntapelliwar
 
The Ultimate Marketing Guide to Snapchat
The Ultimate Marketing Guide to SnapchatThe Ultimate Marketing Guide to Snapchat
The Ultimate Marketing Guide to Snapchat
Ross Simmonds
 
From Zero to a Million Users - Dropbox and Xobni lessons learned
From Zero to a Million Users - Dropbox and Xobni lessons learnedFrom Zero to a Million Users - Dropbox and Xobni lessons learned
From Zero to a Million Users - Dropbox and Xobni lessons learned
Adam Smith
 
31+ Startup Tools, Both Online & Offline
31+ Startup Tools, Both Online & Offline31+ Startup Tools, Both Online & Offline
31+ Startup Tools, Both Online & Offline
Pixc
 
User Retention Across All Stages (User Retention Bootcamp Class 2)
User Retention Across All Stages (User Retention Bootcamp Class 2)User Retention Across All Stages (User Retention Bootcamp Class 2)
User Retention Across All Stages (User Retention Bootcamp Class 2)
Amplitude
 
A/B testing in ad monetisation
A/B testing in ad monetisationA/B testing in ad monetisation
A/B testing in ad monetisation
GameCamp
 
How to Create and Use Snapchat's New Custom Geofilters
How to Create and Use Snapchat's New Custom GeofiltersHow to Create and Use Snapchat's New Custom Geofilters
How to Create and Use Snapchat's New Custom Geofilters
Gary Vaynerchuk
 
How Game Developers Reach New Customers with Twitch
How Game Developers Reach New Customers with Twitch How Game Developers Reach New Customers with Twitch
How Game Developers Reach New Customers with Twitch
Amazon Web Services
 
SNAPCHAT
SNAPCHATSNAPCHAT
Snapchat 101: Basic Introduction And Advanced Tips
Snapchat 101: Basic Introduction And Advanced TipsSnapchat 101: Basic Introduction And Advanced Tips
Snapchat 101: Basic Introduction And Advanced Tips
Andrew Mucci
 
Presenting Like The Artist
Presenting Like The ArtistPresenting Like The Artist
Presenting Like The Artist
Emiland
 
Clubhouse: Viral Growth Lessons
Clubhouse: Viral Growth LessonsClubhouse: Viral Growth Lessons
Clubhouse: Viral Growth Lessons
Yannick Steinmann
 

What's hot (20)

12 Mobile Growth Tactics for App Launch, Acquisition and Retention
12 Mobile Growth Tactics for App Launch, Acquisition and Retention12 Mobile Growth Tactics for App Launch, Acquisition and Retention
12 Mobile Growth Tactics for App Launch, Acquisition and Retention
 
Snapchat Advertising
Snapchat Advertising Snapchat Advertising
Snapchat Advertising
 
Mobile Growth Marketing: Strategy, Hacks and Tools
Mobile Growth Marketing: Strategy, Hacks and ToolsMobile Growth Marketing: Strategy, Hacks and Tools
Mobile Growth Marketing: Strategy, Hacks and Tools
 
Instagram Best Practices 2017
Instagram Best Practices 2017Instagram Best Practices 2017
Instagram Best Practices 2017
 
21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking Tactics21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking Tactics
 
Snapchat Storytelling
Snapchat StorytellingSnapchat Storytelling
Snapchat Storytelling
 
Snapchat
SnapchatSnapchat
Snapchat
 
The Art & Science of Growth Hacking
The Art & Science of Growth HackingThe Art & Science of Growth Hacking
The Art & Science of Growth Hacking
 
Introduction of Instagram inc. (power point presentation)
 Introduction of Instagram inc. (power point presentation) Introduction of Instagram inc. (power point presentation)
Introduction of Instagram inc. (power point presentation)
 
The Ultimate Marketing Guide to Snapchat
The Ultimate Marketing Guide to SnapchatThe Ultimate Marketing Guide to Snapchat
The Ultimate Marketing Guide to Snapchat
 
From Zero to a Million Users - Dropbox and Xobni lessons learned
From Zero to a Million Users - Dropbox and Xobni lessons learnedFrom Zero to a Million Users - Dropbox and Xobni lessons learned
From Zero to a Million Users - Dropbox and Xobni lessons learned
 
31+ Startup Tools, Both Online & Offline
31+ Startup Tools, Both Online & Offline31+ Startup Tools, Both Online & Offline
31+ Startup Tools, Both Online & Offline
 
User Retention Across All Stages (User Retention Bootcamp Class 2)
User Retention Across All Stages (User Retention Bootcamp Class 2)User Retention Across All Stages (User Retention Bootcamp Class 2)
User Retention Across All Stages (User Retention Bootcamp Class 2)
 
A/B testing in ad monetisation
A/B testing in ad monetisationA/B testing in ad monetisation
A/B testing in ad monetisation
 
How to Create and Use Snapchat's New Custom Geofilters
How to Create and Use Snapchat's New Custom GeofiltersHow to Create and Use Snapchat's New Custom Geofilters
How to Create and Use Snapchat's New Custom Geofilters
 
How Game Developers Reach New Customers with Twitch
How Game Developers Reach New Customers with Twitch How Game Developers Reach New Customers with Twitch
How Game Developers Reach New Customers with Twitch
 
SNAPCHAT
SNAPCHATSNAPCHAT
SNAPCHAT
 
Snapchat 101: Basic Introduction And Advanced Tips
Snapchat 101: Basic Introduction And Advanced TipsSnapchat 101: Basic Introduction And Advanced Tips
Snapchat 101: Basic Introduction And Advanced Tips
 
Presenting Like The Artist
Presenting Like The ArtistPresenting Like The Artist
Presenting Like The Artist
 
Clubhouse: Viral Growth Lessons
Clubhouse: Viral Growth LessonsClubhouse: Viral Growth Lessons
Clubhouse: Viral Growth Lessons
 

Similar to Swift Paris - Dealing The Cards

Making Great iOS Experiences
Making Great iOS ExperiencesMaking Great iOS Experiences
Making Great iOS Experiences
Weave The People
 
Material design
Material designMaterial design
Material design
ahmed Shaker
 
Comparison between articulate storyline & adobe captivate
Comparison between articulate storyline & adobe captivateComparison between articulate storyline & adobe captivate
Comparison between articulate storyline & adobe captivate
Manish Jhurani
 
Being a Little Agile
Being a Little AgileBeing a Little Agile
Being a Little Agile
Daniel Blair
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
Jen Yu
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
InVision App
 
Monster Modeling - 3D Modeling for Kids
Monster Modeling - 3D Modeling for KidsMonster Modeling - 3D Modeling for Kids
Monster Modeling - 3D Modeling for Kids
Tink Newman
 
AtlasCamp 2013: ADG / Lean UX
AtlasCamp 2013: ADG / Lean UXAtlasCamp 2013: ADG / Lean UX
AtlasCamp 2013: ADG / Lean UX
colleenfry
 
Make Tools
Make ToolsMake Tools
Make Tools
Victor Lombardi
 
virtual_chess
virtual_chessvirtual_chess
virtual_chess
Chinar Patil
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
Jigyasa Makkar
 
Microsoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight ExperiencesMicrosoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight Experiences
Nicklas Andersson
 
Mobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B ExperimentsMobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B Experiments
lacyrhoades
 
Multi-Device Digital Product Design
Multi-Device Digital Product DesignMulti-Device Digital Product Design
Multi-Device Digital Product Design
prodactive
 
How to design and build great apps (with moderator notes)
How to design and build great apps (with moderator notes)How to design and build great apps (with moderator notes)
How to design and build great apps (with moderator notes)
Andreas Weder
 
One graph to rule them all - Facebook
One graph to rule them all - FacebookOne graph to rule them all - Facebook
One graph to rule them all - Facebook
itnig
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't work
Samuel Bednar
 
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
pseybold
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
uxpin
 
Adobe xd- The Empire strikes back
Adobe xd- The Empire strikes backAdobe xd- The Empire strikes back
Adobe xd- The Empire strikes back
Ayelet Paz Akler
 

Similar to Swift Paris - Dealing The Cards (20)

Making Great iOS Experiences
Making Great iOS ExperiencesMaking Great iOS Experiences
Making Great iOS Experiences
 
Material design
Material designMaterial design
Material design
 
Comparison between articulate storyline & adobe captivate
Comparison between articulate storyline & adobe captivateComparison between articulate storyline & adobe captivate
Comparison between articulate storyline & adobe captivate
 
Being a Little Agile
Being a Little AgileBeing a Little Agile
Being a Little Agile
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
Monster Modeling - 3D Modeling for Kids
Monster Modeling - 3D Modeling for KidsMonster Modeling - 3D Modeling for Kids
Monster Modeling - 3D Modeling for Kids
 
AtlasCamp 2013: ADG / Lean UX
AtlasCamp 2013: ADG / Lean UXAtlasCamp 2013: ADG / Lean UX
AtlasCamp 2013: ADG / Lean UX
 
Make Tools
Make ToolsMake Tools
Make Tools
 
virtual_chess
virtual_chessvirtual_chess
virtual_chess
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 
Microsoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight ExperiencesMicrosoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight Experiences
 
Mobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B ExperimentsMobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B Experiments
 
Multi-Device Digital Product Design
Multi-Device Digital Product DesignMulti-Device Digital Product Design
Multi-Device Digital Product Design
 
How to design and build great apps (with moderator notes)
How to design and build great apps (with moderator notes)How to design and build great apps (with moderator notes)
How to design and build great apps (with moderator notes)
 
One graph to rule them all - Facebook
One graph to rule them all - FacebookOne graph to rule them all - Facebook
One graph to rule them all - Facebook
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't work
 
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
Using Web 2.0 For Outside I Nnovation Seybold Stm Dec 07
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
 
Adobe xd- The Empire strikes back
Adobe xd- The Empire strikes backAdobe xd- The Empire strikes back
Adobe xd- The Empire strikes back
 

Recently uploaded

UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
Peter Muessig
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
kalichargn70th171
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Peter Caitens
 
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
dakas1
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
Reetu63
 
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
XfilesPro
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
ervikas4
 
What’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete RoadmapWhat’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete Roadmap
Envertis Software Solutions
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
ToXSL Technologies
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
Maitrey Patel
 
Quarter 3 SLRP grade 9.. gshajsbhhaheabh
Quarter 3 SLRP grade 9.. gshajsbhhaheabhQuarter 3 SLRP grade 9.. gshajsbhhaheabh
Quarter 3 SLRP grade 9.. gshajsbhhaheabh
aisafed42
 
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
kalichargn70th171
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s EcosystemUI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
Peter Muessig
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
dakas1
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
The Third Creative Media
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
ICS
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
gapen1
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
Patrick Weigel
 
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLESINTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
anfaltahir1010
 

Recently uploaded (20)

UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
 
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
一比一原版(UMN毕业证)明尼苏达大学毕业证如何办理
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
 
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
Everything You Need to Know About X-Sign: The eSign Functionality of XfilesPr...
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
 
What’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete RoadmapWhat’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete Roadmap
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
 
Quarter 3 SLRP grade 9.. gshajsbhhaheabh
Quarter 3 SLRP grade 9.. gshajsbhhaheabhQuarter 3 SLRP grade 9.. gshajsbhhaheabh
Quarter 3 SLRP grade 9.. gshajsbhhaheabh
 
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s EcosystemUI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
 
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLESINTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
 

Swift Paris - Dealing The Cards

  • 1.
  • 3.
  • 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
  • 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
  • 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.
  • 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.
  • 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.
  • 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.
  • 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