Telling the Story of AI Through Bold Design

Laptop computer on a gray desk displaying the XtalPi website.

CLIENT

Xtalipi


COLLABORATION WITH

Wizardly


Art Director, Project Lead

ROLES


2025

YEAR


What We Were Solving

XtaliPi, an AI-driven materials discovery company, needed a website that would stand out from typical biotech industry standards. They were open to bold approaches that would reflect their innovative work in advanced materials research and modeling.

Their existing website had several key issues: it didn't effectively guide users through their journey, content felt cluttered and randomly placed, and it wasn't clearly communicating what their products actually did. They also needed a redesign that could better showcase their current offerings while creating a scalable structure for their growing product lineup. The challenge was creating a site that felt fresh and energetic while solving these fundamental usability and communication problems.

Comparison of a webpage before and after redesign. The before screenshot shows a blue-themed page with white text about XtalPi and its research platform. The after screenshot shows a darker, more refined webpage with clearer layout and improved visuals.
Smartphone displaying a drug discovery app with stages labeled 'Hit discovery' and 'Hit optimization' on a gray surface.
How I Approached It

Working as part of the Wizardly team, I collaborated with the Creative Director to establish the overall visual direction for the project. We decided to pursue an editorial approach for the design, which pushed me outside my comfort zone but gave me an opportunity to experiment and grow as a designer.

A dark-themed mobile app interface showcasing a drug discovery journey, with stages labeled 'Hit discovery' and 'Hit optimization' and a purple and blue abstract visual element.

Design & Animation

From there, I took the lead on web design, animation direction, and preparing assets for developer handoff. I led the creation of over 10 desktop pages plus mobile responsive designs, incorporating motion design throughout the site using Lottie Labs to prototype and deliver lightweight animations. I also designed custom interactive graphs and charts that made XtaliPi's complex work more digestible.

A key part of the design was creating a scalable system for their growing product line. To help their products stand out and be easily distinguishable, I assigned unique colors to each product. Users were introduced to this color coordination on the home page and in the mega menu, and as they navigated through the site, the colors would appear as the primary color depending on which product they were exploring.

Comparison of experiments before and after AI implementation, showing sample sizes, durations, and results in a table with icons and text descriptions.
Screenshot of a website homepage for XtalPi with navigation menu, company logo, and sections highlighting solutions in software, drug discovery, discovery chemistry, and solid state research.

Copy & User Flow

A major part of my role involved content strategy. The client provided initial copy that was often unfinished or not written for the layouts we were building, so I had to rework their content for clarity and align it with each page's story.

I designed intuitive user flows by ending each page with relevant call-to-actions and adding other necessary elements to guide users through their journey.

How It Turned Out

The final site successfully balances visual energy with clear, purposeful design. It feels distinctly different from traditional biotech websites while remaining user-friendly and informative. Since launching, it's become one of Wizardly's most referenced projects in their portfolio and has already generated multiple new client engagements for their team.

Laptop screen displaying a website about AI-powered drug discovery, with dark background and highlighted text.
A dark, plain background with no distinguishable objects or features.