To redevelop the “Reports” page within Kroger’s internal Venus application to simplify its navigation and to reflect modern-day users’ needs without changing its structure to damage usability of experienced users.
This required using extensive information architecture and tracking design trends to inform updated design and functionality decisions. Ultimately, the strongest two iterations were presented to stakeholders and users to conduct concept testing and to gather feedback.
Due to a current merger/acquisition, I'm unable to share much of my work, as it involves confidential Kroger data. However, I’d be happy to schedule a virtual or in-person meeting to discuss my involvement in more detail.
Kroger Technology & Digital
Product Design Intern
Product Design
2024
Merchandising Experience - Items & Assortment
This information architecture outlines the original structure of the “Reports” page, identifying key areas for improvement and opportunities to enhance the Kroger user experience. Each page is color-coded for clarity with yellow representing parent pages, blue representing report pages, red highlighting missing links, and pink indicating miscellaneous errors.
Feel free to explore the information architecture in the interactive space below.
Every list entry is accompanied by an icon, making no distinction between direct report links and those leading to a parent screen with more report options. This forces users, especially those unfamiliar with the software, to click multiple times to find a report, often unaware it's buried in subpages. A wrong selection means restarting the search, increasing user frustration and technology fatigue.
The current Venus application lacks consistent navigation, with “Back” buttons inconsistently applied across parent and report pages. This makes it difficult for users to move between specific landing pages efficiently. Instead, they often have to use the main navigation's "Reports" button, which redirects them back to the "Reports" homepage, disrupting the user’s workflow.
Most parent or landing pages within the “Reports” category only utilize a single column, leaving around 75% of the screen empty. Only the actual report display pages make use of more screen space, with some only using half. This inefficient use of real estate adds to the complexity and difficulty of navigating each page effectively.
The main Kroger website navigation uses a “drawers” or “tabs” format to organize different store departments and create the opportunity for sub-categories within each subsequent column, or “drawer.”
The New York Times website divides its navigation into the different sections of a newspaper, with each section divided into an expanded view, meaning users can see every possible option per category, per section.
The accordions concept utilizes more of the vertical space to show expansion within each parent page, indicated by a carrot icon, and keeps true to the original format of the “Reports” page. After being shown to stakeholders, this concept was decided to be too confusing to sort through since the screen could only handle a limited number of entries before they roll off the screen.
The tabular, or drawers, concept utilized both the vertical and horizontal screen space, dividing each sub-page into a different column as users navigate further into categories. This concept uses carrot icons to indicate the difference between report and parent pages and guides the user to move to the next column. Following stakeholder interactions, this concept ended up being the preferred one due to its use of space and consistency with other Kroger products.
