ADI Global

ADI is the leading global wholesale distributor of security, AV and low-voltage products for licensed contractors.

Project Date: December 2022
Platform Web: Webapp
My Role: UI Designer
Design Tools: Sketch, Invision, figma, figjam, Zeplin, Paper

Deliverables UX: Findings interviews, Scenarios, User journey, Site map, user flow, persona, usability testing, wireframes, prototype Low & High Fidelity

Overview

Wish List is a feature inside ADI portal to manage product lists, add to cart , share with vendors, edit, copy and add products using predictive search, and export / import data from .cvs file

Project constrains

  • Users must be able to search and add products fast and easy
  • Users must be able to export and import product list in CVS format
  • Users must be able to manage product lists

Customer experience goals

  • Accelerate the creation of product lists with more accuracy
  • Reduce the gaps and dependencies of collecting data for product lists
  • Build flowchart, edit and expand them without having to write a line of code
  • Manage the access and creation of the products lists

What I did

  • Stakeholder interview
  • User interviews
  • Setting goals and objectives
  • Persona
  • Scenarios
  • User journey
  • Creating wireframes
  • Low fidelity prototypes
  • High fidelity prototypes
  • Interactive demo presentations
  • Competitive analysis

Discovery research / Findings

  • Users there is no way to create their product lists on the website
  • Users perform manual processes that take a long time and have dependencies to create a product list
  • Users send multiple emails to manage list privacy
  • Users call by phone an assistant to create their product list
  • Users need to send an email to request the creation of a product list
  • Important information is lost during the manual process
  • There is no repository to view all product listings related to a user
  • Delays in email requests to add products to existing product listings

Competitive analysis

Findings

I conducted a competitive analysis to methodically identify redundancies + opportunities. Our competitors had:

  • There are no options to upload files with data
  • The experience of adding products to the list is confusing
  • The interface design lacks a hierarchy of information and contrasts
  • The calls to actions to add products is confusing
  • Important user information is hidden
  • The path to follow is not very clear
  • No options to export product list

Affinity Diagram

Affinity diagram helps me to gather large amounts of data and organize them into groups and themes based on their relationships. This process is a good resource in order to group data gathered during research or ideas generated during Brainstorms

Synthesis

Having our research and information i synthesized information Creating persona in order to know the person who is going to use our product and next to the team we start to write the ideas we consider should have our development

Persona

Persona are fictional characters wich was created on our research in order to represent our user. Persona help us to understand user needs, experiences, behavior and goals

User Journey Map

The user journey map allowed me to visualize the process that a person goes through in order to accomplish a goal in this case the process the person goes through to create a wishlist

Customer Journey

Scenarios

User scenarios help to show how users might act to achieve a goal in a system or environment. Make me understand users motivations, needs, barrier and more in the context of how they would use a design app, and to help ideate, iterate and usability-test optimal solutions. In this case we have 4 scenarios

User wants to create a product list

User wants to add items

User wants to manage privacy

User wants to change quantity

Sketch

With a paper prototype, We could test early design ideas at extremely cost. We fixed problems before to start the wireframe process. This is the first approach to the problem that allowed me to change and define the user interface architecture

Wireframes

Wireframing as low-fidelity prototyping allowed rapid iterative in order to usability test and get insight early and get problems early

Testing findings

  • Users need to add products to the list easily
  • Users need to receive notifications when changing privacy
  • Users need to see the total item prices update every time that they change quantity
  • Users need to have a comment section next to the product
  • Users need to have a predictive search
  • Users need to see the button to upload data
  • Users need to stay in the same page while adding items

Mockup high fidelity

This is an integral part of the design process, it allows us to turn a vision into something tangible in order to test our hypothesis with real users. Also allows experimenting and explore various approaches to an idea before selecting the one that is most valuable both from a business and user standpoint. The goal is to ensure that their product satisfies the user`s needs. Prototyping allows us to explore and validate ideas before investing too many resources