Led the design for Web Override Notes, improving visibility and documentation for managing e-commerce products at Kroger
Role
Product Designer
Team
I collaborated with one Product Manager, one Scrum Masters, two Quality Engineers, and 7 Software Engineers who were divided between the United States and India.
Timeline
10 weeks to design, develop, and launch
Problem
Lack of reason codes and ability to add additional notes and context, led to poor documentation and visibility when editing the e-commerce sellable status of an item.
Key Activities
User research, wireframing, prototyping, UI design, usability testing, product release
Outcome
I lead and designed the Notes Feature when creating add overrides to give more control and visibility to Kroger Digital Merchandisers when managing their e-commerce sellable status of an unplanned item.
Creating a new notes feature can be found directly on the Add Overrides page.
Notes can be viewed in the table via notes symbols. Users can also add a note through the link in the table as well.
Notes are accessed and managed through the side panel.
Users are able to edit a note via edit modal.
Background & Context
Kroger’s Digital Merchandisers make over 500 updates per month on their products and items, which can lead to confusion and redundant work if the changes were not documented properly.
This gap in highlights a critical need: enable users a way to provide more detailed information when creating an override. This will help bring clarity and reduce guesswork for everyone who uses Switchboard to manage and understand their products.
Ideation & Concept Development
I worked with various designers to align and establish a consistence experience between our tool.
I collaborated with designers from my pillar to learn and understand how other Kroger merchandising tools handle annotations and notes.
I also connected with designers of products that share Switchboard’s user base to ensure a seamless and consistent experience between the tools.
Potential User Flows
I also mapped out flows to illustrate the steps a user would take to accomplish the different tasks involved with Override Notes (creating, viewing, editing, deleting).
Wireframes and Mock ups
I drafted low-fidelity wireframes to visualize where and how the notes functionality will appear within the current interface.
Testing
& Iterating
I used low-fidelity wireframes for user testing and the feedback and notes from my observations were used for design iterations.
Updating notes symbol and table position
Users said showing the contents of the note would be too long and take up valuable real estate in the table. In order to save space and increase visual clarity, I updated the notes column to use an icon instead.
I also shifted the notes to be at the end (right) of the table as it serves as supplementary data while the columns before it are more primary to the users workflow.
Updating Notes details page from modal to side bar.
After sharing my early designs others designers from my pillar, I learned that many of their tools utilize the side bar when display details and additional information. In order to keep a more consistent experience for our users between the various tools and products they use as Kroger, I also decided to implement a side bar for displaying notes.
Final Designs & Results
Here are the final designs that were released in Switchboard.
The result was a simple yet powerful solution that empowered Kroger’s Digital Merchandisers to better oversee and manage the e-commerce sellable status of unplanned items."
After one month of production:
48,112 web overrides with notes were created
Notes feature was adopted by 62% of users
Next steps:
Our team was excited to see the success of this feature enhancement release to our users! Some future roadmap items that we brainstormed to continue building onto the Notes feature are
Currently, Notes are available for Web Overrides, which manage products at an item level. Our roadmap includes expanding this capability to allow users managing products at a category level to create notes for their workflows as well.
With the current release, only one note can be taken and recorded at a time. We aim to enhance this functionality by evolving the notes feature into a commenting system, enabling users to engage in back-and-forth communication.