Incitement's platform UX Process
Rojin Maljaei
UI/UX Designer
A social media for social impact
The problem of social impact community
Thousands of social projects run every year by hundreds of NGOs and causes around the world. There are so many brands and corporations which
spend huge amounts of money of their CSR programs on these projects as sponsors. There are also millions of people who volunteer in these projects every year to create positive impacts. Although there are some technology tools for project managers to use but we don't have any integrated system designed for social impact in the world. What Incitement's team aimed at this project, was building a platform that supports causes to unify with brands and volunteers in creating a better world for everyone. Let's see how was the process of designing the Incitement's platform.
Define
Core Values and Vision
To understand the concept and define the product, we had a few face to face meetings with the co-founders of Incitement and product owner. From those conversations, tried to find out the core values of Incitement ( This project called Inpactor first then recently changed to Incitement ) and what their vision is for this product.
Transparency: Brands and causes usually aim to do good for society but that's not always the case. CSR funds and donations are spending in a non-transparent environments which sometimes ends with less impact or even no impact at all!
Positive impact: The product owners believed Incitement must create an environment that not only increases the number of social projects but enhance the quality of Impact. In this way, the product can create more efficient positive impacts around the world.
Social awareness: Incitement must create connections between the people who really care about social impact. By keeping people informed about the latest global and local issues around the world, solving those issues will be easier.
Key aspects of the product
I attended several whiteboard sessions with product managers and assessed different aspects to get a comprehensive view of the product we wanted to build. After a couple of weeks of discussions and brainstorming, finally concluded, the MVP of the product must facilitate the following:
Engagement and networking: The product must be able to create a community of people who have shared concerns about a variety of social issues and keep them engaged and connected. It should allow these communities to share their concerns with each other and plan to take action to overcome those challenges.
Fundraising: Creating impact needs money. In order to increase the number of social projects and enhance the quality of deliveries, Incitement must help causes to get funded faster and easier.
Project management: If the execution of a project becomes easy, fast and transparent, then NGOs and causes can run more projects. Even a good product can boost their efficiency and reduce project execution costs. Therefore we considered planning several tools which could help project managers in their day to day job a lot.
Research
Interviews
After doing a lot of research planned to interviewed our potential customers and understand their perspectives on the product, we had to conduct a user interview. We usually ask these types of questions in the interview:
- Customer Introduction Questions: These questions are aimed to fill in any gaps about the person’s day to day that may not have been answered in the participant questionnaire, screener, or survey.
- Problem Specific Questions: We asked these questions to understand and learn about the problems those people have with the topic / problem that the product aims to solve.
- Solution Specific Questions: We explained them about our solution and future product and got their feedback and reactions. It helped us to validate our solution.
Personas
Based on the data we gathered through the user interviews and stakeholder talks, we created several personas. Actually one persona per each main group of audiences.
Jade is a project manager in an NGO, Chris is a student who volunteers in social projects frequently and Silvia is a CSR manager in a brand.
We defined their characters, motivations, and fears. The questions we asked from users interviews helped us to have a better understanding of different characters of users, especially how much they are into discovering new technologies and how easy they learn new concepts.
These personas helped us in creating user journey maps to simulate the feelings, pain-points and touchpoints. We referred to these personas throughout the entire product development process.
Ideation
Sketches
Then started the ideation part with sketching on paper and whiteboard. It wasn't only me who sketched. The product manager was heavily involved in every feature we wanted to put in each page and how those features should work in order to solve a user problem. This part continued for over 3 weeks in order to brainstorm to detect complicated concepts and simplify those concepts with better solutions. In addition to that, we were thinking about increasing user engagements, enhancing user experience and creating values in the entire product.
Simplicity challenge
One of the biggest challenges in this project was creating simple, easy to understand design. This has got to be one of the most complex simple projects I have ever worked on. It took so much time and energy to design something simple for a product that has a great range of abilities and wrap that up in a way that makes sense when you first see it.
Creating simplicity for such a product is an incredibly complex activity!
Wireframes
After finalizing the ideas on paper, I started working on mid-fidelity wireframes. I created those wireframes via Moqups.com. We could link different views to each other and convert those wireframes to an interactive prototype. It was useful to test the ideas and iterate to fix the new challenges that we never met during the sketching step.
Design
UI Design
Design an actual screen is a super important step in the UX process. I always try to create a good first impression on users. Therefore I needed to carefully craft everything to make the overall design nice and cool.
I started designing the final screens in Adobe Illustrator. I created my own color pallets, chose proper fonts and tried to create a design rules for every main elements of the product. I chose a light and fresh visual style to keep the user calm and relaxed while they work with the product.
Iterations with interactive designs
After making all high-fidelity designs, we tried to make it interactive via Invision. This interactive design could allow users to explore the platform and get a similar feeling like they are working with an actual product. We could get several important feedback and had several iterations to improve the UX and simplify some of the complex concepts.
The most important remark, we received from these tests, were the header design of channel and project pages were similar and this similarity made users confused. We tried to keep a consistent design structure for the core pages, however we learned that we need to add more differences in the UI of project page to distinguish projects and channels.
Deliver
UI Coding
Although I am a designer, I am familiar with developing UI codes via HTML 5 and CSS 3. I used SCSS to improve the speed of coding styles and also used Bootstrap 4 grids and components. I was not the only developer in the front-end team however I was the only developer who was a designer at the same time. I focused purely on UI coding and making a responsive layout.
User Acceptance Testing
Before launching the product, We selected a number of users in all three target groups. Some of them were project managers in different NGOs, some were experienced and junior volunteers and some were working in brands CSR departments. Some of the UAT tests we did, was moderated. We took note about user's mistakes, confusions, complaints and behavior and shared these notes with the team in confluence. In addition of moderated user testing, we have a large group of users that they started testing our initial and final versions of our designs remotely. We recorded the entire process and some of my team mates watched those recordings and analyzed users behavior and shared their notes. I could learn about several mistakes of UI and the way users expect to do some actions in the platform
Fears and learning
One of the biggest fear of mine in this project was complicated concepts and user understanding about it. I wanted to design this platform in a way that creates a wonderful first impression. Learnability could be a big challenge in this platform. To overcome this challenge I tried to make the design structure similar to other social media platforms. This similarity helps users to know how the core functions work and then just focus on learning about the new features we have exclusively on Incitement.
One of the learning points of this project was a creative approach to the separation of Bootstrap SCSS codes into three layers. One layer was the original bootstrap codes which nobody was allowed to touch it. The second layer was the Override layer. We could customize the designs of some of Bootstrap components to fit it to our design requirements. The third layer was called Extend layer. In that layer we extended the current components of Bootstrap 4 to support new elements. This approach helped us a lot to code faster and communicate with the developers easier.
142
Iterations
88
Screens
800
cups of coffee!