Rojin Maljaei
UI/UX Designer

A social network messenger

An in-app chat application customized for social projects

Let's get a little context about the project!

The project was a chat and messaging system for Inpactor, a social networking platform that helps NGOs and causes run social projects easily. 


  • Project owner was Incitement Sdn Bhd.
  • Happened in Feb 2019.
  • Designed in 3 weeks time.
  • My role was a Lead UI/UX Designer.

So what is the problem?

If you checked out Inpactor project in my portfolio, you know it's a social media aimed to help causes to run social projects, get funded through CSR and marketing departments of big corporations and create positive social impacts with volunteers. The project is in beta testing for MVP. I was asked how can we have a perfect messaging system which can help project managers to communicate with volunteers and sponsors easier and faster? We must have built this in-app messaging system fast to make it ready for Inpactor public launch on July 2019. 

Let's explore what happened next, I think that's enough to get some ideas...


A social network messenger

Our UX Process

UX Process in each project can be different. For this project, we had a simple one but 4 core steps were:

  • Finding product definition and grasp the challenges and expected solution.
  • Learning about our users feeling & mindset. Made hypothetical characters and simulate their emotions in the journey maps. Analyzed the findings to be used in the ideation phase.
  • Created low-fidelity sketches on paper and made different designs to study user's reactions in A/B testing. Created mid-fidelity wire-frames and interactive prototypes. Several revisions with the product manager. Run usability tests and prepared UI high fidelity designs.
  • Run several different tests with a few users, receive feedback from focus groups to validate the idea and design. Design revisions to implement the feedback. Preparation for developer handover.

Strategy & Definition

Stakeholders Interview


I had a session with the key people at Incitement who were in charge of Inpactor project. Attendants were: Product Owner, Product Manager, Marketing Director, CTO, Project manager and of course me!


Some of the current challenges that discovered in this meeting were:


  • Lack of having a messaging system allows users to leave the platform and use another app in order to talk to each other. Letting users communicate outside of the platform may loose reduce sales and revenue.
  • As many people might use Inpactor to manage their projects, switching to another app for communication reduces transparency. It also creates a poor coordination between project managers.


We Learned about their expectations. The desired messaging system should:

  • Be user-friendly and efficient. It should speed up the communication.
  • Integrate project management features and messaging.
  • Keep user privacy while adding transparency to the project management process.
A social network messenger

Brainstorming session

Had a super engaging session with the product manager to understand our users and how our solution can address their issues. As our main users are volunteers, sponsors and project managers, I realized we have these main categories of conversations:

  • Personal chat between a user to another user
  • Chat between project managers and sponsors
  • Chat between project managers and volunteers
  • Normal inquiries of a user to a project
  • Sponsorship interest from a brand to a project
  • Sponsorship request from a project to a brand


Research & Analysis

Individual in-depth interviews

As we learned who are our three main groups of users, we conducted user interviews with over 30 persons. Half of the interviewees were students who usually volunteer in social projects. There were 10 project managers from 10 different NGOs that run several social projects in a year and also 5 brands which sponsor these projects from the CSR budget.

My goal was to get a better understanding of their fears and pain points and their desired solution. My interview questionnaire had 15 questions in 3 different sections:

  • User introduction questions to understand their lifestyle and mindset.

  • Topic-specific questions to know current ways and apps used for the chat by them.

  • Product opportunity questions to learn more about their ideas and feeling about our solution.

Competitive Research

There are a lot of messaging apps available in the market. Before choosing the right competitor, I tried to answer this question:

Are any products already solving this problem?

Most of the apps in the market are not our direct competitors. I set a few qualifiers to analyse our competitors according to those. These are qualities that are essential for the product to possess in order to solve the problem I've highlighted above:

  • Efficiency: The product must be efficient. It should involve relevant users in a group conversation and should have features to make a faster & clear conversation.
  • Organized: The product must be well organized. the user should be able to find the most important conversations easily and respond fast. For project managers, it's important to be able to categorize conversations.
  • User-friendly: According to our interview result with users, it's one of the most important reasons that users may choose a messaging app as the current communication tool, the app should be very powerful but without too much complexity.
A social network messenger
A social network messenger

Personas

Based on the interviews and user types, we set up three personas. We referred to them throughout the entire product development process.

  • One persona represented a project manager, another one represented an sponsor and the last one represented a volunteer.
  • For every character, we provided some basic profile info and then defined their motivations and fears. 
  • Their characters had average motivations and fears each user type had in the user interview sessions.
  •  It helped me to put my self on their shoes and look at the solution like they look and ask myself how they may feel in every step of using this application.

User Journey Map


In order to get to know our users' behavior better, I created a User Journey Map for the personas built in the previous step. At this stage, we tried to find the main touchpoints the user contacted with the service, the intensity of user emotion at each touchpoint, the main pain points for the user during the use of the service and our solutions to treat these issues.

A social network messenger

Ideation & Design

A social network messenger

Sketches

I usually start the design process with low-fidelity sketches to visualize the basic concept really quick. I share these sketches with the product manager to find out there is any misunderstanding or different ideas. This is the way I iterate through many design options quickly. 

I did the same for this messaging system and in the end, I came up with 2 different designs for conversation inbox. In design A, we had tile designs for each conversation and we had 2 conversation cards in a row. It's kind of a new design. I like this design as it's unique and beautiful.  In contrast, design B was a widescreen design which shows a single conversation in a row.

I wanted to check the user feedback and reactions after I presented an interactive prototype.  As I learned from researches, that categorizing the conversation is super important, I tried to create different sorting options in the inbox for users to be able to prioritize displaying new conversations.

A social network messenger
A social network messenger

Prototypes

At this stage, I started my work with wireframes and mostly about structure and visual hierarchy. How my product looks. After concentrating on the look I will work on interaction experience to check both look and feel.


I used to work with moqups.com or Sketch for creating wireframes and then export it to Invision to produce interactive prototypes. Nowadays, I only use Adobe XD to create both wireframes and interactive prototype. 



Revised version of conversation screen
Revised version of conversation screen

Usability Tests

At this stage, I wanted to make sure how users interact with the design. So we started checking how they use the product and see how they grasp the concept. Our testing session was a kind of moderated testing.

I realized it was confusing for some of the users to find the header of conversation inbox. So I had to redesign the header. In this iteration, I pull out new message and settings icons from the header. Added settings icon in the top row next to screen title. The create new conversation icon, converted to a button. I made two versions of buttons, one with an icon and the other one with text to see the user's reactions in A/B tests. In this version, we only have search and sort in the top header bar which made the design simple and clean!


A/B Testing


We had an A/B testing session. For the conversation layouts, I found out users preferences was Design B (Widescreen design) rather than Design A (Tile design). Although some users said design B is beautiful but some of the users totally got confused. According to their feedback, they expected to see a widescreen conversation inbox instead of seeing each conversation as a card in tile view.

I also checked two versions of New Conversation buttons in mobile design with users and realized users see the rectangular icon+text button easier than a circular icon-only button.

 

A social network messenger

Simple UI Design

Once I tested out all usability mistakes and a few more iterations by the product manager, I started designing the final screens in Adobe XD. I followed the visual style I had in the entire Inpactor platform to keep the consistency.

The design is light, minimal and simple. playing with white color and touch of light grey, blue and pink. I used a light shade of blue for primary actions and a light shade of pink for notification and alerts.

One of the parts, users really liked it in usability tests, was showing a chain of participants thumbnail photos on the conversation view. It allows users to see who involved in the conversation so far without needing to go to chat view and check it in the messages.





Message center in desktop view
Message center in desktop view

Responsive UI

On mobile phones, we have one view exclusively for conversations. If a user chooses to read the messages in that conversations then it goes one level deeper to the chat view, like most of instant messaging applications.

However, in desktop devices, we have more spaces. Therefore I combined conversations and chats in one view in Message Center. It allows the user to switch conversations easier and faster.


An Efficient System

Efficiency was one of our qualifiers in competitive analysis. As we heard in users feedback, project managers really liked this messaging system plays a role bigger than a regular messaging app and helps them in project management. That's why we introduced extra action buttons and automated system messages to execute some of the project management tasks in a chat.

For example, when a project got completed and project managers submitted a report, we automatically send that report as a message in a conversation between sponsor and the project managers and ask the sponsor to read the report and take necessary actions.

A social network messenger

Test & Validation

Iterative Design

By doing user and usability tests during the UX Design we could iron out issues early on. BEFORE wasting time and money developing a product that needs to be fixed again and again!


We had 7 participants to attend at a focus group and share their feelings and feedback about the design and the experience with us. I realized we need more iterations and changes in the design to make it friendlier and also useful.

We also asked everybody to answer these 5 questions:

  • What’s the most appealing about this product?
  • What’s the hardest part about using this product?
  • Was there anything surprising or unexpected about this product?
  • What could be done to improve this product?
  • Was there anything missing from this product that you expected?


Reflection

Even it wasn't a large scale project like designing entire Inpactor MVP which I did last year but it had several learning points for me.

  • I learned I shouldn't emphasize details at the beginning of the ideation phase too much. I should get usability test results and work on details in the iterations to learn more what I am doing is right or not.
  • Stakeholders and users expected to see a comprehensive messaging system which should have a lot of extra features and actions to make it efficient. At the beginning of the ideation phase, I added most of the CTAs and required actions all over the places which reduced design simplicity. Later during the iterations, I learned I can hide most of them and show them when a user needs to see those Call To Actions.
  • Even the platform built for organizations with established teams and long term projects, it doesn't need to be very serious. Users liked casual layouts for chats. Even some of the most serious project managers preferred casual designs!
19
Iterations
25
Screens
42
Cups of coffee!

"Rojin has mastered creating extremely appealing and high-converting design through simplicity and extreme eye for detail."

Daniel de Gruiter, Co-founder & CEO of Incitement
Read the entire recommendation on my Linkedin