Design for Social Impact
Rojin Maljaei
UI/UX Designer

Design for Social Impact

A social media for social impact

The problem of social impact community

Thousands of social projects runs 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 we aimed in this project, was building a platform that support causes to unify with brands and volunteers in creating a better world for everyone.

Inpactor's UX Process
Inpactor's UX Process

Define

Core values and Vision

To understand the concept and define the product, I had a few face to face meetings with the co-founders of Incitement. From our conversations, I tried to find out the core values of Inpactor and what their vision for this product is.


Transparency: Brands and causes usually aim to do good for a 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 Inpactor must create an environment which not only increase the quantity 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: Inpactor 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 in several whiteboard sessions with product managers and assessed different aspects to get a comprehensive view of the product we want to build. After a couple of weeks of discussions and brainstorming, we 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 who have shared concerns about variety of social issues and keep them engaged and connected. It should allow these communities share their concerns with each other and plan to take actions to overcome those challenges.

Fundraising: Creating impact needs money. In order to increase the number of social projects and enhance the quality of deliveries, Inpactor must help causes to get funded faster and easier.

Project management:  If execution of a project become 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 to plan several tools which could help project managers in their day to day job a lot.

Research

Interviews

To understand our potential customers and their perspectives to 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.

Design for Social Impact

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 in customer intro part of the interview helped us to have a better understanding about 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, painpoints and touchpoints. We referred to these personas throughout the entire product development process.


Ideation

Design for Social Impact

Sketches

I started the ideation part with sketching on paper and whiteboard. It wasn't only me who sketched. The product manager and CTO were heavily involved about every feature we 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 brainstorming to detect the complicated concepts and simplify those concepts with better solutions. In addition of 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!

Design for Social Impact

Wireframes

After finalizing the ideas on paper, I started working on mid-fidelity wireframes. I created those wireframes through Moqups. We could link different views to each other and convert those wireframes to an interactive prototype. It was super useful to test the ideas and iterate to fix the new challenges that we never met in the sketching step.



Design

Design for Social Impact

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

Design for Social Impact

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 Inpactor 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 Inpactor.

One of the learning points of this project was a creative approach about separation of Bootstrap SCSS codes to three layers. One layer was the original bootstrap codes which nobody was allowed to touch it. The second layer was 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!

"A respond to a perfect design is WOW. That wow attracts investors, users and attentions to a product. Rojin is fantastic in creating WOW in designs."

Iman Sedighi, Co-founder and CTO of Incitement
- Part of a Linkedin recommendation