Xtalipi

FDA compliant software simplifying complexity & accelerating development

Health Tech

Industry

Wizardly

Year

2024

Agency

Web Design

My Role

Overview

XtaliPi wanted a website redesign that would set them apart in the competitive world of AI-powered drug discovery. The goal was to craft a bold, modern design that reflected their advanced technology and positioned them as innovators in their field.

For this project, we embraced an editorial-style layout featuring large typography and asymmetrical compositions. Animations and interactive elements were key to creating a more engaging user experience, while a color-coded system brought clarity and organization to their diverse product offerings.

Roles

I worked alongside the creative director at Wizardly during the early planning stages, contributing ideas to the overall vision. While the creative director established the brand direction, I took the lead on designing the magazine-style layout with a strong focus on animation and interactivity. My responsibilities included adapting the approved design across the website, creating animations with Lottie, organizing the illustration library, and preparing a detailed handoff for the development team.

Creative Director

Meg Schlabs

Project Manager

Josh Rogers

Web Designer

Myself

Developer

Kolya Tevosyan

Website

The final website design was bold, spacious, and visually compelling. Using Figma, I translated the creative vision into custom layouts that aligned perfectly with XtaliPi’s forward-thinking brand. Key features included interactive graphs, a cohesive design system, and animations that enhanced storytelling and brought the content to life.

Color-Coded System

To improve navigation and clarity, I developed a color-coded system that assigned distinct colors to each product category. This approach created a “mini-brand” within the larger identity, helping users quickly identify and explore specific offerings while highlighting the unique features of each product.

Motion and Interaction

Animations played a major role in this project, and I used Lottie to add movement and depth to the website. For instance, hover-triggered animations guided users through complex data visualizations, while smooth transitions made navigation intuitive and seamless. These motion elements not only improved user engagement but also underscored XtaliPi’s innovative edge.

Design System

I built a comprehensive design system in Figma to ensure consistency and scalability. This included a well-organized library of illustrations, adaptable UI components, typography styles, and a cohesive color palette. The system made collaboration easier and ensured the website could evolve without losing its polished look.

Project Handoff

Given the motion-heavy nature of this project, I emphasized clear communication throughout the development process. I provided detailed instructions and animation examples to ensure my ideas were implemented as intended. The handoff included comprehensive documentation, Lottie animation links, and layout guidelines. I also worked closely with the developer through regular check-ins to stay aligned on goals and timelines.

Challenges and Growth

This project challenged me to step into new territory, particularly with designing bold editorial layouts and integrating motion design. It marked my first time leading a motion-heavy project, which became a defining milestone in my career. By the end, I had gained confidence in using storytelling and interactivity to elevate web design.