[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.
[ation] center is a new training brand offering courses and training for designers, researchers and people managing the development of digital products. We were invited to design a website whose aim was to attractively present the company's offer and sell training courses online.
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.
We have designed a path for purchasing training and masterclass courses. The convenient and quick purchase process has been tailored to both individual customers and companies.
Product purchase path
Wireframes
UX & UI
Sistema de diseño
Context of the project
[ation] center is a new brand aimed at educating professionals involved in digital product development, including product managers, analysts, researchers and UX and UI designers.
Ige Mościchowska and Michal Witkowski, the founders of the brand, were particularly keen to develop a unique visual style of the website, consistent with the previously established branding.
The services of the [ation] center are aimed at both individual customers and companies. Therefore, our goal was to adapt the way of presenting the offer and the purchasing process in such a way that they meet the expectations of both groups of customers.
Winter has successfully designed a new design for our site that both improves and simplifies the UX of our platform.
The Zima team is efficient and focused on accomplishing its tasks.
Design challenge
- 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 brandProfessional and serious style: clear, legible, with elegant typography.
Colors derived from id brandThe main accent is based on the cornflower color, derived from the customer's brand. Complementary colors are blue, gray, and black for texts.
Monochrome illustrationsWe 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
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.
Our team worked in a design model
![This is what you need to know to make your medtech business work [+UX examples]](https://cdn.prod.website-files.com/665f016b950e89499f580acc/671b831663a2597f47c963f3_Grafika-nr-1_-tytul_-Innowacja-termometra--scaled.webp)
