Master Figma from 0 to 100 10 courses in one for $9.99

Jan 17, 2024

Pixelflakes - "Behind the Scenes" ​​Case Study

Pixelflakes - "Behind the Scenes" ​​Case Study

Pixelflakes, a specialized architectural marketing studio excelling in high-quality visualization, entrusted us with creating an impactful online platform that narrates their journey, attracts fresh talent, and effectively positions them as innovators in an online world cluttered with repetitive competition.

Pixelflakes strives to establish itself as an innovator in a saturated online world, separating its brand from the repetitive competition by curating a top-tier digital journey. This journey not only presents their one-of-a-kind sketch studies process and inspiring culture but also aims to attract talent for their team.

“Pixelflakes wants to establish itself as an innovator in the digital space to create competitive differentiation, attract attention, and actively encourage the attraction of top-tier talent."

Pixelflakes project overview

Solution

By subtly weaving pixel-inspired design components into the online platform, we cultivate a premium and standout style, while custom motion design elements bring their unique sketch studies process to life. Through skilful copywriting, mixed media integration, and in-depth team profiles, the platform holistically underscores their cultural values, playing a vital role in inspiring and motivating prospective talent.

“Distinctive typography, surprising details, and branded motion come together to form a standout online experience. This fusion creates a memorable user experience that sets the website apart and reinforces the brand's distinctiveness and emphasis on high quality."

User experience motion study example

Early concepts and user experience design

During the UX design phase, we validate our concepts through rough motion studies. This approach helps us identify and address potential bottlenecks early on, allowing us to determine the content we will be working with. We explore numerous variations before settling on the definite concept for further development.

Early concept that was later dropped

“During the UX design phase, we validate concepts through rough motion studies, identifying and addressing potential bottlenecks early on."

Final Pixelflakes homepage motion design
Pixelflakes' distinctive fullscreen image gallery was specifically designed to give visitors the feeling that they are literally entering a world with endless possibilities

Immerse & Engage

In order to make the experience feel distinct and unique to Pixelfakes, we have created a custom full-screen image gallery where visitors can engage with Pixelflakes' Sketch Studies in a whole new way. Navigate a full-screen canvas by dragging, becoming an active part of their creative narrative, while simultaneously, getting a sneak peek into the behind-the-scenes magic that shapes their creative work.

“Engaging website interactions enhance user experience, build lasting connections and trust, ultimately increasing visitor retention."

Side panels with additional information declutter the top-level experience but provide valuable information for those who are seeking to dive deeper

Informative side-panels

We added side-panels for easy access to relevant content, enhancing user engagement without clutter. Users could explore additional information while others stayed focused on the main content, ensuring an organized, user-friendly experience based on user preferences.

The unique 'Pixel Look' team grid elevates the about page

Building trust and connections

By featuring the team's culture and values prominently on the website, we established trust, attracted like-minded partners and talent, and distinguished the Pixelflakes brand. This transparent approach resonated with our audience and fostered meaningful connections.

“By featuring the team's culture and values in a unique way on the website, we established trust, attract like-minded partners and talent, and distinguish the Pixelflakes brand."

Custom image gallery
Mobile user interface design
Mobile user interface design

Optimizing the mobile experience

With the limitations of smaller screens in mind, we conscientiously brought vital components to the forefront, ensuring a smooth and authentic brand encounter for those on mobile. We struck a harmonious blend between the new identity and an optimal user journey, resulting in an engaging website experience accessible across devices.

Technologies

Backend

Leveraging the client's favourable familiarity with WordPress, the Pixelflakes website has been developed in a headless architecture. Employing bespoke layouts and components, the client enjoys the flexibility to construct pages according to their preferences.

Frontend

For the frontend, Nuxt.js was employed to enable route-based page transitions, enhancing the website's resemblance to a native app. Managing a substantial volume of media assets required meticulous attention to load times and performance. Consequently, we implemented a hybrid approach utilising nuxt/image to deliver next-gen image formats tailored for various devices and platforms.

Deployments

For the deployment pipeline, we opted for Vercel, leveraging its capability for swift deployment with minimal configuration overhead. The process involves an automated trigger from a WordPress webhook upon publishing a new page. This webhook initiates the generation of a fresh static build, subsequently deploying it seamlessly to the live site.

Animations

Incorporating animations involved a blend of conventional CSS keyframes and intricate GSAP animations. Every interaction, slider, and transition underwent meticulous attention to detail, drawing inspiration from motion studies crafted in After Effects.

Development

Visual Studio Code, GitHub, BrowserStack

Design

Figma, Photoshop, After Effects

Other

Spotify, Slack, Notion

About Exo Ape

We explore and push the boundaries of digital for brands and businesses that strive to enhance people's lives through exceptional experiences. Over the years, we have worked with an array of clients ranging from Interior Design to Hospitality, Travel & Tourism.

It's our philosophy that digital experiences should be captivating and focus on the essential elements that make a brand unique. We help experience-driven companies thrive by making their audience feel the refined intricacies of their brand and product in the digital space. Our data-driven approach aims to create brand advocates, resulting in increased brand loyalty, engagement, and conversions.

Unforgettable journeys start with a click.

Credits

Robbert Schefman, Digital Art Director & Visual Design Ronald Gijezen, Motion & User Experience Design Rob Smittenaar, Front-end & Creative Development