Hubtill Stocklist Web-App


  • UX & UI Design
  • Prototyping
  • HTML, CSS & Javascript
  • AngularJS Directives

Stocklist was the first web-app designed and developed for Hubtill platform. On this application I designed for the first time the look and feel of the Hubtill suite of microservices, and established the style guide that future Hubtill applications should follow.

My biggest challenge on this project was to transform the interactive prototype built with HTML, CSS and JS into AngularJS Directives and Controllers.

The main goal of the application is improving efficiency in stores and warehouses throught a better stock management. The app maximises the shelf replenishment process and confirms the transfer of products from the stock room to the shelves by using smartphones and tablets.

The tipical usage of the web-app would be the following: one or more employees on the front shop generate a list of products needed to replenish the shelves. Once the builder confirms the amount of products needed, different members of staff pick those products in the stock room. In small shops the app can be run in both modes (builder and picker) by the same user.

The person in charge of building the lists can generate as many lists as needed and organise them (by type of products, by suppliers...) to suit the needs of the business.

The lists are stored from one session to another, so they can be re-used every time the shelves need to be replenished and only the amount of each product has to be changed.

On the landing screen, each list shows small images of some of the products of the list. This way, the user is prompted with a quick view of the content of the list in case the name is not descriptive enough.

Stocklist Desktop Lists
Stocklist desktop landing page with lists.
Stocklist Modal Window
Stocklist modal window to select a user mode: builder or picker.
Stocklist Desktop Builder
Stocklist desktop builder page
Stocklist Mobile Lists
Stocklist mobile landing page with lists.
Stocklist Mobile Builder
Stocklist mobile builder page.
Search Error Screen
Stocklist mobile builder page.