--- title: "UX design for a site with an online product catalogue" url: "https://wzor.biz/en/case-studies/strona-swish/" description: "We delivered the UX/UI design for Swish's online product catalogue, focusing on process automation and a no-code WordPress implementation." lang: "en" --- # UX design for a site with an online product catalogue We delivered the UX/UI design for Swish's online product catalogue, focusing on process automation and a no-code WordPress implementation. ![Swish - an online catalogue of cleaning chemical products.](https://wzor.biz/_astro/header-transparent-swish.DBGg9G0H_ZaJrus.webp) - UX design and implementation in 2 months - 3-person team: 2× UX designer + WordPress developer - Unique set of icons and product visualisations - PDF generator for hygiene plans - Automation of customer communication processes ![](https://wzor.biz/images/home/logos/swish.svg) Visit the site [swishclean.pl ↗](https://www.swishclean.pl/) Client Swish Industry [Industrial Manufacturing](https://wzor.biz/en/industries/produkcja-przemyslowa/) , [Services](https://wzor.biz/en/industries/uslugi/) Type Website ![](https://wzor.biz/_astro/case-study-1-swish.YuOL6wx3_Tc3iL.webp) ## Key goals and challenges For the Swish team, process optimisation became the key priority. Creating hygiene plans for customers was particularly painful, because it was always done by hand in a spreadsheet. We came forward with the initiative to design and implement a one-of-a-kind PDF generator for hygiene plans, automating those processes at Swish. Product catalogue Our task was to organise a rich offering of 90+ products across 11 categories and present them in an appealing way in an online product catalogue. PDF generator The client set us the goal of designing the UX of a PDF generator for hygiene plans, automating an important process within the company. Process optimisation Every element of the site was to be designed in a way that reduced the need to communicate with the customer on the obvious topics - such as the need to download product descriptions, safety data sheets or product photos. ![](https://wzor.biz/_astro/case-study-1-swish.YuOL6wx3_Tc3iL.webp) ## Delivery process The foundation was mapping the features most important from the standpoint of optimising customer communication, giving the end customer everything that matters in the online product catalogue. To that end we ran a workshop and a range of other activities aimed at reaching that goal. ### Workshop In the workshop we used mainly two exercises: feature mapping and user journey mapping. In this way we built the foundations for further work, creating a precise specification and scope along the way. ### UX design During the design process we focused on the main goals and features worked out in the workshop. The UX team built the information architecture and user flows and ran a UX audit of the previous website. We also carried out desk research, thanks to which the low-fidelity mockups matched the client’s needs. After a small amount of feedback, the UI was prepared and the team moved on to implementing the project. ### Implementation We used no-code implementation techniques on the WordPress CMS, giving the Swish team full control over the product catalogue. To this end we used Oxygen Page Builder and custom fields. As a result, changes to the site are simple to implement without needing to involve a developer. Scope of work ## What we delivered ![](https://wzor.biz/_astro/Strategia.4nrJHdgh_2pcm4z.webp) ### Workshop Feature mapping, User journey mapping ![](https://wzor.biz/_astro/Projektowanie-UX-UI.hvWI7joO_tc3j2.webp) ### UX design UX mockups, User interface, Prototype ![](https://wzor.biz/_astro/No-Code.DIPjFz2j_24bNiz.webp) ### No Code WordPress, Oxygen Page Builder ![](https://wzor.biz/_astro/case-study-3-swish.B_2tOnJt_15r5ym.webp) ![](https://wzor.biz/_astro/case-study-4-swish.DeUBOCnD_OVxKF.webp) ![](https://wzor.biz/_astro/case-study-5-swish.D7HU9M5i_3sXKw.webp) Results ## Numbers that speak for themselves 90+ product visualisations 3 automations 2 months of work > “UX Agency Wzór delivered a full package of services for us, from the website through labels to the catalogue, and our collaboration has been running for over 3 years now. The UX design of the site in particular, along with its new features such as the hygiene plan generator and the calculator for our product efficiency, saved our team a great deal of time. We warmly recommend Wzór.” Dariusz Oleczek Operations Director, Swish Similar work ## See other case studies [All case studies →](https://wzor.biz/en/case-studies/) - [ ![Bosfor Group - yacht charter, UX/UI design on a tablet.](https://wzor.biz/_astro/cover.CLzJUJU2_Z1SMJbA.webp) Transport & Travel Bosfor Group We merged Bosfor Group's four separate sites - the group hub, yacht charter, cruises and the BALI catamaran dealer - into one coherent brand system, with yacht booking and a catalogue built on technical data. Read more → ](https://wzor.biz/en/case-studies/grupa-stron-bosfor/) - [ ![Fonia - a cashback app](https://wzor.biz/_astro/cover-fonia.DijWWfUI_okPR3.webp) E-commerce Fonia We built a cashback app that gives users a convenient space for online shopping where they can save money. Read more → ](https://wzor.biz/en/case-studies/mvp-aplikacji-fonia/) - [ ![EzzyGuide - a tours app for the Polish mountains](https://wzor.biz/_astro/cover-ezzyguide.CHVQJ5FO_oyx7x.webp) Transport & Travel EzzyGuide Building on an existing specification, we designed the UX of a tours app together with its user interface (UI). Read more → ](https://wzor.biz/en/case-studies/aplikacja-ezzyguide/) Contact ## Tell us about your project We design UX/UI for mobile, desktop and e-commerce applications - from audit and strategy to interfaces ready for implementation. [Free consultation](https://wzor.biz/en/free-consultation/) [Get in touch](https://wzor.biz/en/contact/) ![](https://wzor.biz/_astro/portrait.BFsC1rhN_Z17TUuY.webp) Katarzyna Adamczuk President, Business Analyst E-mail [biuro@wzor.biz](mailto:biuro@wzor.biz) Phone [+48 535 025 985](tel:+48535025985)