What is Home Aware?

Using Cognitive’s cutting-edge WiFi Motion technology, Home Aware ensures users enjoy peace of mind by delivering real-time notifications on motion activities within their homes.

Leading & Building User Interface Redesign

In leading the UI redesign of Home Aware, I skillfully addressed the complexities of improving existing interfaces, optimizing usability, and enhancing the overall user experience.

My responsibilities on this project:

• Directed the comprehensive redesign of the user interface for a home monitoring app, steering its conceptualization and guiding the process through to successful implementation.

• Established a robust design system by meticulously defining color schemes, typography, and imagery, enhancing the overall user experience.

• Conducted extensive research on home monitoring needs, implementing intuitive structures to effectively address user requirements.

• Crafted aesthetically captivating and unified app screens harmonized with the brand identity, adeptly conveying a sense of trust and security.

• Cohesively collaborated with the UX team to meticulously tailor the app to the specific needs of the target users, orchestrating intuitive information organization, seamless navigation, and heightened user retention.

• Maintained a synergistic partnership with developers, ensuring the precise and efficient implementation of the meticulously designed interfaces.

Before Redesign

After Redesign

Prioritized usability to ensure that users can easily navigate the app and perform tasks

Simplified original navigation, ensuring clear and intuitive user flows, and provided easily identifiable and accessible interactive elements.

Created a cohesive, predictable, flexible, and aesthetically pleasing user interface

Defined a colour scheme, typography, and imagery that aligns with the brand and ensures flexibility to accommodate new features and content.

Created an exploratory experience to encourage retention and value

Crafted user interfaces that retain users, fostering an engaging experience that consistently draws them in to discover deeper insights about their home.

Collaborated with UX team to ensure designs aligned with the functionality of the app

Worked closely with the UX team to ensure a seamless process between UI, UX, and development.

User-Friendly

Intuitive: Ensured the designs aligned with user expectations and employs consistent and logical layouts for smooth user interaction.

Friendly language: Utilized conversational tones, positive affirmations, clear instructions, empathetic error messages, personalization, visuals, and maintaining a consistent and approachable tone throughout.

Finding small ways to spark joy: Used a vibrant colour palette, designed aesthetically pleasing layouts, and used engaging and informative animations and graphics.

Graphics and icons: Explained concepts in creative visual ways, and used consistent visual elements to ensure experience is intuitive and effortless.

Informative

Charts and graphs: Designed creative data visualization elements to present complex data in a digestible format.

Infographics: Created graphics to explain complex information. These graphics are specifically used as an important part in onboarding, FAQ, and custom alerts.

Interactive elements: Designed interactive elements like sliders and toggles to help users explore and manipulate data or settings more intuitively.

Colour coding: Utilized colour to convey meaning and information. For example, colour was used to indicate status (e.g., green for success, red for error) or to highlight important elements in infographics.

Sleek

Minimalism: Unnecessary elements were stripped away to create a clutter-free interface. This allows users to focus on content and tasks without distractions.

Scannable: Data contains a particular unit of information, making it easy for users to scan and understand the content.

Use of grey scale: Grey scale is used throughout the app to create contrast between important information. Bold colours are used strategically throughout to easily guide the user through tasks without distraction.

Rounded shapes: Rounded shapes reduce visual stress and create an overall softer appearance.

Step One

Project definition and research

• Identified the target users and understood their needs, preferences, and pain points, then determined the primary goals and objectives of the app with the UX team.

• Studied similar home monitoring apps to understand industry trends and user expectations.

Step Two

Audited the existing WiFi Motion app

• Thoroughly evaluated the existing app with the UX team to understand its strengths and weaknesses.

• Identified pain points, usability issues, and areas where the visual design and flow could be improved.

Step Three

Sketching and wireframing

• Started with low-fidelity sketches to visualize the basic layout and flow of the app.

• Created wireframes to outline the structure and placement of UI elements in greyscale.

Step Four

Defined and documented guidelines in Design System

• Crafted a colour scheme, typography styles, and visual elements (icons, images, etc.) that align with the brand and appeal to the target audience.

• Ensured UI design elements complies with accessibility standards (e.g., WCAG) to ensure the app is usable by people with disabilities.

Ongoing

Collaborating with UX Team

• Established a shared understanding of user needs and design objectives

• Provided feedback and iterated on both UX and UI elements to create a cohesive user experience and maintained open communication throughout the design and development process.

Ongoing

Communicating with developers

• Discussed the feasibility of design elements, addressed technical constraints, and invited feedback to designs.

• Created detailed design specifications, including mockups, style guides, and design assets, and handed these off to developers in the correct formats.