⌦ UX/UI : Homestead Company Corporate Website Redesign

INTRO
Homestead Companies is a full-service real estate development firm driven by an internal team of talented professionals. The company is divided into five subdivisions: Multi-family Communities, Student Housing, Senior Living Communities, Development and Construction.

ROLE
UX/UI Designer
UX/UI Research
Coding & Building Site

PROBLEM
Users who visit the Homestead Companies' website vary from residents, guardians of residents, investors, lenders, city planners, employees and future employees.

The initial website, created in 2007, requires a redesign to meet their needs. These users need an updated and redesigned website that effectively presents the company's five subdivisions and wide range of services across the country. This is important because users want to easily navigate the website and grasp a comprehensive understanding of the company's offerings without encountering confusion or inconsistencies.

Solution

PHASE I: Stakeholders, Competitive Audit & Gathering Information

During a collaborative meeting with the Marketing director and stakeholders, we refined the goals for the website update. The main objectives identified were to appeal to investors and lenders, and establish a strong sense of trust and legitimacy.

To gain insights, I conducted a comprehensive competitive analysis of the market. Specifically, I focused on companies offering similar services in the Midwest region. This analysis provided valuable information to inform the redesign process and ensure that our website remains competitive and aligned with industry standards.

As part of the website redesign process, I undertook the task of collecting photos for each division and gathering all the necessary information. This proved to be a challenging endeavor, but crucial for the success of the project. By maintaining a well-organized system, I aimed to streamline the design and development process, making it easier to incorporate the gathered photos and information into the new website seamlessly.

PHASE II: User Research
Subsequently, I proceeded to conduct surveys and interviews to collect feedback from our internal employees, specifically needs for our updated website. To organize the data I collected, I utilized Miro, an online collaborative whiteboard platform and organized the data by subdivision each user was from. The majority of the survey responses came from leasing agents who operated at our properties nationwide, as well as our home office employees. Their insights proved to be vital as we aimed to appeal not only to lenders and investors but also to residents who accessed our website for rent payments and information.

PHASE III: Wireframe and Edits
With all the gathered information and data, I proceeded to create wireframes for the homepage and subdivision pages, aiming to present each subdivision in a clear and concise manner. Based on my user research, I discovered that almost every subdivision page had unique requirements.

Homepage: This section was primarily designed to appeal to stakeholders, specifically lenders and investors, while also highlighting our accolades.

Homestead America (Multi-family): As there were no standalone websites for their properties, a directory of properties needed to be created. Each property page within the directory would cater to residents, providing essential details like floor plans, pricing, rent payment options, and contact information.

Homestead University (Student Housing): This page had to appeal to parents of students and establish the credibility of third-party management. It would also feature links to each standalone website.

Homestead Senior Living (Senior Living Community): The goal was to appeal to children of seniors looking for suitable homes for their parents and showcase the locations of each senior living community.

Homestead Construction & Development: This section required two separate pages but with similar content. It aimed to showcase the properties built or developed, highlighting budget, size, and location. Additionally, it would emphasize the team members who could be contacted by potential investors.

Careers (HR): The focus here was to present our company culture, values, employee testimonials, and provide links to potential opportunities. It would also highlight a direct HR representative for new talent.

Homepage Wireframe:

Subdivision Wireframe:

PHASE III: Edits and High Fidelity Mock-ups
Next, I conducted a meeting with stakeholders to present the collected data, competitive audit findings, and wireframes. We engaged in discussions to address any necessary edits or modifications. Subsequently, I implemented all the required changes based on the feedback received.

Following this, I commenced the actual website development process, working with the low-fidelity wireframe and incorporating the approved edits. Meanwhile, our graphic designer obtained approval for the updated branding, including colors, fonts, and logos. Consequently, I began incorporating these updated elements into the website.

Once the high-fidelity mock-up of the website was completed, we organized another meeting with the stakeholders. During this meeting, we presented a live version of the website for their review and feedback. Following the meeting, I took care of minor copy and photograph changes based on the stakeholders' input and preferences.

PHASE IIII: Beta Test
To ensure the smooth functioning of the website, we conducted a beta test among our internal employees nationwide. The beta test spanned over a duration of two weeks, allowing us to gather feedback and identify any minor issues or glitches that arose during the testing phase. Based on the feedback received, we promptly addressed and resolved these hiccups, ensuring that the website was optimized for a seamless user experience.

During the beta test, one of the main challenges we encountered was related to the mobile translation of the website. It was crucial for us to ensure that all the websites operated smoothly and provided an optimal user experience on mobile devices. We identified certain areas where the mobile version of the site required adjustments and enhancements to align with the desired user interface and functionality. By diligently addressing these issues and making necessary optimizations, we ensured that the websites were fully responsive and performed seamlessly across various mobile devices.

PHASE IIII: Launch
And then it was time to launch the site! I tested to make sure the website worked on both mobile and desktop devices. And we created a company wide email blast and social media campaign. The website was a huge success and well received by employees, stakeholders, vendors, lenders and partners.

Success Metrics:

Bounce rate improved significantly. Using Google Analytics we could see user flow improving as well. With users getting to their targeted pages. Our traffic on our site as well increased by 40%. Additionally the previous site was not responsive so mobile traffic was up significantly.