Avaya Store Redesign
Avaya Store Redesign
Implementing Card-Based Navigational Design for a Better User Experience
Embedded Files
About Avaya
Avaya offers SaaS products ranging from cloud communications to collaboration services. The Avaya Store Application facilitates the sale of these cloud-based solutions to businesses (B2B).
Project Overview
The goal of this project was to redesign Avaya Store's product catalog page of, shifting away from a tree-list structure to a card-based layout. The goal was to enhance product discoverability, reduce users' search time, and improve overall usability.
DURATION
DURATION
November 2023 — April 2024
ROLE
ROLE
Lead UX Designer
ACTIVITIES
ACTIVITIES
Concept Sketching, Wireframing, High-Fidelity Mockups, Design Systems
TOOLS
TOOLS
Figma
Problem
The existing Avaya Store product catalog page was designed using a tree-list structure, leading to low product discoverability due to buried content and long search times, making the process challenging for seasoned users to efficiently navigate the application.
Solution
Redesign product catalog page to a Card-Based Layout, while adhering to newly introduced Web Brand Guidelines.
My Design Process
Discover
Self-Ethnography Usability Testing
I conducted a self-ethnographic usability test with a seasoned user who utilized the Avaya Store Application. This helped me define usability flaws and areas of improvement of the product catalog landing page.
Pain Point #1: Rigid Information Hierarchy
The complexity of the tree-structure layout created navigational difficulties, leading to scrolling fatigue and difficulty with discoverability.
Pain Point #2: No Universal Search
The lack of a search functionality increased manual work load on users to find a product, leading to an increase in cognitive load and frustration.
Pain Point #3: Cluttered Cart View
The Quote Summary to the right of the page had a complex hierarchy, creating room for confusion.
Define
User Personas
The users that use this application are very well-seasoned and know the ins and outs of the app. These users range from Avaya Sales Representatives to Partner Companies or Distributors who are looking to get a quote (cost estimation) of a certain Avaya product. These users are registered through Avaya.
Task Analysis
To understand the user journey and task flow of the application, I worked alongside internal stakeholders who outlined the series of tasks required to get to the end goal — creating a quote.
Design
Concept Sketching
To ideate the potential look and feel of the interface, I engaged in sketch ideation to brainstorm new features that addressed users' pain points discovered in the previous phase. I focused my sketching on 3 areas: page layout, card design, and cart summary.
As for the card itself, I delved into a thorough analysis of the card anatomy, making sure to include high-level information with contrasting labels, buttons, and potential imagery.
Low-Fidelity Wireframing
Following the sketch ideation phase, I created low-fidelity wireframes, starting with the card. I wanted to get an idea of what the card itself would look like before beginning wireframes of the screen. I proposed my recommendations to my team, which consisted of developers, product managers, and product marketers.
Feedback
Button style does not adhere to Design System's guidelines
While the " + " button was an intuitive visualization for the primary action, its style did not adhere to the existing design system guidelines. I pivoted after receving this feedback, and proposed a solution that met DS guidelines.
I moved on to designing wireframes of the product catalog page screen. My focus with Sprint 1 was on the following areas: page layout, filter by feature, and cart summary card.
Sprint 1
Product Catalog Page
Areas of Improvement Based on Feedback
Maximize Screen Space
Technical constraint: The Cart Summary Card is a specific pixel size that cannot be changed. But, it can be removed. This may help with minimizing negative space.
Filter Tags are Good
The goal is to shift the content hierarchy up, which minimizes scrolling. So, the tags are a better filter by feature than the checkbox list filter.
Logos / Imagery on Cards May Not Be Feasible
technical constraint: can opt for svg logos, but some products may not have logos.
Sprint 2
The focus of Sprint 2 was to further refine the Cart Summary Card and Filter By Tags. After receiving feedback on the cart summary card, I decided to change the static Cart Summary Card to a collapsible Cart Summary Card. This addresses the issue of minimizing negative, as noted in the previous sprint.
Cart Summary Card
Filter By Tags
I ideated different filtering practices with the focus of enhancing product discoverability, and ensuring that the new feature is not confusing nor complicated for the user.
Sprint 3
The goals of Sprint 3 were:
Implement 'Edit Account Information' button into Product Catalog Page
Integrate Collapsible Cart Summary Card
Further Refine Card Design
Areas of Improvement Based on Feedback
Change "Edit Account Information" Button into a Text Button
Text buttons allow for increased visibility on what the purpose of the button is in relation to the user tasks.
Static Cart Summary Card
After thorough discussion with developers regarding the feasibility of a collapsible Cart Summary Card, we decided to revert back to the static card. Due to technical limitations, collapsible card would increase development time, drastically decreasing product rollout initiative.
Horizontal-Card Design
In order to maximize screen space and minimize scrolling time, I suggested changing the cards to be more horizontal in width.
Disable Non-Compatible Products
Once a product has been added to the cart, products that are not compatible with selected product should be disabled.
Include "Partner Information"
This is a key component to the user task flow.
Based on the iterative feedback, I created a final wireframe before getting into high-fidelity mockups.
Final Wireframe
Areas of Improvement Based on Feedback
Checkmark Indication
If a product has been added to the cart, then include a checkmark on the top left corner of the card.
Integrate Validation Piece Above Cart
For increased visibility, the best location to have the Validation search bar is above the cart, and below the partner information.
Develop
High-Fidelity Mockups
Following the wireframing phase, I created high-fidelity mockups while adhering to the new Avaya Web Brand Guidelines introduced in 2023.
Final Card Design
Key Screens Mockups
Product Catalog Page with Validation Piece above Cart Summary
Edit Account Information Modal
Product Added to Cart: Non-compatible products are disabled
Clickable Prototype
Takeaways
I learned the importance of receiving feedback from cross-funcational partners, including developers and product managers to ensure that technical requirements are met while adhering to the brand component guidelines. This allowed room for constant refinement of designs based on iterative feedback.
Page updated
Google Sites
Report abuse