An interface and design system for Prijsvrij's new data system

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.

Background information

Prijsvrij vakanties uses third party software to assemble it's holiday packages. To be more flexible in the selection they offer and to make the website run faster, Prijsvij is developing it's own data system: GOT. I designed an interface for GOT and set up a design system so that developers are able to scale up the interface in the future without compromising consistency. You can find the design system here

Process

• Observe users to uncover user needs and frustrations.

  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.

• Create sketches/wireframes and user feedback

• Adding some color: Mockups

• Design system and developer handoff

  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.

Before and after

Product groups and product overview

Margin rules

Learnings

• The Design system made the handoff to development go smoother.

  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