Objective | Design an interface for Prijsvrij's new data system that is efficient to use for it's users (Data analysts) and easy to extend on by the developers.
My Role | User research, UI design, Interaction design
Final product | Wireframes, UI design and Design system.
After observing and interviewing the data analysts, their main tasks in the application became clear:
1.Create/edit/delete product groups.
2.Create/edit/delete margin rules (rules that apply to pricing for certain products within groups.)
I made the following observations:
-The form fields within product groups are very long, so it takes lots of scrolling to make edits.
-The links for "more options" don't hold many more options, also the options aren't listed in alphabetical order. This poses a problem when editing, because data analysts know all of the options by heart. This makes looking for an option under a "more options" link take a lot of time scanning the available options.
- Some elements within item groups are never used, therefore obsolete.
- The grouping of elements could be more logical, enhancing scannability.
- App gives no feedback after user operation leaves user guessing if operation was succesful.
After handing of the design system to the developers their feedback was that it was such a clear and easy way to work that we should also create a design system for the main website. there were no questions about pixel ratio's, component width's, logo sizing, font sizes, everything was there for them to inspect and copy to their code editor. In short what makes this awesome: I provide pixel perfect design components and Figma automatically provides the css for the developers. I upload the design system to ZeroHeight and add the design rationale behind each component. This is a win-win, low effort to set up, easy to maintain and quicker development workflow.
Product groups and product overview
The component based nature made helped in discussing individual elements of the design and the pixel ratio's made it quicker for developers to implement the design: simply copy paste. I'll be using this way of working in future projects,for it proved to be very efficient