From Complex to Clear: Building a Price Calculator for Smart Home Planning
"Prototype Online Price Calculator for Schneider Electric: Empowering German Customers to Plan Their Dream Smart Home"
.png)
There are a lot of times I had to make a decision, especially when I made prototyping. The design that I was struggling with the most was to design of the room layout. In this price calculator, users need to select their room numbers and kinds so that the system can calculate the price more accurately. To design this process, I had to consider a best design that users can easily understand.
I made two changes to the original wireframes. First, I modified the shape of the house to make it more recognizable and less abstract. Second, I used the default room layout for the first page. This is because we know the average number of houses in Germany. Users do not need to select all rooms but they can edit if they need it.
From 1st iteration, I changed how users select the number and type of rooms. Regarding the design of 1st iteration, there is a list of rooms, and users can add new rooms. As a 2nd iteration, I changed it to the icons of rooms, and users can drag and drop a new room to the shape of the house. I changed it because there are too many functions on one page and users would overwhelm them.
In terms of the 2nd iteration, I applied drag and drop to edit rooms because it is simpler for users. However, I found out that drag and drop works well when we download pictures or files. Users will get confused about using drag and drop for this situation, and it is not faster to edit rooms. Therefore, I applied the popup window that shows the icon cards of rooms.
I learned two important things from this project. First, collaborating with other designers can be challenging because we all have different backgrounds and preferences. To reach an agreement on the design, I couldn't just say, "I like this design," but had to explain my ideas and reasons. Second, paying attention to small details in prototypes is crucial for professional work. For instance, I learned about color contrast and the 8-grid system, which helps ensure accessibility. Considering details like padding, margin, and spacing also greatly contributes to a consistent and professional design.
