[ation] center - training platform design  for manufacturers

Our challenge was to create a website for a new training brand. See how thanks to the proper presentation of the offer and the simplification of the purchase path, we have made it easier to purchase training online.

240

working hours

months

designers

Industry:

Training

Market:

Poland

Produkt:

Webbplats

Novum.com

About the project

NovUm medical clinic is a clinic for the treatment of infertility. The overarching goal of the project was to reduce patient service time during their first visit to the facility. To this end, we have developed the concept of the Patient Portal, which allows you to register online without having to leave your home.

Registration and login system

As part of the cooperation, a website project was created. We placed special emphasis on the presentation of products - in-person training and online courses, which are the distinguishing feature of the [ation] center offer.

Sistema de diseño

We have created a set of graphic elements and guidelines to facilitate the creation and maintenance of a uniform image in products.

Range

Product purchase path
Wireframes
UX & UI
Sistema de diseño

Design model

Duration: 2 months

Kontekst projektu

‍

[ation] center to nowa marka, mająca na celu edukację specjalistów zajmujących się rozwojem produktów cyfrowych m.in. managerów produktów, analityków, badaczy oraz projektantów UX i UI.

Idze Mościchowskiej i Michałowi Witkowskiemu, czyli założycielom marki, szczególnie zależało na wypracowaniu unikalnego stylu wizualnego strony, spójnego z wcześniej ustalonym brandingiem.

Usługi [ation] center skierowane są zarówno do indywidualnych klientów, jak i do firm. Dlatego naszym celem było dostosowanie sposobu prezentacji oferty oraz procesu zakupu w taki sposób, aby spełniały one oczekiwania obu grup klientów.

Michal Witkowski

Founder of [ation] center

Zima z powodzeniem zaprojektowała nowy projekt naszej strony, który zarówno poprawia, jak i upraszcza UX naszej platformy.
‍
Zespół Zimy jest wydajny i skoncentrowany na realizacji swoich zadań.

Wyzwanie projektowe

Presenting new training formulas to the audience on the website in an understandable way.
Arrange the information architecture so that users can navigate the site without problems and find relevant information about products (especially: place, date, information about the coach, formula of the event).
Design the online purchasing process in such a way that it is tailored to both B2B and B2C customers.
Creation of a reliable sales channel that will support the promotion of products - including the new concept of the company - masterclasses in the online formula.

Design process

‍

The design was divided into phases: 

Arrangement of information architecture.
Design of UX models (wireframes): representations of the elements of the offer and the purchase path.
Elaboration of Look & Feel: associations with a premium product, but at the same time accessible, within reach.
Creation of system design.

‍

We ran the project online, but the cooperation with the client was intense. During the weekly meetings, where we discussed the developed materials, we received feedback and corrections to the project. Thanks to this, the cooperation went according to the schedule.

Information Architecture and UX Design 

‍

In the first stage, we developed the information architecture and the initial flow of the product. The challenge in this area was to show two of the company's most important products: workshops (in-person training) and masterclasses (online training). Despite the similar subject matter, the offered products differ from each other not only in the driving formula. We had to present these differences clearly.

Another important element was the purchase flow and promote upcoming editions. Usually the [ation] center offers several dates of a given training, so it was important for us to clearly communicate to the user what date they reserve a place for. We have also taken care of the situation in which the user has to subscribe to the reserve list due to lack of available seats.

We have also developed patterns for informing about price and promotions. Our client offered several types of discounts, e.g. early birds discount or group discount for regular customers. Clear information about the packages and guidance throughout the process were crucial to ensure that the purchase was successful for the customer and did not generate errors that require servicing on the part of the seller.

Visual direction 

‍

Together with the client, during short workshops, we developed a look & feel for the new website. We created moodbaord and 3 different proposals based on the logo and branding of the [ation] center brand.

A product that aspires to a premium brand ‍Professional and serious style: clear, legible, with elegant typography.
Colors derived from id brand ‍The main accent is based on the cornflower color, derived from the customer's brand. Complementary colors are blue, gray, and black for texts.
Monochrome illustrations ‍We avoid stock graphics, we use real photos provided by the customer. Photos are additionally distinguished by monochrome styling.‍

Sistema de diseño

We have created a Design System, which is a collection of visual components from which the website is built. Thanks to this, we had collected in one place the standards and rules for composing subsequent views. This helped to ensure a consistent appearance of the product and became the basis of technical documentation for developers.

Final UI Design

We have used the latest UX registration standards such as “Sniper Link” to reduce the number of uncompleted registrations

By sending a user to your inbox during the registration process, we run the risk that he will abandon this  process because it will see other emails that will disperse it.  

Training Editions

Due to the cyclical nature of the product (training), when presenting a specific edition we took care of the presentation of the date, place and coach, and also included in the description all the details related to the product.