In October 2018 I started working at Uptrends as a software developer. Before that, I worked at FileLinx for 7 years as a frontend developer, UI / UX designer, and development team lead. This is me sharing some of my experiences on improving the applications I work on.

Case study: Optitrade Online Product Management Mar 11, 2018

Optitrade Online provides opticians and audiologists with a single channel to order all their products. This channel, while efficient in its purpose, was in dire need of an update. This update provided us at Filelinx with an excuse to strip the application to its bones and rebuild it in a new, refreshing, up-to-date way.

Project scope

It was not only the Portal that received an update. One of the biggest challenges of the project was streamlining the entire process of adding a new product to the web shop for administrators: including several ways of packaging, unique specifications per package, adding a product to one or more product ranges, and setting prices and special offers including tiered discount tables. The existing way of managing all these parameters was spread over more than ten pages, two applications (with separate logins) and over 15 forms to be filled in.

Structure

First on the to-do list was mapping out the structure of a product. Which parameter relates to which, and how do they all come together? The result was a structure looking like this:

Graphic representation of the application structure

A product has multiple packings and belongs to several product ranges. In a product range, one or more prices with discount tables are available. From a specific packing, its prices are also accessible. A packing also has multiple unique specifications and limitations of combinations between specifications.

This structure provided a navigational structure as well. From a list of products, one can navigate to the details of that product. From a product detail page, easy access to the list of packings and the list of product ranges is provided. From a packing detail page, access to prices and unique specifications is easy to find.

Feedback

At this time, the connection between a product range and specific prices was severed. This was done because of the way the interface was built up. On the product detail screen, a list of packings and a list of product ranges is provided. Including the pricings button only on the packings proved to be easier to use. More than one entry point to the same follow up page provided more confusion than extra clarity in this case.

Print screen of a UI concept

The client brief stated that managing a product and its packings should happen on one page. The reason behind this was that it would be faster and easier to update those products and packings. This statement also came from frustration with the current system, which required the user to select a product when managing a packing, and to select a product and packing when managing specifications.

After consulting with the client, we decided not to follow the client brief in this. The solution provided worked just as easy and allowed for a better overview and therefore a better focus on what tasks can be performed by the user on a page.

Real life scenarios

The most important tasks in product management are focussed on adding or improving product information. Adding a product, adding a packing and adding pricing details to a product are vital parts of the product management. Another important step is to make a product available in one or more product ranges, since customers can only access products that are in a product range. It’s those tasks that were the main focus in designing and structuring the product management pages.

Scenario 1: Adding a product
Creating a new product should be easy as one, two, three. Or, in this case, easy as one, two. Just open up the products list and there will be a button for adding a product. As fast as it can get.

Two steps: 1. open product overview, 2. add product

Scenario 2: Adding a packing for a product
The product management structure is basically drill-down. This means that, as the user wants to perform tasks on an item lower down the tree, the search path will be longer. This also goes for adding a packing to a product. If the user is already viewing the details of a product, the button for adding a packing will be right there on the screen. If the user starts from another page in the management studio, the path will be longer, but still very obvious.

Four steps: 1. open product overview, 2. search for product, 3. open product details, 4. add package

Scenario 3: Adding a temporary special offer for a product packing
As with the previous scenario, it is with this scenario: it is necessary to drill down to product detail level before being able to open the pricing details.

Here, a shortcut was added to the click path: instead of requiring the user to first open the details of a packing and then accessing the pricing, the product details page provides a button to the pricing per packing. This allows the user to skip one step. The user does not have to take this shortcut, however, because the pricing button is also available from the packing details.

Five steps: 1. open product overview, 2. search for product, 3. open product details, 4. open pricing details, 5. add discount

Scenario 4: Adding a packing to one or more product ranges
To allow opticians and audiologists to access a product packing, it must be added to one or more product ranges. This is very easy to do: on the product detail page, a list of packings is available. Behind each packing, a list of checkboxes is available: for each product range. Adding a packing to a product range is as easy as checking the checkbox.

Four steps: 1. open product overview, 2. search for product, 3. open product details, 4. check the product ranges for the packing

In this navigation structure, the product details page acts as a central hub for all actions on the product. Getting there is as easy as searching for a product and opening its detail page. The page provides a list of packings, direct access to all prices of a packing, and a way to add packings to one or more product ranges. Managing unique specifications of a packing can be done on the packing details page.

A scematic overview of the navigational structure.

Visual design

The Optitrade Retail Group was in the process of updating their corporate identity. This included a major overhaul of their website, and provided us with an example of how this branding should be applied. Some key elements:

Buttons
Buttons are truly eye catchers in this project. The bright color, the out-of-the-box shape, it all adds up to something the user truly wants to click.

Buttons

Color palette
A strict color palette was used in the design and execution of this product. Built around the blues of the Optitrade corporate identity, a complementary orange was added as a secondary color, allowing important parts of information to catch the eye more easily. Also, green was added for to indicate “good” actions or messages, and red was added to indicate “bad” actions or error messages. This basic division of tasks per color allowed for a more obvious and consistent interface for users.

Colors

Fonts
Just two fonts were used in this project: The bold, powerful Kelson Sans for headlines, and friendly, easy-reading Open Sans for content.

Colors

In conclusion

This project proved to be very inspiring to work on. Having the opportunity to take a confusing and messy structure and reordering it to something straightforward and workable is a great experience. Taking all the pieces of this puzzle and putting them together based on a thorough understanding of the matter proved to to be the key to solving this puzzle.