A rapid, end-to-end landing page build for a fictional college brand that showcases my discovery, design, and development process culminating in a responsive Elementor experience ready for review.
Web Designer & Developer
Assessment Landing Page
Figma, Elementor Pro, WordPress, Photoshop
Research, wireframes, high-fidelity UI, live build
I was invited to complete a private design assessment that asked for a high-converting open house landing page for “Riverbrook Community College.” The brief included a copy deck, a curated asset library, and full access to a staging WordPress instance preloaded with Elementor Pro and Crocoblock. I was evaluated on how I understood the ask, translated assets into a cohesive brand system, and delivered a polished experience with clear rationale.
The page needed to reassure prospective students and parents, surface the event value props quickly, and make registration effortless. Internally, the team wanted a window into my process—particularly how I move from research to interface design and how I translate comps into a production-ready build.
I put together a document that expanded on the target audience, drafted sample copy, and captured research from nearby Massachusetts community colleges. Reviewing existing sites helped me spot strengths, weaknesses, and opportunities—even though they weren’t landing pages—and served as a springboard for the Riverbrook story.
Building on my research and copy worksheets, I sketched a focused wireframe to nail the information hierarchy. I originally explored a centered hero but quickly shifted to a left-aligned copy block so the primary message stayed in view while the student imagery anchored the right side.
I expanded the wireframe into a polished Figma system with headline styles (H1–H4), paragraph treatments, and reusable components. The palette leans on Riverbrook teal #004F5D, energetic gold #FFED96, light blue #7CC1E0, and navy accent #004585 to balance youthful energy with academic credibility. I created the Hero image in Photoshop with simple masking. Imagery carries the story, while Source Serif Pro keeps the typography grounded.
Heading styles (H1–H4) and body copy live within a shared Figma text style library so the Elementor build stayed consistent. Source Serif Pro headlines combine with Inter body copy for warmth and readability.
CTA, testimonial, and statistic components inherit these styles—making future iterations fast and predictable.
I translated the Figma components into Elementor Pro, leveraging global styles for typography and color tokens. The Elementor Pro form widget handled registration with custom confirmations and streamlined required fields. I validated the build against my prototype to ensure spacing, animations, and responsive behavior matched, then performed an in-depth mobile sweep to double-check tap targets, typography, and scroll rhythm. A small custom code block powers the About Riverbrook image grid hover states so each tile reveals quick facts on interaction.
I paired the event headline with the promise “Discover Your Future” and immediate value props: tour the campus, meet professors, and plan next steps. The hero CTA anchors the RSVP action while secondary text references the event time and location to reduce decision friction. I crafted the hero composite in Photoshop to balance typography, photography, and depth.
The “Plan Your Day” section uses iconography and short descriptors to make the evening feel structured and supportive. Each item reinforces that visitors will get facetime with faculty, financial aid guidance, and refreshments—mirroring copy points from the brief.
I surfaced the 85% graduate success rate and a parent testimonial before the form. The Registration Form adds inline validation and adds a success message at the end of the form registration to improve completion confidence.
Setting up global tokens early in Elementor meant going through and developing the landing page text blocks took minutes instead of restyling modules one by one.
A lightweight analytics plan (micro-events on CTA clicks and form starts) would make it easy to iterate on the live page post-launch.
Designing with typography hierarchy in mind in Figma makes it easier to translate into development.
Let's design a modern, user-friendly website that establishes credibility and converts prospects into clients, whether using WordPress or custom development.