We updated our shopping cart. Why is this good news?

One day we decided to take a closer look at our shopping cart and figure out what was missing — as it turned out, the cart would better be off designed from scratch. So, what’s so new about our new shopping cart?

June 10, 2021

The UI has become more complicated, but we ensured that everything is as clear and convenient as possible — all prices, licensing options, and customer information are presented on the main screen. Click on the edit button, specify data in a pop-up box, check — and proceed to payment.

A discount for buying multiple styles is now more visible. The more you buy, the more you save — sometimes the entire family with a discount may well be costing the same as several styles without a discount. The cart reminds you of this lovely option and explains where the discount comes from, if it has already been applied. We also added a video license option — earlier one had to agree on using our typefaces in videos via e-mail.

Explanations, clarifications, instructions on discounts, licensing and payment options are now readily available — simply click an underlined piece of text.

If you use Tomorrow’s free trial license, we will remind you that the fonts cannot be used anywhere and you must delete the files two days after buying the license — and if you purchase only Web or App license, we remind that for working in Figma you will need a Desktop one.

We revised and simplified many user scenarios — for example, now we need much less details for registration, one can add detailed information later, while making a purchase.

Finally, we cleaned up the mess in our cart’s graphics and typography — there are far less different styles, spacing between elements has become more reasonable and neat. From now on one can use our cart from their mobile phone as well — we ensured that everything would fit the screen, be legible, pressable, not too complicated or confusing.

All texts for the cart have been rewritten in a clear, informal language — with legal terms used only when absolutely necessary.

The cart will become even better very soon — when buying several styles of one family, you will be able to specify all options and licensing details just one time. Besides, it will be possible to copy a link to a specific non-empty cart for handing it over to your colleagues. Plus, we are remaking the profile page — with a handier access to purchase history, legal documents, and font files. But that’s another story.

katya

I specialize in interactions and interfaces: not just between humans and machines, but also between several people, or several teams. I previously worked for top Russian digital agencies (such as Oleg Chulakov Studio, CreativePeople, ONY), now I have my own practice — NDA.Design. I did the project of type.today’s cart together with Danil Altynov — I was in charge of UX, while he worked on UI. Danya and I, we worked together at Chulakov Studio, where he was my art director and helped me figure out the world of interfaces. And now, many years later, we continue working together on other projects.

The work on redesigning type.today started in 2019, when Ilya Ruderman asked me to carry out the web site analytics and identify problems of its mobile version. The biggest issue was that in mobile it was all very small (texts, clickable elements), there was not enough space between different entities. Additionally, many things had to be done manually, by sending a mail request. That said, by that time the site had already been very well functioning for four years.

In the early 2020 we embarked on remaking the cart. Everything started from long talks with Ilya — he was telling me about business processes, we were coming up with solutions. Everything was going great, but the problem was our workload: each of us had a lot to do during the day, while we still wanted to spend evenings with our families, and when everyone fell asleep, we could call each other in the quiet and discuss the projects — normally it was around midnight Moscow time. When we found a solution which we both were OK with, we came to Yura Ostromentsky and discussed our progress together. It was a very convenient framework — Yura was less involved in the process and used to ask the right questions from outside. Eventually, we created a large user scenario map that considered and dealt with all the essential needs of a customer.

sc-cart

sc-auth

The map visualizes top-level user scenarios, what an ideal user is supposed to do. It is aimed to communicate the course of actions to each member of the design team (including those who hadn’t worked with user scenarios before). On this map, we tried to simplify things somewhat, not bothering with error microscenarios and not visualizing each piece of UI (pages, pop-up boxes, etc.)

We described who could make purchase on the website; thought through what would happen if the user was registered as a person, but would want to buy as a legal entity; payment methods and licensing options; purchasing a large amount of styles for one project; developed the least difficult way to shift to adjacent micro-scenarios and an easy return to previous interface points; designed every word in the new interface.

Initially, it seemed that all business needs were obvious. But certain functions appeared unexpectedly — for example, the guys almost accidentally revealed the issue of test licences which customers were eager to use in their projects all the time (uncommercial, such as portfolios and school projects). The solution was lying on the surface: to remind the user at each step that these files cannot be used in work — by no means whatsoever. Speaking of visual language — that is one of the few cases where we use emphasized colour in our cart, we highlight in pink the name of the typeface, price, and the warning that the license doesn’t offer you any rights.

10

Two days later we send a notification saying that the font file has to be deleted from a computer unless you purchase a license. This was a fun idea: ‘Time is up. Be careful, or you might become a pirate. Buy a license or delete the file’.

11

When we first approached the graphic design, we came up with a typical modern UI — with icons, separators, coloured blocks.

12

The very first comment we received from Ilya and Yura was ‘too complicated, need to make it simpler’. At first it seemed ‘How simpler could that be?’, but the guys asked us questions on what specific meanings could these icons have, additional and completely irrelevant. Those questions better revealed that ideology of visual communication that we were supposed to reflect. So, the second approach was about typographic elaboration of the cart — we replaced all icons by text buttons, got rid of unnecessary background colours, and softened accents. It had seemed that without all this we would have only bare text. But the result turned out to be much clearer and easier to perceive.

Any similar project requires an enormous level of engagement on the part of the product owner. I cannot say that everything has been done by me and Danil personally — alone we could not have been able to do this project without an understanding of the product that owners have. Ilya, Yura, the editorial team — everyone put a lot of effort and a lot of their time to find solutions that helped make working on the project enjoyable, and a new cart — clear, convenient, capable of both bringing business profit and getting the user interested.

14


type.today team thanks NDA.design for their patience, elaboration, and diving into every detail of our work. We also thank Perushev & Khmelev for implementing every idea into code, speedy and efficiently.