How can UX/UI design process support NGO needs?
Most of us occasionally have slack time. Have you ever thought about investing some of it in helping others? NGOs, or non-governmental organizations, can help people desperately in need of social assistance; often they lack specialists who are essential elements in completing their projects. At DNA Technology, among others, we use our IT skills to contribute to open source projects, and also to help NGOs bring their projects to completion. In this short story, I’d like to share my recent experience working with such.
Problem
Teen Challenge (TC) is a global movement that assists those who are homeless and who suffer from addiction. We worked together with their regional branch in Wrocław, Poland. Local problems and challenges are a bit different than those of a global scale; TC Wrocław’s needs resulted from local requirements. The organization requested a website that would support their efforts in both being visible to the community and with fundraising initiatives. They also wanted to expand their organization in other directions such as cooperating with other businesses, media, churches, and NGOs. That is crucial in their activities, as being able to help people is strictly linked to securing funding.
Why did we decide to join?
This particular collaboration caught our attention for a few reasons. Firstly, our team was curious about how digital tools can be utilized in helping homeless people, something we had previously never done. Secondly, we could focus on a small part of the initial phase which was aligned with our time constraints at the moment.
The first impressions
We were curious about TC’s expectations. At first it looked like they wanted to put everything on one page. The amount of content was overwhelming and didn’t seem to target the main audience. After going through all the materials, we had to ask questions in order to discover TC’s real objective. Asking questions is the best method to discover an organization’s needs, define ideas and ideate first sketches. A prototype instance of the website, which can be tested and refined in the future, is created using these first sketches.
Understanding the content — what should be where?
When making a website, it’s imperative to understand who the audience is, what type of information they search for, and to build confidence in the organization’s mission. The content architecture was our first focus. This means figuring out which elements are the primary focus of the target audience’s perspective, and which elements are secondary. Why is this so vital in the early stages? A solid idea is always a better base for building a design than a foggy one. Our team started with the assumptions that TC gave us and revised them. We asked some people coming from the business and NGOs and sent them questionnaires. Our goal here was to get more familiar with their perspective as representatives of our potential target group. Survey results were helpful and allowed us to understand things more clearly. We used the feedback to create a visualization of the architecture of the information to be displayed on the website. It usually happens that the expectations of potential target groups are different from the initial ideas that our partners have. At the end of this phase, our team started fleshing out general ideas.
At this early stage, the content architecture is more important than colors or details; that’s why low fidelity wireframes are used to start collecting feedback. We had a few quick, 45-minute online workshops to gather all the ideas followed by corrections. Clickable prototypes made the experience more palpable. In the 2–3 days the team was able to get a general idea for initial content architecture.
Having that first phase completed, the next step was creating a sitemap. A sitemap helps us to visualize where and how all other content should be displayed on the page. What would be the viewer’s journey? How could we keep them interested and encourage them to support TC? We finished that initial part with a solid concept of content for the home page and the rest of the pages. It was about a week before it was finished. What did we learn during this step? There are important differences between the worlds of IT companies and NGOs. We use different tools and methods and we work at a different pace. This makes sense as IT companies and NGOs have different projects and goals. Our team was able to point out the different perspectives and needs of their prospective viewers.
Structure? Check. Now for more details
With an overview of the content ready, we started playing with form and the way the website would look like. At this point, the team usually focuses on improving visual elements to the level of medium fidelity wireframes. With each subsequent iteration, the design started to look better. Elements of the page were evolving as well as the information displayed in different sections of the website. The language used to speak to the viewer also evolved.
It took us another week to achieve the point where we were content with the current state of design and agreed that this is a good starting point for the development of the page. We finished this part of the design process with sets of designs for the whole website and a clickable prototype in both mobile and desktop resolution. At this point, we already completed the skeleton of the future page when it comes to the design.
We’ve finished. What’s next?
We finished our journey with a design ready for development. Those were the results of our two-week collaboration with TC Wrocław. What could be done in the next steps? The first step is to build this website. The second could be to connect analytics and generate traffic on the website. Next, you can start observing user traffic and behaviors on the site and make further adjustments based on this data. By doing so developers and organizations can optimize their delivery of the most relevant content to users. Speaking as a team member, I was a bit sad that we had limited time and our involvement finished, cause there is so much more that can be done here. But that’s just the way it is when working with a limited time schedule. Sometimes, we only take part in smaller chunks of projects and I really enjoy that form of a supportive role. I’m really curious how that page will develop and perform. I’m keeping my fingers crossed for all planned micro-interactions on the website and hope to receive positive feedback from users.
Want to help others? Support NGOs
Your professional business experience or skills, donations, or physical involvement can all be used to help NGOs help others. These contributions can seem insignificant but in practice can be quite significant for NGO activities. I sincerely encourage you to support them if you have such an opportunity. Things that look simple to a professional may be, on the other hand, a completely different story for organizations such as Teen Challenge. Undoubtedly, such a contribution is also valuable for all other activities provided by TC and their volunteers. Take a look at Tech to the rescue for NGOs that are in need of professional help.
What was the overall experience?
Both parties involved in this collaboration learned new things. TC Wrocław witnessed the modern UX/UI process and saw our way of working: remotely, using an agile approach, efficiently, and open to anyone interested in participating. On the IT side of things, we learned new things as well. I had that feeling that not all was clear on their side at some moments, even if they confirmed. Secondly, the initial form of presenting the roadmap, which seemed transparent to us, turned out to be difficult for TC to find and understand. In the end, we completed our objective we delivering what our collaborator needed — a thoughtful design for their local branch which will help them to achieve their goals. I am looking forward to seeing the site up and running.
Worth seeing:
