Threedotstype

WooCommerce store for a type foundry

HTML5 Logo
- HTML
image/svg+xml
– CSS
– WordPress
– WooCommerce
– JS
– React

Meet Threedotstype

A new Polish type foundry

Threedotstype.com is a new Polish type foundry offering fonts and stories.

“I am not a fan of pure technical, nerd way of presenting fonts” – says its founder, Marian Misiak. “Besides, many type foundries have already achieved perfection in this matter so there is no sense to copy them.
I wanted my shop to look different. And our type foundry is offering more that just letters. Content here is not just a random filler. We leave ‚The quick brown fox jumps over the lazy dog’ for lazy people. Our content has a meaning. At first I have a clear vision of this website. I wanted it to be simple and clear but dynamic.
That’s why together with Chop-Chop team, we created a template at there front page that we can update with graphics, illustration or animated images. As a graphic designer I know very well that look at details which might be irrelevant for a random user.

The challenges? Custom checkout, custom cart, home page as one big editor to test the fonts.

Design

The design was handled by the Rectangles, a UX design agency that we later consulted on the ideas and functionalities for the store. The challenge they faced was to present the uniqueness of the fonts designed by Threedotstype, while creating a good eCommerce experience.

After initial research and interviews with Marian (the founder), -> it became clear that the site should tell the story behind each particular font. In the end, The Rectangles had three main goals while working on the structure and wireframes:

  • Make the website interactive to engage users and let them play around with fonts
  • Tell users the story behind each font family
  • Make the purchase process as intuitive as possible

“We decided to turn the home page into one big editor with all the fonts for users to test” – says Alina from The Rectangles. “Additionally, each font family was given a unique page to tell its story. Since buying fonts requires additional information, such as license type, we decided to design a custom cart and checkout solution. And, apart from fonts, we also had all these branded products (bags, mugs, etc.) to sell! We used the cart as a sort of list of all the products and fonts with checkboxes, leaving it for the user to easily choose what they wanted to buy before going to checkout. We knew that the*Chop-Chop team is able to handle such a degree of customization.”

Our input and technology stack

The following technologies were used to accomplish our goals:

- HTML

image/svg+xml

– CSS

– WordPress

– WooCommerce

– JS

– React

Development

The Threedotstype project, apart from a few typical, static pages, also contains 2 interactive elements written in React: dynamic font preview on the home page and the cart page with its custom behaviors.

 

Technical challenges:

  • app-style dynamic font preview
  • custom cart/checkout solution
  • font preview

Our UX consultants for the project – The Rectangles – wanted the home page visitors to freely interact with the fonts and easily find out about their properties. The challenge on our side was to enable users to meddle with the fonts, their families, sizes, styles, colors and immediately see the results. We didn’t want the site to reload every time the user changed something and we didn’t want to show a pre-selected number of available variants. We needed an app-like, dynamic solution.
For this reason, we decided to integrate the powers of React and WordPress. A great way to build interactive elements, they seemed like a perfect fit for the task. Thanks to WordPress and React combined, the user could select the font family, change the style, the size and the color of the text, even divide it into columns and see the result right away.

  • custom cart/checkout

Making the cart consistent with Marian and the Rectangles’ requirements was even more challenging.
We needed to display all the available fonts as individual checkboxes in the cart. The user had to specify the license type, the number of workstations and the number of page views per month for each of the selected fonts. In addition, fonts that were selected were supposed to automatically jump to the top of the product list, and those that were not selected – to the bottom.
By default, WooCommerce does not allow for such a complex product selection process. We had to account for some real-time interactions again, but, at the same time, we didn’t want to play with manual updates of the HTML structure of the page. Finally, we decided to use React and integrate it with WooCommerce.
As a result, we made it possible for users to freely select or deselect different options as they needed.

This meant that, in the end, we had to rebuild the entire default checkout, so that all checkout-related activities could be successfully performed on a single, dedicated page. This made the entire checkout process really simple and easy to use.

After 1 year of threedotstype.com working I realize that many things here need a serious upgrade. They say typedesign is never-ending story. Bullshit. Try to design a type design website. Thanks Chop-Chop for your patience.

– Marian Misiak, Founder at Threedotstype

Conclusion

Because of its individual character, the Threedotstype project required a great deal of customization. We had to account for real time font preview on the home page and custom behaviors in the checkout process. This required us to integrate React with both WordPress and eCommerce. Ultimately, the Threedotstype store is a stable, custom-built platform for the users to test and buy font packages, just like its owner envisioned.

Want your project to be showcased here?

Start with a free quote and get 5% discount!

Get a free quote