top of page

SpendAi 

An AI-powered spend analytics tool that generates cost-saving insights on the organization's spending.

My Role

Product Designer along with a lead UX designer and a UI designer

Target Users

Category Managers

Platform

Desktop

Company

Electrifai

Timeline

Dec 2019 - Present

Compnay

Electrifai

OVERVIEW

Why a redessign?

#UI

Improving the User Interface

The app is a decade old. UI elements such as icons, typeface, color palette, and data visualizations need to be updated with the UI trends.

#UX

Improving the User Experience

User experience in the old platform has flaws and requires changes. It requires training so that user can learn how to work with the app, how to search, add/remove fil eter, get granular with data etc.

#Tech Update

Using AI to Direct User to Valuable Info

Using Ai to bring valuable insights to the user where valuable information is provided for the user instead of having them digging data to gain such insights.

#Tech and Data Quality

Using ML Algorithm for Data Classification

In the old SpendAi majority of data classification work is done manually which takes time and human resources. The goal with the new SpendAi was to develop a Machine Learning algorithm to optimize the process. 

OVERVIEW

Product brief

Spend Ai is designed as a replacement for an older spend analysis tool previously built. Using historical data from spend and contracts the new tool provides information and insights about the amount spend, when and where they happen, and who the suppliers are. Using AI/ML this tool generates insights, cost-saving opportunities, and data visualizations of spend history.

Re-build of an older product

Spend Ai was initially productized  in 2010 and since then thousands of users used it to manage their procurements including reduce financial risks and increase annual savings. The main purpose of this project was to re-build and re-brand Spend Ai 

Why a redessign?

#UI

Improving the User Interface

The app is a decade old. UI elements such as icons, typeface, color palette, and data visualizations need to be updated with the UI trends.

#UX

Improving the User Experience

User experience in the old platform has flaws and requires changes. It requires training so that user can learn how to work with the app, how to search, add/remove fil eter, get granular with data etc.

#Tech Update

Using AI to Direct User to Valuable Info

Using Ai to bring valuable insights to the user where valuable information is provided for the user instead of having them digging data to gain such insights.

#Tech and Data Quality

Using ML Algorithm for Data Classification

In the old SpendAi majority of data classification work is done manually which takes time and human resources. The goal with the new SpendAi was to develop a Machine Learning algorithm to optimize the process. 

MY PROCESS Double Diamond Model

Discover 

  • Qualitative & Quantitative studies
  • Behavioral studies
  • Stakeholder sessions
  • Competitive Analysis

Define​

  • Personas
  • User flow
  • Empathy map
  • Customer Journey Map
  • Information Architecture

Design 

  • Lo-Fi and Hi-Fi design
  • Feedback gathering
  • Iterate on designs
  • Usability testing

Deliver 

  • Hand-off to the dev team
  • Product release
  • User testing
  • New features

DISCOVER

User Research Methods

To better learn about the current product and to understand users' conceptual model, we have mainly focused on three user reseaech methods as follows:

​

  • Unmoderated Remote Study –7 participants

This method was used to get participants' feedback on the product concepts. During the sessions, we let users walk us through their thought process, come up with their own version of the user flow, and list of features they expect to have or see in the tool. We asked follow-up questions during each step to digging deeper to users' decisions.

​

  • Moderated Remote Study–7 participants

One of our goals was to better understand the gaps in the product. During moderated sessions, we asked questions and gave users specific tasks to do. Based on their behavior and answers we listed gaps and areas that need improvements or are not-aligned with what users expect.

​

  • Card-sorting Focus group – 3 participants

To build the Information Architecture of the product, a card-sorting method was used. We had listed topics and sub-topics and asked participants to sort these cards into piles, placing items that belong together in the same pile and make as many or as few piles as they want; We then asked follow-up questions on why certain categories were piled together and real-life cases in which user will go through those pages/topics.

Ultimate Research Questions

During all of user research study sessions our goal was to find answers to the following questions and thoroughly understand the problems that our product needs to focus on;

  • Who are the target users?

  • What are users needs/problems? 

  • When will users be using this product?

  • Where will users be using this product? 

  • Why should users use this product? 

  • How will users access this product?

  • What are their constraints? (Accessibility, Technology limitations etc.)

Understanding The Current Product

Since the product existed before and had long-term clients our main goal was to understand the current platform, existing gaps, and users’ most/least valuable features. We then will use this data to strategize design plans for the new product. Here are some of the questions we had in mind during interview sessions with existing customers:

  • Identify pages do users interact with the most

  • Identify pages do users interact with the least

  • Identify the top ways that user is interacting with the platform

  • Identify features users are currently missing

Findings from Qualitative Studies

To identify personas and to understand the current process, user's pain points, and user's need we run moderated ad unmoderated interviews. Our interviewees included Category managers, Chief Procurement Officers (CPO), and Procurement Analysts. Here are some of their quotes: 

" My job is to save the company money and reduce any potential risks. I dig into plots and data to get such information."

"As a category manager, I need to figure out what are the preferred suppliers for my category so that I can consolidate my spend with the outperforming suppliers. "

"I'd like to see all my contracts connected to my spend data so that I know if I a contract is putting me at risk."

" I am responsible for making reports on company's monthly spend. I need a tool to facilitate this for me."

" It is critical to pay your suppliers on time. Paying too early or too late will cost you."

Findings from Quantitative Studies 

Looking at the analytical data we were able to identify user behavior patterns of how customers were interacting with the old product. This is what we found:

#Product_Gaps    #UX 

Other Observations

  • Most tasks took a minimum of 3 steps to be completed

  • 4 of the pages — out of 18— were used less than 10% of the times by all users

  • User is forced to land on the home page while there's no valuable information on that page for them

  • Less experienced users struggle with where to start the anlysis from

#Product_Features   #User_Interaction

Top 3 User Interactions

  • Direct interactions with graphs and data visualizations  in order to drill-down the data 

  • Use search bar to search for keywords

  • User filter panel and filter specific categories, time, suppliers, etc.

Competitive Analysis​

  • Who are the main players in the Spend Analytics field?

  • What the current gaps in the market?

  • What problem are we trying to solve?

  • What is the market seeking right now?

Discover
Define

DEFINE

Persona

User personas play a key role on identifying different user types, their specific goals, their day-to-day tasks and responsibilities, current struggles, and tools and software. I collected details about the persona for this product by talking to users, and stakeholders and they grow overtime.

Empathy Map

I've mapped out the empathy board to to identify genuine issues, problems or concerns that our customer may have right now. This is a very helpful tool as it helped us get to to know our customers by understanding what our end-users think, feel, say, and do.

Customer Journey Map

I have mapped out the customer journey to visualize the user interaction with the app and to help the product development team to step into our customer's shoes and see our business from the customer's perspective.

Information Architecture

To better vision the site map, essential  pages to sketch, and find out the gaps I generated an IA.

DESIGN 

Lo-fi designs

Using the IA, user flows, and persona initial version of low fidelity designs was created to get feedback from the PM, stakeholders, data scientists, and software engineers. After a couple of rounds of internal feedback gathering, we have tested the low-fidelity mock-ups with 4 users and iterated the wireframes based on their comments.

Design

DELIVER

Hi-Fi designs hand-off to the dev team

After finalizing the wireframes with stakeholders and the engineering team, we utilized companies design system to create the high fidelity user interface. After this round, we had a design freeze and handed off the screens to the back-end and the front-end teams. Of course, during the development process, there were constraints or some unclarity about user interactions for edge cases. Collaborating closely with the tech, software, and QA teams on daily scrums some of the designs re-considered, where users' micro-interactions improved, or new features added to fill the unpredcited gap.

User Testing

After 12 sprints – 2 weeks long– the first version of the product was released. The design team has used this release to run the usability sessions with a total of 8 users. I created a list of questions that I or the team needed to learn more about and then prioritize them. The user testing had two main goals: 1- To get user feedback on the platform, and identify areas for UX improvement (45 min moderated session) 2- To do a card sorting test with users about the future features (15 min unmoderated session)

Deliver

OUTCOME (DESIGN HIGHLIGHTS)

Home

This page provides a high-level overview of the most recent spend activities. Looking at each widget user can get a quick idea of where they stand with their spend.

​

One of the critical features that is added to the product is Insights. Machine Learning models were used to transform raw spend data into accurate, actionable insights.

​

​

KPI 

This dashboard provides relevant information on users' spend data for the trailing 12 months.

​

Users can get analytical data on their spending and supplier for the current and previous period and learn about their spend trends in different categories.

​

Filter and Search

Due to the importance and frequency of use of filter and search functionality, an overlay panel was designed where users can easily filter on multiple levels of different categories.​

​

Each filter selection will appear in a tag format on the filter bar on top of every dashboard. This gives users a clear idea of what they are filtered on and enables them to un-filter on items they wish.

​

Contract Synopsis

This page lets users access their contracts and compare details of multiple contracts with each other.

​

Using NLP algorithms important sections of each contract will be highlighted so that the user can put their attention where it is needed.

​

​

​

Outcome

REFLECTION

Learnings

Although this project was a great success already, there are areas that could be reconsidered from a product design perspective. Due to the time-sensitivity of this project the design team could not get very granular in some aspects of the product including data visualizations. Based on usability testing results some of the charts could be re-designed and presented in an easier way. I would run a research study as well as A/B testing to choose the best way of presenting certain data and concepts that are more intuitive for the end-users.

Future of The Product

After releasing the initial version of the product and on-boarding beta users we started gathering useful information on how users interact with the app on a daily basis. One of the features that we learn would be beneficial for the users is the ability to customize widgets. Meaning that users can use the data that's already integrated into the platform to create new widgets and data visualizations. This is a critical feature because each company might need to tailor the charts based on their business goals and needs.

This project is on-going, please visit again soon for most recent updates.

Reflection
bottom of page