Hōm:
General Assembly
Visual Design
Concept 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 enrolled in an 8-week part-time visual design course offered by General Assembly. The purpose of this course was to expand and enhance my skills in visual design. During the course, I had the opportunity to work on a project focused on designing a marketing-oriented landing page for a conceptual smart home company called Hōm.
While my background and expertise as a UX designer naturally led me to consider the research stage of the design process, the primary focus of this particular project was on UI and visual design rather than UX. As a result, I dedicated my efforts to crafting visually compelling and engaging designs that effectively conveyed the brand message and captured the attention of potential users.
By immersing myself in the world of visual design and applying the principles and techniques learned during the course, I was able to create a visually appealing and impactful landing page for Hōm. This project allowed me to further refine my skills in UI design and explore the creative aspects of designing a marketing-oriented website.
The Problem
As part of my visual design course, I had the opportunity to work on a project that involved creating a marketing-focused home page for Hōm, a tech startup specialising in connected smart homes. The goal was to design a visually appealing and informative landing page that would effectively showcase Hōm's smart tech offerings and help elevate its brand presence in the market.
Drawing inspiration from the company's mission and the latest design trends in the smart home industry, I crafted a visually compelling home page that captured the essence of Hōm's innovative products and the unique benefits they offer to customers. Through the use of engaging visuals, clear and concise messaging, and intuitive user interface elements, the landing page effectively communicated the value proposition of Hōm's smart home solutions and created a strong brand impression.
By applying my newly acquired skills in visual design and leveraging my understanding of user experience principles, I aimed to create a seamless and enjoyable browsing experience for potential customers. The design elements were carefully selected and organised to guide users' attention, encourage exploration of the product offerings, and ultimately drive conversions and engagement.
Through this project, I was able to contribute to Hōm's branding efforts by creating a visually appealing and impactful home page that effectively showcased its smart tech offerings. The design aimed to position Hōm as a leader in the smart home industry and attract potential customers through its compelling brand presence.
The Barriers
During the 8-week period, I faced the challenge of building Hōm's brand and creating a captivating landing page while also managing my responsibilities as a leader in Ford Motor Company's electric vehicle design division within FordPass Pro. The time constraint added an extra layer of pressure to the project, requiring efficient time management and a focused approach.
To build Hōm's brand, I conducted research to understand its target audience, competitors, and market trends. This informed my decision-making process in selecting the appropriate colour palette, imagery, typography, and tone of voice that aligned with Hōm's brand identity and value proposition. I aimed to create a visually appealing and cohesive visual language that would resonate with Hōm's target customers and differentiate it from its competitors.
Considering the limited timeframe, I utilised design tools and resources efficiently to streamline the brand-building process. I iterated on design concepts, incorporating feedback and making revisions to ensure the final result effectively conveyed Hōm's unique selling points (USPs) and value proposition.
Simultaneously, I balanced my responsibilities at Ford Motor Company, leveraging my expertise in electric vehicle design within FordPass Pro. This required effective multitasking, prioritisation, and communication to ensure both projects received the necessary attention and delivered high-quality outcomes.
Despite the time pressure, I remained focused on achieving the objectives for Hōm's branding and the landing page. By applying my design skills, industry knowledge, and a strategic mindset, I aimed to create a compelling brand presence and an engaging landing page that would capture the attention of potential customers and drive interest in Hōm's smart home offerings.
The combined experience of working on FordPass Pro and building Hōm's brand within a limited timeframe provided valuable opportunities for growth and skill development, enabling me to apply my expertise effectively and deliver results under pressure.
The Process
During the initial weeks of the project, I dedicated my focus to user research, which included an in-depth analysis of competitors and comparators in the smart home industry. I thoroughly examined popular brands such as Google Nest, Amazon Alexa, Apple HomeKit, and Ring to identify their strengths and weaknesses. This research helped me gain insights into the market landscape and understand the expectations of potential customers.
In parallel, I conducted research to define the ideal persona for Hōm's target audience. By understanding the needs, preferences, and pain points of the target users, I was able to shape the brand and design elements to effectively resonate with them.
To create a visual direction for Hōm's brand, I explored various moodboards. These moodboards served as visual inspiration, allowing me to explore different aesthetics, styles, and tones that aligned with the desired brand identity. I used tools like the Adobe Color wheel to generate harmonious colour palettes that captured the desired look and feel of the brand.
By combining the findings from competitor research, persona definition, and moodboarding, I was able to establish a solid foundation for Hōm's brand development. This research phase played a crucial role in guiding the subsequent design decisions and ensuring that Hōm's brand and landing page would effectively communicate its unique value proposition to its target audience.
Competitors
Persona
Typography
Colour Palette
Moodboard
Prototyping
After identifying Hōm's unique selling point as the world's first cross-brand smart ecosystem that seamlessly integrates with various popular brands, I proceeded to create the initial wireframes for the landing page. These wireframes provided a basic structure and layout for the page, outlining the placement of key elements and content.
Building upon the wireframes, I iterated and refined the designs to develop more detailed and visually appealing high-fidelity prototypes. To ensure a clean and modern aesthetic, I opted for the use of the sans-serif font "Poppins." This choice not only enhanced readability but also improved accessibility for a wide range of users.
To create a premium and simple landing page that would capture the attention of the target persona, Simon, I drew inspiration from websites such as Ring and Apple HomeKit. By incorporating elements from these reputable brands, I aimed to establish a sense of credibility and familiarity for Hōm's audience.
Throughout the design process, I paid close attention to the user experience, ensuring that the layout and interactions were intuitive and seamless. By focusing on simplicity, elegance, and showcasing the unique features of Hōm's smart ecosystem, I aimed to create a landing page that would engage and intrigue potential customers like Simon.
The combination of thoughtful wireframing, iterative prototyping, careful font selection, and drawing inspiration from established brands enabled me to craft a visually appealing and compelling landing page for Hōm.
The End Result
During the course, I leveraged my photography skills and used Adobe Lightroom to edit and enhance the chosen imagery for the landing page. With my self-taught experience in photography over the past decade, I was able to apply my knowledge to ensure the images aligned with the desired aesthetics and seamlessly integrated into the overall design.
To bring the design to life and create interactive prototypes, I utilized Adobe XD. This powerful tool allowed me to create complex and interactive prototypes that showcased the user flow and interactions on the landing page. Additionally, I utilized Adobe After Effects to incorporate high-quality visual design effects, adding an extra layer of dynamism to the prototypes.
While my design career had primarily focused on mobile applications, this course provided me with an opportunity to expand my skills into website-based design. It allowed me to delve deeper into website design principles and explore techniques specific to designing impactful and engaging landing pages. This broadened my design repertoire and equipped me with essential skills to tackle various design projects across different platforms.
By combining my self-taught photography skills, the use of Adobe Lightroom for image editing, Adobe XD for prototyping, and Adobe After Effects for visual effects, I was able to create a visually compelling and interactive landing page for Hōm's website.
