Retail Planogram App (redesign)
Overview
The planogram software is a tool designed to streamline store layout management by offering an intuitive platform for organizing product placements. It bridges the gap between corporate guidelines and in-store realities. Drawing from my experiences in retail, the software aims to simplify the planning process for store associates. By observing how coworkers used the old method, the software incorporates features that prioritize ease of use and operational efficiency.
Team
Sole Designer
Responsibilities
User Research
Wireframing/Prototyping
UX/UI Design
Usability Testing
Duration
June 2022 - July 2024
Problem
The current process is weighed down by a cumbersome workflow and a reliance on paper that feels out of sync with a modern store. Between the outdated layouts and a navigation path buried deep in the internal site, the system creates constant friction. These hurdles don’t just slow down productivity; they make the daily tasks of a retail associate feel far more frustrating than they should be.
Solution
This digital solution is designed to bridge the gap between corporate planning and the physical realities of the retail floor. By replacing a cumbersome manual process with a streamlined digital workflow, the platform utilizes machine learning to dynamically align layouts with real-time inventory and store dimensions. This transition eliminates the friction of paper-based tracking, ensuring that associates spend less time on administrative overhead and more on high-value store operations. By alleviating budgeted labor hours, the design allows teams to shift their focus from navigating complex systems to better serving their customers.
Design Process
The process began by observing how associates managed floor resets, which revealed that existing digital tools were too disconnected from the physical store layout. I moved quickly into prototyping to explore how a digitized workflow could replace the heavy reliance on manual data entry and paper-based tracking. This iterative testing led to a responsive interface that prioritizes automated inventory alignment, turning a once-cumbersome task into an effortless part of the associate's day.
Observation Insights
The process began by observing how associates managed floor resets, which revealed that existing digital tools were too disconnected from the physical store layout. I transitioned quickly into prototyping a digitized workflow that prioritizes automated inventory alignment, turning a once-cumbersome task into an effortless part of the associate’s day.
Competitive Analysis
To better understand the current landscape, I researched planogram apps used by leading companies, though the audit was limited by "request a demo" barriers common in the industry. Despite these constraints, the exploration provided enough insight into industry standards to ensure the final design was informed by established features while remaining focused on solving specific retail floor disconnects.
Design System
The design system utilizes a cohesive library of components and interactions to bridge the gap between corporate planning and the physical retail environment. This foundation ensures a visually consistent and accessible interface that remains intuitive for associates, providing a reliable experience that scales seamlessly across different store volumes.
How Might We
Drawing from my direct observations of associates navigating the existing workflow, I identified the specific pain points and friction that hindered their daily tasks. By applying the "How Might We" method, I reframed these operational challenges into actionable design opportunities, ensuring every feature directly addressed the need for a more intuitive and efficient retail experience.
User Flow
Due to the deep interwoven complexity of the project, I created a user flow to ensure every interaction was properly mapped and prototyped. This process allowed me to refine the structure, confirm feasibility, and maintain a cohesive experience.
Low-Fidelity Prototype
I created a low-fidelity prototype to pinpoint the core screens that would anchor the design. This helped establish the main user flows early on, ensuring a solid framework to refine interactions and gather meaningful feedback.
Usability Study
The study prioritized participants with prior or current retail experience, as this foundational industry knowledge was a prerequisite for providing relevant, high-quality feedback. Through multiple testing rounds, I analyzed how these professionals navigated key features to identify specific friction points and refine the experience based on their practical, real-world insights.
Design Iteration
Direct feedback from associates ensured the interface aligned with the reality of daily store operations. By refining the layout based on their firsthand experience, I realigned the design to better support the unique demands of a retail workflow.
Direct Interaction: To address confusion regarding a hidden products side-sheet and a cumbersome drag-and-drop feature, I integrated the product cards directly onto the virtual shelf. By adding a clarifying dialog box and a hover-and-tap mechanism, I simplified the placement process and significantly improved overall usability.
Visual Distinction: After testing revealed that uniform keylines for icon placeholders caused user confusion, I implemented distinct icons to clearly represent each application's specific function. This change improved tap accuracy and ensures users can quickly identify and select the correct tool within a fast-paced environment.
Mental Model Alignment: User confusion arose when a "chat" icon was used for deadlines, so I replaced it with a calendar icon to better align with user expectations for task-based notifications. Additionally, I added dot indicators to the notification boxes to clearly differentiate between read and unread items, enhancing visual clarity and streamlining task tracking.
Final Design
Accessibility Considerations
Color vision deficiency: The app employs a high-contrast color palette to differentiate departments effectively. The design considers common color vision deficiencies, such as red-green and blue-yellow, by using distinct colors, patterns, and labels. This ensures an accessible and intuitive experience for all users.
Landmarks: The app leverages familiar structural landmarks to create an intuitive user experience. By mirroring layouts users frequently encounter, navigation feels natural and effortless. This approach reduces the learning curve and enhances usability.
Dialog boxes: The app utilizes intuitive dialog overlays that align with platform standards to ensure a predictable experience for all users. By adhering to these established patterns, the design maintains compatibility with assistive technologies and allows users to respond to prompts without unnecessary friction.
What I Learned
This project reinforced the importance of designing for a diverse range of users, from management to temporary staff. I learned that balancing simplicity with functionality is crucial to ensuring accessibility across different skill levels. Great design isn’t just about aesthetics—it’s about making technology intuitive and effortless for everyone.
Next Steps
