WorkKinderleichter Arbeitsschutz
Merging two websites into one e-commerce and online-course platform.
A website design where we merged two websites into one — allowing risk assessment for educational professionals and providing online courses integrated into the e-commerce system. kinderleichter-arbeitsschutz.de
My role
- UX research
- Competitor analysis
- Sitemap creation
- High-fidelity clickable prototypes
- Usability testing
The team
- CEO & Management
- Frontend & Backend Developers
- Product Management
Deliverables
- User-flow optimisation
- Mock-ups
- Prototypes
- Design-language creation
- Polishing design
Sitemap
After a card-sorting exercise, I established a sitemap that gathered all the important pages from both merged websites and added new ones to enhance the user experience. This method has proven to be a great one — avoiding unnecessary work that often happened before adopting the practice.
Mid-fidelity
We started designing the sections more precisely to align with the client's expectations. A few examples:
Slider (high fidelity)
I created a slider for each main category, each with a corresponding colour that represents it. This made the client very pleased.
Mega-menu
After agreeing on a centred logo position with the client, I designed an appropriate mega-menu.
Mobile-first design
Excluding the slider (which I provided on desktop first), I used a mobile-first approach following UX/UI best practices. A few examples:
High-fidelity
We had only a couple of iterations from the client's feedback — all regarding content rather than the design, with which they were thrilled.
E-commerce & courses
The platform integrated a full WooCommerce shop and a members' area for online courses.
Outcome
The website was a massive success — immediately attracting new users who enrolled in the online courses. The client was very pleased.
