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.
Assigned Topic
The topic given 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
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.
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 classmates what their biggest struggles were when it came to sorting out issues with different people. I found out that:
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 doesn’t get solved unless someone intervenes.
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.
How does this work?
The bot will filter out words such as "you" (makes your conversation less personal) and foul language live while you're typing.
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.
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.
High 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.
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.
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)
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.
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.
After making these wireframes, I did user testing and allowed them to test the prototype and offer suggestions. There were changes that I made to the design based on the feedback I received.
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.
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.
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.
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.
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.
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.
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.
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.
Script
I created a script to show a scenario for all the interactions in the app for the demo video.
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.