WooCommerce store for a type foundry
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:
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.
- 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.
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.