Goals.

Primary and Secondary Research methods were used to learn what the user goals, needs, motivations, and frustrations include. The following goals were created to accomplish this:

• Gain a better understanding of the decision-making process of the user when visiting CMA’s website.

• Figure out what service this site should be focused around.

• Figure out the true target audience.

• Identify and understand good and bad design choices of direct and indirect competition.

• Discover and analyze user behaviors while speaking about the company.

• Discover and analyze user behaviors while using CMA’s website.

Market Research.

Market Research was conducted to collect qualitative data from various property management websites and quantitative data from various sources about home/condo owners. Doing this helped to develop an understanding of user expectations for property management websites and the feelings people have about property management companies. After completion, 3 provisional personas were created to help identify potential interview participants. The following facts were uncovered during my market research:

• 63% of residents “rate their community association experience as positive.

• Professional property managers, run about 2/3s of HOA communities.

• 90% of people say they’re on good terms with board members.

• Between 35% and 76% of people say that their association rules and regulations protect and enhance property values.

• Estimated real estate value of home in HOA communities was over $6 trillion.

• 50% of homes in Midwest are HOA. 

• Women controlling finances is up to 51%.

• New homeowners generally have families and look to suburbs.

• Studies show women tend to choose properties with less maintenance and little investment for upgrades.

• 66% of CMA’s reviews are negative.

• CMA reviews point towards a lack of accountability.

1-on-1 Interviews.

Interviews were conducted to weed out any assumptions and answer any hypotheses that were created. General questions of property management companies and living in a HOA created a good baseline of user expectations. Also, this process helped teach about any pain points, frustrations, or positive points the interviewees had while living in a HOA or communicating with their property management company. To see the full interview transcripts please click here.

Empathy Map.

Following the 1-1 Interviews, I created an empathy map by referring to the transcripts and notes taken during the interviews. The main points I was able to pull from the maps were:

• Users feel that property management websites are not user friendly.

• Users feel that residents are generally ill-informed.

• Residents expect fees to be spent properly.

• Users feel that management can be hard to reach.

POV Statements & HMW Questions.

Using the insight and needs from the empathy map, POV statements were developed so I could further empathize with users, and HMW questions to ignite rapid ideation of design solutions.

Brainstorming.

Using the HMW questions, I conducted an independent brainstorming session. Through rapid ideation I generated design solutions for each user need.

Site Map.

With the information gathered from the Open Card Sort and other research, this Sitemap was created. This reflects the beginning of the Informational Architecture the participants helped create. This is not reflective of every element within the site, but a good base skeleton of the site’s structure and interactions.

Product Requirements.

After completing the Sitemap, a fluid document was created outlining the different UI Requirements. This document will serve as a checklist for the various required pages, features, and elements. This document will also play a key role in team alignment to help ensure that no elements are forgotten about.

Task Flow.

Based off of the tasks done in the storyboard and the IA created in the Site Map, a Task Flow was created to show the different actions and pages involved to complete the tasks. Creating this task flow helped define the main pages and hierarchy of actions which will be necessary in the site design.

Low Fidelity Wireframes.

These quick, annotated wireframe sketches of the landing page were used to quickly map and help visualize how elements and features will take shape. Also, this helped to further develop the hierarchy and Information Architecture.

Mid Fidelity Prototype.

To facilitate user testing, a mid fidelity, interactive prototype was created with InVision. Unlike Zeit’s user tests, CMA utilized a mid fidelity prototype to help better test the hierarchy and recognizability of the elements throughout the website. The prototype contains 25 pages with dedicated hotspots allowing the users to complete the various tasks previously created.

Unfortunately at the time of creation, due to financial reasons and school requirements, this prototype was replaced with a high fidelity version.

Usability Tests.

Along with the prototype, a usability test plan was created based on the task flow. The test plan was developed to evaluate how users interact with the site, how they navigate the site, and to find pain points, frustrations, failures, and positive points.

During the usability tests detailed notes were taken highlighting the way users navigated the site and how they utilized certain features. Also, quotes were notated detailing pain points, questions, and positive remarks about the site. These results were critical in revising the different areas of the site where users experienced difficulties.

Affinity Map.

Referring to the notes taken from the usability tests, there were many helpful insights, frustrations, and positive remarks to help create an affinity map. The insights and notes were grouped together by similarities and then re-grouped by instances shared by users. Some commonalities that were noted included:

• Users attempted to login prematurely.

• Users found Rules & Regulations to be confusing.

• Payment and complaint should have other access points.

To see the full affinity map process, please click here

Priority Revisions.

After reviewing the insights and results from the user tests, the following revisions were determined to be most important:

• Create user account page.

• Update paths and names for Documents.

• Add additional access points for payment and rule violation complaints.

• Update “Thank you” text for complaint confirmation.

• Clean up navigation of site to be more intuitive.

Mood Board.

Before putting pen to paper, a mood board was created on Pinterest to help narrow down colors, text, and create a general direction to create CMA’s brand. Doing this helped narrow down ideas for a direction that aligned with CMA’s branding requirements.

Even before creating a mood board, six descriptive brand attributes were created:

• Quality

• Trustworthy

• Competent

• Sincere

• Sophisticated

• Boutique

Branding.

After the mood board was created, I began sketching multiple thumbnails and marked the strongest before I created hand drawn comps. Lastly, when I felt I had developed a comp that reflected the quality, trustworthy, and competent brand attributes, I created the vector logo. The serif font, blue color choice help drive the trustworthiness of the brand. The logo icon uses the peaks of a roof not only to form the letter ‘M’ but the connection in the middle provides a sense of strength and stability while offering sincerity of protection from the sun. Following the creation of the logo, a style tile was created to help develop the use of colors, images, text, site elements, and logo usage.

High-Fidelity Prototype.

To facilitate any further user testing and to gain a better understanding of how the site will look and behave in its final form, a high fidelity, interactive prototype was created with InVision. The prototype contains 23 high fidelity wireframes with dedicated hotspots allowing the users to complete various tasks.