So what's the problem?
TL;DR
The inventory feature, specifically the screen for adding and/or creating an item was cluttered and difficult to navigate, with all item fields displayed in a single, unstructured block, and multiple critical features were hidden behind an ellipsis menu in the main inventory table. This led to a confusing experience for users and made data entry inefficient.
Existing add/edit item screen
❌ No grouping or prioritisation of fields
❌ Illogical use of components: dropdown and segment controls
❌ Cognitive overload
❌ Hard to scan quickly
Item in a bundle:
Default state for a regular item:
Functionalities hidden in the inventory table
❌ Important features like advanced pricelist, item log, and serial numbers are hidden from the user behind an ellipsis menu
THE OBJECTIVES
Bringing structure with user-centred design
Redesign the item creation screen to support better usability by reorganising all input fields into a clear, logical structure. This includes:
-
Introducing sections and tabs to group related fields,
-
Prioritising core information,
-
Reduced visual noise by grouping fields, creating a more predictable and task-focused flow,
-
Reducing flow interruptions such as when creating an item bundle and adding additional fields (product tags)
-
Including functions like the advanced pricelist, item history (log), warehouse management, and serial number management in the main item page.
The new structure also needed to remain flexible enough to accommodate additional features - such as item variants - in future development.
MAPPING THE CURRENT FLOWS AND SCREEN
The user flows
There are three main ways users add items to inventory:
-
Adding an item for sale – requires entering the item name, selling price, and quantity
-
Creating a bundled item – a composite product made up of other inventory items
-
Filling out the form completely – entering all available item details
Each of these flows currently presents usability challenges:
-
To add an item for sale, users must navigate a cluttered layout and locate scattered fields.
-
When creating a bundle, the flow is interrupted mid-task to manage sub-items, breaking focus.
-
Adding details like manufacturer or unit type requires leaving the form entirely, disrupting continuity.
User navigation for Flow 1: the example below illustrates how the first flow unfolds: even for a basic item, users must jump between loosely connected fields and interface elements. The lack of structure makes even simple data entry cumbersome.
Understanding the current structure
To better understand these breakdowns, I outlined the screen’s information architecture. This exercise revealed minimal hierarchy, poor categorisation, and an overall lack of logical grouping - factors that contribute to a confusing and inefficient user experience.
Conclusion
After mapping the flows and IA, four main structural problems emerged:
-
Scattered related fields - e.g. selling price and VAT-exclusive price were placed far apart, complicating basic data entry.
-
Fragmented interactions - key actions like bundling or tagging forced users to detour mid-task.
-
Lack of meaningful categorisation – most fields were presented in a flat structure with no clear grouping by context (e.g. pricing, inventory, logistics).
-
Inconsistent component usage – UI elements were misapplied, such as using a segment for item status but a dropdown for bundle type, breaking interface logic.
RESEARCHING USABILITY PATTERNS
Competitor analysis
Before I started reorganising the flow, I wanted to do a quick check of other popular inventory management platforms in order to understand the industry standards and best practices.
I looked at Shopify and Woocommerce, as we have integrations with these two platforms, as well as Zoho and Hike due to them being popular options both locally and internationally.
Conclusion
After examining how these platforms organise their structures, these are the patterns that emerged:
-
Common sections included item information, pricing, inventory, warehouses, and shipping
-
Categorisation tags were often in a seperate tab or side section
-
Most platforms had an "advanced" section for their tiered inventory features
I used these patterns when going forward with the restructuring process in the next sections.
RESTRUCTURING WITH CARD SORTING
What did I do?
I used cardsorting in order to help me restructure the add/edit item screen. Before designing wireframes, I wanted to have a clear idea of how the hierarchy and the screen would look. There were three rounds of card sorting by the end, each one tackling the best practices that I found through the research in the previous section.
Round 1: lacked hierarchy
✅ Helped establish a general sense of the attribute categories
❌ Lacks clear organisation and doesn't provide enough structure for efficient navigation
Round 2: too many tabs
Note: Attributes that have been moved from their original locations (as seen in the first image) are highlighted in dark blue.
✅ Adding extra tabs like Pricing, Inventory + Warehouse, Additional Details, and Log introduced clearer grouping and improved organisation
❌ Some tabs only contain a single section, making the layout and flow feel unecessarily complex
Round: 3: reduced tabs, prioritised essentials upfront
✅ Required fields such as price, cost, and quantity are in the first tab so the user is ablet o fill out all essential information without changing tabs
✅ Advanced inventory attribute are sorted into their own tab
Conclusion
With each sorting, I refined the categorisation to strike a balance between clarity and efficiency. While the first version lacked structure, the second introduced too many tabs, creating unnecessary complexity. The third and final structure prioritises essential fields by placing them upfront, while supporting information is grouped logically within fewer, more meaningful sections.
Below is the resulting information architecture of the screen.
REFINING THE EXISTING COMPONENTS
Iterating on what's already there
Before diving into the final designs, I revisited existing components that were causing friction in the item creation flow. Rather than starting from scratch, I focused on refining what already existed - identifying misused patterns, unclear copy, and inefficient workflows, and reshaping them into more intuitive, task-aligned elements. These component-level adjustments laid the foundation for a smoother, more user-friendly experience
Existing component: sale status
Before: segment control
❌ illogical use of a segment for an activation function
❌ Unclear copy
After: toggle
✅ Replaced the dropdown with a toggle to clearly indicate bundle activation status, following component logic standards
✅ Rewrote labels and tooltips to align with user expectations and improve field comprehension
Existing component: additional fields
Before: regular dropdowns
❌ Fields provided limitations due to not being able to create a new attribute from this screen - user needed to enter the inventory settings to create manufacturers, types, measurement units, and conditions.
❌ Imprinted number is out of place here; it should be in the Inventory section
After: dropdowns with a quick add function
✅ Eliminated unnecessary navigation steps by allowing attribute creation in-context, keeping users within the item flow
✅ All attributes correctly sorted under a new name (product tags) with UX copy explaining their purpose
Conclusion
These small tweaks and changes made to the existing components refined component behaviour and field placement streamlined the flow, reducing friction during item creation.
The updated design of the bundle item table and product tags saves the user multiple clicks and from interrupting the add/edit item flow.
FINAL DESIGNS
Objective: Clear structure through tabs and sections
Before
❌ All fields were crammed into one long, chaotic screen with no grouping
Now
💡 Pain point addressed: A flat layout failed to reflect logical groupings like pricing, inventory, or logistics, making the interface harder to reason through
✅ Design execution: Introduced tabs (Item details, Advanced inventory, and Item log) and grouped related fields into sections to reduce cognitive load and support intuitive navigation
Objective: Clearer, smoother item bundle creation
Before
❌ A dropdown was used to define bundle status (instead of a toggle), and the bundle table was visually disconnected with no inline edit/delete - causing confusion and breaking flow
Now
💡 Pain point addressed: The original layout placed related actions (activating and editing bundles) far apart, disrupting task flow
✅ Design execution: Replaced the dropdown with a toggle to clearly activate bundle status, placed it near the table, and added inline editing, quantity counters, and price columns for a clean, uninterrupted setup experience
Objective: Advanced pricing made accessible and actionable
Before
❌ Advanced pricelist was hidden behind an ellipsis menu in the inventory table, with pricing rules buried in a modal and prone to system errors
❌ The system’s pricing logic was misaligned with the modal’s input behaviour (system allows to add either customer type OR customer), causing avoidable friction.
Now
💡 Pain point addressed: Hidden placement and modal limitations reduced the accessibility and usefulness of advanced pricing tools.
✅ Design execution: Integrated advanced pricing into a dedicated tab within the item page, redesigned the pricing modal to follow system logic, and made all active pricing rules visible and editable on the screen
Objective: Placing the item log into the screen for clarity and efficiency
Before
❌ The item log was hidden behind an ellipsis menu and displayed in a scattered, difficult-to-read layout
Now
💡 Pain point addressed: The lack of a dedicated space for inventory history interrupted the user's flow
✅ Design execution: Gave the item log its own tab with a clear table layout and consistent formatting, allowing users to view stock history at a glance without leaving the item page
CASE STUDY RETROSPECTIVE
Development and roadmap constraints
This redesign was originally planned at a much bigger scope than what it came out with. In the design process, I developed warehouse management, serial number management, and item variants, however due to a poorly planned roadmap and allocation of development resources, we were forced to stop at MVP level.
Hence this redesign heavily focused on restructuring the layout of the add/edit item screen, as well as making as many improvements as possible with the time and resources allocated.
1. Constraint: Development resources and poor roadmap management
Details: Several key inventory features couldn’t be implemented due to limited development resources and a lack of roadmap prioritisation. These included:
-
Serial numbers flow
-
Item variants
-
Category trees (identified as a need during POS redesign research)
Impact:
-
Without item variants, integration with platforms like Shopify and WooCommerce remains incomplete, limiting users' ability to manage inventory effectively.
-
A significant amount of design work is still sitting unused in the Figma file, which is frustrating—especially when those designs impact other parts of the system.
Future plan:
Product management needs to create clearer roadmaps and allocate development resources more effectively so that prioritised designs can make it to the end user.
2. Constraint: Lack of analytics and KPIs
Details: At the time of the redesign, we didn’t have the tools in place to track user activity across the system—such as how long it takes to create an item. There was also no process for defining or measuring KPIs.
Impact:
As a designer, working without even basic usage data is like flying blind. I had to rely on UX best practices, internal feedback, and design logic to guide my decisions, rather than insights based on real user behaviour.
Future plan:
Introduce analytics tools to track user behaviour within the system, and implement a process for defining and monitoring KPIs across projects.
Constraint | Details | Impact | Future plan |
|---|---|---|---|
Development resources and poor roadmap management | Multiple functions of the inventory were not able to be implemented due to not having enough development resources and roadmap prioritisation such as: 1. Serial numbers flow 2. Adding variants to the inventory 3. Adding category trees, despite the need being highlighted while researching the POS redesign | 1. Due to not implementing item variants, our inventory integration with Shopify and Woocommerce is not in proper sync, and this affects our users' ability to manage inventory properly. 2. A fair chunk of design work and flows are still sitting in the Figma graveyard, waiting for them to be implemented. While these things do happen, it's difficult for me to see the work that I developed (and that affect other parts of the system) go to waste. | Product management will need to make clearer roadmaps and allocate enough resources in order for designs to make their way to the end user. Features must be properly prioritised on the roadmap. |
Lack of analytics and KPIs | We do not have proper analytics in place to track users' activity across the system, and at the time of this redesign there was no process of adding and tracking KPIs for projects. | As a designer, working without knowing even the basic user analytics such as how long it takes to create an item from start to finish is like flying blind. I had to rely on UX best practices, internal feedback, and design logic to guide the redesign. | Apply analytics software to track user behaviour on the system, and implement the process of KPIs. |
Personal take aways
This redesign was challenging and rewarding in many ways, with the key takeaways being:
-
Letting go of perfection - not every design will make it to dev. This is a frustrating part of a designer's job however it is something that I cannot change - I must trust and rely that the product manager is making the right decisions with resource and time allocation.
-
Designing without data is challenging. I had to rely on UX best practices and industry benchmarks to make user-centred design decisions without analytics.
-
Information architecture and cardsorting are useful tools - not just for show. In this redesign I leaned heavily on these two tools in order to reorganise a complex interface.
COMING SOON: ITEM VARIANTS FOR FUTURE DEVELOPMENT
Coming soon: Laying the groundwork for better integration with Shopify and Woocommerce
While this function has not been pushed to dev, I designed a full item variants flow for the iCount advanced inventory. Here I will briefly show the research, flows, iterations, and final designs that will eventually improve our inventory's integration with Shopify and Woocommerce - so that our users can manage their inventory effectively.
ROLE
Lead designer
TEAM
Design manager, lead designer, QA, full-stack developer
TIMELINE
±1 month
SUMMARY
The add/create item flow in the iCount inventory was cluttered and difficult to navigate, with no discernable order or hierarchy in the page.
I led a UX redesign focused on creating visual and functional order through the use of clear sections and tabs.
Additionally, I designed a scalable flow for adding item variants, aimed at aligning with our integrations with Shopify and Woocommerce.
iCOUNT INVENTORY