Fixing UX from the inside out: redesigning a smart-home app with a scalable design system
Fixing UX from the inside out: redesigning a smart-home app with a scalable design system
Fixing UX from the inside out: redesigning a smart-home app with a scalable design system
Company:
Company:
Lifestyle Technologies
Lifestyle Technologies
Timeline:
Timeline:
4 Months
4 Months
Tools:
Tools:
Figma, Miro
Figma,
Miro
Team:
Team:
Solo Designer
Solo Designer
About the company
About the company
About the company
Lifestyle Technologies Co. is a Bangkok-based tech company specializing in home automation and IoT software for mid-to-high-end residential real estate. With 300+ projects and 40+ developer partners, the company is one of the leading smart-home software providers in Southeast Asia.
Lifestyle Technologies Co. is a Bangkok-based tech company specializing in home automation and IoT software for mid-to-high-end residential real estate. With 300+ projects and 40+ developer partners, the company is one of the leading smart-home software providers in Southeast Asia.
Lifestyle Technologies Co. is a Bangkok-based tech company specializing in home automation and IoT software for mid-to-high-end residential real estate. With 300+ projects and 40+ developer partners, the company is one of the leading smart-home software providers in Southeast Asia.
About the product
About the product
About the product
Artani is a smart-home platform by Lifestyle Technologies. It lets residents control lighting, climate, security, and connected devices in one app. Designed for convenience, the product helps simplify smart-home management and create a more seamless living experience.
Artani is a smart-home platform by Lifestyle Technologies. It lets residents control lighting, climate, security, and connected devices in one app. Designed for convenience, the product helps simplify smart-home management and create a more seamless living experience.
Artani is a smart-home platform by Lifestyle Technologies. It lets residents control lighting, climate, security, and connected devices in one app. Designed for convenience, the product helps simplify smart-home management and create a more seamless living experience.
My role
My role
My role
Audited the existing app experience to identify usability issues and inconsistent UI patterns
Redesigned key product flows to improve usability and create a smoother smart-home experience
Created a cohesive design system from scratch to bring consistency across the product
Built scalable UI components, interaction patterns, and documentation for future iterations
Collaborated with developers and business stakeholders to align design decisions with user needs, product goals, and implementation constraints
My first day, first click, and a lot of questions
My first day, first click, and a lot of questions
My first day, first click, and a lot of questions
On my first day, the Lifestyle Tech team introduced me to their smart-home showroom and walked me through how the app controlled connected IoT devices across the system.
After the session, the CEO and team asked for my perspective on the app experience. They wanted to improve usability, especially after receiving negative feedback following the product launch.
That first walkthrough helped me understand the product beyond the screen — the app was not just a mobile interface, but the control layer for a real connected-home experience.
On my first day, the Lifestyle Tech team introduced me to their smart-home showroom and walked me through how the app controlled connected IoT devices across the system.
After the session, the CEO and team asked for my perspective on the app experience. They wanted to improve usability, especially after receiving negative feedback following the product launch.
That first walkthrough helped me understand the product beyond the screen — the app was not just a mobile interface, but the control layer for a real connected-home experience.
On my first day, the Lifestyle Tech team introduced me to their smart-home showroom and walked me through how the app controlled connected IoT devices across the system.
After the session, the CEO and team asked for my perspective on the app experience. They wanted to improve usability, especially after receiving negative feedback following the product launch.
That first walkthrough helped me understand the product beyond the screen — the app was not just a mobile interface, but the control layer for a real connected-home experience.
What I saw (and couldn't unsee)
After testing the app across several scenarios, I found that setting up devices was especially confusing for first-time users. Each device followed a different flow, making the experience feel inconsistent.
Beyond usability, the product also lacked visual and structural consistency. Icons, navigation, typography, and components felt disconnected, suggesting the need for a stronger design system.
I captured these issues in annotated screenshots to make the recurring UX and UI patterns easier for the team to review.
What I saw (and Couldn't Unsee)
After testing the app in different scenarios, I struggled with setting up the hardware especially as a first-time user. Each device had a different setup flow, which made the experience confusing.
I also noticed a lack of design consistency across the app. Components felt disconnected, as if there was no unified design system in place.
These observations were already captured visually, so I summarized the issues here to avoid repeating them in the body, image annotations, and bullet points. The inconsistencies signaled the absence of a unified design system.
They Wanted to Ship. I Wanted to Solve.
The team listened, but they were still unsure. They just wanted to tweak the UX and launch quickly.
But I believed a few UI changes wouldn’t solve the real problem—we’d risk getting the same negative feedback. Before fixing user flows, we needed a strong design system.
I asked for time to dig deeper. I researched design systems, explored industry examples, and highlighted what made them effective. Then, I presented a clear case to the CEO and team on how a strong system could improve the product and support long-term growth.
Now we're on the same page. So, what's next?
To keep the momentum going, I defined a clear problem statement to guide the team:
“The product lacked a consistent user experience and design system, leading to confusion especially for new users. Quick fixes weren’t enough. What it needed was a solid foundation to scale and improve usability.”
With the problem clearly defined, I took the next step:
I researched what makes a great design system by gathering real-world examples and insights on Miro. After analyzing them, I outlined key foundations and components, then created a first draft to help the team clearly visualize the direction we needed to take.
Turning the research into first design
I created the first collection of design foundations for example, fonts, font sizes, spacing, colors, and more. I also mapped out key design elements by reviewing the existing app to identify which components we needed. Then, I shared this with the CEO and team to get the feedback and align on the direction.
First Feedback 💬 Looks Great—But Will It Work?
This was the moment where design met reality. I completely understood their concern and started asking myself:
How can I prove that this design system will work with the existing product and actually improve the UX and UI?
So, I selected a few key screens from the existing app and redesigned them using the new components. This helped show how everything fits together and how the system could work in real scenarios. Once I had covered everything that needed to be shown, I presented it to the team and CEO. It gave them the confidence that the design system could actually work so we moved forward and set a timeline for me to deliver the full system.
Now It’s Time to Deliver
After finishing the design system, I documented everything developers needed to know and created clear guidelines. I then handed over the documentation to the dev team to support implementation.
Shipping fast mattered. Solving the foundation mattered more.
The team understood the issues, but they also needed to move quickly. At first, the ask was to improve the UI enough for launch.
I believed a few surface-level changes wouldn’t solve the root problem. Without a stronger design foundation, the product risked repeating the same usability issues and negative feedback.
So I asked for time to dig deeper. I researched design systems, studied industry examples, and highlighted how a stronger system could improve consistency, usability, and long-term scalability.
Aligning the team around a stronger foundation
To keep the momentum going, I framed the core problem clearly for the team:
“The product lacked a consistent user experience and design system, which made setup and control flows confusing, especially for new users. Quick UI fixes weren’t enough — the product needed a stronger foundation to scale and improve usability.”
With the problem clearly defined, I moved into design system research.
I gathered real-world design system examples and studied how mature systems approach foundations, components, documentation, and scalability.
From there, I outlined the key building blocks Artani needed and created an early direction to help the team visualize what we should build next.
Turning research into a design foundation
I translated the research into the first set of design foundations, including layout grids, typography, spacing, colors, and reusable UI patterns.
I also reviewed the existing app to identify which components the product needed most. This helped me create an early design system direction that the CEO and team could review, give feedback on, and align around before moving into full redesign work.
Validating the system with real product screens
The first design direction was well received, but the key question was whether the system could work inside the existing product.
I needed to show that the new foundations were not just visually cleaner, but practical enough to improve real flows, support existing screens, and help the team move forward with confidence.
To prove the direction, I selected a few key screens from the existing app and redesigned them using the new components and patterns.
This helped show how the system could bring consistency to scattered flows, improve the UX and UI, and still work within real product scenarios.
After presenting the updated screens and details to the CEO and team, we aligned on the direction and moved forward with a timeline to deliver the full design system.
Making the system ready to build
After defining the design system, I documented the core foundations and reusable components the team needed for implementation.
The documentation helped developers understand how each pattern should behave, how spacing and typography should be applied, and how the system could stay consistent across future product iterations.
Implement, test, iterate
Implement, test, iterate
Implement, test, iterate
After handing off the design system documentation, I worked closely with developers to bring the new components and patterns into the app.
I then tested the core flows with 15 existing users, observing where they hesitated, got stuck, or needed extra guidance.
These insights helped me refine the design and make sure the system worked not only as documentation, but as a real product experience.
After handing off the design system documentation, I worked closely with developers to bring the new components and patterns into the app.
I then tested the core flows with 15 existing users, observing where they hesitated, got stuck, or needed extra guidance.
These insights helped me refine the design and make sure the system worked not only as documentation, but as a real product experience.
I then tested the core flows with 15 existing users, observing where they hesitated, got stuck, or needed extra guidance.
These insights helped me refine the design and make sure the system worked not only as documentation, but as a real product experience.
What I saw (and Couldn't Unsee)
After testing the app in different scenarios, I struggled with setting up the hardware especially as a first-time user. Each device had a different setup flow, which made the experience confusing.
I also noticed a lack of design consistency across the app. Components felt disconnected, as if there was no unified design system in place.
These observations were already captured visually, so I summarized the issues here to avoid repeating them in the body, image annotations, and bullet points. The inconsistencies signaled the absence of a unified design system.
Before & After results
Before & After results
Before & After results
To show the impact of the design system, I compared the original app experience with the redesigned flows built from the new foundations and components.
The redesign focused on improving consistency, reducing visual clutter, and making key smart-home actions easier to understand and use.
The impact
The impact
Created a design system from scratch to unify the app experience
Redesigned key flows with reusable components and clearer UI patterns
Delivered developer-ready documentation for implementation
Tested core flows with 15 existing users and refined the design based on observed friction
Created a design system from scratch to unify the app experience
Redesigned key flows with reusable components and clearer UI patterns
Delivered developer-ready documentation for implementation
Tested core flows with 15 existing users and refined the design based on observed friction
What I learned
What I learned
Start by solving the root problem, not just the visible UI issues
Use real examples to help stakeholders understand the value of design decisions
Validate the system through real product flows, not isolated components
Keep improving the design through testing, feedback, and implementation
Start by solving the root problem, not just the visible UI issues
Use real examples to help stakeholders understand the value of design decisions
Validate the system through real product flows, not isolated components
Keep improving the design through testing, feedback, and implementation
Now we're on the same page. So, what's next?
To keep the momentum going, I defined a clear problem statement to guide the team:
“The product lacked a consistent user experience and design system, leading to confusion especially for new users. Quick fixes weren’t enough. What it needed was a solid foundation to scale and improve usability.”
With the problem clearly defined, I took the next step:
I researched what makes a great design system by gathering real-world examples and insights on Miro. After analyzing them, I outlined key foundations and components, then created a first draft to help the team clearly visualize the direction we needed to take.
First Feedback 💬 Looks Great—But Will It Work?
This was the moment where design met reality. I completely understood their concern and started asking myself:
How can I prove that this design system will work with the existing product and actually improve the UX and UI?
So, I selected a few key screens from the existing app and redesigned them using the new components. This helped show how everything fits together and how the system could work in real scenarios. Once I had covered everything that needed to be shown, I presented it to the team and CEO. It gave them the confidence that the design system could actually work so we moved forward and set a timeline for me to deliver the full system.
Now It’s Time to Deliver
After finishing the design system, I documented everything developers needed to know and created clear guidelines. I then handed over the documentation to the dev team to support implementation.
They Wanted to Ship. I Wanted to Solve.
The team listened, but they were still unsure. They just wanted to tweak the UX and launch quickly.
But I believed a few UI changes wouldn’t solve the real problem—we’d risk getting the same negative feedback. Before fixing user flows, we needed a strong design system.
I asked for time to dig deeper. I researched design systems, explored industry examples, and highlighted what made them effective. Then, I presented a clear case to the CEO and team on how a strong system could improve the product and support long-term growth.
Turning the research into first design
I created the first collection of design foundations for example, fonts, font sizes, spacing, colors, and more. I also mapped out key design elements by reviewing the existing app to identify which components we needed. Then, I shared this with the CEO and team to get the feedback and align on the direction.
The impact
Built a design system from scratch to bring consistency across the app
Improved the overall user experience by redesigning key workflows
Helped the company grow more easily with reusable design pieces
Helped the team see the value of good design
What I learn
Good design starts with understanding the real problems
Working closely with developers makes the process smoother
Showing real examples helps people understand and trust your ideas
Small changes can make a big difference in user experience