Case study: Designing a card deck shuffle
An interaction UI case study
The problem
How do I solve the regular business need of “I want a carousel” and “I need to put more promotions on the page”, without sacrificing the experience and design aesthetics?
Hypothesis
I believe that we can increase engagement on site and increase intent metrics by using a smoother, more engaging interaction method instead of carousels and promo blocks in the traditional manner.
The approach
- Ideation
- Discovery
- Research
- Tech validation
- Prototyping
- Design, build and launch
Before I deep dive
What is a card in a digital environment?
In summary:
“A “card” is a UI design pattern that groups related information in
a flexible-size container, visually resembling a playing card.”
‘Nielsen Norman Group’
With that in mind, I wanted to find a way of bringing a richer interaction experience to our cards — one that is truer to the physical world.
Enter: a deck of cards, shuffling on interaction.
Research
The idea derived from physical cards, so it was only right to start from there.
First up I looked at the different types of shuffles and what would work on a digital environment without obstructing content and most importantly ‘user experience’.
Clearly it had to be only one way, and that’s the basic shuffle.
Any other shuffle, well…..
‘Talk about content mashup’
I continued with some online research to explore deeper if my hypothesis had been executed elsewhere online already, and if so how was it done and how can I build onto it to bring my idea to life.
There were only a few that I came across, and most notably it was during Apple’s launch of their new service platform ‘Apple Arcade’. I went on their website — on mobile of course — and there it was 👏 beautifully executed and integrated. This gave me that extra boost to drive my idea forward.
Key insights
‘An engaging familiarity’
I believe by having the cards as a deck (stack), that shuffle on interaction when on mobile, will enhance the customer interaction experience whilst also keeping the customer engaged through familiarity. By swiping/scrolling, this will make the deck of cards shuffle in the motion of up and down.
Solution
Neatly organised cards that shuffle on swipe or scroll and move up or down. Applied to product cards and USP cards.
Design and prototype
I then designed the cards, on how I envisioned them to be. Which was then built into a prototype, then sent for accessibility testing.
Prototype instructions : When in prototype. Drag the card (up/down) with your mouse to navigate
Outcome
This was a very interesting project, identifying ways to enhance Etihad’s digital experiences through design and interaction. It brought about an additional feature to our already excellent product card designs, which can be switched on and off depending on where it is used.
The prototype passed Accessibility testing, which was then pushed into development.
It’s currently live on Etihad holidays, where you can check it out — on mobile, of course.
As is with design and the enhancements that come with it, this isn’t finished yet. We’re still gathering data, feedback, design iterations and tracking the business impact.
Thank you for reading!
Hopefully, you enjoyed this case study. Would appreciate any feedback.
Say 👋 hello at vdesaubin@gmail.com or connect with me on Linkedin
🙏 Special thanks goes out to Marvin for guidance on this case study.
