FirstService Residential Connect
FSRConnect is a community website portal that gives homeowners access to minutes, building information, maintenance schedules statement of account and more. This website integrates the functions of the strata council, site staff and manager and allows email distribution of minutes and notices for owners’ convenience.
Challenge
A website redesign for FirstService Residential’s website portal, FSRConnect, with easy to understand infographics
Roles
Graphic Designer
UX/UI Designer
TOOLS
Adobe XD
Adobe Photoshop
Sketch
Deliverables
Web Design
Background
FirstService Residential offers a full range of professional property management services to all types of residential and commercial properties including strata, rental and social housing.
Mission Statement
To deliver exceptional service and solutions that enhance the value of every property and the lifestyle of every resident in the communities we manage.
Problem
As FirstService Residential take on more properties, calls increase with urgent and important matters that cannot be ignored. Numerous callers who want to ask a simple question get held up in a long queue which also affects the callers after them, on hold with emergency calls.
How Might we...
How might we redesign FirstService Residential's website portal to feature a positive user experience with a restructured visual hierarchy of information based on the homeowner’s needs?
Process
identifying the homeowner's needs
50% of our incoming calls are for balance checks. Other reasons for the calls include setting up PAD, ordering/ viewing documents, retrieving forms, speaking to the strata/rental managers and emergency such as leaks and floods. 
All the owners who received and read their welcome package when they first moved in know about the FSRConnect portal. I have encountered a number of these owners refusing to utilize it because it is too difficult, confusing or they just can't find what they are looking for.
What worked
• "My Account" shown at the top so that it is the first thing users see
• All the documents easily accessed 
• Simplicity of layout 
What could be improved
• Hamburger menu can be removed to minimize clicks and improve quick switching between tabs
• A touch of personalization 
• Include the strata plan number and address since some people don't know their address
• Dashboard visual hierarchy of information based on what owners most likely need
• Display a list of ongoing/upcoming evens so that owners don't have to look at the calendar

Wireframing
Various low fidelity wireframes of the dashboard.
Wireframe done on Adobe XD.
Colours
Official brand colours
Design Solution
Original Website
Redesigned Website
Features:
• Dashboard infographics
• Personalized greeting
• Dashboard visual hierarchy of information
Mockups

Dashboard and My Account mockup pages done on Sketch.

Reflection
At the beginning of the project, I got ahead of myself and designed a different dashboard (not shown) than what I ended up with in the above. After I was done with it, I started to think of all the problems the users may still experience. Since I was not satisfied with the lack of solutions I provided in my redesign, I made more paper wireframes while constantly asking myself why I designed what I designed. What I learned in this project was to not just design what I think looks good, because it is a subjective point of view, but to make sure I take the user's problem as a guideline to solve the problems effectively. Lastly, I learned to not scrap designs I am unhappy with so that I can refer to them in the future and track my progress.