The Architectural Marketing Institute. Scotland's site goals were to increase leads and high-quality long-form content to improve SEO and drive conversions.

The marketing agency handled the copy and wireframing with Relume, while I handled the stylistic direction with preliminary concepts and delivered all the high-fidelity mockups for Desktop and Mobile, following UI principles and suggesting improvements.

TIMELINE: 4 weeks
ROLE: WEB/UI DESIGNER
DELIVERABLES: HIGH FIDELITY MOCK-UPS OF ALL SCREENS IN DESKTOP AND MOBILE BREAKPOINTS WITH DEV HAND-OFF
SOFTWARE: RELUME, FIGMA, PHOTOSHOP, ILLUSTRATOR.

Home Page Desktop Version

Home sections on mobile breakpoint

Hand-off

I left annotations int he Figma file regarding the consistent use of spacing, basic measurements in pixels, type styles, image behavior, tap/hover states when needed and layout considerations for the 3 main breakpoints.

Internal page (Desktop and mobile versions)

Opt-in page

Final Result

• A polished design that conveys the mix of traditional design + futuristic features

• Clear type hierarchy and structured layout to make the information easy to glance at and more readable

• A custom design system that ties visuals together to attract a higher-end audience

• The architectural results take center stage with full-width images to highlight the studio’s work and create a needed balance with the amount of text

• CTA buttons are strategically placed and are tested for high contrast and accessibility

• CTA section that stands out to increases bottom level engagement and decreased bounce rate