User-friendly dashboard for The Flower Lobby employees. Being able to allocate the right (amount of) products to the right wholesalers. Reducing discrepancies and workload compared to their previous solution (Excel sheets).
View websiteView appView report
Web based tool/dashboard
Working in Excel (previous solution) created a lot of discrepancies and extra workload e.g. users had to use Excel (prone to error) which needed to be manually checked by other people . This was work intensive and time-consuming.
Created a user-friendly tool/dashboard that is a balance between client requirements and user needs. The goal was to make sure the user is able to allocate products effectively and efficiently.
Gathering requirements and uncovering the problem
The Flower Lobby came to us with a few problems with their current solution (Excel-sheets): a workflow to efficiently distribute their products (flowers). Their previous solution created too much workload and thus there was room for improvement.
Through several meetings on location we discussed requirements, target audience and tried to uncover all the to be solved problems.
These requirements included:
After gathering all requirements and clearing up uncertainties I started working on a concept in wireframe form.
Translating ideas into wireframes
At first I was only given some Excel sheets but after several on-site meetings the problems became more apparent and concepts started to become clear. The target group would get a tablet so the web based tool should be optimized for that device.
Some design challenges and their solutions:
Some other design challenges:
You can view the solutions to these challenges in the wireframe below.
After a go from the customer, styling elements were applied thus the wireframes became more detailed. Iteration is an ongoing process.
Creating the detailed UI
After the wireframes were approved by the client a start was made finalizing the UI. Some minor tweaks and adjustments were made along the way based on feedback from the users. These were done onsite.
Developers used the Filament framework which I had to take into account while designing the UI This was done to reduce too much custom work.
UX issues that were tackled during the design of the UI:
1. Segment
The "Segment: S" was unclear. I added “Filters” to show which filters are applied.
2. Data Table Readability
To be able to help users to scan the table faster, especially when there are many categories or products and to further distinguish the individual rows, alternating row colors and borders are used.
3. Comparison Radio Buttons:
The "Compare with" element visually blends too much with the other content. The radio buttons were more distinctly spaced to signal that this feature is separate from the rest of the content.
4. Order Closing information:
Order Closing information wasn't distinct enough so we added color–coding: red or yellow as the time decreased. This adds a sense of urgency and calls the user’s attention when the time is running low.
These design choices were then put in the final iteration of the UI of the dashboard. Up until that point the client mentioned to be happy with the process so far.
