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 the Incitement platform (The name of this platform used to be Inpactor and recently changed to Incitement), a social networking platform that helps NGOs and causes run social projects easily.
- The project owner was Incitement Sdn Bhd.
- Happened in Feb 2019.
- Designed in 3 weeks' time.
- My role was UI/UX Designer.
So what is the problem?
If you checked out Incitement 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. We were 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 very fast to have it ready for the launching day.
Let's explore what happened next, I think that's enough to get some ideas...
Our UX Process
UX Process in each project can be different. For this project, we had a simple one with 4 core steps included:
- Finding product definition and grasp the challenges and expected solution.
- Learning about our user's feelings & 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.
Stakeholders Interview
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 Incitement platform to manage their projects, switching to another app for communication reduces transparency. It also creates 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.
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, realized that 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
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.
The goal was to get a better understanding of their fears and pain points and their desired solution. Our 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 feelings about our solution.
Competitive Research
There are a lot of messaging apps available in the market. Before choosing the right competitor, 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 analyze 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.
Personas
Based on the interviews and user types, I set up three personas and referred to them throughout the entire product development process.
- One persona represented a project manager, another one represented a 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.
- This process 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, 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.
Sketches
I usually start the design process with low-fidelity sketches to visualize the basic concept really quickly. I share these sketches with the product managers to find out misunderstanding points 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, had tile designs for each conversation and 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 that 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.
Prototypes
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 prototypes, faster and easier ;)
Usability Tests
At this stage, we wanted to make sure how users are interacting 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.
Finally realized it was confusing for some of the users to find the header of the conversation inbox. I came up with some ideas for redesigning 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 the screen title. The 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.
Found out user's preferences were 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 a tile view.
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.
Simple UI Design
After testing and iterations, I was in charge of designing the final screens in Adobe XD. I followed the visual style that I had in the entire Incitement 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 shade of blue for primary actions and a shade of pink for notification and alerts.
One of the parts, users really liked it in usability tests, was showing a chain of participant's 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.
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.
Iterative Design
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 an entire Incitement platform which I was involved 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!