Product Design, Concept Design, UX
Smart Climate
Smart Climate is a concept app for monitoring and optimizing indoor climate conditions, designed to improve air quality, comfort, and well-being.
Problem
Users need an efficient way to monitor and improve indoor air quality for better health and comfort. Existing solutions often lack actionable tips tailored to real-time conditions.
Responsibilities
Create a conceptual redesign of Smart Climate—an app aimed at helping users monitor and improve their indoor air
quality. I defined the app’s core use cases and user flows, and designed a modular interface that adapts to multiple
rooms and connected devices. I integrated real-time indoor and outdoor climate data to generate personalized,
context-aware tips (e.g., when to ventilate a room or use a humidifier). I also designed upsell opportunities that
recommend relevant smart devices, blending functionality with subtle e-commerce touchpoints. The concept was
supported by a clean, scalable design system with a focus on clarity, habit formation, and long-term engagement.
Duration: 1 week
Solution
The Smart Climate app empowers users with real-time indoor climate insights and personalized recommendations to enhance air quality. By incorporating outdoor climate data, the app provides context-aware suggestions, such as opening windows when outdoor air quality surpasses indoor levels. Smart Climate also integrates product recommendations, offering items like humidifiers when indoor humidity is low, with direct purchase links for convenience. The app’s multi-device support allows users to manage climate settings seamlessly across different rooms, each of which can be customized with specific environmental parameters for precise control. This comprehensive approach ensures users can easily monitor and optimize their home climate based on real-time data and tailored guidance.
Process
Plan the Screens
In this initial phase, I mapped out the primary screens and user pathways, ensuring a seamless flow across all functionalities. My focus was on simplifying navigation and creating an intuitive experience for users. Using a flowchart, I outlined each screen interaction, identifying key touchpoints to address user needs efficiently. This planning phase served as the foundation for a user-centered design approach, aligning the app’s structure with the intended user journey.
User Flow
Next, I defined the user flow in greater detail to guide users effortlessly through the app. This step involved whiteboard sketches to explore different scenarios, ensuring all potential user actions were accounted for. My goal was to minimize friction points and optimize each interaction, from logging in to receiving personalized climate tips. I collaborated closely with stakeholders during this phase to confirm alignment on usability priorities and ensure that each flow would contribute to a smooth, engaging user experience.
Sketches
Once the user flow was established, I began sketching the layout for each screen. These initial sketches helped me visualize the core components of each page and allowed for quick iterations. Through this low-fidelity process, I tested different design ideas, focusing on clarity, hierarchy, and alignment with user needs. This sketching phase was essential for capturing feedback early and refining the layout before moving into high-fidelity designs.
Wireframes
At this stage, I translated initial sketches into low-fidelity wireframes to establish the layout, structure, and flow of the app. Focusing on user interactions and key functionalities, these wireframes allowed me to experiment with different arrangements and ensure a logical progression through each screen. I prioritized simplicity and clarity to keep users focused on core actions, making it easy to assess the visual hierarchy and usability before moving into high-fidelity designs. The wireframes also served as an effective communication tool, enabling stakeholder feedback and early adjustments.
Dessign
With the wireframes finalized, I transitioned to high-fidelity design, focusing on visual consistency, usability, and responsiveness. Each element was crafted to ensure a seamless experience across various devices. I used a modular design approach, incorporating breakpoints for responsive layouts, so the interface remains intuitive on different screen sizes. By aligning visual elements with user needs, I aimed to create an aesthetically pleasing yet functional design that enhances the overall user experience.
Style Guide
To maintain consistency throughout the app, I developed a comprehensive style guide that includes color schemes, typography, iconography, and spacing rules. This guide ensures a cohesive visual language and facilitates smooth collaboration across teams. The style guide serves as a reference for future updates, providing a foundation that aligns design elements with brand identity and accessibility standards. This structured approach enables efficient scaling and contributes to a polished, professional user experience.
Outcome
The Smart Climate concept demonstrated how a renewed design approach could transform a utility-focused product into a personalized, insight-driven experience. The integration of real-time data, contextual recommendations, and subtle product upsells positioned the app as both helpful and commercially scalable. Usability testing on early prototypes showed strong user interest in the room-specific suggestions and the ability to manage multiple devices easily. The concept laid the groundwork for future development, proving the value of combining environmental awareness with intelligent, habit-forming design.