Twinkly
Redesigning the app to enhance user control, creativity, and the magic of customizable lighting.
Redesigning the app to enhance user control, creativity, and the magic of customizable lighting.
Redesigning the app to enhance user control, creativity, and the magic of customizable lighting.
The Twinkly mobile app is an application designed to control and customise Twinkly smart lights, which are LED string lights and decorations that can be synchronised with music, create animations, and display a wide range of colours and effects.
Year
2024
Role
UX/UI Designer
Project length
3 months
Team
Brand Designer
Project Manager
UX/UI Designer
Head of Product
Problems
The mobile app needs to better showcase its new focus beyond Christmas lights, as it now offers a variety of decorative options for both homes and businesses.
The app should make it easy for users to manage their lighting products and switch between different effects on each object.
Each object is part of a specific installation, and we want to improve how users understand and adjust their lighting across different setups.
The mobile app needs to better showcase its new focus beyond Christmas lights, as it now offers a variety of decorative options for both homes and businesses.
The app should make it easy for users to manage their lighting products and switch between different effects on each object.
Each object is part of a specific installation, and we want to improve how users understand and adjust their lighting across different setups.
Solutions
Revamp the app's design to showcase Twinkly's growth with a flexible colour palette and features for various uses while maintaining a festive feel.
Include a simple dropdown menu or FAB for users to quickly switch between objects and see how different lights or effects work.
Make viewing and editing objects easier by allowing quick access to settings from the installation list through the bottom navigation.
Revamp the app's design to showcase Twinkly's growth with a flexible colour palette and features for various uses while maintaining a festive feel.
Include a simple dropdown menu or FAB for users to quickly switch between objects and see how different lights or effects work.
Make viewing and editing objects easier by allowing quick access to settings from the installation list through the bottom navigation.
By gathering key customer insights and feedback, I identified what users liked about the app and where they faced challenges.
"It is too difficult to change a product where I can apply my favourite effects."
By gathering key customer insights and feedback, I identified what users liked about the app and where they faced challenges.
"It is too difficult to change a product where I can apply my favourite effects."
With this information, I redesigned the app's information architecture to improve the user journey and experience.
With this information, I redesigned the app's information architecture to improve the user journey and experience.
I created the design system from scratch using the atomic methodology and a 4-8 px grid. I organized all the pages clearly for team members and other designers to easily find components. I also made interactive documentation for developers to understand how each component works.
I created the design system from scratch using the atomic methodology and a 4-8 px grid. I organized all the pages clearly for team members and other designers to easily find components. I also made interactive documentation for developers to understand how each component works.
Simplifying changing an object and adding color
Initially, users had to navigate to the settings to change objects. Now, they can easily switch objects on any screen using a dropdown menu at the top. Clicking this menu opens a bottom sheet where users can change objects.
To improve the dropdown experience even further, I introduced tabs enabling users to switch between objects and view them in the context of their installation. This enhancement has made it easier for users to locate objects.
Users can add new colours for a personalized touch by selecting different colour modes.
Initially, users had to navigate to the settings to change objects. Now, they can easily switch objects on any screen using a dropdown menu at the top. Clicking this menu opens a bottom sheet where users can change objects.
To improve the dropdown experience even further, I introduced tabs enabling users to switch between objects and view them in the context of their installation. This enhancement has made it easier for users to locate objects.
Users can add new colours for a personalized touch by selecting different colour modes.
Customizable and engaging gallery and playlist
The gallery section displays various effects that can be filtered, searched, and applied. Users can also create easy-to-customise playlists with specific customer times.
The gallery section displays various effects that can be filtered, searched, and applied. Users can also create easy-to-customise playlists with specific customer times.
Consistent experience in the web app
I also worked on the Twinkly web app, which is designed for desktop and mobile use. Below are the original screens on the left and the updated versions on the right.
I also worked on the Twinkly web app, which is designed for desktop and mobile use. Below are the original screens on the left and the updated versions on the right.
Impact & Takeways
A more scalable and adaptable product
Twinkly's app has now taken on a more year-round approach, reflecting the new brand vision.A smoother multi-device experience
Users could easily manage multiple products, making the app more functional and reducing confusion.Improved usability and adoption
A refined installation flow and navigation made the experience more seamless and intuitive.
This project was a great opportunity to redefine how people interact with smart lighting, making it more accessible, engaging, and adaptable to different use cases.
A more scalable and adaptable product
Twinkly's app has now taken on a more year-round approach, reflecting the new brand vision.A smoother multi-device experience
Users could easily manage multiple products, making the app more functional and reducing confusion.Improved usability and adoption
A refined installation flow and navigation made the experience more seamless and intuitive.
This project was a great opportunity to redefine how people interact with smart lighting, making it more accessible, engaging, and adaptable to different use cases.
Copyright © Alessio D'Angelo
Let’s work together
Let’s work together
Let’s work together