Plano tool - Web Application
Plano, the new global planogram tool which is an end-to-end merchandising system that gives an immediate visual representation of the space in a reseller store. It is an encrypted visual merchandising tool that handles all the key elements of merchandising starting from Products and its supporting elements like kits, planograms, and store layouts.
Problem
For the past 10 + years the planogram process is completely outsourced to a third-party vendor based out of the US. The vendor uses CAD drawing software for drawing planograms and their internal web app for printing PDFs and other reporting needs.
The challenges with the old tools were scalability, performance, and lack of collaboration.
Solution
To create an intuitive interface that gives an immediate visual representation of the space in a reseller store and to build an end-end process within the app.
My Role
Lead UX Designer
My Responsibilities
Gathering Business Requirements, creating paper and digital wireframing, low and high-fidelity prototyping, testing, accounting for accessibility, iterating on designs and responsive design
Duration
Jun 2020 – Dec 2020
Design Process
Define
Earlier to this tool, we had another digital tool that was being used only with the Apple Stores. We learned that currently, the reseller stores were using a third-party tool that was not scalable, inefficient, and had a performance issue.
With our earlier version, we were able to win the business confidence and they were ready to build a similar tool with more flexibility for global use.
Discovery
With all the discussions that we had with the stakeholders. I understood the expectation was to make a digital product that was scalable across devices like iMac, Laptop, and iPad. For the initial phase, our goal was to build a web application on the portal.
Also, as part of this, we also targeted generating the pdf version of these planograms to the reseller stores.
Ideation
We started with the draft version of the templates. As we already had our prior digital tool for reference, we took that as the base and started building the wireframes.
As part of our design process, We had to consider the below aspects and had to create separate screens to do all the necessary setup to create a planogram
Products are items like iPhones, iPad, and Accessories that can be placed in the Reseller Stores for merchandising purposes.
Visual Elements can be defined as anything that you want to include on a Fixture that is not a product. For example, a Graphic Panel or a 3D table surface is a visual element.
A Configuration is a collection of planograms that fit directly onto a Store Map. It is the tool that the user uses to tell the Stores which planograms belong in the store.
Visual Mockups
The Planogram application is an essential aspect of the merchandising workflow within this tool. Planograms are the areas of the store that are merchandised, so that will be the demo tables, demo counters, wall bays, and accessory fixtures.
Drag multiple kits to complete the planogram placements. Click Save to commit the changes to the system
Few Design Previews
Key Takeaways
Every new thing is learning. It was an interesting application, where I could work learn how the stores utilize this and rearrange the products based on the events. As part of this application, I made visits to local reseller stores to learn how the products are arranged and this helped me to visualize it while working on the app.