Shahriar Sadi
UX / UI Designer

Microsoft
Project IDA

Onboarding and Chatbot Integration

Microsoft Project IDA

Problem Statement

The problem with Microsoft IDA (Insights and Discovery Accelerator) platform  

  • Lacks an onboarding process 
  • Lack of proper onboarding also leads to users not having clarity on how to navigate through the IDA platform
  • Lacks a quick way to get questions answered about how to use the platform


Microsoft Project IDA
Microsoft Project IDA

Research Plan

Target Audience:

The research was targeted at the end-user who will primarily consist of researchers in various industries.


Microsoft Project IDA

User Feedback

From the interviews, several key areas of improvement were spotted. Participants interviewed would like chatbots to onboard with a visual aid.  Many users suggested the chatbot to provide article recommendations in a similar way that Amazon recommends products to shoppers. Many users also like the idea of a chatbot being able to compare the article they are currently reading with others for a cross-reference. 

"If I can't figure out how to use a website within ten minutes, I'll go back to the platform I'm comfortable with using"
Quote from User Interview
Microsoft IDA Persona

Microsoft IDA Persona

Persona

Based on the interviews we set up this persona. We referred to it throughout the entire product development process.

  • This persona was designed to capture the primary user of Microsoft IDAs platform
  • User interviews were used to create the persona
  • The persona affected the design by giving insight into what features the user of the IDA platform would want the most
  • The persona was reflected back on several points through the creation process

Microsoft Project IDA
Microsoft Project IDA
Microsoft Project IDA

Method of Feature Prioritization

The MoSCoW method was used for this project in order to highlight the needs of this project redesign in order of importance. 

Microsoft Project IDA
Microsoft Project IDA

Competitive Analysis

These companies were chosen to analyze. To get a better understanding of what is already out there in the market. These particular companies were chosen for prominence in the industry.

Microsoft Project IDA

Sketch

Usually, I start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.

  • The main purpose of the sketch is to get my ideas out before prototyping
  • User interviews helped with the thought process of the overall layout of the project
  • There are several different sketches here some show the proposed layout and placement while others show interaction or the script 
  • Since the Microsoft IDA can utilize Microsoft Azure AI all scripts will use natural language for prototyping and wireframing 

Wireframe

This was a more evolved version of the sketch, a high fidelity mockup.  

  • The placement follows the layout of the sketch 
  • The chatbots ability to highlight regions that the user is seeking is shown on the wireframe 
  • The orange arrows and numbering allow for multiple objects to be highlighted giving the user more information at once in a digestible fashion 
  • New logo and styling was done for UI design to give a more simple look once we figured out the functionality of the chatbot 

User Interface Demonstration 

UI design

Once I tested out all usability mistakes, I started designing the final screens in Figma for the interface. 

  • We incorporated some of Microsoft's company styling in elements and use of their icons 
  • Used logo design of wireframe and placement 
  • We used Figma tools to make the prototype dynamic and into a working demonstration with the video 
  • You can see how elements of Azure Ai influenced the intelligence of the Aida chatbot 

Prototype Created using Figma

Prototype 

This is an embedded view of the prototype created using Figma. You can zoom in and view all screens created for this project.