The Project

Built by DiscoSystem team, Product manager is a web solution that manage eCommerce products and all details related to categorization, inventory and product details. These products may be physical or virtual.
Product Manager is basically the back-office for eCommerce products. When associated with Identity Manager (another DiscoSystem product), Product Manager could also control content editors and moderators.

Task :

Information Architecture, UX Design, UI Design, Frontend development.


Challenge :

With great power comes great responsibility.
On this project I had carte blanche to build the product design based on stakeholder briefing documents and to bring together the proper front-end frameworks and technologies. It was a great opportunity for my experience as a product designer to pay off.


Tools :

Adobe Photoshop, Sketch, Adobe Illustrator, Bootsrtap 3, SASS, GIT

Product Manager - List of products

The Process : Information Architecture

The goal was to design the simplest logotype possible using the primary UI color (magenta) and "BOTDB" name. Deliverables were the logo (complet and minified versions), favicons, brand guidelines, Youtube channel art and icon.

General flowchart that shows the navigation and hierarchy of key screens

The Process : UX DESIGN

In order to visually define every aspect of the project, I was based on the IA process deliverables to craft mid-fidelity wireframes for the dashboard’s key screens while keeping in mind the user’s needs and the project scope.

I used Invisionapp to test the wireframes alongside with the development team and to show how the product might work.

Mid-fidelity wireframe of "Edit Product Category" screen

The Process : UI DESIGN

I began with creating the GUI components to keep a consistent UI style for all the screens, and to speed the UI implementation based on the wireframes of key screens.

My plan was to build beautiful yet simple interfaces that could fit all the required features and keep them easily accessible by the end user.

One of the challenges that I faced on the UI Design part was designing the “Edit product” page. The goal was to fit around 120 form inputs in one screen while keeping them easily accessible and reducing the average time spent by content editors to add a new product.

Deliverables were PSD files of high-fidelity mockups & Invisionapp interactive prototype.

Add/Edit Category screen
Product Details - Images & SEO

The Process : FRONTEND DEVELOPMENT

Once everyone agreed on how the screens look (and work), I proceeded to implement the GUI into a css style guide, then I used bootstrap 3 and SASS to build the key screens.

Screenshot of the actual UI with a Date picker, implemented using Bootstrap and SASS

Project status

Product Manager is currently under production by Discosystems team.