CITY APARTMENT BUILDING
At the centre of the project is a city apartment building website first of all for owners – as a communication tool. Secondly, for visitors – anyone interested in renting or buying an apartment in the building.
CHALLENGES:
-
Create a way for apartment owners to have a community communication tool digitally.
-
Create a website that attracts potential owners, tenants and real-estate agents.
-
Create a marketing and PR tool for the apartment building, highlighting its history and progress today.
ROLE:
Product Designer
RESPONSIBILITIES:
User Research, User Interface Design, Prototyping & Testing
DURATION:
2021
BACKGROUND
Owners of the apartment building – located in Riga, Latvia (EU) – need a digital space for building and maintaining a community, as well as a communication tool where information is easily accessible about any issues or updates regarding the building. The apartment building also needs a digital marketing tool in order to attract good future owners or tenants.
The property consists of two five-storey apartment buildings – one in the front and one in the back. There are also two backyards for each building.
KICKOFF AND OVERALL PROCESS
The project started with a kick-off meeting, focusing on the needs and goals of all parties involved. In order to better understand users, I focused on primary qualitative research, including competitive analysis and interviews with the building owners and managers. It was also important to keep in mind accessibility and inclusion issues due to property owners' various ages and familiarity with technology. But before everything, I started by asking myself few key questions.
1.
What is the product and who is it for?
4.
Are there any challenges that could be faced in the future?
2.
What do the primary, secondary and tertiary users need most? What are their goals?
5.
Are there any similar websites for neighbouring apartment buildings?
3.
Which users are the most important to the apartment building ecosystem?
6.
What materials and literature should I review to better understand the project needs?
USER RESEARCH
In order to understand the user needs, I conducted interviews and a short survey. All results were organised using an empathy map and furthermore an affinity map. In the design stage prototypes were put to test using a usability study. In all stages of the user research I took into consideration the human factor – the range of variables users bring to their product interactions.
The primary user group identified through research were working professionals (owners) who wish to take care of their environment. The secondary user group were also working professionals (real-estate agents, potential owners or tenants) who are looking for quality housing. The third target group – building management team – also had to be kept in mind as they are responsible for the official communication and providing billing information.
All user groups confirmed initial assumptions about them, but research also revealed that not all owners are able to easily use web pages – especially the older generation.
COMPETITIVE ANALYSIS
Competitive analysis was necessary to see what other city apartment buildings, especially in the nearby area, were already doing and what user goals they were not reaching. Attention was focused on various webpage parts – content, visual personality, available options for owners as well as other details mentioned in the user surveys.
As expected, due to lack of savings, historical buildings in the city did not have their own dedicated websites, not to mention a separate area for owners' communication. There were mostly purely marketing based landing pages for recently renovated or brand new apartment buildings. Therefore, competitive analysis uncovered not only a free niche for creating a standardised apartment building website that could be offered all around the city, but also existing user/owner practices or, more precisely, lack of them.
USER PERSONAS
PRIMARY
JULIA SAMUELSSON
Age: 32
Family: 1 cat
Education: University graduate
Occupation: Marketing manager
”I’m a proud flat owner and I like to get involved in my community life.”
Julia works for a marketing agency and is a proud flat owner who cares about her surroundings. She is very busy with work and other activities, therefore following all practicalities related to owning a flat in an apartment building can get overwhelming. She sometimes gets frustrated that important information regarding her apartment building is not being communicated to all owners. A dedicated webpage for her apartment building could solve this and many other related issues.
Goals:
-
Participate more in the apartment building social life.
-
Build a good looking webpage for everyday use and possibly potential flat owners.
-
Be informed about problems or issues regarding any renovations.
Frustrations:
-
“I never know what is happening in our apartment building. There are days when I want to take a shower, but there is no water.”
-
“Neighbours are not recycling trash and it gets on my nerves. There should be clear guidelines.”
-
“Our building is not marketed well and is unorganised. Good pictures would help.”
Problem Statement:
Julia is a flat owner who needs to find relevant information about her apartment building issues and news, because she wants to be involved in the building improvements and community social life.
User Story:
As a flat owner I want to know information about activities and news in my apartment building so that I can take part and get involved in helping create better living conditions for myself and others.
SECONDARY
JOHN HENDRIX
Age: 35
Family: Married
Education: University graduate
Occupation: Real-estate agent
”Whether for a client or myself, I always look for properties that feel alive.”
John is a real-estate agent and works for a large company. His task is to look for quality apartments that are well taken care of, both in good location and with a community – good neighbours. Going through various ad listings that all look the same, it is hard to distinguish the good from the bad. He often gets frustrated that in order to make otherwise simple evaluations, he has to travel long distances to see properties in person. A dedicated webpage for an apartment building would help him notice something valuable much faster.
Goals:
-
Offer clients quality real-estate properties.
-
Close deals, make money for the company and earn good reputation as an agent who knows what's good.
-
Strive to make his everyday business tasks and research more convenient.
Frustrations:
-
“I feel embarrassed when clients, regarding some property, face difficulties with basic communication, marketing and management in the property.”
-
“Every time things go wrong for clients, my reputation as well as company's reputation is being damaged.”
-
“I often lose so much time going from one place to another and trying to solve problems that should have been already solved long ago.”
Problem Statement:
John is a real-estate agent who needs to build a list of good quality properties in the city, because he needs to make money, satisfy clients and earn reputation.
User Story:
As a real estate agent I want to discover good quality properties in the city so that I can offer my clients the best options available and improve sales for my company.
MIND MAPPING
After much quantitive and qualitative research, I moved on to the ideation process and completed a mind map. All information gathered thus far was quite overwhelming, and I decided to refer to the technique of mind mapping to help me assess and organise everything into more defined ideas and a more comprehensible hierarchy.
INFORMATION ARCHITECTURE
Before starting on wireframes, I spent time considering the overall structure of the website by creating a sitemap. It was important to see a high-level view of the product and understand how all elements fit together and relate to each other. The hierarchical information helped me find and eliminate pages that aren't directly tied to the site's purpose as well as remove any duplicates that create confusing user experience.
PAPER WIREFRAMES
Prior to moving onto high-fidelity wireframing and prototyping, it was important to understand what content and how it could be arranged in each page and section. Concept sketching ideas helped save time and generate first representation of the new interface.
DIGITAL LOW-FIDELITY WIREFRAMES
Low-fidelity (non interactive) wireframes helped me map out the shell of the webpage and basic information architecture as well as visualize and test early concepts. As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
It was important to have a very visible login area for owners.
Users also wanted to see the location pin on a map.
GRAPHIC DESIGN ELEMENTS
The website needed a representative image of the apartment building that fits within the digital web environment. I decided to move away from traditional images and create something that highlights the historic personality of the building.
USABILITY STUDY
To see first reactions from users, the interactive wireframes were put to test in a usability study, involving four participants. Results showed that owners did not get a clear sense of where the main starting points are for their needs. It was also clear that the webpage must include many pictures.
HIGH-FIDELITY MOCKUPS
ACCESSIBILITY CONSIDERATIONS
Along the way I followed the Web Content Accessibility Guidelines and made sure I design in a way that is more usable to all users irrespective of their situation, abilities or context. Here are some of the many considerations I included in my designs:
1.
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Benefit: Useful for users who are vision impaired.
3.
Used increased space between lines, words and letters as well as good amount of white space between blocks.
Benefit: Helpful for users with low vision and dyslexia.
2.
Used icons to help make navigation easier.
Benefit: Useful for users who can't read.
3.
Used adequate colour contrast ratios for text (4,5:1), icons and other graphic objects (3:1) – against background or adjacent colour.
Benefit: Useful for users with low vision.
3.
Used logical keyboard navigation order, when using the Tab key.
Benefit: Useful for users with disabilities who rely on assistive technologies that read content aloud.
3.
Ensured that touch targets are at least 9mm high by 9mm wide, as well as left enough inactive space round controls, so they don't overlap with other touch targets.
Benefit: Useful for users with mobility impairments or simply large fingers.