UXO & the new Blaze Type website

UXO

As Blaze Type marks the milestone of its first decade in existence, the redesign of its website appears less as a mere technical project and more as a defining step in the foundry’s evolution. From the start, the platform was built on an architecture designed to showcase the typefaces and support their distribution. Over time, however, the expansion of the catalog and changing user habits have created new demands, particularly regarding navigation, readability, and user experience.

It was in this context that UXO stepped in, tasked with rethinking the interface and user flows. The project was developed in close collaboration with Matthieu Salvaggio, the type foundry’s founder, who is himself a type designer and graphic designer.

We spoke with Sébastien Bossi Croci, co-founder and editorial director of the agency, and Xiao Fei Yan, art director.

To start, could you tell us a few words about your respective areas of expertise, and how your roles complement each other today within your projects?

My name is Xiao Fei Yan and I am the art director. I worked on the UI design of the mockups for the new Blaze Type website, as well as on the user experience.

When you first discovered the original site, what were your impressions of its functionality and structure?
And how did that initial assessment take shape through your discussions with Matthieu Salvaggio?

When I first discovered the site, I quickly realized that Blaze Type was a type foundry with a rich catalog, but that it wasn’t showcasing it effectively. I also saw that this typographic richness had become an obstacle to accessibility and the user experience.

At the start of the project, what were the first areas of focus that stood out to you?
What did you feel needed to be rethought as a priority?

The redesign of the Blaze Type website revolved around these three main areas:

1. How to highlight the richness of the Blaze Type catalog without overwhelming or confusing the user?
2. How could we make the user journey throughout the site smoother and more enjoyable?
3. How could we simplify the purchasing process?

The homepage retains the video intro. Was this a natural choice or a point of discussion?

This was the subject of discussion. Initially, Sébastien preferred to remove it to avoid slowing down the site’s loading time, but Matthieu wanted to keep it at the top of the page, given that we had decided to reduce the number of images on the site. 

The site now combines a very minimalist structure with a bolder use of color, particularly in the presentation of the typography.
How did this artistic direction emerge as the project progressed?

Indeed, the new Blaze Type site doesn’t contain many images. This is largely due to the need to optimize the site’s loading speed.
The Blaze Type catalog is rich not only in quantity but also in style.
At first, we tested an initial version of the redesign using only three colors: Blaze Type red, black, and white. It was clear that in terms of simplicity, we had succeeded, but the site felt sterile and cold—the exact opposite of what Blaze Type is all about. It had lost its spark.
That’s when we realized we needed to add more colors, and from there came the idea of pairing each typeface with a color combination. And it worked. The colors highlight the typefaces, and the typefaces didn’t need any other embellishments. They stand on their own.

On the Typefaces page, how did you approach this balance between a wealth of display options and ease of access?

One of our goals was to highlight the Blaze Type catalog.
To do this—as obvious as it may seem—it comes down to their visibility: if we have large type blocks that span the width of the screen, it’s clear that it will take longer to explore the catalog.
Beyond that, if we want users to browse the catalog quickly, we need to give designers visiting the page that option.
As someone who is part of the target audience myself, I know how laborious it can be to find the right typeface for a project: it’s easy to get lost among the different typefaces and foundries. When you know exactly what style of typeface you’re looking for, you want to be able to browse the catalog in the blink of an eye: here, it takes just one click.

How did you design the pages dedicated to each typeface family, both in terms of their structure and how they’re used?

The font pages on Blaze Type’s previous site were extremely long, requiring a lot of scrolling. And because the font pages were long, the goal wasn’t to shorten them—since certain elements are mandatory on a font page, such as the collection, the font sampler, and the glyphs—but to make them more accessible.
This is achieved through a navigation bar that remains fixed at the top of the page, allowing us to navigate from section to section easily, without scrolling. We also added a button that lets us navigate from font to font, providing access to the Blaze Type catalog while staying on the same page.
By adding these features, we drastically reduce scrolling and back-and-forth navigation: everything can be done on a single page.
We’ve also improved the structure of the font sampler to make it clearer and more engaging. We’ve also added the ability to change the text and background colors for better visualization, especially for designers who want to test the sampler by applying their project’s colors.

We’ve noticed a more subtle use of specimen-style images, in favor of more interactive testing tools.
How did this shift come about in your thinking?

As explained earlier, reducing the number of images was a deliberate choice on our part, in favor of color.
However, due to the absence of images, we had to add other tools. Because, although colors energize the site, that wasn’t enough. Something was still missing.
In the previous version, there was a block at the bottom of the page that let you play around with Blaze Type fonts (weight, width). We brought this idea back, with the goal of gamifying the homepage a bit while highlighting the catalog. However, we added a few options:

- The “random font” button, which randomly highlights a font.
- The “shuffle text” button, which lets you change the text directly by clicking on it
- As well as a note on the font used, which allows users to go directly to the relevant pageThe “random font” button, which randomly highlights a font.

We also gave plenty of space to animations: hover effects on the font blocks, font names appearing, the Blaze Type logo changing when you hover over the footer…

How did the “pairing” section come about, and what role does it play in the experience you wanted to offer?

The “Pairing” section emerged after Sébastien and I noticed something: it isn’t always present on type foundry websites, yet it offers a significant gateway for young designers. It also encourages users to prioritize the use and combination of different Blaze Type fonts. 

With the “Articles” section, how did you envision this editorial dimension within the site as a whole?

It’s an interesting aspect, because Blaze Type doesn’t just write about type foundries, but also about typography. We felt it made sense to highlight this almost educational aspect. 

More broadly, how does this redesign fit into current trends in type foundries and their distribution methods?

This redesign was necessary, particularly due to competition.
In design, type foundry websites are very often the most avant-garde. These are sites that really stand out from the crowd, both in terms of UI and UX.

The project seems to be built on a technical foundation that was partially retained.
How did you work with this existing infrastructure during the redesign?

In fact, the redesign project was essentially a front-end redesign, meaning we redesigned the site’s layout and all the checkout processes. So, it was absolutely necessary to keep the backend to avoid the risks associated with a migration, to prevent order losses, and also to stay within a relatively tight budget.

So, what we did was keep the entire back-office—which, by the way, Matthieu knows very well. We also kept the entire order history as well as the entire typo-handling system that Matthieu and Guido had set up before the new site went live.

We, however, enhanced this back-office. We were able to take into account Matthieu’s day-to-day business needs in managing the site to give him tools that are at his fingertips, tailored to his needs, and that save him time in his daily management. That’s the first thing.

Second, we also took into account the fact that we absolutely had to reduce the effort required to publish content online, whether articles or product listings. So we also made sure to significantly limit that and automate everything that could be automated.

Basically, we took an approach that we call in development a microservices and API-based approach. That is, everything is an API endpoint, and everything allows us to build around that.

Why did we want to do this? It’s because I felt that if we scale the site (meaning if the site grows), we would inevitably struggle—if we relied on the backend—to maintain speed on the frontend. That is, keeping a front end that loads quickly, is user-friendly, and is responsive, while being held back by the old version of the back office. So, having an API allows me to have the back office I want, the way I want it, while maintaining a very sound structure, just as Matthieu had previously.

Did you design the site as a structure meant to evolve over time? What elements support these changes?

This builds on what I was telling you a few moments ago. We tried to design the site to have API endpoints—that is, things you can easily “type in” to get information.

This allows us to have a front end where we can quickly build new pages.

It gives us a front end that’s super responsive and loads incredibly fast.

And it will also allow us, in the future, to integrate AI into business tools (order management, exports, statistics, etc.).

So obviously, when we were planning the site redesign, the goal wasn’t just to revamp the design and stop there. It was to build a design on a solid foundation that would allow us to develop and roll out new features quickly.

When you look at the site today, what signs tell you that the project is working?

Well, there are business considerations: does the current site convert better than it did before? I’ll let Matthieu share that information if he’d like.

As for us, in terms of evaluation and success criteria: No data loss: First of all, is there any data loss? And there isn’t any data loss. So that’s a first victory.

Improved loading speed: Next, do we have metrics that show the site loads much faster? It does. I don’t have the exact numbers off the top of my head, but we’ve reduced page load times by nearly 90%. We’ve improved our Core Web Vitals score, we’ve significantly streamlined the site’s pagination, we’ve reduced image file sizes... Basically, we have a site that’s faster, lighter, but with a lot more features.

Actionable and User-Friendly Data (Server-Side): What else did we do that’s really great? Well, to have a site that supports Blazetype’s growth, we need a site that collects data. We take GDPR very seriously, of course. So we want actionable data, but data that respects the user. That’s what we’ve managed to do, since we’re able to collect data on the server side while anonymizing it. (I’d really like you to, before you say anything, reread what you’re saying about this because we do need to be careful with our wording).

Brand Image Modernization: Third, regarding the success criteria: are we happy with the site? It sounds silly, but do we like the site’s design? Do we feel that the site gives it a fresh look, that it helps modernize Blazetype, and positions Blazetype in its competitive sector by showing that Blazetype has ideas and knows how to implement them? Clearly, yes.

Efficiency and clarity: Another key point is that we never wanted “Christmas tree” features. We committed to creating a site that’s efficient, that converts, and where users need the fewest possible clicks to perform key actions. I think this is a site that lets you try a font with a minimal number of clicks. In that regard, Matthieu is generous with trials, and we wanted to build on that so people can really try out the fonts.

Optimizing the purchase funnel: Next, regarding the shopping cart, I think we’ve significantly improved the purchase process. We still need to improve it further.

Then there are lots of little hidden features, you know, where we thought, “It would be nice to have these”:

- For example, you can easily share your cart.
- For example, you can get quotes easily.
- You can test out all sorts of things with the fonts pretty easily.
- You have elegant animations.

So all of that is what allows us to say we have success metrics. And when I look at the site’s stats since launch, we’ve seen:

- An increase in page views.
- An increase in time spent on the site.
- A decrease in the bounce rate.

All of these are excellent indicators, and they are indicators that, in my opinion, demonstrate the project’s success.

Now that some time has passed since the launch, what initial feedback has stood out to you? And are there already things you’d like to improve going forward?

It’s the ability to get more data on the site—you know, how many clicks it takes before a purchase is made, which pages are visited before a purchase. This has already allowed us to identify certain user-side bottlenecks that we’ll address to improve conversion rates.

Then, there’s something Matthieu and I were wondering about: what drives the success of a font? Do people discover the fonts? Does the order in which we present them matter? It’s interesting to see the initial feedback. We can’t draw any conclusions yet because the data hasn’t been consolidated, but we’re already seeing how we can try to make the typefaces stand out more on the site.

What else do we want to improve? I can talk about that—we’re currently working on two things:

1. Conversion Landing Pages: Basically, helping users even more by directing them to pages that are highly conversion-oriented, focused on very specific topics. And so, everything we’ve set up in terms of APIs and data allows us to create these landing pages in an informed and optimal way.

2. Font Pack improvements: The second thing Matthieu and I are thinking about—and which I hope we’ll be able to implement soon—are all the improvements related to the Font Pack. We realize that the Font Pack is a product that’s sometimes used a lot by our colleagues. We believe this new site should allow us to take the Font Pack a step further, particularly in terms of user account management, and even what I call upselling. That is, the ability to have a customer—either when they’ve made a purchase from us, make another purchase and guide them toward that new purchase, or when they’ve purchased a font (say, on a Level 1 license), we can upsell them to a higher-level license.

So those are clearly the things we’re working on. And we wouldn’t have been able to work on all these things as effectively or systematically if we hadn’t, from the very beginning, thought about how to collect data and how we’d be able to track users’ paths.