Screen Shot 2019-07-19 at 2.24.52 PM.png

BEVERAGE COMPANY CATALOG REDESIGN

 

BEVERAGE DIGITAL CATALOG REDESIGN

Team:  |  Duration: 6 weeks  | Read time: 10 min. 

*Since this is a confidential client project, information put on here is brief and occasionally blurred out. Connect with me to know more in detail!

 
 
image.png
 
 

THE PROBLEM

The platform had been built and enhanced over time by a technology provider that did not specialize in platform development.  As a result, the experience was “clunky” and felt outdated. The objective of this project scope was to refresh the website user experience in order to:

  • Design a more streamlined shopping experience for catalog users

  • Improve functionality, taxonomy, site architecture and content organization

  • Create visual hierarchy by updating current look and feel

  • Reduce need for extensive training

 

THE PROCESS

Role

I was the lead UX Designer on this project and my role involved stakeholder interviews, brainstorming, sketching, user interviews and wire framing whilst collaborating closely with our UX Director, Project Manager, Visual Designer and client team. 

 

Discovery

Stakeholder Interviews and Existing User Research

Key problem areas identified:

Search and filtering functionality: Looking for a more streamlined search capability to enable users to find the merchandising materials they are looking for quickly and more efficiently.

Landing page updates: Needed to leverage the real estate on the page to: 1. Highlight high priority items for purchase 2. Direct users to other areas of the site if needed 3. Be cleaner and less cluttered .

Order process flow: Navigation needed to be updated to help make it more clear to the end user what the next step is in the process. 

Registration look and feel: Needed a more streamlined look and feel to enable users to understand what fields are required and why and create a consistent and look and feel with the site.

Shopping cart experience and look & feel: Needed a more streamlined experience and an easier way to input key and required information.

User feedback and ratings capabilities: Ability for users to provide feedback and reviews on purchased merch materials. 


Old landing page

Old landing page

 
Old shopping cart and checkout process

Old shopping cart and checkout process

 
Old product list page

Old product list page

Backlog and Sprints

I worked with our Project Manager to create a backlog of deliverables based on priority as per user needs and effort required to implement them. We began by listing out the different overarching elements such as Landing Page, Shopping Cart Experience, Checkout Process, Browsing & Searching etc.. Following that, we identified features within each and then assigned a number to each element. This helped us define 6 sprints from start until final delivery.

 

Sprint 1

  • We reviewed the existing backlog and reprioritized and refined to focus on high value features and functions first

  • We began discovery around browsing and searching for products and developed conceptual wireframes to optimize

  • Some important things to incorporate here based on user data included: Easy ways to filter, making it simpler to add items to cart, identifying new items, making search smart and easy providing multiple views, recommending items and personalizing the system

 
Wireframes for Sprint 1: Discovery related to browsing and searching

Wireframes for Sprint 1: Discovery related to browsing and searching

 
 

Sprint 2

  • Gather feedback from clients and stakeholders for iteration of Sprint 1

  • We began discovery around account management functions and develop conceptual wireframes to optimize

  • Worked with the Visual Designer to develop designs around browsing and searching functions based on feedback from Sprint 1 demo

  • Some important things to incorporate based on user feedback were making the registration process more intuitive, indicating system visibility status and reducing the number of steps

 
Wireframes for Sprint 2: Account Management, registration, login

Wireframes for Sprint 2: Account Management, registration, login

Some of the visuals created for the Sprint 1 wireframes

Some of the visuals created for the Sprint 1 wireframes

 
 

Sprint 3  

  • Gather feedback from clients and stakeholders for iteration of Sprint 2

  • Finalize designs for browsing and searching functions and develop mobile views

  • Develop designs for home page

  • Develop wires for shopping cart functions

  • Some important considerations based on user feedback were allowing users to easily edit their shopping carts, providing exit strategies, personalizing the ordering process

 
Some of the shopping cart wireframes created for Sprint 3

Some of the shopping cart wireframes created for Sprint 3

 
 
 
Some of the visuals created for mobile views, home page and filter/browsing

Some of the visuals created for mobile views, home page and filter/browsing

 
 

Continued until Sprint 6

  • We followed this agile process in which we created wireframes and associated visuals based on features identified from user research, presented those deliverables to our clients and stakeholders and iterated using the feedback until we completed our entire backlog. Following this, for our final sprint (Sprint 6), we tested our designs with 4 super users.

 

Super user feedback

I interviewed 4 participants who have interacted with Coke Catalog in some capacity and are familiar with the interface. They interview was semi-structured in nature with certain benchmark tasks and open-ended questions that helped us understand whether they were able to navigate the interface and what items were of priority to them.

Highlights include:

  • Search needs to be one of the most prominent features as it is the primary tool used by users to find what they need

  • Order deadlines are of importance and need to be highlighted, as purchasing decisions are often made based on deadlines

  • Recommending what to buy based on past activity received less importance as most people said they would not use the feature

  • New filter criteria surfaced such as “Filter by: In Stock”

  • Minor information hierarchy changes such as moving up certain elements to make them more prominent

 

Final designs

After synthesizing user feedback and collaborating with our client team to review any further feedback, we incorporated updates and delivered desktop and mobile designs for everything in our backlog.

 
Screen Shot 2019-07-19 at 2.09.40 PM.png
 
 

FINAL THOUGHTS

  • Given the quick timeframe and the large number of revisions, working in a highly collaborative and agile manner worked very well in our favor

  • Involving the client right from the beginning was extremely beneficial because they felt like they were part of the process and it helped build lasting relations