Overview
Overview
Overview
This case study shows the progression of how I built the user experience of the HomeLabs mobile app from the ground up. The mobile app aimed to be the ultimate place to manage your HomeLabs smart appliances from anywhere, anytime.
This case study shows the progression of how I built the user experience of the HomeLabs mobile app from the ground up. The mobile app aimed to be the ultimate place to manage your HomeLabs smart appliances from anywhere, anytime.
This case study shows the progression of how I built the user experience of the HomeLabs mobile app from the ground up. The mobile app aimed to be the ultimate place to manage your HomeLabs smart appliances from anywhere, anytime.
What is HomeLabs?
What is HomeLabs?
What are some HomeLabs smart products?
What are some HomeLabs smart products?
What does the HomeLabs mobile app do?
What does the HomeLabs mobile app do?
CHALLENGE
CHALLENGE
CHALLENGE
Designing with Uncertainties
Designing with Uncertainties
Designing with Uncertainties
Designing the HomeLabs mobile app had its own unique set of challenges as the physical smart home products played a huge part in influencing design decisions.
I was faced with evolving product requirements and specifications, software <> hardware integration complexities, and all while with the need for a user-friendly interface.
Ensuring security, scalability, and compatibility while working with limited startup resources and gathering user feedback also posed difficulties for me, being the only product designer.
Designing the HomeLabs mobile app had its own unique set of challenges as the physical smart home products played a huge part in influencing design decisions.
I was faced with evolving product requirements and specifications, software <> hardware integration complexities, and all while with the need for a user-friendly interface.
Ensuring security, scalability, and compatibility while working with limited startup resources and gathering user feedback also posed difficulties for me, being the only product designer.
Designing the HomeLabs mobile app had its own unique set of challenges as the physical smart home products played a huge part in influencing design decisions.
I was faced with evolving product requirements and specifications, software <> hardware integration complexities, and all while with the need for a user-friendly interface.
Ensuring security, scalability, and compatibility while working with limited startup resources and gathering user feedback also posed difficulties for me, being the only product designer.
RESEARCH
RESEARCH
RESEARCH
Personas
Personas
Personas
Being the only product designer on the team, I led the research phase and focused on finding valuable insights to design as efficiently as possible.
Smart home products cast a wide net on target audiences, and that made it a challenge to design for. To design the mobile app more effectively, I collaborated with our co-founder to run through all the possible personas, and ultimately we narrowed down to these 4 key personas based on income, age, and motivations.
Key Takeaways:
The 4 personas shared a few common characteristics that I always referred to during the design process: professional, educated, likely to have a smart phones, busy, and desire to efficiently take care of their home.
Being the only product designer on the team, I led the research phase and focused on finding valuable insights to design as efficiently as possible.
Smart home products cast a wide net on target audiences, and that made it a challenge to design for. To design the mobile app more effectively, I collaborated with our co-founder to run through all the possible personas, and ultimately we narrowed down to these 4 key personas based on income, age, and motivations.
Key Takeaways:
The 4 personas shared a few common characteristics that I always referred to during the design process: professional, educated, likely to have a smart phones, busy, and desire to efficiently take care of their home.
Being the only product designer on the team, I led the research phase and focused on finding valuable insights to design as efficiently as possible.
Smart home products cast a wide net on target audiences, and that made it a challenge to design for. To design the mobile app more effectively, I collaborated with our co-founder to run through all the possible personas, and ultimately we narrowed down to these 4 key personas based on income, age, and motivations.
Key Takeaways:
The 4 personas shared a few common characteristics that I always referred to during the design process: professional, educated, likely to have a smart phones, busy, and desire to efficiently take care of their home.
![](https://framerusercontent.com/images/n9RoFVjT6efvFXzCsCtCHSaFdc.jpg)
![](https://framerusercontent.com/images/n9RoFVjT6efvFXzCsCtCHSaFdc.jpg)
![](https://framerusercontent.com/images/n9RoFVjT6efvFXzCsCtCHSaFdc.jpg)
RESEARCH
RESEARCH
RESEARCH
Appliances & Devices Analysis
Appliances & Devices Analysis
Appliances & Devices Analysis
One interesting research we did was to analyze different devices that our customers could use to interface with the HomeLabs smart products. This exercise taught me the importance of device agnostic UI patterns.
One interesting research we did was to analyze different devices that our customers could use to interface with the HomeLabs smart products. This exercise taught me the importance of device agnostic UI patterns.
One interesting research we did was to analyze different devices that our customers could use to interface with the HomeLabs smart products. This exercise taught me the importance of device agnostic UI patterns.
![](https://framerusercontent.com/images/Ufha5Fm7NYxukPYJSXm9eK0.jpg)
![](https://framerusercontent.com/images/Ufha5Fm7NYxukPYJSXm9eK0.jpg)
![](https://framerusercontent.com/images/Ufha5Fm7NYxukPYJSXm9eK0.jpg)
![](https://framerusercontent.com/images/xjNerRCuwh1uuLUNOyTdej3AYrk.jpg)
![](https://framerusercontent.com/images/xjNerRCuwh1uuLUNOyTdej3AYrk.jpg)
![](https://framerusercontent.com/images/xjNerRCuwh1uuLUNOyTdej3AYrk.jpg)
![](https://framerusercontent.com/images/juUwSajwV8WPmMryLyhoD1FzJ5w.jpg)
![](https://framerusercontent.com/images/juUwSajwV8WPmMryLyhoD1FzJ5w.jpg)
![](https://framerusercontent.com/images/juUwSajwV8WPmMryLyhoD1FzJ5w.jpg)
RESEARCH
RESEARCH
RESEARCH
Information Architecture
Information Architecture
Information Architecture
The approach we took was to sketch out the ideal information architecture, which was especially complex since the product vision included many additional user interface devices. We then worked backwards and divided into build plans.
The approach we took was to sketch out the ideal information architecture, which was especially complex since the product vision included many additional user interface devices. We then worked backwards and divided into build plans.
The approach we took was to sketch out the ideal information architecture, which was especially complex since the product vision included many additional user interface devices. We then worked backwards and divided into build plans.
![](https://framerusercontent.com/images/OELje2vHAGL5VxPx3z155VImGg.jpg)
![](https://framerusercontent.com/images/OELje2vHAGL5VxPx3z155VImGg.jpg)
![](https://framerusercontent.com/images/OELje2vHAGL5VxPx3z155VImGg.jpg)
RESEARCH
RESEARCH
RESEARCH
Research Summarized
Research Summarized
Research Summarized
As the sole product designer, I led the design research phase and distilled valuable insights. We identified common traits of our four key personas. Our research also stressed the importance of device-agnostic UI patterns, and having a well-structured IA helped me design quite efficiently.
As the sole product designer, I led the design research phase and distilled valuable insights. We identified common traits of our four key personas. Our research also stressed the importance of device-agnostic UI patterns, and having a well-structured IA helped me design quite efficiently.
As the sole product designer, I led the design research phase and distilled valuable insights. We identified common traits of our four key personas. Our research also stressed the importance of device-agnostic UI patterns, and having a well-structured IA helped me design quite efficiently.
IDEATION
IDEATION
IDEATION
Inspirations
Inspirations
Inspirations
As I also led the art direction of the HomeLabs brand, finding inspirations for the HomeLabs mobile app came naturally, to ensure a consistent look and feel across different customer touch points.
As I also led the art direction of the HomeLabs brand, finding inspirations for the HomeLabs mobile app came naturally, to ensure a consistent look and feel across different customer touch points.
As I also led the art direction of the HomeLabs brand, finding inspirations for the HomeLabs mobile app came naturally, to ensure a consistent look and feel across different customer touch points.
![](https://framerusercontent.com/images/j5PBXvj5fxhaetUuYCMswzA1GQI.jpg)
![](https://framerusercontent.com/images/j5PBXvj5fxhaetUuYCMswzA1GQI.jpg)
![](https://framerusercontent.com/images/j5PBXvj5fxhaetUuYCMswzA1GQI.jpg)
IDEATION
IDEATION
IDEATION
Wireframes, Progression, Screens Flow
Wireframes, Progression, Screens Flow
Wireframes, Progression, Screens Flow
As I also led the art direction of the HomeLabs brand, finding inspirations for the HomeLabs mobile app came naturally, to ensure a consistent look and feel across different customer touch points.
As I also led the art direction of the HomeLabs brand, finding inspirations for the HomeLabs mobile app came naturally, to ensure a consistent look and feel across different customer touch points.
As I also led the art direction of the HomeLabs brand, finding inspirations for the HomeLabs mobile app came naturally, to ensure a consistent look and feel across different customer touch points.
![](https://framerusercontent.com/images/aJup8sTkX961cgdX6xlVRBOkuKE.jpg)
![](https://framerusercontent.com/images/aJup8sTkX961cgdX6xlVRBOkuKE.jpg)
![](https://framerusercontent.com/images/aJup8sTkX961cgdX6xlVRBOkuKE.jpg)
![](https://framerusercontent.com/images/S1iVeZ1rphXyd1lFqYi8Exf308.jpg)
![](https://framerusercontent.com/images/S1iVeZ1rphXyd1lFqYi8Exf308.jpg)
![](https://framerusercontent.com/images/S1iVeZ1rphXyd1lFqYi8Exf308.jpg)
![](https://framerusercontent.com/images/FYSzKZr22ApCEeRE0HwYjtKvRM.jpg)
![](https://framerusercontent.com/images/FYSzKZr22ApCEeRE0HwYjtKvRM.jpg)
![](https://framerusercontent.com/images/FYSzKZr22ApCEeRE0HwYjtKvRM.jpg)
DESIGN
DESIGN
DESIGN
Key UI Screens
Key UI Screens
Key UI Screens
Some key screens that represent the look and feel of the HomeLabs mobile app:
Some key screens that represent the look and feel of the HomeLabs mobile app:
Some key screens that represent the look and feel of the HomeLabs mobile app:
![](https://framerusercontent.com/images/4rzYIs2l64NADmQpj3dGJSaGArA.jpg)
![](https://framerusercontent.com/images/4rzYIs2l64NADmQpj3dGJSaGArA.jpg)
![](https://framerusercontent.com/images/4rzYIs2l64NADmQpj3dGJSaGArA.jpg)
![](https://framerusercontent.com/images/WbhJUJSwro7rWLoVM9Y3DU9IYo.jpg)
![](https://framerusercontent.com/images/WbhJUJSwro7rWLoVM9Y3DU9IYo.jpg)
![](https://framerusercontent.com/images/WbhJUJSwro7rWLoVM9Y3DU9IYo.jpg)
DESIGN
DESIGN
DESIGN
Interaction Design
Interaction Design
Interaction Design
To ensure intuitive and accessible interactions for our users, I developed and tested different microinteractions throughout the mobile app, focusing on consistency, feedback, simplicity, and error prevention.
To ensure intuitive and accessible interactions for our users, I developed and tested different microinteractions throughout the mobile app, focusing on consistency, feedback, simplicity, and error prevention.
To ensure intuitive and accessible interactions for our users, I developed and tested different microinteractions throughout the mobile app, focusing on consistency, feedback, simplicity, and error prevention.
Welcome
Pairing steps
Pairing complete - A/B testing
Open/close a device - A/B testing
Turn on/off a device
Drawer menu
Grid or list
Device sorting
RESULT
RESULT
RESULT
App Ratings
App Ratings
App Ratings
The initial launch received great ratings from our first wave of users through the smart plug product. A few issues here and there on the Android app due to compatibility but overall we were heading down the right direction.
The initial launch received great ratings from our first wave of users through the smart plug product. A few issues here and there on the Android app due to compatibility but overall we were heading down the right direction.
The initial launch received great ratings from our first wave of users through the smart plug product. A few issues here and there on the Android app due to compatibility but overall we were heading down the right direction.
iOS (2017)
iOS (2017)
iOS (2017)
4.9
4.9
4.9
Android (2017)
Android (2017)
Android (2017)
4.4
4.4
4.4
RESULT
RESULT
RESULT
Next Step: V2
Next Step: V2
Next Step: V2
As we were preparing to launch a few new products to the HomeLabs lineup, such as smart bulbs and smart air conditioner, I began working on some major updates to the app, including the addition of ’Rooms’ feature and a refreshed look and feel of the app.
As we were preparing to launch a few new products to the HomeLabs lineup, such as smart bulbs and smart air conditioner, I began working on some major updates to the app, including the addition of ’Rooms’ feature and a refreshed look and feel of the app.
As we were preparing to launch a few new products to the HomeLabs lineup, such as smart bulbs and smart air conditioner, I began working on some major updates to the app, including the addition of ’Rooms’ feature and a refreshed look and feel of the app.
![](https://framerusercontent.com/images/jiAAwxpROrcxstpDuc1p1UQVGA.jpg)
![](https://framerusercontent.com/images/jiAAwxpROrcxstpDuc1p1UQVGA.jpg)
![](https://framerusercontent.com/images/jiAAwxpROrcxstpDuc1p1UQVGA.jpg)
Drawer menu
Switching room
This version 2 never launched as Aterian later discontinued the development of smart products.
This version 2 never launched as Aterian later discontinued the development of smart products.
This version 2 never launched as Aterian later discontinued the development of smart products.