Gather

UX DESIGN  /  VISUAL DESIGN

How do you create "a sense of community", when your community is a residential building of hundreds, or thousands of people who you rarely, or never interact with?

Overview

While I was formally learning about the UX Design process in a Bitmaker General Assembly bootcamp, we were challenged to look for a design problem and work our way towards a solution. I had just moved to Toronto and into my first condo building, and was curious to learn about other people's experiences living within a shared community and explore opportunities within this area.

Research

Surveys & Interviews

I created an online survey targeting people who live in residential buildings in Toronto and the GTA. I asked people about:

• the number of buildings they've lived in
• the reasons why they chose to move in or out of a building
• the things that frustrated them about living in a residential building
• the things that excited them about living in a residential building

These were just some of the topics I brought up to participants. I posted a link to the survey on Facebook and received twelve responses. Three people also agreed to meet with me in-person to chat about this topic. I sorted through all the data, grouping similar responses together, and labelled them.

Key Findings

Residents listed cost, safety, and amenities as major factors in selecting a building to live in. However, the thing that mattered most to participants (83%) about living in a building, was having a sense of community. This was important to them for two main reasons:

1. Living in a building where social interactions between other residents occured made their building feel "more like home". Participants stated that "seeing familiar faces is comforting", and makes the building feel "friendly and safe".
2. Participants also want to stay informed about what's going on, in and around their building, and they get information about these events faster when speaking to other residents.

Personas

I organized participants' responses into four categories in order to define our users:

Behaviours

• I often miss paper notices around the building.
• I look for information about the building online.
• I expect information to be delivered via email

Attitudes

• I hate talking to management.
• You find out way more by talking to other residents.
• I like it when people talk to you and you get to know your neighbours.

Needs

• I want a speedy response to my inquiries. I usually need an answer quickly.
• I want information about what's happening in and around my building.
• I have questions about my unit and the building that I bet others already know the answers to.

Goals

• I want to receive information electronically
• I'd like a partner for the building amenities (gym, tennis, pool)
• I'd like to connect with other moms in the building
  

Project Goals

After synthesizing my research and gaining some helpful insights, I was able to set some project goals based on their feedback:

1. Increase social engagement between residents
2. Promote information sharing between residents
3. Connect people with similar interests

Ideation

User Flows & Wireframing

I started collecting ideas on how the flow of this app may work. For example:

• How would a user sign-up for an account?
• How would a user create a profile?
• How would a user engage in a conversation with another resident?
  

I started sketching possible solutions to these types of questions. Once I had a few sections completed, I shared them with my prospective users to get feedback and see where I could make improvements.

Some initial rough sketches of the "creating a profile" user flow.

I was able to make some revisions to the design based of this feedback. For example, it was suggested I separate a few of the screens into smaller groups of information instead of having longer, scrolling screens with many fields for the user to fill out. There was also discussion about the tab labels - specifically "talk" and "friends". This resulted in me changing those labels to "chat" and "buddies". The topic of a progress bar of some kind was also mentioned.

Next, I created hi-fidelity wireframes using Balsamiq (shown below) and implemented the changes that made the most sense towards our goal and for our users. I shared this again with prospective users for another round of feedback before adding any visual design elements.

Revised wireframes of the "creating a profile" user flow.

This round of feedback resulted in me removing the "My Interests" screen from the "create a profile" user flow. Although that screen is important to fill out in order to connect users with similar interests, this step was not imperative to complete during the sign-up process. I decided to leave it in the "Profile" tab instead for users to fill out at a later time. Once a user is signed-in, there would be some onboarding messages to direct the user on where to accomplish that task.

Final visual design of the "creating a profile" user flow.

Prototype

I created a prototype with InVision using hi-fidelity wireframes. I sent a link out for some user testing. Based on that feedback I will be able to iterate and make more improvements. For example, the bottom navigation tabs were not necessary for the initial signing-up process. They were actually a distraction, as users wanted to click into the different tabs to check out the app, instead of focusing on the short sign-up task. I implemented these changes in the visual design phase.

Note: I have since updated this prototype with the final visual design screens.

Visual Design

Visual design of the landing screens for each section of the Gather app (Login, Chats, Buddies, and Profile).

Tone

This is a casual and friendly social app that aims to connect people and lead to some fun discussions and encounters. For that reason, I chose to use language throughout the application that reflects that vibe.

Imagery

The imagery will be uploaded by users (profile pictures) and I predict, as is the case with many social apps, the photos will be more on the casual side than professional - which will further accent the tone of the app.

Branding

I chose a bright orange colour palette to create a warm welcome. It's a friendly and positive vibe from the first screen! Orange is also a complimentary colour to many other social apps, which use blue (Facebook, Twitter, LinkedIn), so it will stand out if grouped with other social apps.

Naming The App

Gathering is a social behaviour. We gather for events, and we also gather information. I chose "Gather" as a very fitting name for an app that facilitates both information sharing, and social behaviours.

Case Studies

© 2019 Cindy Clarke