KNOCK KNOCK

Messaging App Prototype

ROLES

  • UX Research
  • UX Design
  • UI Design
  • Prototyping

tools + Activities

  • Figma
  • Usability Testing
  • User Interviews

Team

  • Solo

Duration

  • October - December 2021
    (3 Months)

Problem Overview

In the summer of the pandemic, one of my neighbours left a piece of paper on our doorstep telling us they were having a baby shower, so that we wouldn’t call the police on them for having a gathering in a pandemic. The problem was that we almost threw out the paper because we thought it was a promotional flyer.

I realized that communicating information to your whole neighbourhood is difficult, especially during a pandemic, since we’re more disconnected than ever.

01

Understanding the Problem

I talked with people who live in a neighbourhood in order to gather insight on what kinds of specific problems they have personally experienced in regards to communicating with their neighbours.

Some key takeaways from these interviews were:

  • If I were to create another social-media-like neighbourhood app, I would alienate users who do not use social media. However, these types of users often use messaging apps, like texting and WhatsApp.
  • People who live in neighbourhoods do indeed have problems communicating with their neighbours. An important point brought up in this interview process is that people who have cottages have a very difficult time contacting their neighbours, as many of those neighbours are not visiting their cottages at the same time.
  • I confirmed that there is a need for a solely messaging-based app in order to solve a wide range of neighbourhood communication problems.

These conversations were eye-opening, and I decided that the proper solution would be a strictly messaging-based app for people to easily communicate with their neighbours.

02

Low Fidelity Sketches

The focus was now on designing a solely messaging-based neighbourhood app. My plan was to create a simple design that had the typical look and feel of other messaging apps, so it would fit the mental model of a messaging app. After creating some sketches of the app’s wireframes, I conducted a brief user test to see if I was on the right track.

The initial sketches proved to be very intuitive. The user understood that clicking the neighbourhood heading would open the neighbourhood's information. They understood the contents of the hamburger menu, and that the envelope icon was used to message a neighbour. They also correctly assumed that tapping a user's name would open that user's profile.

The majority of the app design fit the users' mental model of a messaging app, making it intuitive and easy to use. I felt comfortable going ahead with the wireframes.

03

Wireframing + First Impressions

Before finishing my complete medium fidelity wireframes, I wanted to see if there were any pain points with the homepage before taking the app any further. I tested with a user who has very little experience using apps to learn how intuitive my ideas truly were.

  • The difference was unclear between "Your Neighbourhood" and "Chats". The wording must be changed.
  • There was confusion as to how to start a new chat, so I needed to figure out a more intuitive way of displaying this element.
  • A feature to only receive notifications for desired chats would be beneficial.

From this test, I learned some smaller features that needed to be added. But my main takeaway was that the process of starting a new chat needed to be much more intuitive.

04

Usability Testing

Taking the insights I learned from the brief homepage usability test, I created a medium fidelity prototype in Figma and conducted another usability test with two users.

This test proved that the app was already quite intuitive, especially for primary functions such as opening a chat, messaging a neighbour, and favouriting a discussion topic.

Another positive change was that users now understood the difference between Neighbourhood and Personal chats, thanks to the improved wording.

However, there were still some pain points that needed to be remedied:

  • Users were still uncertain about how to start a new chat. Their eyes skipped over the plus button in the bottom corner, and instead used the search bar to start a new chat. Therefore, the icon to start a new chat must be more prominent, to ensure that users intuitively know its purpose.
  • Users noted that messaging users’ addresses instead of their names is very useful, as many people don’t know their neighbours' names, so I made sure to include this feature in the final app.

05

First High Fidelity Prototype

06

Giving it an Upgrade