how
UX Design
Interaction Design
UI Design
when
2023
where
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.
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.
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.
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.
wireframe
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.
home:
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.
category:
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
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.
Category
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.
Modal
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.
conclusion
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.
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?