Project Overview

Nocean needed a site that speaks to two very different audiences: founders hiring for construction and architecture roles, and candidates looking for their next position. The structure breaks the firm's end-to-end process into readable stages, gives employers and jobseekers their own dedicated paths, and supports the brand's emphasis on care and precision through restrained typography, generous spacing, and a calm, professional layout.

My Role & Contributions

• Planned the site architecture around two parallel journeys: For Employers and Jobseekers.

• Designed the full UI, including homepage, process, about, and FAQ layouts.

• Structured the recruitment process into a sequential, scannable section instead of dense paragraphs.

• Built the entire site in Framer, including layout, breakpoints, and interactions.

• Created a reusable component set for cards, testimonials, statistics, and CTA blocks.

• Applied subtle scroll and hover animations that support reading rather than distract from it.

• Optimised typography, image handling, and section spacing for load performance.

Design Highlights

• Two clear entry points from the homepage so each audience reaches relevant content in one click.

• A step-based process section that makes an intangible service feel concrete and predictable.

• Testimonial and results blocks placed directly after service claims to reinforce credibility.

• A quiet, confident visual language built on strong hierarchy and restrained accent use.

• FAQ accordion that answers common hiring objections without extending page length.

• Consistent CTA treatment across every section, so contact is always one step away.

Tools Used

• Figma

• Framer

• Framer CMS

Challenges & Solutions

Challenge

The site had to serve employers and candidates without either group feeling like an afterthought, and both journeys shared the same homepage.

Solution

I split the navigation and homepage CTAs by audience early, then kept shared trust content (process, testimonials, and FAQs) in a single sequence that both paths lead into.

Outcome

• A clear, self-explanatory site structure that separates employer and candidate needs.

• A recruitment process communicated visually instead of through long copy blocks.

• A consistent component system that makes future content edits simple.

• Fully responsive layouts across desktop, tablet, and mobile.

• A brand presence that matches the firm's consultative, quality-first positioning.