Origin Home Media

UX Design / Frontend Development

Smart Home Systems Designed & Built For The Way You Live

The original site

About The Project

This case study showcases a recent collaboration with Origin Home Media, a leading smart home systems designer-integrator based in Southern California.

Origin Home Media needed a new digital presence that moved beyond technical specs and product lists — one that expressed the lifestyles their systems make possible. As the region’s leading smart home designer-integrator, Origin's value lies not just in automation or connectivity, but in crafting lifestyle-first environments that adapt naturally to how people live.

This project was designed not just to showcase an upgraded brand image, but to solve real user and business problems through strategic thinking, research-backed decisions, and attention to cross-functional needs. It reflects a process rooted in design thinking, collaborative execution, and scalable design — with every design decision supporting downstream implementation across product, engineering, and marketing.

[The Process]

The key to a successful project is the process you use and how well you execute it. This is the process I follow for my projects.

Mobile First Approach and Agile Design

The mobile first approach we took is the starting point of our agile design process. By evolving the design more and more between wireframing, low-fi prototyping and high-fi prototyping we are able to speed time to release without sacrificing the user experience. The key is to make the accelerated iterations in a way that eliminates the risks.

[Research]

Foundational Research: With no prior research available, we approached the project with a start-up mindset — building from the ground up to define user needs, business / stakeholder goals, and brand opportunities using qualitative and quantitative methods.

Field Research Provided Qualitative Data

Competitive Audits and Field Research

As with all foundational research, we conducted competitive audits to assess market position, brand voice, strengths, weaknesses, and strategic gaps of the competition.

We also visited live customer sites to observe real-world behaviors and systems in action.

[Empathy-Define]

Based on the research we defined the user’s pain points, user goals, user’s journey and key personas. Jennifer Caldwell is 1 of 3 key personas we created using AI assist and we received validation from Marketing Stakeholders as to their accuracy.

Generative AI from more than one source was instrumental in multiple phases of the project

AI Assit Facilitates The Define Process

We used several LLMs to facilitate analyzing research data and producing everything from personas to problem statements.

We used Open ai and Perplexity ai APIs to process our custom work flows suited to the project. Valuable insights from user surveys and empathy maps as well as field study data provided the basis of persona creation.

[Ideation]

Research showed customers were affluent home owners or estate managers who valued simplicity, reliability and elegance. Per the norm our collaborations centered on the personas.

The Color Palette

Color choices were intentionally minimal. With no plans for advanced interactivity beyond basic forms and CTAs, light/dark theme toggles were deemed unnecessary.

Black was selected as the primary color for its association with luxury, complemented by a single accent color — Sky — to integrate brand elements. Standard warning and success colors are applied where appropriate, and all selections meet WCAG 2.2 accessibility standards.

[Design]

We started mobile-first to ensure simplicity and ease for users on the move. Tailwind CSS replaced conventional frameworks to deliver a more refined, custom feel that better matched OHM’s high-end brand.

Starting with hand drawn wireframes is a must for quickly creating ideas

Paper Wireframes

When ideas are moving faster than pixels, I reach for paper. Sketching wireframes by hand remains my go-to for brainstorming and quickly exploring early concepts — it’s the fastest way to keep pace with rapidly developing ideas.

Responsiveness and Accessible Designs

Media breakpoints were defined early, with responsive behavior structured using Figma’s auto layout frames. Accessibility is guided by WCAG 2.1–2.2 standards and supplemented with ARIA roles when not natively supported by browsers. For edge cases, practical judgment ensures sensible outcomes.

Designing a More Inclusive Product

Awareness is the foundation of inclusive design — yet unconscious bias often shapes decisions without our realizing it. Tools like Project Implicit (https://implicit.harvard.edu/implicit/) help surface those hidden biases in us, offering a critical step toward designing more thoughtfully and inclusively.

[Low-Fi Wireframes]

Information architecture and navigation were kept simple yet multifunctional. User flow considerations provide quick access to product offerings and company pages expressing key brand value propositions. Each page is also designed to perform as a landing page for future advertising campaigns, SEO and social media traffic.

Visual Style

Aside from choices for Typography and Color, Iconography choices are consistent with brand values and user familiarity.

Font Awesome makes it easy to integrate with Figma’s component structure which translate well into light weight imagery and is easy for conversion at frontend development.

[High-Fi Wireframes]

Final copy and image treatments have been applied, with all interactions finalized and retested for consistency and performance.

To restore visual fidelity lost through JPEG compression, images were enhanced using Topaz Labs Adjust AI.

Designs were built with handoff in mind — using Figma components, auto layout, and tokenized styles to mirror React structure.

[Frontend]

The Figma files were structured to reflect the logic of the final React components, enabling faster, more accurate development. Consistent naming, layout rules, and spacing tokens helped ensure smooth integration with the codebase.

Components were built with scalability and reuse in mind, and styles were systematized to speed the process during implementation