Crafting Immersive User Journey with Figma
Scope of work & duration
Figma Prototype, 6 Months
Role
UX Architect
Overview
“If you can’t explain it simply, you don’t understand it well enough”
The Data Product Market Place (DPM) was more than a digital storefront, it served as a hub connecting consumers, producers, and the governance of data products. Imagine it as an online supermarket where users could effortlessly browse through diverse data products, explore details, and download what they needed.
Beyond the standard web platform, the client sought to add an interactive demo, a hands-on experience for anyone to grasp the essence of DPM.
Challenges
Choosing to create a video was the conventional approach, but with a tight timeline that couldn’t accommodate a full-scale animated production, it felt like trying to squeeze a marathon into a sprint. Moreover, our screenplay and content evolved iteratively, prompting the need for a more inventive and efficient delivery method.
User-Friendly Exploration
Our mission was to simplify the intricacies of data products, likened to strolling through supermarket aisles. The interactive demo helped the users, allowing them to click on marked elements and seamlessly explore the interconnected flows, revealing the concepts behind data products.
Creativity Meets Functionality
Selecting the right medium and tool was the first challenge. Initially while considering making the presentation as a video, we realized it would be too linear, depriving users of control. The decision to leverage the auto-animate feature in the interaction design tools led us to choose Figma. Its ability to manage a large number of assets and generate a unique URL for universal accessibility made Figma the ideal platform.
Speed and Scalability
Real-time updates on the shared URL through Figma turned out to be a game-changer. Using components for illustrations not only gave us control but also facilitated speedy iterations, aligning perfectly with our need for efficiency.
Process
The isometric vector graphics from Adobe Stock played a crucial role in achieving the aesthetics found in illustrated books. Simultaneously, their versatility allowed us to tailor them precisely to meet our specific needs.
Figjam Brainstorming
Starting with the client’s outline, our collaborative Figjam brainstorming sessions shaped the presentation’s style. Isometric figures emerged as the perfect fit, complemented by assets from Adobe Stock to weave a visually compelling narrative.
Storyline Evolution
Creating the entire presentation in Figma brought forth a new approach, prompting the storyline to evolve. What began as a simple demo blossomed into a multifaceted experience with multiple storylines. Users became the navigators, triggering diverse developments by guiding the main characters through different zones, akin to a video game.
Sketches to Figma Magic
The scene was set through rough sketches, refined into illustrations, and seamlessly integrated into Figma. Each illustration, treated as a component, became part of our interactive digital supermarket.
Outcome & Work Sketches
The final outcome was an entirely Figma-made interactive presentation. The shared URL served as the portal, with each zone tailored for specific user personas, visualizing related items. Users could immerse themselves, directing the persona through their designated zone, unlocking diverse storylines—an engaging digital adventure within the realm of data products.
In my role as a UX Architect, I collaborated closely with clients to comprehend their requirements, fine-tuning their narrative, and exploring novel approaches for delivering an exceptional user experience.
Key Takeaways
At first, even our design team was hesitant to propose an interactive prototype made with Figma as the final design solution, but upon realizing the positive feedback from the client, our confidence soared, leading us to embrace the forward-thinking decision to move forward with an Interactive Presentation in Figma, demonstrating our team's out-of-the-box thinking and the client's progressive understanding of innovative solutions.
Building on Progressive Understanding
Converting complex ideas into simple, intuitive solutions requires a deep understanding of the subject matter. Through close collaboration with the client, our design team immersed themselves in a journey of progressive understanding, validating concepts with simple sketches and wireframes step by step. This iterative approach not only fostered clarity but also laid a solid foundation for the design solution, ensuring alignment with the client's vision and user needs.
