Category:

The beauty – Translated the client’s passion into their online adventure.

Interaction DesignWireframing • InterfaceVisual Design


Context

There are few people I know who love (selling) fish more than the people behind RuVis, the client for this project. Apart from selling fish locally through their retail stores, they offer an additional service: selling complete gift packages packed with different types of fish, complementary wine and some premium snacks to boot.

For this service, which is mainly aimed at the b2b market, I was asked to design a specific website allowing visitors to either order batches of pre-made gift packages, or assemble their own custom gift by choosing from different types of fish, wine etc.

RuVis treats fish the same way I treat UX: as something beautiful. Their love for the business clearly showed during our first meeting, and this was a factor I wanted to communicate through the design of the new site.

The site basically consists of 2 parts: a webshop, offering packages with pre-selected items, and an environment for customizing said packages. Especially the latter got some special attention.

Welcome

The homepage serves as both an introduction and pass-through to the assortment, as well as a medium through which the passion for the product is communicated. I opted for an ‘exclusive’ feel, which was positively received.

The choice to either view the assortment or create a custom package is immediately offered, while browsing visitors get to know the company when scrolling further down.

I came up with the following order to base the homepage’s layout on (from top to bottom):

  • Action/for fast decision makers
  • Confirmation (yes, this company is the best)
  • Explanation/emotion (show what is offered, and how)
  • Emotion/explanation (show how things are offered, and what they are)
  • Emotion/action

With this setup, every kind of visitor (either still in doubt or knowing what they want) is catered to on this page. When they’re still not convinced at the bottom, the site probably doen not offer what they were looking for.

ruvisHome

The assortment overview allows for different kinds of filters to be applied, from type of wine, box or crate, snack or no snack. Applying filters dynamically adjusts the shown products.

ruvisSearchAssort

The main part of this project consisted of creating an easy way for visitors to build their own custom gift packages, with contents of their own choosing. After many wireframes and lots of flowcharting, I came up with a flow that would A) offer all choices (and possible combinations) the client wanted to offer visitors and B) guide a visitor through a step by step process without overwhelming them.

Customizing

The very first choice a visitor had to make was whether they wanted a salmon based package or an assorted fish package. This choice is then followed by a guided process to complete their custom gift. When a choice is made, the next category and relevant choices appears – this way there is never too much information on-screen while constantly confirming previous choices.

ruvisCustom1

The description below the different options dynamically changes based on the choices and edits the visitor makes. This way, an indication of exactly what package the visitor will purchase is always displayed.

ruvisCustom2

When all choices are made, the personal information fields are displayed. The option to go back to the choices and edit them is offered, but I wanted to put the focus on sealing the deal, so it is not immediately obvious/in the reading direction like the call to action on the right.

ruvisCustom3