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)

Key skills, tools & methods

Part 1- Challenge: Make analytics tagging easy

• Create analytics processes (tag/ bugs/ reporting) for Kroger. Create documentation & intake for these processes

• Simplify the process = improve speed to usability

• Create a MVP portal for Behavioral Data & Analytics (BDA)

• Interview users to create personas & understand needs / painpoints

Part 1 - Make analytics tagging easy

Where Behavioral Data & Analytics (BDA) Started

BACKGROUND

• Previous documentation was located on internal confluence pages making it hard to find

• Request form was a word document that was copied & pasted in an email

CHALLENGE / THE WHY

When I was brought onto the team, there wasn’t time for research / discovery. We started with an MVP to get users access to fundamental services. Post MVP we used continuous discovery, research and testing to understand our users and become more user centric.

• Stop the bleeding. Break things & learn from the results

• Quick MVP focused on highlighting new requests forms & documentation

Create Official Documentation & Request for Analytics Tagging

WHO

• Documentation & request forms were created and documented by product team (analysts, PM, and myself).

WHY / CHALLENGE

• Formalize process. Keep users and stakeholders close to the process

• Create accountability, ownership & governance

• Create a way for product teams to ask for support

• Gather objectives, goals and metrics from requests to ensure valuable data

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 participates, 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.

Insights from Usability Test

Use left and right arrows to see all 5 insights

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

Customization

Simplifying the landing page for easy access to most used tools

WHY

• Customization to improve findability & efficiency

Responsiveness

Establishing a hamburger menu & side panel navigation for tablet & mobile

WHY

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

Results

Ultimately, concept 1 using progressive disclosure was selected because it limited the options that were visible & made it less overwhelming for the user based on a simple internal concept test

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.