🛠️ About
- Role: UX/UI Designer
- Toolkit: Figma, After Effects, Principle, Lottie
🚩 The Problem
SIRO, as an immersive lifestyle destination, had to have a fully-functional app showcasing equally five pillars: fitness, nutrition, sleep, recovery, and mindfulness.
The challenge was to create a User experience with no precedents in the market. Somehow, it combines the most luxurious hotels with the best-in-class fitness brands.
🎯 The Objective
The balanced combination of fitness and world-class hospitality results in an app with all the user's required functionalities and a high-end interface with thoughtful animations and micro-interactions.
The handover consisted of two different Design Systems for the web and app. Hence, the development of both products was done by two other teams, each deliverable with a specific section dedicated to animation.
UI PHASE 🏃🏻♀️
I was brought to the project to help complete the second launch and to develop proper handover documentation for the development teams.
In the second phase, the UI was focused on some journeys, such as 'Book classes and Treatments' and 'Room controls' in the manage my stay section.
Under my leadership during phase 2, the UX iteration of crucial journeys, such as 'Create a membership' & 'Purchase class/treatment credits,' Was successfully implemented, leading to a more user-friendly and efficient system.
APP
Buy 'Credits package' journey
Detail of a full annotated Design System
Animation 🌪️
SIRO animations should reflect the brand's values. Sports and workouts are usually associated with speed, even though good performance also requires discipline, technique, and recovery.
As an inspiration, I looked at other fitness brands like Nike, MyFitnessPal & Open.
The Animation Guide has two main sections, one describing micro-interaction on a component level and another one for content & full pages.
I created a foundation of animation principles to implement animation as an experience, not a decoration piece. This image represents how the animations were conceived to be the most clear for the developers.
Microinteractions
Content Examples
