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.
Project Overview
The project aimed to redesign the product catalog page of Avaya Store to shift from a tree-list structure to a card-based layout. The goal was to enhance product discoverability, reduce search time, and improve overall user experience.
DURATION
DURATION
November 2023 — April 2024
ROLE
ROLE
Lead UX Designer
ACTIVITIES
ACTIVITIES
Concept Sketching, Wireframing, High-Fidelity Mockups, Design System
TOOLS
TOOLS
Figma
Problem
The existing Avaya Store product catalog page was based on a tree-list structure, leading to low product discoverability and long search times, making the process challenging for seasoned users to efficiently navigate and discover products.
Solution
Redesign product catalog page to a Card-Based Layout, while adhering to Avaya Web Brand Guidelines introduced in 2023.
Design Process
Discover
Self-Ethnography Usability Testing
I conducted a self-ethnographic usability test with a customer who utilizes the Avaya Store Application to define usability flaws and areas of improvement of the product catalog landing page.
Page Layout
The tree-structure layout is not visually appealing and requires the user the scroll down to view all the products, which negatively impacts engagement.
No Search Bar
There is no search bar to easily search for one product, leading to an increase in search time and inefficiency.
Cluttered Cart Summary
The Quote Summary to the right of the screen lists high-level information needed for the cart summary. The visual display of this information is not uniform, 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.
Tasks Explained
Validation Piece: A key task of this process is to validate the account information with an opportunity number, which is generated prior to 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 address the user pain points discovered in the previous phase such as the lack of a search bar and filter by tags for efficient product discoverability. I focused my sketching on 3 areas: page layout, card design, and cart summary.
As for the card itself, I delved into 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 May Not be Feasible
The " + " button may not be approved by brand because it is not in the component library.
Screen Wireframes
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 Window
Product Added to Cart: Non-compatible products are disabled
Clickable Prototype
Takeaways
I learned the importance of receiving feedback from product teams 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, facilitating an agile work process.
Page updated
Google Sites
Report abuse