Hōm — Smart Home Landing Page (Visual Design Project)

May 2021

ROLE

UX & UI

TEAM

Sole Designer

TOOLS

Adobe XD, Adobe Illustrator, Adobe Lightroom, Adobe After Effects, Adobe Photoshop, Sketch, Figma, Invision

In May 2021, I completed an 8-week, part-time Visual Design course with General Assembly to push my UI craft further — especially brand expression, layout, typography, and marketing-style web design.

The main project was to design a marketing landing page for a conceptual smart home company called Hōm. Unlike most of my day-to-day work (which is product UX-heavy), this project was intentionally visual-first: the goal was to create a page that felt premium, built trust quickly, and communicated a clear value proposition at a glance.

The Brief

Design a homepage that:

introduces the Hōm brand and product promise
explains what makes it different
feels modern and credible in a competitive category
guides users through a clear marketing narrative (and towards conversion)

The Challenge

Smart home is a crowded space, and most brands lean on a similar set of cues: minimal layouts, clean product imagery, and a strong sense of trust and security. The challenge was to make Hōm feel credible and high-end while still being distinct.

I also did this alongside a demanding role at Ford, so time and focus were real constraints — the work had to be structured, iterative, and efficient.

What I Focused On (UI + brand craft)

This project wasn’t a full UX case study — but I still applied UX thinking where it mattered: clarity, hierarchy, and reducing friction.

Key areas I worked on:

Visual identity direction (colour, type, tone of voice, style)
Layout and hierarchy (scannable sections, strong headline structure, clear CTAs)
Accessibility and readability (contrast, type scale, spacing)
Marketing storytelling (problem → promise → proof → action)

The Process

1) Competitor and category research

I reviewed smart home leaders like Google Nest, Amazon Alexa, Apple HomeKit, and Ring to understand:

what design patterns signal trust
common layout structures that convert well
how brands explain complex ecosystems without overwhelming users

Competitors

2) Persona + positioning

I defined a simple target persona and clarified the core positioning:
Hōm as a cross-brand smart ecosystem — designed to work seamlessly across major platforms, rather than locking you into one.

That positioning influenced everything: copy tone, imagery, and the page structure.

Typography

3) Moodboards + visual direction

I built moodboards and explored visual routes, then used tools like the Adobe Color wheel to develop a palette that felt modern and premium without becoming cold or overly “techy.”

4) Wireframes → high-fidelity design

I started with quick wireframes to lock structure, then moved into high-fidelity designs. I chose Poppins for its clean, modern feel and strong readability — helping the page feel approachable while still polished.

I also took inspiration from the simplicity and confidence of sites like Ring and Apple HomeKit, aiming for “quiet premium” rather than flashy.

Final Output

To elevate the realism and quality of the end result:

I edited and graded imagery using Adobe Lightroom (drawing on 10+ years of photography experience)
I built interactive prototypes in Adobe XD to demonstrate flow and interaction
I used After Effects to add subtle motion and visual polish where it supported the story

This project was a great way to broaden my craft beyond mobile app design and build more confidence designing marketing-oriented web experiences — where clarity, trust, and brand perception matter just as much as usability.