Building a website: Kroger Data & Analytics

Strategy, research, leadership, influence, solutions, collaboration, visual design

• Client: Kroger product teams

• Role: Senior product designer

• Worked collaboratively with product manager, software engineers, analysts and users (product teams)

Part 1 - Make analytics tagging easy

Where Behavioral Data & Analytics (BDA) Started

BACKGROUND

• Current state had rudimentary requests (email) and documentation (confluence)

• MVP needed to give product teams access to information quickly. Further improvements and iterations were made after MVP

Documented process flows and request forms

• Wireframes and multiple workshops

• Flow diagram gives an overview of the process

• Step-by-step instructions are numbered and categorized by team

• UX writing for CTA, tooltips, flow and errors

• Used Kroger design system components

• Accessibility (grouping common fields / using labels / helpful errors etc.)

Card Sorting / Ranking

Towards a more user centric information architecture

WHY

• How Might services / tools be categorized for improved findability

• How Might We balance our current analytics tagging customers vs our new self-serve in terms of hierarchy and importance?

• What AE features and services are most important to our customers?

• What topics / categories are we missing?

Card Sort Findings

IMPACT- 3 ways it was beneficial

1. Card sorting / ranking informed our site architecture

2. Broken down by role, tool importance was used on personas

3. Qualitative Data was the start of "teams cards" on landing page

Analytics Interviews & Proto-Personas

A step towards a more user centric information architecture

WHY

• To understand our users (PM’s, analysts, developers)

• To develop proto-personas

• To understand processes and issues

• To understand analytics teams and their services

Behavior Analytics Proto-Personas

IMPACT

The creation of proto-personas* allowed the team to have a collective frame to look through when thinking of opportunities (needs, pain points & challenges). Specifically, what are their needs, their goals and pain points so that we can try and address them

*Called proto-personas because of the number of the number of interviews & the need to continuously update as our team learns new information

Part 2 - Expand scope & improve central hub

TURNING POINT

Analytics Enablement was combined with other data & analytics teams & was no longer focusing only on BDA. Our work up to this point was focused on Behavioral Data & Analytics. We were no longer focused on improving & documenting processes, but focused on creating a portal that is a central hub for all things data & analytics. We interviewed the added teams and their customers and expanded our scope. This meant that the simple navigation would no longer work because we needed to expand services and access to those services.

VISION

Transform how customers discover and engage with Data & Analytics Platforms teams, services, and tools. By providing a seamless and intuitive experience, we empower customers to quickly find the right DAAP capability or team to address their need, and increasingly self-serve, while setting standardization and best practices for customer-facing documentation across DAAP teams

Landing Page Refresh Iterations

WHY

Iterate on the interface design based on analytics tools & services used most based off of card sorting

IMPACT

• Added one line descriptions for better findability for highly technical services

• Menu expands on hover; quickly giving a full view of services

• Added a “Getting Started” flow on the landing page

Revised Navigation Informed by Tree Test

WHAT

• Flat navigation with 3 levels (Main / Sub / Links)

• Background highlight & bold text on hover

• Icons & descriptions for accessibility & findability

Advanced Usability Study (Navigation)

WHY

• Test the navigation: understand both strengths & areas of improvement

HOW

• 17 internal participants

• Unmoderated Userzoom Tree Test (12 tasks)

• When asked to complete a task, users had to click on the correct link

• Users shared the screen when completing the tasks and were asked to talk out loud about the things that were beneficial or challenging

• Emailed to participants, posted in several analytics team chats, mentioned in demo meetings

CHALLENGE:
Internal feedback and participation in studies has been consistently low and has been a challenge for the team. In order to overcome this challenge, we used external participants (consumer segment in Userzoom) to test the usability of the navigation. While this approach has both pros and cons, the insights and feedback we received was valuable and led to usability & findability improvements.

OVERALL RESULTS

NEXT STEPS

1. Rename defects to bugs

2. Reorganize information to put the most important & widely used services to the left for each menu

3. Simplify support 

4. Consider new category names for “manage” & “govern”

5. Continue to iterate based on customer needs & expansion of DAAP

Expand scope and improve central hub

Post MVP

Post MVP expanded beyond the initial audience and scope. It’s focus was adding a new landing page, new services, resources, pages, mega-menu and making the site responsive.

Site refresh

• Wireframe and mockup iterations based on expanded scope

Impact

• The portal now showcases all data and analytics resources and services

Background

The portal is mostly used on the web; however, the portal needed to be responsive so that the window can be minimized to view screens side-by-side mainly for documentation purposes

Responsiveness

• Progressive disclosure limited the navigation options that were visible, which made it less overwhelming for the user based on a simple internal concept test

•  Mobile and tablet breaking points

Conclusion

Building a website requires continuous discovery, iteration, testing and collaboration with stakeholders. As a product designer I was consistently met with the challenge to meet and balance both user needs and business requirements. With each and every method and test, I had to show the value that each concept, iteration or test brought to the project. Both soft and hard skills were used to move the project forward and to strive to meet users needs. This website created impact to product teams by improving access to data & analytics & data services, increasing findability to resources and documentation, and becoming the source for all data & analytics needs at Kroger.