Creating a highpaced decisionmaking headless webshop that is smooth and fast
Alfa Pro IT created a system that connects flower im/exporter, the auction and their buyers. But these fastpaced decisionmakers needed a better experience. My method? A clean, robust workflow that made the process of buying and selling flowers faster.
My role
- UX Research
- UI Design
- Branding
The visual identity
Creating a consistent future-proof visual identity
![Branding Alfa Pro 1 Man working on computer with Alfa Pro IT logo and Design System text in a modern office setting.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Branding Alfa Pro 2 Typography guide showcasing Jakarta Sans font with headings, subheadings, and body text with font sizes and line heights indicated](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Branding Alfa Pro 3 Graphic design color palette with hex and RGB codes and user interface card design layout.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Branding Alfa Pro 5 Screenshot of a user interface guide showing different alert and button styles for web design](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Portfolio frame-1 Icon and button design template featuring Bootstrap icons and button types including default, call to action, secondary, disabled, and various sizes.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Portfolio frame-3 User interface design elements including cards, progress bars, gauges, charts, tabs, notifications, popovers, tooltips, modals, and navigation menus displayed on a web design concept.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
UI / UX considerations & challenge
Create an interface that helps the user make fast decisions while limiting the search results for better loading times
The flowerimporters that used the headless system as their webshop uploaded over 10.000 products. With the old interface they would just load all the products at once which gave huge loading times. Time to include a UX designer and fix this.
1. Userflow priority research & ingredients
Based on interviews & Hotjar recordings i’ve found out what the users painponts were and that the users are follow a specific path to find the product they want. Which was used a basis to setup layout and design hierarchy
2. Creating a design system
After defining the needs of the system i created a design system that also gives the ability to accomodate programmers to expand the system with new features with ease.
3. Creating an intuitive layout filter system
To accommodate the 10.000+ products i’ve created a intuitive layout and filter system based on UX principles. Giving priority to the most important filters like; Date, name and flower groups.
4. Decisionmaking information visualisation
To make sure that users are able to make quick decisions i’ve added product overview that provides all the decisionmaking information in a quick overview and the ability to buy quickly.
With over 10.000 products on a webshop, the system simply cannot load them all at once!
![Basic view Online flower shop interface displaying various bouquets of yellow and green flowers with price tags and options to choose delivery date.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Basic view Online flower shop interface displaying various types of flowers for sale including Abies Nobilis, Agapanthus, Allium, and more with prices and minimalistic design.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Basic view – 1 Screenshot of Alfa Pro IT online flower shop interface with product categories, filters, and search functionality](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
The principles
The design system is designed based on a few core principles, which should be taken in account while using, designing and expanding the design system. The principles give a direction on which new prototypes and results should be tested and evaluated.
![blank](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
Decision making information
The system is being used by a fast paced industry where the target audience has alot of in depth knowledge about the products. They should be able to make a split second decision based on essential data.
![blank](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
Stress resistant performance
The system is being used for a high number of products. Taking server load into account while making design choices is essential for a high performing system.
![blank](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
Multi tenancy customization
The system is being used by over 300 customers and they have the ability to customize colors and fonts. The design should work in different colors.
![Screens 2 Screenshot of Alfa Pro it online flower shop interface showcasing multiple listings for Alchem M Robustica flowers with price and quantity options.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Screens 4 Screenshot of Alfa Pro IT login page with email and password fields, benefits section and footer with contact information.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Screens 5 Screenshot of AlfaPro NEXT Demo Webshop homepage featuring navigation menu, product categories, unique selling points, and contact information with construction workers in the footer.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Screens 6 Professional login page interface for Alfa Pro IT with registration form and navigation menu.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Screens 7 Screenshot of AlfaPro IT flower wholesale web interface showing product list with items Abies Nob, Allium Gladiator, and others with details including size, stock, and price.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Screens 8 Screenshot of an Alfa Pro IT online shopping cart with multiple Abies NOB Blauw Kiloo plants, showing product details, delivery dates, quantities, and pricing information, with a total amount of €4,231.54.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Screens 9 Order summary page of ALFA PRO IT showing multiple entries for Abies NOB Blauw Kiloa with delivery date, size, quantity, and pricing details.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Mockup Mobiel Alfa Pro 1 Mobile flower shop app interface showing yellow Allium Sphereopetalum flowers for online purchase](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Mockup Mobiel Alfa Pro 2 Screenshot of a user interface showing a filter menu with alphabetical group options and a list of plant names with corresponding item counts.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
![Mockup Mobiel Alfa Pro 3 Search interface on mobile with list of plants including Adenium, Lycianthus, and Denneboom.](https://www.camielbos.nl/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)