The product:
ipbuild SCL is a versatile and cost-efficient home automation system. Designed by an Italian start-up, it can be adapted to suit a wide range of customers, from small apartments, to working environments, warehouses and multi-buildings complexes. Both software and hardware components are developed and scaled to better understand and fulfil the users’ needs.
The product:
ipbuild SCL is a versatile and cost-efficient home automation system. Designed by an Italian start-up, it can be adapted to suit a wide range of customers, from small apartments, to working environments, warehouses and multi-buildings complexes. Both software and hardware components are developed and scaled to better understand and fulfil the users’ needs.
Project duration:
March 2020 to December 2022
The problem:
How to make home automation easy, intuitive, cheap and remotely effective without adapting an environment to an already existing system, but instead adapting the system to the user?
The goal:
Being able to provide a capillary control of complex environments, managing insights, informations and automations.
My role:
UX designer for the desktop web App interface
Responsibilities:
Conducting competitive audits, making paper and digital wireframing, low and high-fidelity prototyping, providing usability studies, accounting for accessibility, and iterating on designs.
User research:
I conducted interviews and created empathy maps to better understand a wide range of potential users of the automation system. My study considered younger users (Millennials) and older users (Gen X). They proved to be concerned about their carbon footprint and interested to better manage their living and working environments.
User research:
I conducted interviews and created empathy maps to better understand a wide range of potential users of the automation system. My study considered younger users (Millennials) and older users (Gen X). They proved to be concerned about their carbon footprint and interested to better manage their living and working environments.
User-friendliness
Non-scalable system (being intimidated by a complicated and not very user-friendly automation product)
1
Access
Remote access (not being able to configure the automation system if not on field)
2
Informations
Being overwhelmed by too many informations without being able to figure out which one to use to improve the facilities’ conditions
3
Becky’s demographics
Age: 43
Education: Master of Fine Arts (MFA)
Hometown: Seattle WA
Family: Patrick, Milo and Sonia (sons and daughter)
Occupation: Ceramic Artist and teacher
Problem statement
Becky is busy mom and owner of a small home-based business who needs to manage properly energy fees because she wants to maintain both her house and her studio warm and thermally efficient for her students and her own kids.
James’s demographics
Age: 52
Education: PhD in Psychology
Hometown: Boston, MA
Family: his wife Gina, their cat Skittles
Occupation: Headmaster of a private school
Problem statement
James is the headmaster of a small private school who needs to reduce his commuting time between home and work because he wants to manage the school’s resources and his time in a better way and with greener options.
Persona: Becky Johnson
Goal: Set and modify scenarios to manage different areas of the property according to personal preferences
Note:Explanation necessary for each step of the scenarios’ costumization
ACTION
Select a facility after authentication
Check the list of already existing scenarios
Modify a selected scenario
Create a brand new scenario
Save and activate the new scenario
TASKS LIST
1. Authentication with username and password
2. Select an area
3. Reach the homepage
1. Spot the navigation menu on the left
2. Find the scenarios’ list
3. Land on the scenario list page
1. Read the info saved about the scenario
2. Modify icon
3. Reach the scenario’s modification page
1. Complete configuration steps
2. Select an option to move forward
3. Save scenario
1. Check summary and add informations
2. Activate scenario on scenarios’ list
FEELING ADJECTIVE
• Reassured by how easy it is to procede from a bigger selection to a smaller one
• Unsure if the correct part of the menu has been selected
• Excited to make progress and had identified the right path on a specific scenario
• Being a bit confused by all the possibile alternatives and ramifications
• Empowered by finalizing the customization process
IMPROVEMENT OPPORTUNITIES
• Providing a preview of what is grouped in the area selected
• Clearing up (with a mouse over) what each icon can lead to
• Providing a visual confirmation of the scenario status (ON-OFF)
• Moving back and forward between the scenario steps to modify previous choices
• Making the description of each scenario editable without going through the entire modification process
Persona: James Richardson
Goal:being able to remotely check and manage each of the school’s buildings in real time
Note:Remote access and configuration are key features to implement.
ACTION
Select a building after authentication
Choose a combination of floor and area
Compare insights
Select an aspect of the area to manage
Manage automations of the area
TASKS LIST
1. Authentication with username and password
2. Select an area
3. Reach the homepage
1. Select an area
2. Select variables
3. Choose to visualize a type of automation
1. Compare data from the first third of the page with the second one
2. Check the automation status
1. Choose an area
2. Inspect the element
3. Land on the automation or environment status page
1. Turn ON the heating
2. Check for current temperature
3. Set the temperature to reach
FEELING ADJECTIVE
• Encouraged to manage more facilities at once
• Worried about not finding out the right combination of settings
• Encouraged by the list of each automation displayed clearly for each area
• Feeling productive and organized
• Excited to manage a complex system remotely
IMPROVEMENT OPPORTUNITIES
• Adding a label with the current visualized page
• Providing an online tutorial on how to navigate basic functions
• Differentiating the automations set on by the user or by a scenario
• Each toggle switch should have a status symbol
• Adding a function to save the status
Developing ideas:
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address the users’ needs.
Developing ideas:
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address the users’ needs.
Refining ideas:
As the project developed more depth, I committed to a certain design language and started to add some refined workflow between pages.
Refining ideas:
As the project developed more depth, I committed to a certain design language and started to add some refined workflow between pages.
Username and profile features (settings). Every account is protected by a password and a username. An email confirmation is required to ensure privacy.
The home-page is a dashboard providing insights about environments and automations with implemented selections
Labels connected with an account, reporting name and location of each facility
Logo and claim to establish a clear brand identity
Menu icons on the left provide a constant guide for the user to move through the UI
Infographics are clearly displayed and customizable with a drop down menu organized by place, type of variable and period of time
Each of the infographics can be added to the dashboard or exported
The toggle switch is designed to select a combination of variables to compare with other ones
The scenario making process has been organized by simple steps each one with a proper title, a mouseover and selection color to guide the user’s choice.
Prototyping:
The low-fidelity prototype connected the primary user flow from logging into the scenarios’ customization process and insights display
Findings:
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Findings:
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
First round insights
Add a label with the current position to every page
1
Visualize previous choices in the scenario making process
2
Pair toggle switches with visual status
3
Second round insights
Add mouseovers to improve user experience
1
Move backwards and forwards through the scenario making steps
2
Safety features
ACCESSIBILITY CONSIDERATIONS
Safety features
Provided a set of default scenarios not removable paired with the type of facility involved.
1
Coherent language and design
Icons, labels, mouse-overs and language used is coherent during the overall experience to better guide the user.
2
Homepage - Dashboard
The dashboard has been set by default as homepage in order to keep all the most important insights displayed in the same place.
3
Networking
Thank you for your time reviewing my work on the ipbuild SCL web app! If you’d like to see more or get in touch, my contact information is provided below.
Networking
Thank you for your time reviewing my work on the ipbuild SCL web app! If you’d like to see more or get in touch, my contact information is provided below.
Email:
alessandro.parretta@icloud.com