Twinkly
Twinkly
Twinkly
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 Design
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.
Change Object and Add Colour screens
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.
Gallery section
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.
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.
Copyright © Alessio D'Angelo
Let’s work together
Let’s work together
Let’s work together