A website design built on the needs of trainees and companies
We started by analysing the offer, the business goals and how customers are acquired. Together with the Bonapi team we defined what information someone buying a course for themselves needs, and what a company representative organising training for employees needs. We turned those findings into the site structure, the order of content and the purchase paths. Then we prepared wireframes and a custom visual design that also covered the configurator, the cart and the order form.
Two customer groups, different needs
For individual customers and for companies we drew up separate profiles: their goals, questions, concerns and criteria for choosing a course. Someone looking for a course for themselves needs information about the qualification, available languages, dates and price. A company representative also has to organise several employees' attendance, settle the purchase or arrange training at their own premises.
On that basis we planned the content layout and the paths between pages. We made sure a customer could quickly find the right course, and an employer could easily reach the offer for companies and staffing agencies.
Structure and wireframes before the visual design
For the key pages we defined what need brings a user there, what information they look for and what they should be able to do next. We then prepared wireframes showing the content hierarchy, navigation and purchase paths. They covered the offer pages as well as the cart, the order form and the purchase confirmation.
The wireframes let us review the whole process together with Bonapi before work on the look of the site began. At this stage we agreed the order of information and the scope of the forms, so that the visual design and the build would rest on an approved structure.
On the wireframe we set the content hierarchy and the paths to each part of the offer.
We broke the site structure down into specific pages, covering the offer, information about the company and contact.
A design built on Bonapi's identity and experience
We prepared a custom visual design using the brand colours and authentic photos from the training centre. Next to the course information we placed customer reviews, instructor profiles and certification marks. This way visitors can get to know the company, its team and its facilities before they sign up.
We also designed every screen, from the home page to the cart and payment, in a phone version. Rather than squeezing the desktop layout into a narrower width, we arranged the content, the configurator and the forms for one-handed use. The design also covered the purchase screens. We agreed the layout and feedback with the client in Figma, and after approval we moved on to the build.
The visual design combines the brand colours with authentic photos and information about Bonapi's experience.
Buying a single course, and an offer for whole teams
For people looking for a course for themselves we provided training categories, site search and free practice tests. They can go from a specific qualification to the right course and its available options. A practice test opens in the Bonapi platform, where the trainee answers timed questions just like in the exam and checks straight away whether they are ready for the course.
For companies and staffing agencies we prepared a separate page with group training, training at the client's premises, equipment inspections and short toolbox talks. A company can place a simple order through the website by entering the participants' details and its invoice details. For more individual needs it can use an enquiry form.
Selling training online: from choosing a date to payment
When buying training, price is not the only thing that matters. The customer has to choose the right language, location, date and number of places. We brought all of these decisions together in a configurator that shows the cost of the order as they go. The buyer then enters the participants' details and moves on to online payment.
The integration with the Bonapi platform passes the order on for further handling without anyone re-entering the data. The same process lets a customer buy a course for one person or sign up several employees of a company.
Buying online covers both classroom training and courses run online.
A separate offer for each market
The bonapi.nl site serves the Dutch market. We prepared it in several languages so that customers can read about the courses in a version they understand. The Polish market got its own website, bonapi.pl, with a separate offer, prices in zloty and language versions, including Ukrainian.
The Polish site was built on the design and solutions developed for bonapi.nl. We could reuse the existing components and the purchase process, and focus the work on adapting the offer to the local market. Launching the second website did not require redesigning everything.
Each language version got its own page URLs. We also added prompts that help visitors move to the right market or language. Visitors decide for themselves whether to use them.
Content management without a developer for every change
The Bonapi team can update course descriptions, publish articles and manage reviews, instructor profiles and job listings on its own. We opened up this content in the Sanity panel, separately for each market and language. Prices and dates come from the sales platform, while changes to the site layout and the copy of fixed pages are handled as part of our maintenance.
