Case Study – Dedicated Mobile App and Responsive Website UX Design for Social Good

Kile Neighbourhood Association Community Forum App

Duration: November 2022 – Jan 2023

The Product

An app that sensitises and enables neighbourhood association members to participate in community programs. The association partners with existing charities and community-based organizations (CBO) that run programs within the community. The app and its website will inform members about the programs running and how they can participate. This will also provide an opportunity for members to give feedback and highlight the plight of those in need within the community



The Problem

Community leaders want more people involved in the community’s social programs since only a few people attend meetings and events or volunteer their time and resources. Many of the community members would want to participate In ways that they cannot find time to attend meetings and are uninformed



The Goal

Design an app that sensitises and enables neighbourhood association members to participate in community programs.



My Role

UX designer leading the app and responsive website design from conception to delivery



My Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Understanding the User

User Research

I conducted user research to understand the attitudes and challenges that members face when contributing time and resources towards community projects. I also wanted to identify from the research the best way technology can be used to raise awareness and participation towards community projects. Interviews were conducted on a target group who are members of Kile Neighbourhood association and residents who are not members. The results of the interviews formed a primary user group represented by a persona I named Nelson and a secondary user group who would be the community leaders represented by a persona I named Jane



Persona 1: Nelson

Problem Statement

Nelson is a young professional with a busy career who needs to receive timely information on upcoming charity events and make donations with ease because he wants to make positive contributions to the community he lives in, yet he cannot find time to attend in-person meetings



Persona 2: Jane

Problem Statement

Jane is a mother and community leader who needs to share and notify members of information about community programs and events because she wants more people involved in the community’s social programs and events or volunteer their time and resources

Ideation

I did an ideation exercise using a crazy 8’s based on insights derived from user research and problem statements for the two personas to quickly come up with as many ideas as possible

Digital Wireframes and Low Fidelity Prototype for Dedicated Mobile App

The design aimed to create an easy-to-use tool that is familiar with the aim to drive member engagement by providing current information and a forum for members to interact.
After the usability study, I added a members section to easily send direct messages to members

Low Fidelity Prototype

The design aimed to create an easy-to-use tool that is familiar with the aim to drive member engagement by providing current information and a forum for members to interact After the usability study, I added a members section to easily send direct messages to members

Usability Study for the Dedicated Mobile App

I conducted an unmoderated usability study, with 5 participants who are residents of Kile neighbourhood. The objectives were to gauge the usability of the app’s design and if the design is useful to the community members. The results could of the study were broken down to these key insights



Quick Posts Filters

Users need a way to filter posts or events by topics or themes



Large Action Buttons

Making the onboarding screen larger easier to view and select elements would make the onboarding process simpler and more accessible



Direct Member Messaging

Users want to be able to directly reach out to other members individually or in groups

Mockups and High Fidelity Prototype for Dedicated Mobile App

Having gained insights from the usability study, I created mockups with these insights in mind

High Fidelity Prototype

High-fidelity prototype after design iteration following the usability study

Mockups and High Fidelity Prototype for Responsive Website

Responsive website designs for mobile, tablet and desktop screen sizes

Accessibility Considerations

Serving members of a diverse community requires that UX design must consider those members of the community with disabilities. A key demographic within the Kile community are older users with visual impairment. Some of the design elements I incorporated incilde



Large action buttons with high contrast to focus the attention of users on these actions and are easy to click especially for older users



Well-labelled navigation menu and icon menus.



Next design iterations would include voice enabled chat for membership messaging feature

Takeaways

Feedback from the usability revealed that the design would drive up community engagement and participants were both excited and looking forward to getting well-informed and being part of the neighbourhood’s activities

I learnt that the various stages of the design process have to be driven by putting the needs of the users front and centre. Design decisions have to be backed by real data and feedback from users