UX Design for a Microsoft Research Publication

The Conversational AI Team at Microsoft required to publish their research findings on the Microsoft Research (MSR) Page. The project was called Personality Chat. How the AI enabled bot, can respond differently to the same question, due to its personality. They reached out to me for designing the UX of the page as it had to have an interactive messaging area. Using the guidelines followed by the other pages on MSR, using hierarchy. Since the page was to serve the Media and Public Relations people more, the more detailed technical aspects were moved to page 2. 

The following were some decisions taken:

1. The menu bar at the top: This is kept same for consistency across MSR project pages. 

2. The header image: I modified an existing Microsoft illustration to suit our need. The header width is reduced so that it uses less space above the fold. 

3. The tab group: All of our requirements are fit in here. The landing page will have the interactive bot and some key info with learn more buttons that lead to the other tabs. 

4. The interactive area: This example shows 5 bots of which 3 are selected. After selection the bot name shows up on top of its chat screen. "Funny Bot, Professional Bot etc" 

5. Displaying 5 bots, with only 3 active at once: The 5 bots are shown as 5 swatches with a tick mark. At all times 3 bots will be selected (either by the user or by default). 

6. The question typing area should explicitly have "type here". This acts like a CTA and is more provoking/directing. "The Questions chart" (comes as a pop up) can be hidden under the ? Symbol near the text field. The user can directly select questions from this chart too. 

7. Attaching Images - The other square button above the '?' button is the image button / attach button.