Altvin UX/UI

I started work on the Altvin project soon after its inception. My primary responsibility at Altvin was to design and manage the delivery and ongoing iteration (based on user feedback) of the products UX and UI. We needed a quality user experience while keeping the product simple to construct and ultimately cost effective to develop.

Firstly, I researched, designed and constructed the initial prototype. With a large focus on the visual language of the software as well and the information architecture and user experience. The prototype was used for market research and project scoping during the procurement of the development team.

As the software matured, we gained a lot of knowledge as to how wineries are run and what are the best practices when it comes to organising the bottling of wine. The latest incarnation of Altvin (Altvin 2.0) had a key structural change and new feature added as a direct result of user feedback.

Case Study

The Altvin cloud application is focused around the organising and management of the packaging/bottling of wine. When wine is bottled it is called a bottling event. It is these bottling events that make up the foundation of the App.

Event Manager

After logging into the app, the user is taken to the Event Manager and presented with all bottling events, be they of; live, draft, archived or design status.

A left-hand side navigation was chosen as the primary navigation element for each section of the application. The 3 main reasons for this are as follows

  • This a is a convention that is followed in many web applications and websites.
  • It allows the user to know what they are looking at and the context in which it sits in relation to the broader application.
  • It allows for greater flexibility moving forward as the product develops.

In the event manager section of the app the left side navigation is used for the sorting, filtering and searching through all bottling events.

In-order to effectively manage all bottling events from the Event Manager screen, it was necessary to gain access to more detailed data of the event without opening an individual event and leaving the Event Manager. The solution was to have the event expand from occupying one line in the table to several lines revealing a secondary table of information concerning the Bottle SKUs within the Event. It is from this state that functions such as the ability to duplicate, delete and open a bottling event are accessed.

The third major component of the Event Manager screen is the live events dashboard. It sits on the right hand-side of the screen and when clicked, slides out over the table of bottling events. Is has a drop shadow to give a 3D effect of physically sitting above all other components of the Product Manager, an inertia effect was given to its animation to further enhance a physical quality. It quickly opens and closes over the top of whatever the user is doing within Event Manager, given them instant access to the progress of all current live events.

Bottling Event

When opening a Bottling Event the user is taken to the Event Overview page. Once again there is a left-hand navigation panel, keeping with the convention established in the Event Manager.

The same information presented here is the same as the info presented in the open state of an event in Event Manager. In addition, users can be assigned, removed, and have their level of access set via a pop over accessed from this screen. The goal when creating this screen was to strike a balance between providing an overall snapshot of the event and provide some functionality while keeping things simple for making clear decisions.

It is from the Specifications Screen, the next menu item down, that key data is entered by the user concerning the Bottling Event. The third screen, Documentation is an area where the user can upload copies of all documentation concerning the bottling event. This includes Certification documents.

The final menu item brings the user to the Bottle/Product SKU’s that make up the Bottling Event. When clicked a sub list of Bottle SKU’s is revealed. Each SKU contains a series of screens accessed through a set of navigation tabs located at the top of the screen. This system of navigation was chosen because it follows an already established convention and allows for greater versatility going forward in the future. Each tab represents a different dry good component of a wine product. Combined the navigation systems allows the user to know exactly which area of the app they are currently in at any time.