Design and coding exercice
Budget: €8 – €30 EUR
TASK 1: UI/UX MOCK-UPS FOR APPLICATION
We have a platform for controlling and managing IoT devices within a Smart Home
solution for end-users in the B2C market. This platform needs to be redesigned to have an
appealing UI, as the current one, as end-users say, does not scale properly on their
smartphones and is not intuitive to use.
We already created a backlog describing his ideas with very few sentences for the
following personaes: End-user (with roles “Admin” and “User”), Platform operator (Role
“Operator”)
As platform operator:
● I want to be able to see all registered end-users and being able to search or filter them
● I want to be able to delete end-users
● I want to be able to reset end-users passwords
● I want to be able to see usage statistics and especially the device types that are being
used by my clients
● I want to be able to filter devices across all end-users and see how often which device is
being used
As end-user:
● I want to be able to register properly to the platform
● I want to have an app that scales properly on my smartphone but also on my notebook
● I want to onboard new devices intuitively
● I want to be able to update the firmware of some or all of my devices just with a simple
click
● I want to define simple rules and actions for devices and device groups, e.g.
o if weather sensor indicates rain and windows are open, send push notification to
smartphone
o if presence sensor indicates 2 people in the room, play favorite music playlist
o if light is turned on longer than 1 hour in the basement, turn it off
● I want to see the status of my smart IoT devices on multiple dashboards and control
devices individually
● I want to be able to configure the dashboards individually for my needs
Task:
Design mock-ups that show your UI and UX skills and match the application case described
above. The mock-ups should cover the mentioned personaes and different roles. Please focus
on design, but also on usability.
Photographs of hand drawings are also acceptable.
TASK 2: IMPLEMENTATION
Task 2.1:
Implement a responsive page that visualizes a dashboard for the end-user (Role “User”) of the
application mentioned in the first task above. The dashboard should show the lighting status of
several rooms within a building. Specifically, it should allow the user to change dimness levels,
switching a light on and off and changing the light colours for each illuminant.
Task 2.2:
implement a responsive page for the creation of a dashboard from the “Admin” perspective.
The end-user with the role “Admin” should be able to create a dynamic dashboard where
several light sources and different rooms can be added and created dynamically.
The pages should scale and resize properly on the web, but also on a smartphone. Data
structures that might be needed can be mocked with static data in the code or implemented as
back-end services.
You should use React, Angular, or Flutter as a framework, and you can use any programming
languages (JS/TS/..) or libraries (Material UI/AntD/..) that you prefer.
TASK 3: UI-TESTING
Task:
Develop several test cases for testing your application on the front-end side. Implement these
tests using publicly available test frameworks if possible.
Make sure that the test cases cover all the critical states of the system. Furthermore, make
sure to describe how you derived the test cases. Remember, that there are different methods
for deriving test cases systematically.
We have a platform for controlling and managing IoT devices within a Smart Home
solution for end-users in the B2C market. This platform needs to be redesigned to have an
appealing UI, as the current one, as end-users say, does not scale properly on their
smartphones and is not intuitive to use.
We already created a backlog describing his ideas with very few sentences for the
following personaes: End-user (with roles “Admin” and “User”), Platform operator (Role
“Operator”)
As platform operator:
● I want to be able to see all registered end-users and being able to search or filter them
● I want to be able to delete end-users
● I want to be able to reset end-users passwords
● I want to be able to see usage statistics and especially the device types that are being
used by my clients
● I want to be able to filter devices across all end-users and see how often which device is
being used
As end-user:
● I want to be able to register properly to the platform
● I want to have an app that scales properly on my smartphone but also on my notebook
● I want to onboard new devices intuitively
● I want to be able to update the firmware of some or all of my devices just with a simple
click
● I want to define simple rules and actions for devices and device groups, e.g.
o if weather sensor indicates rain and windows are open, send push notification to
smartphone
o if presence sensor indicates 2 people in the room, play favorite music playlist
o if light is turned on longer than 1 hour in the basement, turn it off
● I want to see the status of my smart IoT devices on multiple dashboards and control
devices individually
● I want to be able to configure the dashboards individually for my needs
Task:
Design mock-ups that show your UI and UX skills and match the application case described
above. The mock-ups should cover the mentioned personaes and different roles. Please focus
on design, but also on usability.
Photographs of hand drawings are also acceptable.
TASK 2: IMPLEMENTATION
Task 2.1:
Implement a responsive page that visualizes a dashboard for the end-user (Role “User”) of the
application mentioned in the first task above. The dashboard should show the lighting status of
several rooms within a building. Specifically, it should allow the user to change dimness levels,
switching a light on and off and changing the light colours for each illuminant.
Task 2.2:
implement a responsive page for the creation of a dashboard from the “Admin” perspective.
The end-user with the role “Admin” should be able to create a dynamic dashboard where
several light sources and different rooms can be added and created dynamically.
The pages should scale and resize properly on the web, but also on a smartphone. Data
structures that might be needed can be mocked with static data in the code or implemented as
back-end services.
You should use React, Angular, or Flutter as a framework, and you can use any programming
languages (JS/TS/..) or libraries (Material UI/AntD/..) that you prefer.
TASK 3: UI-TESTING
Task:
Develop several test cases for testing your application on the front-end side. Implement these
tests using publicly available test frameworks if possible.
Make sure that the test cases cover all the critical states of the system. Furthermore, make
sure to describe how you derived the test cases. Remember, that there are different methods
for deriving test cases systematically.