BOTIATOR

UI/UX Design

 

 DEMO VIDEO

Created with Adobe After Effects. Music by www.bensound.com

 
 

TOOLS

After Effects, Adobe XD, Apple Pages

DURATION

1 month

 

Botiator is an app I designed for my final for my Web/App Product Design class at Parsons in my Junior year. The app's meaning is represented in the name - Bot + Mediator and helps people resolve issues using AI.

process1.png

Ideate

ASSIGNED TOPIC

I was given topics to choose from to base my app’s concept off of. The topic I chose to pursue in class was ‘language’.

CONCEPTUALISING MY IDEA

When ideating on topics given to me in class, I always like to begin by thinking about my personal experiences and what I would’ve liked to exist at a certain time in my life. I immediately thought of roommates I’ve had in the past and some negative experiences I had when it came to getting through issues when there was tension in the air. I knew this would be a useful and interesting idea to dwell on considering that it’s something many people experience sometime in their life.

PROBLEM SPACE

When people argue, emotions often get in the way and prevent us from having neutral productive conversations. We often fixate on a feeling and are sometimes unable to express this feeling in a way that the other person will understand, rather than take personally.

How might we help people resolve issues in the digital age of messaging?

SOLUTION

This is where Botiator comes in. Botiator utilises AI bots to help you better portray your feelings in a productive way while you're typing as well as moderate your conversation. It helps you stay on track and will guide you.

WHO IS THIS APP FOR?

Botiator really could be used for anyone, but I identified that it would be the most useful for roommates. When you don’t get along with a roommate, usually there is lack of communication because of the tension present. Because of this negativity, conversations can get really passive aggressive.

HOW DID I DETERMINE THIS?

I asked people in the demographic I was tackling (friends, classmates, students who are dorming in the age range of 18-24) about what their biggest struggles were when it came to sorting out issues with different people.

— When a situation is heated with someone you’re not very close to, text becomes a default medium for attempting to solve the issue. More times than none, the problem does not get solved unless someone intervenes.

In depth insights

  1. There are not always people readily available to help mediate a situation. (Ex- RA’s)

  2. Having a third person involved can trigger bias as this person is usually someone who knows either one of the people.

  3. Texting does not always portray the intent of the user’s message. It is hard to read emotion behind a text. This can be misread, misconstrued and eventually misunderstood only making a situation worse.

  4. Arguments can feel never ending through text and often end up passive aggressive.

  5. Sometimes people do not know how to proceed in conversations without coming across as aggressive.

I thought it would be really interesting if I created an app that doesn’t need someone to intervene every time there’s an issue (with roommates this may be more common) and having a mediator that would be readily available to sort problems. In colleges, RAs usually have to mediate issues but are also busy students and cannot be available 24/7.

In this age of technology, many conversations are done through texting. Texting often does not correctly represent emotion and can do more harm than good when trying to sort out an issue with someone.

Botiator allows people to have discussions with the guidance of their own personal bots (bots that will filter out text live when the user is typing) as well as a mediator bot that will help keep the conversation flowing in a progressive way that ensures a positive result.

process2.png

Design

 
 
 
 

MID FIDELITY WIREFRAMES

 

BEGIN DISCUSSION

Selecting the relationship you have with the person you’re about to talk to helps the app understand the expectations of such a relationship based on other people’s experiences.

Screenshot 2020-01-06 at 11.54.32 AM.png
 
 
 

SELECT MOOD BEFORE DISCUSSION

An important factor I thought needed to be included was emotion. The progress bar shows progress in a discussion, but the answers a person may be selecting or giving might not represent how they actually feel with the situation because they just want the conversation to be over with. That would lead to long term passive aggressiveness and not really progressing in real life with the relationship.

Screenshot 2020-01-06 at 11.54.54 AM.png
 
 
 

SELECT MOOD AFTER DISCUSSION

By selecting your mood after the discussion as well, the app will understand if there is actually progress being made or if a user is just selecting options to get the conversation over with. This helps the app when it comes to reviewing your relationship with someone. (This screen comes later)

Screenshot 2020-01-06 at 11.55.52 AM.png
 
 
 

CHAT SCREEN

The mediator bot is in blue and asks questions to help aid the discussion.

The progress bar at the bottom shows if the discussion is making progress and does this by detecting the words used in the conversation.

Screenshot 2020-01-06 at 11.55.13 AM.png
 
 
 

RELATIONSHIP SCREEN

Relationship screens are available to every person you’ve talked to. The percentage is calculated based on the conversations you’ve had with the person.

You can also add screenshots of conversations you’ve had outside the app to this app and it will read them and detect compatability.

Screenshot 2020-01-06 at 1.55.28 PM.png
 
 
process3.png

Test

I allowed 15 potential users to navigate through a click through prototype. I screen recorded each session and allowed them to write suggestions at the end. I found that all users were successfully able to navigate through the entire app but there were issues with the bars and bot.

BALANCING THE NEUTRAL FEEL

  • Some UI elements, such as the mood buttons, were too neutral and didn't make the user feel anything.

  • While the point of my app is for it to be neutral, bringing emotion to some elements outside the chat interface make it more interesting.

MAKING THE BOT SMARTER

  • Just having a mediator bot that asks questions isn't that interesting, the bot should be able to do more.

  • The bot being able to give suggestions as well as have more concrete control over the flow of the conversation is interesting AI.

ITERATING THE MOOD BAR

  • The mood bar went through all sort of iterations, but I thought it would be better for it to visually relate to the progress bar in the chat.

CHANGING THE PROGRESS BAR

  • The progress bar's purpose wasn't very clear.

  • Using varying colors as well as showing how it increases and decreases based on what's happening in the chat would make it more clear.

process4.png
 
 

Iterate

MOCKUPS

 

LANDING PAGE

The home page shows all the people you’ve had discussions with. Clicking on each name will take you to the relationship screen for that person.

smartmockups_k6fl1328.png
 
 
 

SELECT MOOD BEFORE DISCUSSION

I iterated the mood page to bring together the visual elements of the progress bar to this page to make it more cohesive.

smartmockups_k6fl9p0o.png
 
 
 

CHAT SCREEN

I moved the progress bar to the top for easier access to the keyboard without it being too distracting. I also made it thinner as the thickness previously was drawing too much attention.

The bot also ended up a lot smarter (watch demo video) and can give suggestions.

smartmockups_k6fljl3g.png
 
 
 

CHAT OUTCOMES

I also implemented color changes to the progress bar to show the increase or reduction in progress ( red and green). This was important to bring out the importance of progress to users and also so it doesn’t end up forgotten.

smartmockups_k6flp882.png
 
 

 INTERACTIONS

The bot will filter out words such as "you" (makes your conversation less personal) and foul language live while you're typing.

typefiltercropgif.gif

In your conversation, the mediator bot will give you suggestions on what to talk about based on what you've already said if the conversation is stagnant or needs extra help.

selectioncropgif.gif

A progress bar in the chat will show the user the likeliness of a positive outcome with the person they are talking to based on what they've said and the suggestions they’ve chosen.

progressbargif.gif
 
 

SCRIPT

I created a script to show a scenario for all the interactions in the app for the demo video.

 
script_Page_3.jpg
 

TAKEAWAYS

Considering that I only had a month to fully conceptualise and design this product, in the future I would definitely want to focus more on user testing and getting feedback. I also realised how difficult it is to measure emotion and how something intangible, like feelings, is complex to break down. Creating and designing this app taught me a lot about AI and how much it can change human relationships. It also made me have thoughts about accountability and ‘what if the bot gives the wrong suggestion?’ or ‘what if it is just making the situation worse?’, which I think is something interesting to dwell on.