top of page

Smart light

Cross-platform smart home app

UI design, UX adaptation

Smart light

Cross-platform smart home app

UI design, UX adaptation

Smart light

Cross-platform smart home app

UI design, UX adaptation

Intro

Customer company integrates the innovative technology of solar energy into smart home systems.

The app being developed is intended for private consumers. It allows you to control a smart home and track the energy accumulated from solar panels.

Task

Design user interface based on wireframes with necessary cross-platform UX adaptation as follows

  1.  Tablet app

  2.  Smartphone adaptation

  3.  Desktop dashboard

  4.  Adaptation for usage in changing environments (dark mode)

UX-wireframes given by Codesigner

Intro

Customer company integrates the innovative technology of solar energy into smart home systems.

The app being developed is intended for private consumers. It allows you to control a smart home and track the energy accumulated from solar panels.

Task

Design user interface based on wireframes with necessary cross-platform UX adaptation as follows

  1.  Tablet app

  2.  Smartphone adaptation

  3.  Desktop dashboard

  4.  Adaptation for usage in changing environments (dark mode)

UX-wireframes given by Codesigner

Design style

By choosing a design style I sought to balance the cognitive load of a highly informative user interface.

I’ve chosen neumorphism for its' special feeling of comfort and familiarity. Neumorphistic blend of minimalism and futuristic realism provides a modern look which fits the idea of smart home.

The emphasis on the environmental friendliness of the product prompted me to use a restrained natural color palette.

Design style

By choosing a design style I sought to balance the cognitive load of a highly informative user interface.

I’ve chosen neumorphism for its' special feeling of comfort and familiarity. Neumorphistic blend of minimalism and futuristic realism provides a modern look which fits the idea of smart home.

The emphasis on the environmental friendliness of the product prompted me to use a restrained natural color palette.

01

Tablet

All wireframes have undergone changes to polish the UX design and make it more accessible and intuitive, which was part of the task.

  • Lights and Temperature panels were equipped with toggles.

  • The dropdown menu was replaced with intuitive tabs.

  • I also added  tabs to Favorites to organize the logical structure.

01

Tablet

All wireframes have undergone changes to polish the UX design and make it more accessible and intuitive, which was part of the task.

  • The Lights and Temperature panels were equipped with toggles.

  • The Lights and Favorites panels got intuitive tabs to enhance usability.

  • The toggle that used to be on the upper panel was replaced with a play button, which is more appropriate for scene as a sequence of events.

  • The page was moved to the Devices tab so I refused of using the back arrow.

  • I rearranged internal page navigation and replaced the dropdown to tabs.

01

Tablet

All wireframes have undergone changes to polish the UX design and make it more accessible and intuitive, which was part of the task.

  • The Lights and Temperature panels were equipped with toggles.

  • The Lights and Favorites panels got intuitive tabs to enhance usability.

  • The toggle that used to be on the upper panel was replaced with a play button, which is more appropriate for scene as a sequence of events.

  • The page was moved to the Devices tab so I refused of using the back arrow.

  • I rearranged internal page navigation and replaced the dropdown to tabs.

  • The page was moved to the Devices tab so I refused of using the back arrow.

  • I rearranged internal page navigation and replaced the dropdown to tabs.

02

Smartphone adaptation

In order to accomodate the smaller screen size, I adapted the navigation patterns and simplified the user interface to enhance usability.

02

Smartphone adaptation

In order to accomodate the smaller screen size, I adapted the navigation patterns and simplified the user interface to enhance usability.

03

Dark mode

While maintaining the warmth of the interface, I adjusted color contrasts to ensure readability and reduce eye strain, and modified UI elements to enhance their clarity in the darker theme.

03

Dark mode

While maintaining the warmth of the interface, I adjusted color contrasts to ensure readability and reduce eye strain, and modified UI elements to enhance their clarity in the darker theme.

04

Desktop dashboard

In designing the desktop dashboard, I aimed to continue building on the existing user interface by integrating new elements, such as icons and graphs, while preserving the original concept and utilizing the established design components.

04

Desktop dashboard

In designing the desktop dashboard, I aimed to continue building on the existing user interface by integrating new elements, such as icons and graphs, while preserving the original concept and utilizing the established design components.

Illustrations and icons

To perfectly match the product's character - restrained yet cozy - I designed a set of illustrations and icons.

Illustrations

Icons

Illustrations and icons

To perfectly match the product's character - restrained yet cozy - I designed a set of illustrations and icons.

Illustrations

Icons

Typography

Rubik

Colors

Light theme

Dark theme

Typography

Rubik

Colors

Light theme

Dark theme

Illustrations and icons

To perfectly match the product's character - restrained yet cozy - I designed a set of illustrations and icons.

Illustrations

Icons

Typography

Rubik

Colors

Light theme

Dark theme

01

Tablet

All wireframes have undergone changes to polish the UX design and make it more accessible and intuitive, which was part of the task.

  • The Lights and Temperature panels were equipped with toggles.

  • The Lights and Favorites panels got intuitive tabs to enhance usability.

Design style

By choosing a design style I sought to balance the cognitive load of a highly informative user interface.

I’ve chosen neumorphism for its' special feeling of comfort and familiarity. Neumorphistic blend of minimalism and futuristic realism provides a modern look which fits the idea of smart home.

The emphasis on the environmental friendliness of the product prompted me to use a restrained natural color palette.

  • The toggle that used to be on the upper panel was replaced with a play button, which is more appropriate for scene as a sequence of events.

Illustrations and icons

To perfectly match the product's character - restrained yet cozy - I designed a set of illustrations and icons.

Illustrations

Icons

bottom of page