top of page
Pessoas na praia


UX Design

Interaction Design

UI Design




proline range hoods

Creating an interactive totem for an

omnichannel experience for an international client.

Proline Range Hoods is an e-commerce specializing in appliances, specifically range hoods and stoves. Some local customers visit the headquarters in person and would like to easily access information, photos, and specifications.​

An interactive kiosk was chosen as the solution for this, as it would facilitate maintenance and information updates. It would also be more suitable than a printed catalog, as it would allow customers to quickly explore a wider range of options.

Pessoas na praia

problem definition and

expected solution

The first step was to define the requirements and the type of interaction needed in the interactive kiosk.

The kiosk needed to feature all of the company's products, with the main focus on discoverability.

Typically, the customer's experience would be guided by a salesperson, as is the current practice. Therefore, the solution was to incorporate interactions and functionalities tailored to each type of user:

  • Customer: The primary method of discoverability would be through navigation using categorization and filters. Each type of kitchen, for example, requires a specific type of range hood. We would start the user's journey assuming they already know the type of range hood they need. While we know that customers may have doubts, there would always be a salesperson available to assist during their journey.

  • Salesperson: In addition to being able to use the same navigation as the customer, a SKU search functionality was added specifically for the salesperson. This functionality makes more sense for the salesperson, as the search would be used after the salesperson understands the customer's needs and already has a potential solution in mind.

Pessoas na praia

a deeper understanding

requirements gathering

After defining the interaction, before starting the creation process, my role was to gather hardware requirements in order to understand the interaction design.

Before designing, it was important to know the type of device that would be used and its positioning in the store. Different kiosk models have different requirements for interaction.

The gathered information resulted in the following:

  • It will be a touchscreen TV.

  • It will have a 42-inch display.

  • It will be positioned horizontally.

  • It will be wall-mounted.

With this information, I could already visualize how the user would interact with the kiosk and start thinking about the best possible interaction design for it.

Pessoas na praia

user flow

visualizing the flow

In the first stage, we used the "How Might We" technique. As the facilitator of the Design Sprint, I explained to the participants how the process would work.

During this stage, all participants listened to an interview with stakeholders and users of the application and took notes. These notes were supposed to follow a logical sequence of questions, using the initial structure of "How Might We?"

As a designer, I know that asking structured questions is essential to uncovering and understanding the real problem. Recognizing and discovering the real problem is one of the most important tasks to start a project.

Pessoas na praia


architecting the flow

I used the Balsamiq tool to create the wireframe. It allows me to focus on what matters and not worry about visual details.

I usually like to use pen and paper, but the tool is easier to implement in a remote meeting.


To address the hardware requirement (42-inch TV fixed on the wall), I primarily utilized the lower center area of the screen.

This way, people of different heights would have a better experience with the artifact.

At the same time, I divided the use of categories and search horizontally.

This way, if the salesperson was with the customer, they could be positioned on the right corner while using the totem together with the customer.


On the category page, I prioritized the quantity of items on the screen without overwhelming the user during the selection process.

On the left corner, I included filters to assist in the decision-making process.

Based on my previous knowledge of the industry and past work with the client, I knew that the main filters would be:

  • size

  • Finishing

  • CFM (Cubic Feet per Minute)

  • Ductless capability

These options were placed on the left side, following the page scroll. This allows the user to filter the products in various ways without having to navigate to another page.

product modal

One of the client's requirements was to have a "mosaic" of photos on the product page. This would allow the salesperson to discuss various aspects of the product with the customer and showcase its different applications.

For this page, I decided to use a modal instead of a separate page to ensure a more seamless navigation from the category page. This would make it easier for the user to view multiple products without leaving the current context.

The main focus of the modal would be the product photos, while the technical details would be presented in a legible manner but as secondary information. The technical information was also planned to be placed on the right side, allowing the salesperson to quickly access it.

In addition to the product name and CFM, two key pieces of information were given priority in the hierarchy:

  • The ideal size for the stove (necessary to determine the appropriate size of the range hood)

  • The finish of the range hood

Pessoas na praia

final result

UI design phase

Based on the information provided, I began visually designing the interactive kiosk.

At this stage, the "home page" would establish certain visual aspects. I also used an existing brand style guide, incorporating colors, typography, and other visual elements.

Before anything else:

The UI design phase was entirely carried out using a device similar to what would be used in the real world.

This was necessary to ensure the touch area and ergonomics were practical in the prototype.

Home page

It was decided to use photos of the products in action to provide customers with a better understanding of each category.

An added element was a non-interactive video in the background of the kiosk. This video was utilized to add movement and capture the attention of customers who might otherwise overlook the artifact.


The main focus of the category page was to make it clear which elements were clickable and which filter options were activated.

The use of product cards and visual differentiation for the filters served this purpose.


In the modal, the mosaic layout remained a priority. The border size was carefully considered to provide users with the option to either use the "close" button or simply tap outside the modal area.

Pessoas na praia


Considering the everyday use of the interactive kiosk is crucial. A kiosk has a different usage pattern compared to an app or computer, and the interaction needs to be designed accordingly.

Furthermore, it was a great experience to design for something slightly different from what I'm accustomed to. It was fascinating to see the prototype in action on my TV and assess whether the height and interactions provided good ergonomics for the users.


interaction design for deaf gamers

avaliação 360

Creating a tool for a large company.

The kiosk was a project where I successfully applied ergonomics to design. How about reading a bit about accessibility or the construction of a management tool?


strategy &

ux / ui

bottom of page