When I joined Estimote in 2016, one of the first projects I was tasked with involved an innovative product, the video-beacon.
This device allowed the display of personalized content on a TV screen when it detected compatible BLE signals nearby.
The prototype of the device was ready, and I needed to prepare the materials required for its market launch.
The initial assumptions for the project were to:
* To maintain compliance with the confidentiality agreement, I have omitted and obscured sensitive information in this case study.
Client:
Estimote, Inc.
Role:
UX/UI Designer
Responsibilites:
User Research
Architecture Design
User Flow
Microcopy
Wireframes
Final UI Design
Duration:
2016 - 2017
Collaborators:
Arek Flinik - Product Manager
Natalia Mroszczyk - UI/UX Designer
Olga Dąbrowska - Design Manager
Arek Biela - Android Developer
Magdalena Chojnacka - Illustrator
Paweł Dyląg - Android Developer
Dominika Walec - Sales Representative
Fero Hetes - iOS Developer
I served as the Lead UX/UI Designer, responsible for conceptual work and the final design of TV screens, mobile app, and a website related to the Mirror project.
On a daily basis, I collaborated with the product team, which included a Product Manager, mobile developers, business, customer success, plus a design team that assisted me in developing graphic materials.
The design process was based loosely on the Double Diamond with the application of the Lean UX method:
This approach emphasized exploration and iteration in design, helping teams address and solve problems more effectively.
The existing technology allowed for presenting contextual and personalized content on smartphone screens (see Estimote App), which resulted in numerous proximity marketing solutions that were not particularly user-friendly.
The concept of the video-beacon envisioned something different.
Instead of bombarding the user with advertisements, the device was designed to display contextual, personalized and more user-friendly content on a TV screen.
For instance, when a customer in a store picks up an item, like a shoe, the video-beacon identifies the item, its position, and its proximity to the TV. The user can move the shoe around, and the Sticker placed on it is detected by the video-beacon.
Depending on how the user maneuvers the shoe and their distance from the screen, the appropriate content is displayed on the TV.
Upon receiving the development kit with the device, users connect it to a TV receiver via HDMI and USB ports.
The content displayed on the TV screen is either based on HTML5 templates or created from scratch. This provides developers with significant flexibility in tailoring content to the user's context.
The device communicates with mobile apps through the mobile SDK or detects other devices using BLE via the scanner API.
The technological foundations of the video-beacon enable developers to create innovative interactions in venues like stores, airports, museums, and also to design solutions for smart cities.
When starting the project, I noticed that we lacked a consistent, realistic representation of our target customers. Essentially, everyone had some knowledge, but there wasn't a single source of truth.
To address this, we conducted research based on existing user data. We refined characteristics such as age, education, psychographics, goals, motivations, and pain points.
We published the crafted personas and promoted knowledge about them in the company.
After identifying the personas, we proceeded to map the customer journey.
Identifying all interaction points enabled us to better understand how a persona experiences the product from start to finish.
This later helped the team prioritize actions, leading to more efficient and positive user experiences.
To explore potential customers of the new product more widely, we conducted Value Proposition Canvas (VPC) workshops.
We designed an expanded persona to inspire the team towards a more extensive exploration and analysis of future user attitudes, behaviors, and needs.
Research work on personas and workshops ensured that the team had a better understanding of user perspectives and problems, which, in turn, enabled priority setting that brought the most value.
During the conceptual work, a few design challenges arose:
One of the defining traits of innovators is the desire for rapid experimentation. They lack the patience to meticulously read through documentation from cover to cover; instead, they want to quickly grasp the technology and get started.
The first experience with a new product is always exhilarating, but the excitement can quickly shift to frustration if something doesn't work, is missing, or prevents progress.
That's why, from the very beginning, we wanted to ensure that the time and effort required for a user to understand and effectively use the new product were minimal.
When designing the onboarding for the video-beacon, we aimed to ensure that users could immediately start testing the technology's capabilities upon receiving the dev kit.
After connecting the video-beacon, users utilize the "Estimote App" to walk through its key features.
The fundamental concept we want future developers to grasp involves recognizing distance zones:
During the demo, as the user moves closer to or further away from the TV receiver, their position on the screen changes correspondingly.
Once users have familiarized themselves with zones, they can progress to the next stage and explore several prepared demonstrations.
Based on the most popular use-cases, we've crafted practical examples for inspiration:
For each demonstration, users are guided to maintain an appropriate distance from the TV receiver. This is designed to replicate a real-life experience.
Depending on the user's proximity to the screen, the content is either simplified and basic or detailed and expansive.
The user determines their interest in additional information by moving closer or further away from the television.
An application example could be personalized airport directions for a passenger. As a passenger approaches the flight board, the video-beacon identifies their details based on the digital ticket in their mobile application.
The TV then displays useful flight information, such as time left until departure, gate number, and a map with directions.
Another instance might involve an in-store experience. A customer interested in buying athletic shoes can approach a screen, manipulate the shoe model, and receive contextual information about its benefits, size, and price.
The possibilities for developers are limitless, bounded only by their imagination.
Applications prepared for a specific location can easily be deployed on other floor plans within the same building and also in different locations around the world.
Once we developed early prototype concepts, we moved to the testing phase.
Given that we had several TVs in the office, we set up a working screen prototype that greeted employees with various messages.
This provided an opportunity to gather early insights on how people reacted to the changing screen.
"Don't wait for perfection. Learn from the prototype."
- Paul Graham
We dedicated separate time for recruiting developers for tests related to building applications using the video-beacon.
Each tester was tasked with writing a simple application. Users received developer kits and were given free rein on decision-making and where to look for information.
The tests allowed us to identify gaps in materials and instructions and inspired future product changes.
© 2023 UXDESK. All rights reserved.
