Neighbrs Brand Manual by Elizabeth Zhu

Table of Contents 03 04 29 51 96

Introduction Inital Idea Research UX/UI User Testing

131

Style Guide

152

Visual Design

Introduction Neighbrs is an app that builds a sense of community within apartment complexes by facilitating communication between tenants, neighbours and landlords. The app makes it easier for tenants to receive real-time updates from apartment managers about issues and events happening in their building. The brand voice of Neighbrs reflects the appâ&#x20AC;&#x2122;s mission to bring people together, build relationships and help people feel more connected to their home. The app feels friendly, bright and open for tenants to use, yet still professional and sleek for apartment managers.

Initial Concept Neighbrs is an application that was created to solve a problem. The initial idea presented addressed a number of issues tenants face in their apartments and the lack of communication that exists between them and their landlords.

Apartment Solutions App Presentation

Problem Scenario #1

Poor communication between tenants and landlords/owners A tenant notices theyâ&#x20AC;&#x2122;re not getting hot water in their shower anymore. Their apartment does not have a concerige. They e-mail the apartment owners and get no response.

Problem Scenario #2

No lost and founds in apartments A tenant left their workout clothes in the apartment gym. How will they get them back?

Problem Scenario #3

No nearby convenience stores or malls

Problem Scenario #4

Poor sense of community among apartment residents

The iPhone charger of a tenant broke and they need one ASAP. There are no stores nearby that are open or sell chargers. What are they going to do?

A new resident just moved in and wants to get to know their neighbours by throwing a party in their unit. How will they invite everyone?

Solution? An app that connects apartments residents with their neighbours and their property managers

Features

• Talk to landlords and managers directly • Post a message for the entire apartment to see • File property complaints • Direct message other residents

• And more!

| 10

| 11

roblem cenario #1

Poor communication between tenants and landlords

A tenant notices theyâ&#x20AC;&#x2122;re not getting hot water in their shower anymore. Their apartment does not have a concerige. They e-mail the apartment owners and get no response.

Benchmark Analysis

| 12

Microsoft Teams Analysis #1

| 13

Description

Microsoft Teams is a chat-based platform that brings people in workplaces together. It provides them with the tools to collaberate and achieve more effectively. https://www.youtube.com/watch?v=FFQszYALS_A

Usability

User friendly interface. Intuitive to use.

Some screens can appear cluttered and busy.

| 14

Visual Design

Straightforward corporate look and feel. Limited colour palette with no visual fourishes. Clearly targeted towards businesses.

| 15

Content

The content is user generated. Microsoft Teams is merely a platform for people to host their own content.

Information Architecture

The content is organized in a three tier heirarchy.

| 16

Navigation

User-generated channels

User-generated content

(Static)

| 17

Navigation

User-generated channels

User-generated content

(Static)

There is no limit to how many channels a user can make. Without moderation, the number of channels can become overwhemling and redundant.

| 18

Technology & Novelty

GIPHY integration for an element of fun, video and voice chat, meeting and schedule planners, file sharing, and more!

| 19

TenantLoop Analysis #2

| 20

Description

Mobile and web solution that empowers property managers to give better customer service and an overall experience by bridging the communication gap with tenants.

| 21

Usability & Design

Limited green colour palette with shades of black and white. Simple, modern and clean. Practical and easy to use.

| 22

Usability & Design

Some icons and words illegible because they are green on green.

| 23

Content & Info

Contains information about the property, leases, who the tenants and landlords are, and any maintenance problems or service updates in the building (e.g. if there is a fire alarm test going on that day).

| 24

Content & Info

Major privacy issue with revealing where each tenant lives and their personal information like first and last name.

| 25

Technology & Novelty

It is one of the few apps availible for existing tenant-landlord relationships (most apartment apps are for potential buyers and renters). It incorporates push notifications, chat messenger, feedback surveys and real time service updates.

| 26

roblem cenario #1

Poor communication between tenants and landlords

A tenant notices theyâ&#x20AC;&#x2122;re not getting hot water in their shower anymore. Their apartment does not have a concerige. They e-mail the apartment owners and get no response.

Thank You!

See next slides for appendices

| 27

Brainstorm

Mapping Mapping

Resources Resources

http://tenantloop.com/ http://tenantloop.com/

https://products.office.com/en-us/microsoft-teams/group-chat-software https://products.office.com/en-us/m

soft-teams/group-chat-software

http://www.zdnet.com/product/microsoft-teams/

http://www.zdnet.com/product/mic | 28

Research PACT analysis Interview Plan System Requirements Charts

| 29

PACT Version One

Research | 30

Research | 31

Research | 32

Research | 33

Research | 34

PACT Final Version

People When it comes to people living in apartments, there are a variety of people to consider, from personality, appearance, ability, culture and age. The unique characteristics prove to be a difficult task in creating an application that caters to the needs of multiple users. When there is a large number of people living in a building together, it is hard to gain a sense of community among those neighbours and communicate with others, especially in times of need. Potential challenges could include not knowing if other people in the building have running water, or if they the heating is working or even asking for help to move in. By creating an application that allows for residents to communicate with each other, solutions may present themselves when needed. The variety of people that live in apartments range from adults, families, young adults, and elderly. This can be narrowed further to students, immigrants, people who are single, single with kids, people with pets, people with disabilities, parking and so forth. There is a huge amount of potential users who would be able to benefit from an app that can help them communicate with each other in times of need. There is a lot to consider for a wide market of users, and the many issues that should be addressed according to the users. For example, an immigrant who has trouble speaking or reading English should have the option to toggle between languages to help them understand the app contents. It would be helpful to include graphics that can be understood universally, such as a chat bubble to indicate where to go to look at messages. Elderly would also benefit from a larger text option and graphics that make it easier to navigate, as most elderly are not well versed in using newer technology. Research | 35

People such as students, or parents are most likely busy with school, work and family, so an app that is easy to use and be able to search/ask questions efficiently should also be considered. The overall design should consider the needs of multiple individuals. General solutions should include being able to quickly learn and remember how to use the application. A neutral and simple design would be able to cater to all users and create a universal look that will also be understood by most users.

Activity In order to use the app, the user needs to be able to type and read content. The app can make this easier for users by ensuring proper legibility and integrating necessary features like a keyboard. The user also needs to be able to navigate the content in order to find what they are looking for. To facilitate this, the app should be intuitive to use, have a clear hierarchy of information, and a logical structure. It could use features like a search button, index or history. The userâ&#x20AC;&#x2122;s activity can be broken down further into its temporal aspects, cooperation, complexity, safety and the nature of its content. Temporally, residents are expected to use the app on a regular basis and receive periodical push notifications. The content on the app will constantly change, which is why users are expected to check back regularly to stay informed. However, their sessions on the app will be brief as the content can be skimmed through quickly. Users do not need to worry about being interrupted while using the app as the app will always be up-to-date regardless of when they view it. In terms of cooperation, it is essential that users on the app are able to communicate effectively and in a timely manner. The goal of the app is to facilitate quick communication and depends on its users to follow through.

Research | 36

For example, if landlords don’t respond quickly to residents, the residents will feel frustrated and unsatisfied. Hence, cooperation is extremely important for this app. The complexity of tasks that users partake in simple and vague. The only abilities they need to use the app is the ability to read, write and understand written content. They have the freedom to browse through the app however they see fit and use features based on their feelings of the moment. If residents and admins use the app appropriately and honestly, the safety-criticalness of the app is low. However, if users make mistakes, the effects could be serious and harmful, like if a landlord fails to send out a push notification about a fire in the building. Lastly, the information on the app will need to be organized well in order to making using the app easier. The user-generated content will sorted into channels by topic. Users can browse through the channels and decide which one they want to read or write in. From temporality to complexity to safety, there are many factors to consider regarding the user’s activity. Other activities that may occur in conjunction to using the app: • Cooking • Paying rent • Needing help moving in/out • Needing help (general) • Asking questions • Entering the building • Using the amenities (gym, pool, laundry, rooftop) • Parking (Resident or visitor Parking) • Entertainment (Parties, Lounging around, gaming) • Picking up parcels • Garbage disposal • Pet care (if they have) • Storage • Delivery (food)

Research | 37

Context Context is important to determine different circumstances in which people use their various environments. Considering the physical, social and organizational context which allows us to understand and develop the framework for the app. The environment where the activities take place are usually indoors in places such as in the home, workplace, mall etc. Residents will most likely use the app within their apartment and/or unit. However, it can be used outdoors and onthe-go as well. As long as there is internet access, the environment in which the app is used should not hinder the use of the app. In terms of the social context, privacy of residents is paramount in order to prevent misuse of the app. The lack of privacy may lead to harassment, stalking or fraud. In social contexts the app is diverse, since Toronto is a multicultural city, the cultural attitudes of users vary based on religion, background, ethnicity, age and status. Different apartments may represent different cultures based on their location and socioeconomic status within the city. For example, the social norms in an apartment in Parkdale (known for poverty, crime and homelessness) will differ from an apartment in Yorkville (known for class and wealth). Since the app is an open social platform, it needs a forum moderator to control online harassment and spam. The current organizational context of apartments poses an interesting challenge and power struggle for the app. Currently the power relationship within apartments (especially rental units) tends to favor landlords, building owners and property managers. They control the frequency and quality of apartment upkeep, and often times the primary resource that tenants turn to when problems arise. They have the power to pick and choose tenants, set rental prices, evict people and renovate the property. The app will attempt to dissolve this power dynamic by giving more control to the residents. By providing the residents with a sense of solidarity, it facilitates discussion and compromise. It will allow for direct, real-time communication between tenants, landlords and upper management for a seamless adaptation to the rental

Research | 38

experience.

Technologies Technology is a component that directly affects the overall design. It supports a variety of people in different activities and contexts. The app that we are proposing is primarily a communication technology. Some communication technologies include instant messaging offers real-time communication among the users. In terms of notification, users are able to receive real-time alerts from the office in case of an urgency. Online forums will allow users to hold conversations in the form of posted messages. In order to have better communication among landlords and tenants, users can fill out and send online feedback surveys to the landlords. Moreover, it is reliant upon user-generated content to be useful. Some content are collected from the residents include user data (tenantâ&#x20AC;&#x2122;s name, age, marital status, etc), tenantâ&#x20AC;&#x2122;s complaints and inquiries for landlords and buy or sell requests (e.g. for furniture) through the online forum. Contents that are collected from the management office include information of the building as well as property maintenance status updates and notices. All these features are required to have Internet access (Wifi or data). Though the input and output technology are not a main focus, they are still commonly utilized. Users can input texts using a digital keyboard and import any media from a digital library or phone camera. On the other hand, the output technology describes the ability of an app to display visual contents via a phoneâ&#x20AC;&#x2122;s LED screen.

Research | 39

Interview Plan Statements of User Study Goals & Methods In order to collect information, the intent is to interview a variety of people who are currently residing in apartment buildings that do not have a 24/7 concierge. We will obtain information on the current issues, concerns and feelings that apartment residents have. This will help us identity features that best suit the userâ&#x20AC;&#x2122;s needs. We may also interview people who no longer live in apartments and have them reflect on their experiences. In addition to in-person interviews, we will create online surveys for people to answer anonymously. It will help us gain information from people all over the city and provide us with a larger range of information.

Ethics We aim to respect the confidentiality of our research participants. Unless otherwise stated, our participants will be completely anonymous. During the project, we will securely store the intervieweeâ&#x20AC;&#x2122;s data in a password locked laptop. When the project is over, we will delete all the information. At all times, the participant has the right to terminate the interview.

In-Person Questions Tell us about your relationship with your apartment. E.g. Are you a renter, owner? Do you have roommates? Describe your relationship with your landlord. Describe a scenario where you were satisfied or unsatisfied with your landlord Describe your relationship with your neighbours. Describe a scenario where you felt supported or unsupported by your neighbours. Research | 40

If you had the chance to talk to your neighbours or landlords, what would you say/ask? Why haven’t you yet? What are some of the challenges of living in an apartment?

Survey Questions About you How many people do you live with? What’s your occupation? What neighbourhood do you live in? What’s your relationship of the apartment? Renter Owner Landlord Other: ______

Your Experiences Describe a scenario where you were satisfied or unsatisfied with your landlord. Describe a scenario where you felt supported or unsupported by your neighbours. How often do you communicate with your landlord? Once week Once a month A few times a month A few times a year Never :(

Rate how much you agree with the following statements: “There is a sense of community in my building” Strongly disagree -- Disagree -- Agree -- Strongly agree “Communication with my neighbours is valuable to me” Strongly disagree -- Disagree -- Agree -- Strongly agree “My landlord/property manager is responsive”

Research | 41

Strongly disagree -- Disagree -- Agree -- Strongly agree “Communication with my landlords is valuable to me” Strongly disagree -- Disagree -- Agree -- Strongly agree “I value privacy in my apartment.” Strongly disagree -- Disagree -- Agree -- Strongly agree

Thoughts / things to consider How will the residents be able to contact the diff ppl in the building? Will they automatically be able to access ppl through the app or do they have to obtain numbers/ friend request? ← does this put a barrier to how the app is marketed (being able to make a community within the building) How do you put a limit to the number of channels/ chats you can create? How does the app work with different buildings? (one with 30 units vs 300) How do we make it safe? Can people block others/ customize it so that ppl cant message them (maybe besides the landlord?) (ex, potential harassment / stalking of people) - so i guess how public/ and private will things be How are we supposed to make people use the app - is it mandatory for people to get the app upon moving in? Not everyone is willing to / wants to talk to other ppl in their building If it’s optional people would not want to download the app Are there going to be different modes based on type of person? (security, landlords, resident) The amount of people in a household will they all have different account or all in one account, maybe the conversations by unit? How to prevent ‘cliques’ being formed within the building (or is that our problem)

Research | 42

System Requirements Chart Revised Version One

Research | 43

Research | 44

System Requirements Chart Revised Version Two

Research | 45

Research | 46

Research | 47

System Requirements Chart Final Version SYSTEM REQUIREMENTS CHART

Requirement User Profiles

Rationale User profiles allow for customization for users. Also allows for more personal connection to other residents.

Priority Must have

Content - Users’ personal information (e.g. first & last name, brief description of themselves) - Settings (privacy, block, customization)

Function Creates database of users that keeps record of residents

Fillable form Complaints

Users can fill in the feedback and complaints to the management office.

Must have

- Complaints/Concerns - Repairs requests - Lost items

Users can send direct requests and inquiries to their landlords and the building managers

Push notifications: Emergency

Allows property managers to send real-time notifications regarding their building

Must have

-Emergency updates

Allows users to get important information quickly and directly

Push notifications: Non-emergency

Allows property managers to send real-time notifications regarding their building

Should have

- Real time maintenance updates - Mail delivery notices - Security alerts - Shipping notices

Allows users to get important information quickly and directly

Forums, “Channels”

Allows users to talk publicly to different units

Should have

- Possible channels such as “Lost and Found”, “General”, “Buy/Sell”, “Complaints”. - Each channel will contain user generated posts relevant to the channel topic.

Users will browse through the different channel feeds, click on one, and then post or read content

Research | 48

Research | 49

Research | 50

UX/UI Design User Personas User Scenarios Site Map User Flows Moodboards Hi-Fidelity Wire Frames

| 51

User Personas Version One

UX | 52

UX | 53

User Personas Final Version

User Personas Name: Amy B. Age: 19 Occupation: University Student Bio: Amy B. is an university student who shares an apartment unit with her friend. She is an outgoing person who loves to talk to people. The neighbourhood that she is living in is really close to her school, which means there’s a lot of students who are living in the same apartment as her. She wishes there are opportunities to know more these people. She hopes she can gather them and organize some events in the apartment. Name: Tim C. Age: 53 Occupation: Apartment Complex Manager Bio: Tim C. is the owner of multiple apartment complexes. As the owner his duty is to manage the property’s complaints, give important building notices and managing units. Curious of how to increase market earnings, Tim wants to learn about the culture of the community within his building. Learning about the culture of his building would allow him to understand the target market and give him the opportunity to fix any issues he may have with his buildings so he can increase revenue. Dealing with building notices is a frustration he has where he has to print out hundreds of slips to post on each unit door which is costing him time and money. He is always looking for different ways that he can improve efficiency to cut down the cost of maintenance. Name: Eddy K. Age: 27 Occupation: Recording Artist Manager Bio: Eddy K. works full time as a manager at a record company where he works long hours managing recording artists, often working over time. He works Monday - Friday often from 7am - 5pm and sometimes on weekends. Eddy lives at home alone with his two cats and is a plant enthusiast. Although he loves his job, Eddy worries that with his long hours at work, his cats are not taken care of and might get sick, as well as his plants drying out. He is worried and stressed when he needs to rush home to take care of his animals and then ruch back to work. Name: Jeremiah T. Age: 42 Occupation: Bank Teller Bio: Jeremiah T. is a bank teller who works from 9-5pm every Monday to Friday. He lives with his two daughters, two cats and his wife, who also works a 9-5 job. They wish they had a better way to communicate their apartment issues to the building. Secondly, they are concerned about the safety of their young children and pets who stay at home with a teenage babysitter, especially since the building they live in often has false fire alarms and people coming in and out of their unit for inspections. They wish there was a way to stay informed about what’s going on at home while they’re away at work. UX | 54

User Scenarios

1. Messaging a User through user profile 2. Checking your personal news feed 3. Filing a complaint 1. Irene met her new neighbour in the corridor and she wants to invite her to have dinner together. She only knows her name and she wants to message her with the app. She clicks the message tab and it leads to the the contact page. She uses the search function and type in her neighbours name. Once she clicked on her neighbour’s name, the profile appears and the conversation box shows up after clicking on the message button. 2. Angie wants to check out her post that was posted in the social categories. She opens the Neighbours app and she is on the dashboard page. She slides the screen and it will lead to the personalized feed that will allow her to see her posts. 3. David was so frustrated with not having hot water to shower after his work out so he wants to complain this situation to the management office. He has to fill out the complaint form by opening Neighbours app, and from the Dashboard he would click on the forms tab, then go to complaints, filling out the subject and details of the issues. After filling the form it will lead him to preview page. He clicks on the confirm button and he will be directed to the status page.

1. Booking a Party Room for an event gathering 2. Viewing the details of a Fire-alarm testing notification 3. Subscribing to a forum 1. Irene wants to book a Party Room for a gathering with the girls Saturday evening. How she books the party room is from the Dashboard she would go to the forms tab on the bottom, then clicks on bookings, Choose her date and fill out the form. After filling the form she will be directed to the status page where she will get updates on her request. 2. Angie is at the office doing some work, she is gets a notification that there will be a test fire alarm at her apartment. She clicks on the notification to look at the details of the instructions. Upon the app’s opening in her alerts feed she sees the post. Clicking on the post it gives her more updates on the details of the alarm things such as the time it is happening and other procedures 3. David is looking for a running club at his apartment. He opens the Neighbours app and goes through the channels. Looking at the social channel he finds that there is a running club that already exists and he decides he wants to subscribe. He clicks on the star icon which allows him to see updates on his personal feed.

UX | 55

1. Check the hours of the amenities listened on the apartment’s profile page 2. View the status update of a user’s filed complaint 3. Direct message a user who posted in one of the channels 1. Irene needs to check the hours of the Party Room for her girls night. To do so, she opens the Dashboard of her Neighbours app. From there, she clicks the icon in the top right corner that gives her the option to look at information about her building. The hours are listed there. 2. Angie wants to check the status of her complaint about her oven light not turning on anymore. She opens up the app and lands on the Dashboard, clicks on the Forms icon and then clicks on the Status button. On the Status page, she sees a snapshot of all her complaints with a progress bar. The progress of her complaint is still pending. 3. David sees a message in the running club channel about a guy selling his Fitbit and wants to direct message him to buy. To get to this point, he went through the app’s Dashboard, clicked on the “Social” channel, went into the “Running Club” subchannel and saw the post about the Fitbit. Now, he simply has to click the direct message button to open up a conversation box with the poster.

1. Changing user profile 2. Make a Post 3. Making a new Channel 1. Irene has recently gone through a divorce and is now single. She wants to update her user profile to change her marital status to single. To update her profiles she opens her Dashboard and taps on Settings in the top right menu. From Settings Irene opens up Edit Profile and can change her status. 2. Angie has lost her briefcase full of her work and can not find it. After searching her apartment, she decides to open the Neighbours app to post about her lost briefcase. She opens her Dashboard and goes into channels from the Nav. From there she chooses the ‘Lost and Found’ Subchannel and asks about her missing work. 3. While working out in the apartment gym, David starts up a conversation in the gym with his fellow neighbours about workout moves and different sports. He decides it would be a good idea to create a channel in the Neighbours app so he can talk to others about sports. He goes through his Dashboard to Channels and then Subchannels and presses on the ‘plus’ sign button to add a new sports channel.

UX | 56

Site Map Version One Dashboard

Notices

Personalized feed

- screen overlay

Push Messages

Channels

Building proﬁle

Forms

Settings

- choose from types

Categories: - Security - General - Concerns - Social - Lost & Found - Pets - Favours

Subchannels

- app setting - push notiﬁcation - accessibility

- List of conversations

Contacts

Conversation Box

Parking

Complaints

Booking

Status

- List

- General - User-generated - Channels - Subscribe button - New Channel

Posts

User Proﬁle

- Name / Picture - Proﬁle - Pets - Parking - Household

Push Preview / Review/ Conﬁrmed

- Comment - Post - Like -DMs

Make Post

- Text - Attach photos - Links

UX | 57

Site Map Final Version

Dashboard Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

- subscribed channels

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 58

User Flows Version One

UX | 59

UX | 60

UX | 61

UX | 62

UX | 63

UX | 64

UX | 65

UX | 66

UX | 67

UX | 68

UX | 69

UX | 70

UX | 71

UX | 72

UX | 73

UX | 74

User Flows Final Version

Dashboard Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

Messaging a User through user proﬁle

- subscribed channels

Irene met her new neighbour in the corridor and she wants to invite her to have dinner together. She only knows her name and she wants to message her with the app. She clicks the message tab and it leads to the the contact page. She uses the search function and type in her neighbours name. Once she clicked on her neighbour’s name, the neighbour’s proﬁle appears and the conversation box shows up after clicking on the message button.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 75

Dashboard Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

Checking personal news feed

- subscribed channels

Angie wants to check out her post that was posted in the social categories. She opens the Neighbours app and she is on the dashboard page. She slides the screen and it will lead to the personalized feed that will allow her to see her posts.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 76

Dashboard Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

Filing a complaint

- subscribed channels

David was so frustrated with not having hot water to shower after his work out so he wants to complain this situation to the management office. He has to fill out the complaint form by opening Neighbours app, and from the Dashboard he would click on the forms tab, then go to complaints, filling out the subject and details of the issues. After filling the form it will lead him to preview page. He clicks on the confirm button and he will be directed to the status page.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 77

Dashboard Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

Booking a Party Room for an event gathering

- subscribed channels

Irene wants to book a Party Room for a gathering with the girls Saturday evening. How she books the party room is from the Dashboard she would go to the forms tab on the bottom, then clicks on bookings, Choose her date and ﬁll out the form. After ﬁlling the form she will be directed to the status page where she will get updates on her request.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 78

Dashboard Viewing the details of a Fire-alarm testing notiﬁcation

Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

- subscribed channels

Angie is at the office doing some work, she is gets a notification that there will be a test fire alarm at her apartment. She clicks on the notification to look at the details of the instructions. Upon the app’s opening in her alerts feed she sees the post. Clicking on the post it gives her more updates on the details of the alarm things such as the time it is happening and other procedures

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 79

Dashboard Subscribing to a forum

Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

- subscribed channels

David is looking for a running club at his apartment. He opens the Neighbours app and goes through the channels. Looking at the social channel he ﬁnds that there is a running club that already exists and he decides he wants to subscribe. He clicks on the star icon which allows him to see updates on his personal feed.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 80

Dashboard Check the building information

Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

- subscribed channels

Irene needs to check the hours of the Party Room for her girls night. To do so, she opens the Dashboard of her Neighbours app. From there, she clicks the icon in the top right corner that gives her the option to look at information about her building. The hours are listed there.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 81

Dashboard View the status update of a user’s ﬁled complaint

Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

- subscribed channels

Angie wants to check the status of her complaint about her oven light not turning on anymore. She opens up the app and lands on the Dashboard, clicks on the Forms icon and then clicks on the Status button. On the Status page, she sees a snapshot of all her complaints with a progress bar. The progress of her complaint is still pending.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 82

Dashboard View the status update of a user’s ﬁled complaint

Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

- subscribed channels

David sees a message in the running club channel about a guy selling his Fitbit and wants to direct message him to buy. To get to this point, he went through the app’s Dashboard, clicked on the “Social” channel, went into the “Running Club” subchannel and saw the post about the Fitbit. Now, he simply has to click the direct message button to open up a conversation box with the poster.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 83

Dashboard Changing user profile

Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

Irene has recently gone through a divorce and is now single. She wants to update her User profile to change her marital status to single. To update her proﬁles she opens her Dashboard and taps on

- subscribed channels

Settings in the top right menu. From settings Irene opens up User Profile and ‘Edit’ to change her status.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 84

Dashboard Making a Post Angie has lost her briefcase full of her work and

Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

can not ﬁnd it. After searching her apartment, she decides to open the Neighbours app to post about her lost briefcase. She opens her Dashboard

- subscribed channels

and goes into Channels from the Nav. From there, she chooses the ‘Lost and Found’ channel and asks about her missing work.

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 85

Dashboard Making a new Channel While working out in the apartment gym, David starts up a conversation in the gym with his fellow neighbours

Personalized feed

Notices - building notiﬁcaiton - parcel delivery - alert

- subscribed channels

about workout moves and different sports. He decides it would be a good idea to create a channel in the Neighbours app so he can talk to others about sports. He goes through his Dashboard to Channels and then Subchannels and presses on the ‘plus’ sign button to add a new sports channel.

Channels Categories: - General - Social - Lost & Found - Pets - Favours

- Security - Concerns

Subchannels - General - User-generated - Channels - Subscribe button - New Channel

Posts & Comments - Comment - Post - Like -DMs

Status & Fillable Forms Messages - List of conversations

Contacts

Settings, Building & User Proﬁle

- choose from types - push notiﬁcation

- app setting - push notiﬁcation - accessibility

- List

User Proﬁle - Name / Picture - Proﬁle - Pets - Parking - Household

Conversation Box

Parking - visitor parking pass - tenants parking pass

Complaints - type of complaints (electrical, security, heating, applicances, etc) - description - attachment

Party room Booking - calendar - day view - month view -

Preview / Review/ Conﬁrmed

- Text - Attach photos - Links

UX | 86

Moodboards

UI | 87

UI | 88

UI | 89

UI | 90

PROFESSIONAL SUBTLE CALM SOOTHING BOLD #4b4163

#85a3d0

#757473

The moodboard aims to convey a professional and friendly feeling that represents the community. Contrast in dark and light colours will capture a sense of boldness and easy to direct users to different parts of the app. Other secondary colours are used in a subtle way to distinguish between different contents.

UI | 91

#f79f90

#204565

LIGHT FRIENDLY CLEAN SIMPLE SUBTLE

#a5bdd2

#204565

#f09b9e

Having a lighter and friendly display relays an inviting feeling to bring discussion to the community. A minimal layout will provide users with an easy user experience where they can find all the information they need in an instant. A lighter interface will allow for images to be contrasted and easier for viewing.

UI | 92

Clean Unique Calming

#84aad9

Professional

#f37958

Minimal With many applications being white and clean, this

#a698c7

style mixes dark colours, gradients and clean design to stand out more in the current market. Accent colours like orange can help draw attention to important elements while darker tones provide a calm and professional feel. #3a2f80

#4455a4

UI | 93

#4B9FD2

crisp inviting urban

#47B86C

bright clean

Our app will have a bright, clean and crisp look that empphasizes simplicity over clutter. It will feel urban and professional, yet #11CC6E friendly and inviting. The colour pallette will be primarily green and blue with dark indigo as a secondary colour. The light #494563 green and blue excudes freshness whereas the dark indigo provides visual contrast.

#494563

UI | 94

High Fidelity

Alerts

Alerts (Setting)

Alerts (Overlay)

My Feed

Channels

Sub channels

Posts

Complaints form

Status

Room booking (Month)

Room booking (Day)

Room booking (Details)

UI | 95

User Testing User Testing Objectives User Testing Tasks Information on Student's Generic Project Faciliator Script User Testing Email Informed Consent Form User Testing Report

| 96

User Testing Objectives Version One

User Testing | 97

User Testing Objectives Final Version

User Testing Objectives Objective 1: Analyze the app’s overall structure and navigation system Can users navigate the app from the dashboard to other functions within the app? Do users understand the different symbols and actions within the navigation system? Can users read what the app’s iconography is trying to communicate?

Objective 2: Determine the clarity and usability of the app’s dashboard Do users understand the different kinds of alerts? Do users understand where to check their personalized feed? Are the notifications of the alerts effective in informing the user on different items? Do users understand how to view, delete and dismiss alerts?

Objective 3: Evaluating the app’s channel structure and navigation Can a user successfully create a subchannel? Do users understand how to add a comment on the post? Do users understand the purpose and functionality of favoriting subchannels?

Objective 4: Evaluating the clarity of the app’s form-making and submission system Can users successfully fill out a form? Do users understand where to go to check the status of a form? Do users understand the difference between each type of form?

Objective 5: Identifying weaknesses in the messaging system Can users easily find the contact(s) they’d like to message? Can users easily find the details on a new neighbour? Do users find the system complicated to navigate? Do users feel they are kept informed about new messages?

User Testing | 98

User Testing Tasks & Scenarios Version One

User Testing Tasks & Scenarios Task 1 (Objective 1) Analyze the app’s overall app structure and navigation system ● ● ● ●

Navigate to the channel page ○ Now go back and navigate to the forms page Find your privacy settings Edit your profile Check building’s profile

Task 2 (Objective 2) Determine the clarity and usability of the app’s dashboard ● ● ●

Check your personalized news feed Dismiss an alert Check for more information under an alert

Task 3 (Objective 3) Evaluating the app’s channel structure and navigation ● ● ●

Create and name a new subchannel Go into a specific subchannel called [insert sub name here] and then navigate back out Comment under someone else’s post

Task 4 (Objective 4) Evaluating the clarity of the app’s form-making and submission system ● ● ● ● ●

Check your form’s status Creating a complaint Cancel a submitted form Book a party room Request for a visitor parking pass

Task 5 (Objective 5) Identifying weaknesses in the messaging system ● ● ●

Send a message to a user named [insert name here] In the subchannel called [insert channel name here], reply to the post called [insert post name] through direct messaging Looking for details on a new neighbour [insert name]

User Testing | 99

User Testing Tasks & Scenarios Final Version

User Testing Tasks & Scenarios Objective 1 - Analyze the ease of editing your personal & building profile and settings. ● ● ●

1.1 - Edit your profile 1.2 - Check building’s profile 1.3 - Check Settings

Objective 2 - Evaluating the app’s channel structure and navigation ● ● ● ●

2.1 - Browsing channels 2.2 - Create and name a new subchannel 2.3 - Favoriting and saving subchannels 2.4 - Search through specific channel/sub-channel

Objective 3 - Evaluate the user experience of making requests ● ● ●

3.1 - Make a concern 3.2 - Book a party room 3.3 - Request a parking pass

Objective 4 - Determine the clarity and usability of the app’s messaging system ● ● ●

4.1 - Send a message 4.2 - Reply to a post in a sub-channel through direct message 4.3 - Search up someone’s user profile

Objective 5 - Determine the clarity and usability of the app’s dashboard and notifications ● ● ●

5.1 - Dismiss a notification 5.2 - Find out more details about an alert 5.3 - Check your personalized news feed

User Testing | 100

Information On Students Generic Projects Version One

User Testing | 101

User Testing | 102

Information On Students Generic Projects Final Version

Information on Studentsâ&#x20AC;&#x2122; Generic Projects Project Name Neighbrs Team Membersâ&#x20AC;&#x2122; Name Elizabeth Zhu Clover Chang Isaak Man Melosha Ratnasingham

1. Methodology? The main method of this project will be user-testing and interviews. Through user-testing, we are able to understand what works and what doesnâ&#x20AC;&#x2122;t in our app. The interviews conducted allows us to understand the problem in-depth to see if there are any new features to add to our app, also enhance existing and resolve issues.

2. Goals and objectives? The goal of user testing is to get a better understanding of how users will interact with the application, and if they will have trouble navigating or perform tasks.

3. Who will be the potential participant(s)? People who currently live in apartment buildings including various other users who are not familiar with digital applications and how they work. These participants will allow us to understand how current residents will benefit from using the Neighbrs app by creating a space that allows for better communication and connectivity. 4. What is the recruitment method(s) for the participants? Asking tenants currently living in apartment buildings as well as people who fit the desired target demographics/ friends/ family. 5. What are the benefits to the participants? The participants benefits from the user testing by allowing them to see the behind the scenes of app creating and be apart of the process of creating a new application. They are able to gain User Testing | 103 insight and expand their knowledge. 6. What are the risks for the participants?

4. What is the recruitment method(s) for the participants? Asking tenants currently living in apartment buildings as well as people who fit the desired target demographics/ friends/ family. 5. What are the benefits to the participants? The participants benefits from the user testing by allowing them to see the behind the scenes of app creating and be apart of the process of creating a new application. They are able to gain insight and expand their knowledge. 6. What are the risks for the participants? There are no risks for participants 7. Will the individual remain anonymous? (If no, please elaborate). Yes, the individual will remain anonymous. 8. Will the data be kept confidential and by what method? (If no, please elaborate). NB. It is expected that the data will be kept confidential unless participants explicitly give their permission otherwise. Yes, each participant will be identified through participant numbers

User Testing | 104

Facilitator Script Version One

User Testing | 105

User Testing | 106

Facilitator Script Version Two

User Testing | 107

User Testing | 108

Facilitator Script Version Three

User Testing | 109

User Testing | 110

User Testing | 111

Facilitator Script Version Four

User Testing | 112

User Testing | 113

User Testing | 114

Facilitator Script Final Version

Facilitator Script

Introduction (project background) Hello! We are Clover, Elizabeth, Isaak and Melosha, students of York University/Sheridan College Design taking the course, User Centered Design. Thanks for coming to our user testing session today! We will be testing the beta prototype for our app called “Neighbrs”. The goal of our app is to build a sense of community within apartment complexes and facilitate communication between tenants, neighbours and landlords. Our app also empowers tenants to voice their concerns through an online form submission system. Tenants and landlords can receive real-time updates about issues, alerts and events happening in their building. The target audience for our app are people who live in apartments without a 24/7 concierge.

Privacy information: All your data collected will be kept private and stored on a password protected laptop. We will only store the information recorded today until the end of the semester which is April 2018, at which point we will securely delete all data collected. Your voice and hands while using the app will be recorded using a video camera. Your identity will be kept 100% anonymous.

*Review Consent form* Encourage participant to think aloud: One of our goals today is to understand your thought process as a user while interacting with our prototype, hence we would greatly appreciate if you spoke out loud your thoughts, feelings and actions while using the app. For example, tell us if you feel frustrated, confused or pleased with any particular functions or features. Or tell us why you clicked on a certain button over other ones, or how you figured out how to get from one page to another. The more details the better!

Objective 1 Analyze the ease of editing your personal & building profile and settings. ● ● ●

Introduce Scenario 1.1: You have just moved into a new apartment and downloaded the app. You’ve created an account and now you want to add your very first profile picture. Introduce Scenario 1.2: You are thinking about adopting a dog and want to check if your apartment is pet-friendly. Introduce Scenario 1.3: You want to check that your profile is publically visible in the settings

Wrap up Objective 1: Thanks! How did you feel about these tasks? How would you rate its level of difficulty or ease? Is there anything that confused you about how to profile and settings system was organized?

User Testing | 115

Objective 2 Evaluating the app’s channel structure and browse subchannels ● ● ● ●

Introduce Scenario 2.1: You browse through the channels for any topics related to pets. Introduce Scenario 2.2: You notice there are no channels for pet-sitting. Create a new subchannel called “Pet-sitting”. Introduce Scenario 2.3: You are student who is interested in parties and finding people to study with. Find and follow any subchannel that matches your interests. Introduce Scenario 2.4: You dropped your red and black headphones and want to check if anyone in the apartment has found them. Comment on the post.

Wrap up Objective 2: Thanks! How did you feel about the overall experience of navigating the channel? How well do you feel our app’s iconography matches up with the categories they are trying to represent?

Objective 3 Evaluate the user experience of making requests ● ● ●

Introduce Scenario 3.1: You’ve noticed that your kitchen light is broken and want to file an electrical request to fix it. Introduce Scenario 3.2: Book party room #2 for your friends birthday on Saturday, January 3, 2018 at 8:00pm-11:00pm. Introduce Scenario 3.3: Your significant other is driving over to spend the weekend at your apartment. Request an overnight visitor parking pass for Friday and Saturday night.

Wrap up Objective 3: Thanks! How did you feel about the request and submission system? How would you improve requests, anything else you would want to do with the request system?

Objective 4 Determine the clarity and usability of the app’s messaging system ● ● ●

Introduce Scenario 4.1: Message your landlord, Stevie P., through the app to ask her a question about your lease. Introduce Scenario 4.2: You are looking at the Running Club channel and Lacy R. posted about finding a running buddy. Send a private message to her about it through the post. Introduce Scenario 4.3: You’ve been seeing a cute person in the mailroom and want to know more about them. You find out that their name is Alex C. How do you find out more details about this person?

Wrap up Objective 4: Thanks! Did you experience any difficulty or finding people in the messaging system? How does this messaging system compare to other messaging apps you use?

Objective 5 Determine the clarity and usability of the app’s dashboard and notifications ●

Introduce Scenario 5.1: You just received a notification about a parcel delivery but you already picked it up. Delete the notification.

User Testing | 116

● ●

Introduce Scenario 5.2: You received an fire alarm alert from the building and you want to find out more details about the alert. Introduce Scenario 5.3: You’ve followed multiple subchannels about parties and studying, review all these posts in one place.

Wrap up Objective 5: Thanks! How did you feel overall about notifications? How would you rate the difficulty or ease of checking and dismissing notifications? How do you feel about the number and types of notifications you recieved -- was it sufficient, too much or just right?

User Testing | 117

User Testing Email Version One

User Testing | 118

User Testing Email Final Version

Email to be sent out to participants: Subject line : Neighbrs invites you to participate in a user testing session. Hello [name of participant], We are students from the York/Sheridan Program in Design currently taking a course called YSDN 3005 Usercentred Design: Prototyping and Usability. We are conducting a series of user testing sessions to evaluate the user experience and overall look and feel of our interactive digital product. In effort to improve our application, we’re looking for people who may be interested in testing a mobile application prototype which deals with communication within different units in apartments, and providing your feedback. We are calling out for interested individuals who would like to participate in a 20 minute user testing session followed by a 1520 minute interview. We are specifically interested in investigating how easily you can perform given tasks and achieve specific results using our interactive prototype. During the interview, you will be able to express your opinions, desires and further expectations from the product.The ultimate goal of this user testing session and interview is to get your feedback in order to improve the overall quality of our product. If you are interested in participating in this user testing session, you have the option of choosing from one of the dates stated below that works best with your schedule. York University: Friday March 16 at 5pm or Saturday at 2pm Sheridan College (Trafalgar Campus): Monday March 19 at 1pm Thank you in advance for your consideration. Your input is very important to us. From your fellow Neighbrs, Clover Chang Elizabeth Zhu Isaak Man Melosha Ratnasingham

User Testing | 119

User Testing Consent Form Informed Consent Form Date: March 6th 2018 Study Name: Neighbrs Researcher name: Clover Chang, Elizabeth Zhu, Isaak Man, Melosha Ratnasingham. York University/Sheridan College Design Program (YSDN), Bachelor of Design. Undergraduate studies. We are the Principle Investigator. Clover Chang: clover61@my.yorku.ca Elizabeth Zhu: elizzhu@my.yorku.ca Isaak Man: isaak115@my.yorku.ca Melosha Ratnasingham: melosha@my.yorku.ca Department of Design: (416) 736-5885 Purpose of the Research: The purpose of our research is to test the overall experience and also look and feel of our designed digital product, through user-testing and interviews. User-testing will help us identity successes and problem with our app. The interviews will allow us to understand the your thoughts and feelings about the app in-depth. The results of our research will help us generate new features for our app, enhance its existing user interface and experience and resolve any issues that are identified. What You Will Be Asked to Do in the Research: Yout will given a beta prototype of our app on an iPhone and a list of user tasks and scenarios. You will be asked to complete the tasks on the iPhone while narrating your thoughts and feelings throughout the process. Your hands interacting with the device will be recorded along with their voice narration. At the end of the task, you will be asked to reflect on your experience. The testing session will take about 20-25 minutes. The interview will take about 15-20 minutes. Risks and Discomforts We do not foresee any risks or discomfort from your participation in this testing session. You have the right to not answer any questions. Benefits of the Research and Benefits to You: The benefits of the research is to have a better idea on how users will interact with the application, and if they will have trouble navigating or performing tasks. As the participant, you benefit by being involved and educated in the design and development of digital products. Voluntary Participation and Withdrawal: Your participation in the study is completely voluntary and you may choose to stop participating at any time. Your decision not to volunteer, to stop participating, or to refuse to answer particular questions will not influence the nature of the ongoing relationship you may have with the researchers or study staff, or the nature of your relationship with York University either now, or in the future.

User Testing | 120

In the event you withdraw from the study, all associated data collected will be immediately destroyed wherever possible. Should you wish to withdraw after the study, you will have the option to also withdraw your data up until the analysis is complete.

Confidentiality: Unless you choose otherwise, all information you supply during the research will be held in confidence, and unless you specifically indicate your consent, your name will not appear in any report or publication of the research. Your hands and voice will be recorded using a video camera. Some notes may be taken on a laptop. Your data will be safely stored in a password-protected laptop and only the researchers will have access to this information. The data will be stored for approximately two months until the end of the study in April 2018, at which point all your digital files will be deleted from the password-protected laptop. Confidentiality will be provided to the fullest extent possible by law.

Questions About the Research? If you have questions about the research in general or about your role in the study, please feel free to contact us at at clover61@my.yorku.ca, elizzhu@my.yorku.ca, isaak115@my.yorku.ca, melosha@my.yorku.ca or our professor, Borzu Talaie at borxu@yorku.ca This research protocol has been reviewed by the Research Ethics Committee in the Department of Design at York University, which is the delegated authority to review research ethics protocols by the Human Participants Review Sub-Committee, York University’s Ethics Review Board, and conforms to the standards of the Canadian Tri-Council Research Ethics guidelines. If you have any questions about this process, or about your rights as a participant in the study, please contact the Department of Design Ethics Committee members, Sandra Gabriele or Angela Norwood by email at designethics@yorku.ca, or by phone at 416-736-5885.

Legal Rights and Signatures: I _______________________________, consent to participate in Neighbrs conducted by Clover Chang, Elizabeth Zhu, Isaak Man, Melosha Ratnasingham. I have understood the nature of this project and wish to participate. I am not waiving any of my legal rights by signing this form. My signature below indicates my consent.

Signature Participant

Date

Signature Principal Investigator

Date

User Testing | 121

Additional consent 1. Audio recording â&#x2014;ť

I consent to the audio-recording of my user-testing and interview session.

2. Video recording or use of photographs â&#x2014;ť

I consent to the video-recording of my hands during my user testing and interview session.

I ____________________ consent to the use of images of me (including photographs, video and other moving images), my environment and property in the following ways (please check all that apply): In academic articles In print, digital and slide form In academic presentations In media In thesis materials

Signature Participant Name:

N N N N N

Y Y Y Y Y

â&#x20AC;&#x2039;Date

User Testing | 122

User Testing Report Version One

User Testing | 123

User Testing | 124

User Testing | 125

User Testing | 126

User Testing Report Final Version

User Test Report Clover Chang, Elizabeth Zhu, Melosha Ratnasingham, Isaak Man FA/YSDN 3005, User Centred Design: Prototyping and Usability Borzu Talaie

Analysis of Test Results Testing procedure The first step in our user testing procedure was to recruit participants. We found three participants. They were all university students between 18 to 22 years old who own a smartphone. Each participant was from a different field of study, ranging from sciences to arts. Two of the three participants currently live in an apartment. We brought our willing participants to a photo studio in York University campus. We set up a DSLR camera, screen recorder and audio recording device. We explained the project to participants, reviewed the consent form and presented them with a smartphone and a series of tasks written on slips of paper. What we found was that we had two different extremes of participants. Some participants had a lot of difficulty completing the tasks and continually needed hints in order to move forward with them. On the other hand, our third participant breezed through user testing and expressed no complaints or confusion during the tasks. After seeing the first two participants struggle, this came as a big surprise to us. We suspect the reason the third participant excelled at using the app was because he is a frequent user of social media. Many of our design elements were inspired by social media platforms like Facebook and Pinterest, hence the UI/UX of the app probably already felt familiar to our last participant. One of the challenges we faced during user testing was that our prototype was being glitchy because we were using a beta version of InVision for Android. This made the experience more confusing and difficult for participants than it should have been. We later tried switching to an iPhone and the prototype ran much smoother. Overall, user testing met the group’s expectations. Other than the one participant who breezed through all the tasks, we expected participants to find some tasks easy and other tasks hard. When they did run into difficulties, they voiced their concerns out loud and gave us valuable feedback for improving these areas. We were able to gain all the information that we expected to get.

Findings Prior to testing, we were unsure how users would react to certain features of our application, we wanted to know if the app flow was as easy as what we intended or if the users had trouble finding certain features in the app. Through user testing, there were multiple areas in our design that needed to be addressed in order to make the app easier to navigate. We discovered some areas of our app were more complicated to navigate through while others were straightforward. Areas like the “Channels” and the “Forms” were harder and confusing to navigate compared to “Messages” and “Alerts”. Another area of confusion was with the “Lost and Found” channel. Users felt more inclined to check their feed or alerts for lost and found items, something that we did not think of before. A user also commented on how it is unsettling that the user profiles display information such as marital status and date of birth. This comment lead us to rethink what we should put on the user profile. Instead of personal User Testing | 127

information, we decided to include the user’s interests and what subchannels they follow so that it is more relevant to the app. One of the main features of the app is channels and subchannels. These were areas that we predicted to be challenging because these were unfamiliar features. Through testing, we were able to find that participants initially found it challenging to navigate the channels, but gradually learned how to use it. Some participants commented on the features within channels that should be improved, such as changing where the Lost and Found channel is nested and the way you follow subchannels. We now know we need to relocate the “Lost and Found” channel to somewhere more suitable and provide alerts when something is found on the app’s dashboard. We also know to change the “follow” icon in subchannels from a star, which users said was more like favoriting, to a button that clearly says “follow” on it. Another feature that we were unsure about was “Forms”. This is where booking rooms, filing complaints and getting parking passes are located. Some participants were confused about where to go to file complaints while others were able to do it with ease. The main issue was the naming convention and the way we asked them to execute a task. Users were confused about the name “Forms” and did not understand what it meant. The terminology affected the way the participants approached the given task. We will have to find a better word to describe this feature.

Reflection Overall, user testing was an insightful and helpful experience. We were able to see how participants interacted with our app and any problems they had while using it. Participants gave us plenty of feedback on what issues, frustrations and positive feelings they had with the app. They even gave us useful suggestions on what changes they would like to see. Now our group has a better idea of what we need to change for the final prototype. We discovered that some participants needed more guidance and help understanding our user scenarios than others. It was important that we actively listened to the participant’s concerns when they felt stuck, and figure out when is the appropriate time to step in and offer them help. It was also valuable for us to receive opinions from people in other industries and fields of study. The way they interacted with the app and the problems that they encountered differed depending on their background and preexisting knowledge of smartphones. If we could do anything differently, we would have tested the prototypes before the user testing session. We experienced some technical difficulties with Invision in the beginning — some of our screens were glitchy, making the participants confused during the process. Furthermore, we should have been more organized in terms of the location and the way things were set things up. We would also invite a wider variety of users of different ages, occupations and backgrounds to gain more insight and and to identify more common issues.

User Testing | 128

Synthesis of user test results The following list of features were inspired by the feedback from user testing: ●

Change the user profile to display hobbies and interests rather than personal information ○ The current information on the profiles felt unnecessary or like an invasion of privacy ○ We will take out unnecessary personal information like marital status, birthday, gender and put in relevant, social information like hobbies, which subchannels they follow, shared interests, etc

●

The icon to follow a subchannel will change from a star to a button that says “Follow” ○ This is because some users thought the star meant adding to favourites, not following

●

Change “Contacts” to “Directory” ○ The word “Contacts” didn’t properly convey a list of everyone in the building

●

Add a preview/confirm screen to the end of room booking forms. This will signal to users that they’re about to submit a form.

●

Add a preview/confirm screen for any edits to a user’s profile

●

Increase font size all across the app

●

When you click on a user’s profile picture or name on a post in a subchannel, it will link directly to their profile where you can find a button to message them ○ As of now, clicking on the user’s profile picture or name links them directly to a chat bubble with the user, but participants thought this user flow felt unnatural and would prefer to see the user’s profile first

●

Remove the “Reply” button on posts ○ The “Reply” button felt unnecessary when there is already a “Comments” button

●

Possibly change our hamburger navigation system to a fixed bottom bar navigation ○ This will reduce the number of clicks users have to make when navigating across different features

●

Changing the word “Forms” to “Requests” ○ Participants kept reading “Forms” as “Forums”

User Testing | 129

○

Participants thought the word “Forms” felt too administrative and did not fit in with the social nature of the app

●

Add a setting feature that allows users to customize their home screen to land on either Alerts or My Feed, instead of just Alerts ○ Some participants value the practical features of the app whereas other participants value its social features more. This setting would allow users to customize what kind of information they are presented with first based on what they find more valuable to them

●

Redesign the icon for “Channels” from a pair of speech bubbles to a television and antennas ○ Participants confused the speech bubble icon to mean messages instead of “Channels” ○ One user suggested we try a television icon instead

User Testing | 130

Style Guide

| 131

Neighbrs

Style Guide

| 132 1

Style Guide | 133

Branding

PRIMARY LOGO

The visual identity of Neighbrs consists of the main colours purple and coral along with the typeface Proxima Nova in Extra Bold. The letters are all caps with the image and text being centre aligned to each-other. The Neighbrs logo consists of an apartment sitting atop a wave. The wave adds a humanistic, dynamic touch to our logo.

Style Guide | 134

Branding Branding VARIATIONS

VARIATIONS

The logo can be used as a white knockout on a solid purple background, or an image with a gradient overlay. The logo is also availible in a horiziontal The logo canformat. be used as a white knockout on a solid purple backGradient ground, orOverlay an image with a gradient Colour #3D3198 overlay. The logo is#9EB0FF also availible in Opacity 94% a horiziontal format. Gradient Overlay Colour #3D3198 #9EB0FF Opacity 94% Size of the logo on app icon W 52px H 78px

Neighbrs

Style Guide

Size of the logo on app icon W 52px H 78px

Style Guide | 135

Branding Branding CLEAR SPACE

VARIATIONS

There should be spacing around the logo. This will give the logo presence when it is combined with graphic elements. The spacing measurement is based on the height of the typography the logo. The logo caninbe used as a white knockout on a solid purple background, or an image with a gradient overlay. The logo is also availible in a horiziontal format. Gradient Overlay Colour #3D3198 #9EB0FF Opacity 94%

Size of the logo on app icon W 52px H 78px Style Guide | 136 Neighbrs

Style Guide

Branding Branding IMPROPER USE

VARIATIONS

Do not stretch, condense or distort the logo in any way.

Do not reverse the brand colours.

The logo can be used as a white knockout on a solid purple backDo not use gradients. Do not use drop shadow. ground, or an image with a gradient overlay. The logo is also availible in a horiziontal format. Gradient Overlay Colour #3D3198 #9EB0FF Opacity 94%

Do not alter opacity or colour on top of the photo. Neighbrs

Style Guide

Do not use off-brand colours.

Size of the logo on app icon W 52px Do not change the hierarchy Do not render the logo H 78px between the logo and typography. dimentionally. Style Guide | 6137

Typography

Proxima Nova A Regular

Proxima Nova A Bold

Aa Bb Cc Dd Ee Ff Gg

Hh Ii Jj Kk Ll Mm Nn

Oo Pp Qq Rr Ss Tt Uu

Vv Ww Xx Yy Zz

The main typeface used in Neighbrs is Proxima Nova A. From this typeface regular, semibold and bold weights were used to create hierarchy and an organized look. This typeface was chosen as it has good readability and legibility at different screen resolutions and there are many weight/ style variations allowing for flexibility. The overall look is trendy, clean and minimal which is how we want Neighbrs to be perceived.

Style Guide | 138

Typography

Heading 1

Proxima Nova A SemiBold | 22pt

Heading 2

Proxima Nova A Regular | 17pt

Subheading

Proxima Nova A Bold | 15pt

Body

Proxima Nova A Regular | 15pt

Sub info

Proxima Nova A Regular | 12pt

Style Guide | 139

Colours Primary Colours

Black and White Shades

#f37f80

#3D3198

#c1c6c9

#4a4a4a

#f4f4f4

The main colour scheme is a dark purple and bright coral. Secondary colours include three variations of greys from light, medium and dark. We also use gradients in our apps for buttons and headers as well as tertiary colours blue, green and yellow.

Secondary Colours

#7c6ec7

#f37f80

#11b0c6

#51a78e

#c93c5a #ff8080

#11b0c6 #3de1f8

#329477 #5acaa9

#e7ac48

Gradients

#3d3198 #9eb0ff

The main colours allow us to portray a strong brand identity and display a trendy look. Secondary colours add flexibility in our app and are used for hierarchy purposes while, tertiary colours are used for organization within navigation. Gradients are also used to build onto our brand identity for our theme and overall look.

#e7ac48 #dfdc58 Style Guide | 140

Neighbrs

Style Guide

Iconography NAVIGATION ICONS

CHANNEL ICONS

REQUEST / FORM ICONS

OTHER ICONS

SETTING ICONS

Style Guide | 141 Neighbrs

Style Guide

Iconography: Menu Selected Colour # 3D3198 Stroke 2.3px Non selected Colour # C0C6CA Stroke 2.3px

SELECTED HOME

SELECTED MESSAGES

SELECTED CHANNELS

SELECTED SETTINGS

SELECTED REQUESTS

Style Guide | 142 Neighbrs

Style Guide

Buttons

Style Guide | 143

Toggles

Style Guide | 144

Layout: Screen 375px

665px

Neighbrs

Style Guide

Style Guide | 145 14

Layout: Sizing Header 56px height

Profile Icon 51px*51px Profile Image 100px*100px

Navigation 50px height Neighbrs

Style Guide

Style Guide | 146

Layout: Padding

Padding 16px Padding 13px

Padding 20px

Neighbrs

Style Guide

Style Guide | 147

Interactive The main gestures used in our app is tapping, scrolling and swiping. Most gestures are obvious to a majority of users while others are less apparent and can be learned.

TAPPING

Tapping is the main action used in our app. Elements and other screens will pop up upon the tap.

HORIZONTAL SCROLLING

Horizontal scrolling gestures are used to browse through multiple options and buttons in a compact horizontal space.

SWIPING

A left and right swiping motion helps the user browse between different screen cards. An up and down swiping motion helps users dismiss overlays.

Style Guide | 148 Neighbrs

Style Guide

Interactive: Examples Tapping the back button will take the user back to the previous page. Horizontal scrolling allows the user to browse through different options efficiently

Neighbrs

Style Guide

Style Guide | 149 18

Interactive: Examples Swiping left and right allows the user to flip through different screens

Neighbrs

Style Guide

Style Guide | 150 19

Conclusion Thank you for taking the time to read and process this guide. Each detail of the Neighbrs brand identity has been thoughtfully and purposefully designed to reflect our mission. By following this guide, we can ensure the strength and longevity of the Neighbrs brand.

Visual Design Neighbrs Version 1 Neighbrs Version 2 Neighbrs Version 3

| 152

Visual Design Version One Dashboard/ Building Profile

Channels

Visual Desgin | 153

Messages

Forms

Visual Desgin | 154

Visual Design Version Two

Dashboard: Alerts

Dashboard: My Feed

Dashboard

Dashboard: Navagation Bar

Visual Desgin | 155

Channels

Subchannels

Posts

Posts Visual Desgin | 156

Contacts

Messages

Direct Messaging

Visual Desgin | 157

Contacts

Message

Complaint Status

Room Bookings

Complaint form Visual Desgin | 158

Status

Room booking

Complaint form

Visual Design Final Version

Live link at: https://projects.invisionapp.com/share/6EGELZZ37NZ#/screens

Visual Desgin | 159

On Boarding & Login

Onboarding

Visual Desgin | 160

Dashboard

Notifications

Notification Information

Feed

Visual Desgin | 161

Settings

Notification Settings

Privacy Settings

Settings Visual Desgin | 162

Profiles

Personal Profile

Other Profiles

Building Profiles Visual Desgin | 163

Channels & Subchannels

Channels

Subchannels Visual Desgin | 164

Adding Subchannels

Visual Desgin | 165

Commenting on posts

Visual Desgin | 166

Messages & Contacts

Visual Desgin | 167

Requests

Visual Desgin | 168

Room Bookings

Booking

Preview

Confirmation

Visual Desgin | 169

Parking

Parking Request

Preview

Confirmation

Visual Desgin | 170

Concerns

Preview

Booking

Confirmation

Visual Desgin | 171

Conclusion Thank you for taking the time to read through this in-depth document of Neighbrs journey into becoming a successful application for apartments. It was a challenging project that allowed us to create a product that would be beneficial towards tenants and landlords in appartments and become a well used application in the future.

| 172

| 173