Towns — A Community Building App UX Case Study

Within the Pakistani culture, it is common for people to be physically affectionate with those of the same gender. For example, men may put their arms on each other’s shoulders and quite comfortably touch each other. A lot of the greetings are also based on physical affection such as a handshake, hug, or even gentle taps.

With the COVID, a lot of their interactions have been minimized. While people do have the option to interact with each other online, a lot of the public is hesitant to do so because their core methodologies of interacting with each other can not be satisfied with online interactions. This is particularly true when discussing social interactions.

In order to ensure the people of Pakistan have access to social interactions, the objective of this project is to ensure that they are able to interact with each other and build relationships within societal communities and attend various in-person gatherings as well. Pakistanis also tend to trust people when interacting with them in person or in a humanized online form.

Limitations: For this research, I’ve only taken users between the age group of 18–34 in order to narrow down the scale of the problem.

Broad problem

We barely find time to interact with our neighborhood, and in this pandemic situation, the interaction with our society is totally gone.

Dissection the problem

  • What: Find time to interact with our neighborhood
  • Where: Within our society/town/neighborhood
  • When: In the post-COVID boom

I’ll talk about the ‘Why’ and ‘How’ after the empathizing (research) and ideation phase respectively.

Refined problem

COVID has left social interactions within our neighborhoods to a bare minimum causing most adults to feel social isolation.

My process

Now before we begin with the actual UX case study, let me first walk you through the process I followed:

Note: I had a time span of 2 weeks for this whole project so value maximization played a huge role in determining the tasks divided.

Phase 1: Empathize

For this project, I conducted 5 user interviews. While the objective was initially to aim for at least 7 to ensure validity and authenticity of data, I was unable to do so because of time constraints.

Type of research: Primary
Mode of Research: User interviews
Sampling method: Convenient Sampling

Interview script

Hi [Insert respondent’s name], make yourself comfortable. Thanks for coming.

The purpose of this research is to find out a bit more about what people experience when interacting with neighbors during this pandemic. I want to learn more about your personal experience of how you’ve interacted with different people. I also want to check out a few things before we can start. Now, it is important to let you know that if you want to stop at any time or you want to take a break, you can. Or if I ask you a question that you don’t want to answer. Please free to say “I don’t want to talk about it.” That would be absolutely fine.

And lastly, we agree that the whole purpose of using this interview will be for research and your information will not be made public in any way, shape, or form. Can I just check is that fine with you?

Do you have any questions for me before we get started?

1- Can you tell me how often you interact with your neighbors?
2- When do you normally prefer to interact with your community?
3- Can you share any problems you’ve faced when trying to socialize within your community?
4- Can you tell me the feeling that you associate with your society and/or community?
5- Have you ever tried interacting with your neighborhood online? — If so, follow-up — Can you share any specific experience?
6- How did you normally interact with your neighbors and community before COVID?

Thank you so much for your time, I really appreciate your responses. Is there anything else you’d like to add?

Alright perfect, thank you so much [Insert respondent’s name]!

Findings

Here are some quick demographics of the respondents:

Here are the findings I’ve discovered after conducting my research:

  • Most people do not have any way of keeping up with their community events.
  • Ever since the pandemic started, most of the respondents haven’t seen their neighbors reducing the average to once every 2–3 months.
  • People prefer having casual community events where they can interact with one another.
  • Some of the people have tried using online interactions to talk to their neighbors but only once or twice.

Phase 2: Define

After carefully studying user feedback along with insights collected, I’ve prepared 2 user personas to represent the sample of 5 respondents.

User personas

Re-defining problem statement

Now that I’ve completed my research and defining stage, it’s time to re-evaluate where we started and revise our original problem statement.

  • What: Find time to interact with our neighborhood
  • Where: Within our society/town/neighborhood
  • When: In the post-COVID boom
  • Why: People don’t have a method of coming together that enables them to keep a hybrid interaction approach where they can interact online and in-person as well.

Now all that’s left is the ‘How’. In the next part, I’ll talk about some of the ways we can solve this problem.

Problem Statement: People find it difficult to interact within our neighborhoods especially in this post-COVID boom era because people aren’t sure how to interact with each other or keep up with community events and information.

HMW statement

How might we help people improve their interactions within their communities/neighborhoods?

Phase 3: Ideation

Now it’s time to put my big brain into action figure out what are some of the ways we can solve this problem. Here are some random solutions I thought of:

  • Make a billboard outside their local mosque for everyone to view information.
  • Create a community office within every neighborhood.
  • Build an online platform that helps them keep up with their community events and activities and helps them keep up with each other.
  • Make a Facebook group for the community
  • Make posters of every happening in the community and post them at random places throughout the whole community.
  • Have users write hand-written letters to every member of their neighborhood every day to stay updated. (Worst Possible Idea)

Final idea: Build an online platform that helps them keep up with their community events and activities and helps them keep up with each other

User flows

Here’s how our users will browse through our platform:

Onboarding:

Main app interactions:

Information Architecture (IA)

Here we have the overall information architecture of the entire platform:

Phase 4: Prototype

Before we move on to the designing stage, let’s quickly go over the style guide:

Style guide

Rationale: While it may not look like the best name for a community app, the reason I chose this is because of its single syllable pronunciation. Pakistanis often have trouble pronouncing words that have more than 3 syllables. So to ensure the name is easy to pronounce and easily memorable, I chose the name ‘Towns’.

Apart from that I also chose blue as my main color to represent trust among the communities.

Wireframing

Low-fidelity prototype

Hi-fidelity prototypes

For the hi-fidelity prototypes, I’ve grouped them based on the kind of task they’re performing as a user-flow type style.

Onboarding

Booking an event

Other screens

Interactive prototype

<iframe style=”border: 1px solid rgba(0, 0, 0, 0.1);” width=”800" height=”450" src=”https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FUvhwxDRqS6yPF1SvTyncL1%2FVD-Assessment---Muhammad-Ahmad%3Fpage-id%3D0%253A1%26node-id%3D48%253A1250%26viewport%3D264%252C48%252C0.16%26scaling%3Dscale-down%26starting-point-node-id%3D48%253A1242" allowfullscreen></iframe>

Phase 5: Testing

Now comes perhaps the most important part of any design journey, usability testing. Although I was unable to conduct detailed usability testing, I was able to test the prototype with four of the original respondents who I researched during the foundational research phase.

Usability testing

Please note I’ve only highlighted the areas the users had trouble with because the beauty of the design is such that nobody notices good design. But everyone notices bad design.

Here are some of the interesting findings I discovered:

Users had trouble understanding what the community news cards meant. A lot of them understood it as something sort of story or update.

A majority of the user also wasn't able to identify that this in fact clickable.

Users were also expecting to create groups with their friends or family and not simply focus on individual chats. This can be a valuable addition to the MVP.

There was a lack of contrast with the two action buttons resulting in the user feeling conflicted about where they should click. The hierarchy of the buttons could also be improved to offer a seamless experience.

Additional comments

The users also felt there was no way to access the app’s settings or the user’s own profile. A clear path towards the app’s settings needs to be implemented as well, along with access to their profile.

Usability heuristics

Because I wasn’t able to conduct usability testing as effectively as should have been required, I also decided to add Nelson’s Usability Heuristics to the mix to enhance the user’s point of view.

Here are Nelson’s usability heuristics and how I’ve inculcated them in my design:

#1: Visibility of system status

The design focuses on keeping the users informed about what is going on, through design elements and content used.

Example:

The bottom bar indicates where the user is in the app by using design elements like opacity and colors.

#2: Match between system and the real world

The design speaks the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follows real-world conventions, making information appear in a natural and logical order.

Example:

The bottom bar indicates where the user is in the app by using design elements like opacity and colors.

#3: User control and freedom

Users often perform actions by mistake. That’s why we’ve clearly marked ‘back’ options to help the user return to their previous screens without having to go through an extended process.

Example:

Back to options to ensure if the user accidentally clicks anywhere by mistake, they can revert back to the original screen

#4: Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. That’s why we’ve followed Google’s Material Design’s component style along with creating a fixed style guide to follow as well.

Example:

#5: Error prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Here we use, confirmations before any major actions like booking sessions or booking seats.

Example:

Confirm booking question before the final booking to avoid any accidental errors and helps the users develop a seamless experience.

#6: Recognition rather than recall

Minimize the user’s memory load by making elements, actions, and options visible. I’ve also taken into account that the user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

Example:

Text messages preview are visible from the main screen allowing the user to get an overview without needing to open the chat.

#7: Flexibility and efficiency of use

I’ve also introduced features like search to help the user find precisely what they’re looking for with minimum effort required.

Example:

Search feature to help users find specific individuals in their neighborhood quickly and without having to scroll too much.

#8: Aesthetic and minimalist design

Design is often based on assumptions about the user and this case was no exception. When we ensure a minimalistic design, we also ensure the least amount of assumptions as well.

Example:

Since community apps are a relatively new concept in Pakistan, it’s important to help the users understand what they’re doing along with guiding them. In this example, I’ve used minimal components to have maximum impact.

Areas of further improvement

Given the limited time frame, I had to limit the focus on major functions and minimize attention towards micro-interactions. That’s why here are two areas of Nelson’s Usability Heuristic that can further improve the designs:

  • #9: Help users recognize, diagnose, and recover from errors
  • #10: Help and documentation

That’s all Folks!

Thanks for sticking around till the end and good luck with your UX Journey!

If you love to talk about anything design-related hit me up on Linkedin here.

Or just send me an email here.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Muhammad Ahmad

Muhammad Ahmad

I Design Stuff! — UX Designer & Writer