top of page
SpendAi
An AI-powered spend analytics tool that generates cost-saving insights on the organization's spending.
![](https://static.wixstatic.com/media/5c751731950836f50b518f0919484c58.png/v1/fill/w_622,h_564,al_c,lg_1,q_85,enc_auto/5c751731950836f50b518f0919484c58.png)
![](https://static.wixstatic.com/media/47eece_b3aa942c799241709af99b28575f05cb~mv2.png/v1/crop/x_133,y_393,w_2647,h_1804/fill/w_554,h_369,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_b3aa942c799241709af99b28575f05cb~mv2.png)
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
![](https://static.wixstatic.com/media/47eece_5dad50fda63c4389886cf8de26ff0010~mv2.png/v1/crop/x_0,y_0,w_1245,h_771/fill/w_337,h_209,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_5dad50fda63c4389886cf8de26ff0010~mv2.png)
![](https://static.wixstatic.com/media/47eece_78aa6b4580744f72b19e6c5ec3e5517b~mv2.png/v1/crop/x_0,y_7,w_1251,h_801/fill/w_339,h_217,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_78aa6b4580744f72b19e6c5ec3e5517b~mv2.png)
![](https://static.wixstatic.com/media/5c751731950836f50b518f0919484c58.png/v1/fill/w_364,h_330,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/5c751731950836f50b518f0919484c58.png)
![](https://static.wixstatic.com/media/47eece_cc105f2e04c344568c427b480f55bbfa~mv2.png/v1/fill/w_328,h_209,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_cc105f2e04c344568c427b480f55bbfa~mv2.png)
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
![](https://static.wixstatic.com/media/47eece_c444edf27b4e47d5bd9fd5f9c0669104~mv2.png/v1/crop/x_0,y_0,w_176,h_165/fill/w_31,h_29,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_c444edf27b4e47d5bd9fd5f9c0669104~mv2.png)
Discover
-
Qualitative & Quantitative studies
-
Behavioral studies
-
Stakeholder sessions
-
Competitive Analysis
![](https://static.wixstatic.com/media/47eece_332f515aa549481faf73bd687f38a52d~mv2.png/v1/fill/w_44,h_39,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_332f515aa549481faf73bd687f38a52d~mv2.png)
Define
-
Personas
-
User flow
-
Empathy map
-
Customer Journey Map
-
Information Architecture
![](https://static.wixstatic.com/media/47eece_0b87c043fb1d4a2e9f43e6df1633ad65~mv2.png/v1/fill/w_44,h_39,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_0b87c043fb1d4a2e9f43e6df1633ad65~mv2.png)
Design
-
Lo-Fi and Hi-Fi design
-
Feedback gathering
-
Iterate on designs
-
Usability testing
![](https://static.wixstatic.com/media/47eece_57c75e400fb24d9d9ab090b4cc65b2e0~mv2.png/v1/crop/x_0,y_0,w_315,h_320/fill/w_37,h_38,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_57c75e400fb24d9d9ab090b4cc65b2e0~mv2.png)
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:
![](https://static.wixstatic.com/media/47eece_64c5c8056b2f471a9597c5b01ba89f3d~mv2.jpg/v1/crop/x_127,y_277,w_4562,h_2972/fill/w_659,h_429,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/47eece_64c5c8056b2f471a9597c5b01ba89f3d~mv2.jpg)
#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?
![](https://static.wixstatic.com/media/47eece_9cafc337bc954660a651ee047e6f5c56~mv2.jpg/v1/fill/w_978,h_440,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_9cafc337bc954660a651ee047e6f5c56~mv2.jpg)
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.
![](https://static.wixstatic.com/media/47eece_dc2572656e124ff793cf031c8c5ed9aa~mv2.jpg/v1/fill/w_978,h_691,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_dc2572656e124ff793cf031c8c5ed9aa~mv2.jpg)
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.
![](https://static.wixstatic.com/media/47eece_15b5016f51be4e65966f5ab7bcdc5d37~mv2.jpg/v1/crop/x_57,y_19,w_6185,h_2463/fill/w_979,h_390,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_15b5016f51be4e65966f5ab7bcdc5d37~mv2.jpg)
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.
![](https://static.wixstatic.com/media/47eece_dd9770d7c46f4a71a0c7dd0a6c1cbb5c~mv2.jpg/v1/crop/x_3,y_1,w_1450,h_687/fill/w_984,h_466,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_dd9770d7c46f4a71a0c7dd0a6c1cbb5c~mv2.jpg)
Information Architecture
To better vision the site map, essential pages to sketch, and find out the gaps I generated an IA.
![](https://static.wixstatic.com/media/47eece_6490ed993f414cef8d492cf3a2e5f6a4~mv2.jpg/v1/crop/x_0,y_80,w_6035,h_2565/fill/w_979,h_416,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_6490ed993f414cef8d492cf3a2e5f6a4~mv2.jpg)
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.
![](https://static.wixstatic.com/media/47eece_040d03de5ebe4ae1b3e826e7e021cada~mv2.jpg/v1/fill/w_978,h_783,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_040d03de5ebe4ae1b3e826e7e021cada~mv2.jpg)
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.
![](https://static.wixstatic.com/media/47eece_6692b6559d3b4474b1834b792c5ca753~mv2.png/v1/crop/x_0,y_31,w_2880,h_2229/fill/w_550,h_426,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_6692b6559d3b4474b1834b792c5ca753~mv2.png)
![](https://static.wixstatic.com/media/47eece_97f6d36a3119412ab5417b31ce00b457~mv2.png/v1/crop/x_0,y_128,w_1586,h_926/fill/w_878,h_513,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/47eece_97f6d36a3119412ab5417b31ce00b457~mv2.png)
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.
![](https://static.wixstatic.com/media/47eece_f747fb0c44434e208db52b95984ac8c6~mv2.png/v1/crop/x_0,y_0,w_2880,h_2102/fill/w_551,h_402,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_f747fb0c44434e208db52b95984ac8c6~mv2.png)
![](https://static.wixstatic.com/media/47eece_97f6d36a3119412ab5417b31ce00b457~mv2.png/v1/crop/x_0,y_128,w_1586,h_926/fill/w_878,h_513,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/47eece_97f6d36a3119412ab5417b31ce00b457~mv2.png)
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.
![](https://static.wixstatic.com/media/47eece_7763e8a49aa14f579daf18c28c461080~mv2.png/v1/fill/w_554,h_384,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_7763e8a49aa14f579daf18c28c461080~mv2.png)
![](https://static.wixstatic.com/media/47eece_97f6d36a3119412ab5417b31ce00b457~mv2.png/v1/crop/x_0,y_130,w_1586,h_924/fill/w_877,h_511,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/47eece_97f6d36a3119412ab5417b31ce00b457~mv2.png)
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.
![](https://static.wixstatic.com/media/47eece_a9e9f72d15d8457cb38abfbd88dc31b4~mv2.png/v1/crop/x_0,y_5,w_2875,h_2083/fill/w_560,h_406,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/47eece_a9e9f72d15d8457cb38abfbd88dc31b4~mv2.png)
![](https://static.wixstatic.com/media/47eece_97f6d36a3119412ab5417b31ce00b457~mv2.png/v1/crop/x_0,y_127,w_1586,h_927/fill/w_878,h_513,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/47eece_97f6d36a3119412ab5417b31ce00b457~mv2.png)
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