Team Members: Vitoria D.
My Role: Qualitative User Research, User Experience Design, User Interface Design
Tools Used: Photoshop, Illustrator, Webflow
I had the opportunity to pitch for the Eagle Ridge Homeowners Association to update their website for the first time since the early-2000s. They were looking to make the website clean, easy to use, and informative, and also to show the beauty of the community in its design. I developed a landing page and presented a few new features I could develop for them and was hired for the project.
As it was my first time developing and designing a community website with gated content, my research mainly involved looking at other communities, nationally and internationally, and seeing what their priority was for each page and how they separated the information in it.
As the website contains a lot of information, I separated the planning into three parts.
The first page designed was the “Our Community” page, which set the tone for the rest of the website. Its font size and colour, the sections, and how each piece of information, large and small, would be showed case without losing its charm.
Proceeding with the formula created by me, I finished the remaining pages and then moved on to the homepage and user account page. Simple and direct, the homepage shows the qualities of the community, their mission, a bulletin board header without showing any postings, and the most recent news.
The final page created was the user account, which will allow each household to update their information and submit a job or opportunity.
All minor iterations were done throughout the development and the final iterations were done with each board member going over each page and section to guarantee that all the information was correct and the design was responsive. At the very end, we decided to add an extra layer of protection by adding a cookies allowance and a notification box when the user clicks on an external link.
My goal for the landing page was to be inviting and simple. On theprevious webiste, all the menu and submenu buttons were located on the left side of the page, leaving the website crowded and confusing. The users said during the research phase that they felt overwhelmed, confused with the information displayed and didn't feel the website invited them to keep browsing.
With the old website, the main frame was static, almost as if the page was a frame and when scrolled or as in the example above, and the content would overflow. With that in mind, my priority was to remove said frame and make the website responsive and adaptive.
I modified the side menu by moving it to the top and creating six main menu buttons with submenu on some of them. I noticed that a lot of menu options on the old webiste were very repetitive and could be cleared up by merging the topics. For example, News and Special Annoucements, Feedback Form, and Contact Us.
Reports such as Annual and Meeting Minutes, and Financial Statements are crucial for any community website as all residents need to be kept in the known of what is discussed on board meetings. The website is required to show all the reports for the past seven years.
Keeping in mind the large amount of reports that needed to be displayed, I decided to organize all the meeting notes by year and then by date in tabs, making it more clear for the user to browse.
On my presentation with the ERHA Board, I suggested adding a Bulletin Board on the webiste in order to bring the community closer together. With that feature the homeowners would be able to ask for assistance from another neighbour by posting any jobs and opportunities like a garage sale. After that meeting the board decided that only the homeowners in the community should be able to submit such postings, so we all decided that creating a gated account for each household would note only be better, more organized but also safer, so no one from a different neighbourhood would have access to personal information. All accounts were created manually with the information given to the board when the homeowners first moved to the neighbourhood.
On the user account page, the user will find their basic information, the bulletin board, a form to submit a posting, which includes: Offering a service, Requiring a service, Posting event, Lost and Found, Remove Request; and the rules for the submission.
Designing the Eagle Ridge Homeowners Association website allowed me to broaden my design and coding skills while also seeing how websites can bring a community together. I was hired by the ERHA to maintain and keep the website up to date.
Don't lose focus, continue reading my case studies
