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?
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.
I created an online survey targeting people who live in residential buildings in Toronto and the GTA. I asked people about:
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.
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:
I organized participants' responses into four categories in order to define our users:
After synthesizing my research and gaining some helpful insights, I was able to set some project goals based on their feedback:
I started collecting ideas on how the flow of this app may work. For example:
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.
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.
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.
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.
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.
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.
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.
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.
© 2019 Cindy Clarke