CONCORD GREENHOUSE

overview

• Designed Concord Greenhouse, Concord Pacific’s premier Webflow site, with dynamic animations and components to drive presale registrations.

In the dynamic realm of real estate development, Concord Greenhouse emerges as the illustrious "Ferrari" within Concord Pacific's esteemed portfolio of property projects. this was the first project we designed and developed using webflow, so the jump from our static marketing pages to this dynamic, polished design, was drastic. this was not only a uI landing page project for greenhouse, but a template design for all other concord pacific marketing sites. through a fusion of animations, parallax effects, and an array of unique components — including a fullscreen menu and engaging hover effects — I endeavored to ensure that Concord Greenhouse would not only captivate but also convert users into registering for presale.

view production

discovery

problem statement

‍
Concord Pacific is launching Concord Greenhouse, a luxury condo development project. They need a standout website to showcase the project's prestige and innovation, featuring captivating animations and dynamic elements. The website includes a registration page to encourage sign-ups for potential condo buyers post-development.

discovery

audit

competitive analysis
‍
For Concord Greenhouse, I analyzed competitors in the real estate market internationally and found inspiration on Awwwards for our website design. This helped us create a standout site that sets Concord Greenhouse apart. with the design and project management team, we brainstormed and noted what we liked and disliked from our inspo board.

design sprint meeting
‍
During the Design Sprint Meeting, we engaged with stakeholders to gather insights into their vision for the website. Collaborating closely with developers, we ensured that our plans aligned with Webflow capabilities and established a design system template to streamline future Concord Pacific projects. Additionally, discussions with the PM team helped us anticipate client requests and prepare accordingly, ensuring a smooth and efficient development process.

ideate

research

secondary quantitative research

232%

more form completion clicks if the cta is well-labelled and one-word

63.37%

of registration forms are filled out entirely after the process has begun

47.01%

of users complete registration forms on desktop versus the 42% on mobile

Clear CTAs Drive Engagement: Simplify call-to-action labels to boost form completion clicks and improve user interaction.

‍Commitment Once Started: Users tend to complete registration forms entirely once they begin the process. Ensure a smooth user journey from start to finish to capitalize on initial user interest.

‍Desktop Dominance in Form Completion: Desktop users show a slight preference for completing registration forms compared to mobile users. Optimize form layouts and interactions to cater to both desktop and mobile users effectively.

design

wireframing

To streamline the design process and ensure consistency across Concord Pacific projects, I created a set of low-fidelity templates for various website sections. These templates include diverse options such as hero sections with different layouts and styles, sections featuring two images for visual impact, and sections presenting text-only content or incorporating videos for enhanced engagement. By developing these versatile templates, we can easily create and reuse sections across multiple projects, saving time and maintaining a cohesive design aesthetic throughout Concord Pacific's digital presence.

design

hi-fi prototype & production

By harnessing the capabilities of Webflow, we created a high-fidelity prototype and production-ready website for Concord Greenhouse. Utilizing a component-based approach, we developed reusable design elements that can be effortlessly customized for any project by adjusting the styling tokens in Webflow. Informed by secondary and primary research, these improvements were seamlessly integrated into polished designs.

review

impact

The redesigned website for Concord Greenhouse resulted in substantial enhancements to the user experience. Following implementation, we noticed a significant increase in user engagement and visibility within a short period. Moreover, our strategic approach to address validation contributed to a notable reduction in user errors and improved accuracy in property listings, resulting in a smoother and more seamless experience for users.

1

webflow template with tokens for our upcoming projects that we can use!

18%

increase in registration form leads vs. previous projects

25%

increase in organic traffic vs. previous projects

overview

production

view website