React

Development

Design

In the ever-evolving landscape of smart building management solutions, we are consistently committed to innovation and excellence. In this case study, we’ll explore one of our most remarkable projects – the Smart Sensor, a cutting-edge multi-sensor designed for ideal room climate monitoring. Today, we visit this groundbreaking technology to dive deeper into its capabilities and the impressive results it continues to deliver for our Swiss-based client, a leading building automation solutions provider.

![Mask group.png](https://strapi.suprabit.eu/uploads/Mask_group_017e145b33.png)

The Smart Sensor project was born out of the need to address the complex challenge of room climate and environment monitoring. This IoT system integrates an array of sensors, including those for temperature, humidity, volatile mixed gases, presence/motion, brightness (light intensity), and noise level. The real magic happens through sensor fusion, where data from these sensors is intelligently combined to provide precise information about the room's state. Mounted discreetly on the ceiling, the Smart Sensor captures critical environmental data and also communicates room status to users through an LED ring, where each color signifies different aspects of room occupancy, air quality, or cleaning requirements.

![Frame.png](https://strapi.suprabit.eu/uploads/Frame_1_0f43735803.png)


In this case study, we will explore the firmware, mobile application, and dashboard that make this technology a game-changer in smart building management.


## Holistic Approach
For this project, it was crucial to take a holistic approach. We needed to synchronize the embedded and IoT teams with our product designer and mobile app development team. From the project kickoff until the final bug fixes, the entire team worked collaboratively to create the perfect solution. We held team meetings with our client to discuss their needs, and then our teams planned together to ensure smooth coordination. The client’s product development team would provide the requirements, our designer would create the UI for the mobile app feature, and the IoT team would develop the firmware. At the same time, the mobile team would begin implementing the feature. This iterative approach allowed us to address any issues promptly, eliminating long waiting periods between different teams.

## Academic research
As we ventured deeper into the project, leveraging cutting-edge technology, we encountered a significant challenge with our sensors, specifically in obtaining accurate noise level measurements. Recognizing the critical need for precision, we decided it was time to elevate our approach. To achieve the highest level of accuracy possible, we visited a local university. There, we gained access to their quiet room—a space so tranquil that even the sound of a heartbeat can be heard.

![silentroom.png](https://strapi.suprabit.eu/uploads/silentroom_74b184f9d0.png)

In this controlled acoustic environment, we diligently fine-tuned and calibrated our microphone sensors, ensuring they delivered the most reliable and precise results. This collaborative effort with academia underscored our commitment to excellence and demonstrated our readiness to go above and beyond to guarantee the Smart Sensor's exceptional performance in real room conditions.

## IoT Development
In the realm of IoT development, the Smart Sensor project represented a significant milestone for us. The primary goal of the Smart Sensor was to monitor room climate and environmental conditions, and to achieve this, we integrated a range of sensors, including temperature, humidity, volatile mixed gases, presence/motion, brightness (light intensity), and noise level detectors. These sensors were meticulously designed to work in concert, enabling sensor fusion to provide highly accurate information about the room's state.
![senzori.gif](https://strapi.suprabit.eu/uploads/senzori_a4c7bce1ff.gif)

Our IoT-ready approach was a key element of this development, as the Smart Sensor implemented MQTT communication via IP/Ethernet. Additionally, we leveraged Bluetooth Mesh for seamless networking of sensors, enabling efficient communication between up to 16 nodes and a gateway device. This wireless networking capability allowed for real-time data exchange between devices through node-to-node communication. Bluetooth Beacon technology was employed to enhance interaction with the mobile application, providing precise device localization within the room.
![case study.png](https://strapi.suprabit.eu/uploads/case_study_b65d97440b.png)

Our work extended to the firmware, where we crafted a robust solution in C/C++ for the ESP32 with dual-core processing, ensuring the efficient operation of the Smart Sensor. This IoT development effort represents our commitment to innovation and excellence in delivering solutions that transform complex challenges into user-friendly, efficient, and highly functional IoT devices.


## Design
When developing the Smart Sensor mobile application, our design approach placed user experience (UX) at the forefront. Unlike many specialized applications that often neglect user-friendly design, we aimed to create an intuitive and enjoyable user journey from the very first interaction.

![App.png](https://strapi.suprabit.eu/uploads/App_f30e3eeaae.png)

While prioritising UX over UI in the initial stages, we emphasized rapid iteration and user feedback to identify and resolve potential issues efficiently. Through constant communication among teams and a deep understanding of the possibilities and limitations of both sensor hardware and application, we crafted a seamless provisioning process for technicians, ensuring simplicity and error-proofing.

The design process involved some innovative solutions and out-of-the-box thinking, such as using unique colors and LED rings on sensors to aid technicians in precise sensor identification during provisioning. Thoughtful language choices, like replacing "Provision" with "Configure" and "Lock," were made to eliminate confusion and improve the user experience. This commitment to user-centric design not only resulted in a more intuitive application but also highlighted the profound impact of intentional language and iconography in creating a user-friendly interface.

![sensors.png](https://strapi.suprabit.eu/uploads/sensors_7052db70e0.png)

Overall, our approach to design reflects our dedication to delivering high-quality, innovative, and user-centric applications that set new standards in the field of smart building management. You can read more about our design journey [here](https://suprabit.eu/article/smart-sensor-design).

## Mobile app development
The development of the mobile application for the Smart Sensor project was a crucial part of the solution. Our client required an app that would empower their technicians to efficiently provision the sensor, map out floor plans and networks, and configure settings effortlessly. Beyond the initial setup, the mobile app continued to play a pivotal role, enabling users to monitor and manage room conditions, as well as to update the sensors wirelessly. It acted as the essential link between users and the sensors. All of this added an extra layer of convenience to setting up and maintaining the whole system.

![Phone.png](https://strapi.suprabit.eu/uploads/Phone_f90be12a99.png)

Using the versatility of React Native with the convenience of Expo, our mobile team delivered a robust application that catered to both Android and iOS platforms. This cross-platform approach ensured that our clients had access to a wider user base, making it more accessible and user-friendly. The app seamlessly communicated with the sensor devices using Bluetooth Low Energy, providing technicians with real-time access to vital data. This capability was the key to the provisioning and setup of the Smart Sensor, making the commissioning process efficient and user-centric.

## Conclusion
In conclusion, the Smart Sensor project has provided us with valuable insights into smart building management solutions. Throughout the project, our teams worked together to develop software for an advanced IoT device that seamlessly monitors room climate and environmental conditions. We prioritized precision by consulting with academia to fine-tune sensor technology.

Our IoT development efforts, including MQTT communication, BLE Mesh networking, and iBeacon technology, set new benchmarks for real-time data exchange and device localization. Additionally, we created a user-centric mobile application that simplifies provisioning, configuration, monitoring, and updates for technicians.

The Smart Sensor project not only met the requirements of our client but also pushed the boundaries of sensor calibration, IoT development, and user-friendly mobile applications. As we look towards the future, our commitment to innovation and excellence remains, and we eagerly anticipate developing new smart building solutions.




large_case study-2.png

medium_case study-2.png

small_case study-2.png

thumbnail_case study-2.png

case study-2.png

Read all about how we reinvented the Smart Building Industry using our IOT, design and development expertise.

Smart Sensor - Case Study

Sauter introduced the[ Smart Sensor viaSens](https://www.sautersmartsensor.com/en) - an Internet of Things device that transcends conventional sensing capabilities and takes monitoring to the next level. By tracking key parameters such as temperature, humidity, air quality, motion, brightness and sound pressure level, the Smart Sensor provides invaluable data. This wealth of information is harnessed to empower automation and control systems, resulting in smarter and more responsive office spaces that cater to users' needs. This product is the result of a great collaboration with our Swiss-based partner [SAUTER](https://www.sauter-controls.com/en/), a premier Smart Building Automation manufacturer with a global presence. 

What sets this device apart is its incorporation of BLE Mesh technology, facilitating seamless communication among devices. The Smart Sensor isn't just a leap forward in sensor technology; it's a game-changer in creating interconnected, intelligent ecosystems for enhanced workplace experiences.


![smart_sensors.png](https://strapi.suprabit.eu/uploads/smart_sensors_bd55dd34e7.png)

## BLE Mesh 

Bluetooth Low Energy (BLE) Mesh is a communication protocol crafted specifically for Internet of Things (IoT) devices. This protocol extends the capabilities of traditional Bluetooth Low Energy, paving the way for the creation of expansive, reliable, and secure networks. Unlike traditional point-to-point Bluetooth connections, BLE Mesh allows devices to form a mesh network, enabling data to flow seamlessly through the network, extending both the range and the overall coverage. 

Key features of BLE Mesh include low power consumption, robust, mandatory security mechanisms, and strict adherence to Bluetooth SIG standards. These qualities collectively make BLE Mesh a powerful solution for constructing interconnected wireless networks, opening new possibilities for diverse IoT applications. 

Within this network topology, we employ a sophisticated structure featuring a primary node known as the gateway, alongside up to 15 interconnected nodes that communicate through Mesh technology. The gateway plays a pivotal role as it acts as the bridge connecting the sensor nodes in the network to the vast realm of the Internet. It stands out with its MQTT capabilities, assuming responsibility for the subsequent transfer of data. 

Each node in this intricate setup serves a unique purpose - collecting valuable data and establishing communication channels with the gateway. Direct communication occurs if nodes are within range, while a relay node facilitates communication when direct interaction is not feasible. This strategic architecture ensures efficient data flow and a robust network, exemplifying the power and versatility of the BLE Mesh network design.

![network_topology.png](https://strapi.suprabit.eu/uploads/network_topology_2bff9b3684.png)

## Wireless (OTA) Update 

Over-the-air (OTA) update represents the wireless delivery of new firmware to embedded devices. This transformative technology empowers manufacturers and developers to enhance device functionality, address bugs, and fortify security - all without the need for physical access to the device. 

In a landscape where thousands of Smart Sensor devices adorn ceilings within a single building, the impracticality of manual physical updates is evident. The wireless update approach not only streamlines maintenance but also minimizes downtime, contributing to an enhanced overall user experience. 

However, implementing this feature posed a challenge as only the gateway had fast Ethernet connectivity, leaving other devices without direct access. The key question was how to initiate updates. Despite the nodes lacking Ethernet connectivity, a clever solution emerged - upon receiving a trigger, the BLE mesh nodes could activate their Wi-Fi capabilities. Leveraging their additional functionality of iBeacon advertising and scanning, we opted for a custom-made iBeacon packet as the trigger. A mobile app then became the initiator, serving as the primary source for the new firmware and orchestrating the entire OTA update process temporarily over WiFi.

![ota_update.png](https://strapi.suprabit.eu/uploads/ota_update_11d6c73ba9.png)

## iBeacon

iBeacon is a location-based service pioneered by Apple that harnesses Bluetooth Low Energy (BLE) for proximity sensing, indoor navigation, and context-aware applications. 

The iBeacon packet format usually consists of three integral components: UUID, Major and Minor values. When combined, these components form a unique identifier for each iBeacon. As a Bluetooth device enters the range of an iBeacon, it interprets the UUID, Major and Minor values, enabling applications to trigger location-specific actions or provide context-aware information to the user, as SAUTER uses it for Mobile Building Services. 

The Smart Sensor also integrates iBeacon technology, allowing users to enable or disable iBeacon advertising. But regardless of the advertising status, iBeacon scanning on the device is always active to receive the initiating OTA updated trigger. 



## Mobile Application 


<video loop="loop" autoplay="autoplay" muted style="width: 100%;">
 <source src="https://strapi.suprabit.eu/uploads/mobile_app_90b67e522a.mp4" type="video/mp4">
</video>

In collaboration with Sauter, we designated the mobile app as the central hub provisioning the sensor network and the primary initiator performing the OTA updates. Functioning as a server housing the latest firmware versions in binary files and also as a mobile hotspot with a predefined SSID and password, it allows sending triggers and facilitating the OTA process on the devices. 

Within the app, users first need to select the Mesh network for updating nodes and then choose the firmware version they would like the devices to update to. Users have the flexibility to choose any available version, with the caveat that updates will only occur when transitioning to higher firmware versions than those currently on the device. 

Upon making these selections, the app prompts users to enable the mobile hotspot with a predefined SSID and password. Clear instructions for enabling the hotspot are provided for both Android and iOS users. Once the hotspot is active, the app starts broadcasting the beacon packet. This signal triggers the OTA update on devices within range and of interest. Upon receiving the beacon signal, the Smart Sensor undergoes a series of checks. The update will only proceed if the received network ID matches the one under which the device was provisioned, the firmware version is higher than the current one, and the hardware index aligns with the device's hardware index. Subsequently, the device activates WiFi, establishing a communication link with the server. After starting the OTA update the Smart Sensor will display appropriate animation and reboot. 

![orange.gif](https://strapi.suprabit.eu/uploads/orange_e54ec51d25.gif)

## Fallback Mechanism 
When the OTA update is initiated, the device temporarily halts all its regular functionalities to ensure a smooth and uninterrupted update process. In the rare event that an issue arises during the update, a safety mechanism is activated by triggering a safe reboot, effectively reverting the Smart Sensor to the previous firmware version. 

To provide users with visual feedback in case of an unsuccessful update, a distinctive animation would be displayed. This serves as a clear indicator, enabling users to promptly identify and address any issues that may have occurred during the update process. If everything goes smoothly, the Smart Sensor viaSens reboots with the new firmware.

![red.gif](https://strapi.suprabit.eu/uploads/red_48ea802b50.gif)

large_blog-cover.png

medium_blog-cover.png

small_blog-cover.png

thumbnail_blog-cover.png

blog-cover.png

The Smart Sensor viaSens, developed in collaboration with SAUTER, introduces a leap in IoT technology by incorporating BLE Mesh and iBeacon for seamless OTA updates via a mobile app, enhancing smart building automation with advanced sensing of environmental parameters. 

Effortless OTA Updates for BLE Mesh Devices  via Mobile App

There are so many books on design, helpful web tutorials, pricey workshops, and boring whitepapers. Yet, despite having access to all of that, we still come across poorly designed things all the time. Sometimes, even if you have a deep understanding of the theory and analyze all the metrics, you may still find yourself lacking the necessary tools or inspiration to create exceptional work. That’s why today, I've made a little cheat sheet that every Product designer can refer back to whenever they feel stuck.

It may not come as a surprise to most of you reading this, but I spend about 99% of my time in Figma. Figma has established itself as the gold standard for designing user interfaces, and with good reason! They offer excellent desktop apps for both Mac and Windows. Additionally, since many developers at Suprabit use Linux, Figma also provides a fantastic web application.

If you're just getting started with Figma, I suggest reading about some of its features. They can make your work a lot easier and faster. For example, the variables and new component property types that were rolled out last year have been such a time-saver for me.

Oh, and I can't forget about Figma plugins! Sometimes, I find myself spending too much time scrolling through the Community tab, searching for new plugins to try out. Lately, I've been particularly enjoying three plugins: "Mesh Gradients," "Ruri Pixels" (I hope I'm not using them too much!), and "Jitter." "Jitter" is a plugin that allows you to create stunning animations from your designs. In fact, I've even used it to create GIFs for some of my blog posts.


![Screenshot 2024-01-11 at 14.23.56.png](https://strapi.suprabit.eu/uploads/Screenshot_2024_01_11_at_14_23_56_f6e6faa6e4.png)

When it comes to colors and color palettes, my go-to tool is Adobe Color. It's a color wheel that you can use to create custom color palettes using nine color harmonies. And if I need something quick, my go-to is Coolors. It may not have as many features as Adobe Color, but it's a great tool for quick ideation.

![ScreenRecording2024-01-11at14.29.57-ezgif.com-video-to-gif-converter.gif](https://strapi.suprabit.eu/uploads/Screen_Recording2024_01_11at14_29_57_ezgif_com_video_to_gif_converter_a34cc75d57.gif)

Sometimes, I struggle with finding inspiration, and I believe this is something that every designer can relate to. When I experience a lack of inspiration or want to see how others have tackled a similar problem, I typically turn to platforms like Dribbble and Behance. In my opinion, if you're seeking UI/UX inspiration, Dribbble is the best option, although I usually browse both. If I'm really stuck, I spend some time scrolling their Popular/Discover pages until inspiration strikes.

![Screenshot 2024-01-11 at 14.27.49.png](https://strapi.suprabit.eu/uploads/Screenshot_2024_01_11_at_14_27_49_8ac093abe3.png)

I must also mention Designspiration. While you may not find much UI/UX inspiration there, you'll come across a ton of great designs that could inspire you to reconsider your approach to the problem you're trying to solve.

Last but not least, I always keep a writing pad and a black pen on my desk for quick sketching of wireframes or ideas. While I know I can do it quickly in Figma, there are still times when using pen and paper is better and faster. And trust me, the paper has to be dotted!

All of these tools help me achieve the best results, whether it's for designing a UI/UX for an application or creating a quick and entertaining product showcase video. Is there any tool that you use that I might have overlooked?

large_thumb.png

medium_thumb.png

small_thumb.png

thumbnail_thumb.png

thumb.png

Forget about dull design books, web tutorials, expensive workshops, and tedious whitepapers. This article has everything you need to overcome an artist's block as a product designer. Dive in!

How To Get To a Great Design? Tips From a UI/UX Designer

Hey there!

Just a short note before the introduction: when I first started writing this blog post, I was going into great detail about each screen in the application. Then, I realized that might be a bit dull for you to read. After all, there are tons of case studies out there that cover similar topics. They probably do a better job than I could hope to so I decided to change my focus. As a result, I present to you the challenges we faced during the project.

In the end, I didn’t even talk about the application much. Maybe I’ll have to write another post. 🤷‍♂️ Nevertheless, hope you enjoy reading this one!


![SmartSensors.png](https://strapi.suprabit.eu/uploads/Smart_Sensors_9470eaa8de.png)

 

## The rise of smart sensors

In the era of rapid digital transformation, the integration of smart sensors in buildings has revolutionized various industries. These sensors enable real-time monitoring of occupancy, energy consumption, air quality, and security. They optimise resource utilization, enhancing comfort, and improving overall building efficiency.

These intelligent devices provide valuable data insights and automate processes, leading to better efficiency and decision-making. However, the seamless deployment and management of smart sensors require a well-designed provisioning* app that technicians use to set them up.

**For those who are not familiar - in the context of smart sensors, provisioning refers to the process of configuring and setting up a sensor for its intended purpose and network connectivity. In most cases, sensors can be edited or reconfigured after they have been provisioned.*

 

## Collaboration and synergy

The embedded team at Suprabit was already working on the firmware for the Smart sensor. During this time, our client, a Swiss-based smart building premier solutions provider, recognized a need for a user-friendly provisioning app. This app would help their technicians deploy and manage smart sensors easily. As a result, they asked us to design and develop a mobile app.


![bestIOTTeam.png](https://strapi.suprabit.eu/uploads/best_IOT_Team_16bdd83102.png)


We embraced the challenge and took a unique approach to the development process. We designed and developed both the application and the firmware in the same team. This is, unfortunately, often not possible with IoT devices, since oftentimes different agencies work on firmware, application and design. But, the ability to approach the design and development of the app alongside the firmware team proved great. We had a thoughtful and iterative design process by keeping apps and firmware teams in sync.

 

## Team effort

Since we were already working on multiple projects before, our tight-knit team had excellent synergy, aiding frequent collaboration and problem-solving.

This allowed us to address technical questions about hardware or firmware quickly and efficiently. Either by turning to a team member or through a short Discord call if we were working remotely. During the design and development process, we used a highly iterative approach. To ensure a great provisioning experience for users, we needed to adjust the firmware code to incorporate design and application improvements. We also had to adjust the application and design to accommodate firmware improvements.

By working together so closely and having instant feedback, we were able to make the best design choices. In the end, we created a high-quality, user-friendly provisioning app that met our client’s needs and exceeded their expectations.

> Through this synergy of different fields, we were able to create a provisioning process that neither application developers, firmware developers nor designers could come up with on their own.

 

## Don't ignore UX

There's this thing that infuriates me about applications that are highly specialized and made for a specific audience. More often than not, they completely overlook the importance of user experience. It is usually assumed that they can simply refer to some kind of manual or figure out how the process is working by trial and error - it’s not like they can switch and use some other application.

From the get-go, we believed that applications should always be easy and enjoyable to use, regardless of the user or number of users. The app's entire process should be understandable from the moment it is first opened. In fact, we aimed to make the app so intuitive that the process would be understandable from the first time you open the app.


![SmartSensorMobileAppScreens.png](https://strapi.suprabit.eu/uploads/Smart_Sensor_Mobile_App_Screens_f9e3b4c3e1.png)


 

## The early stages

In the early stages, we focused on iterating rapidly, emphasizing user experience (UX) over polishing the user interface (UI). This approach allowed us to identify potential issues early and make necessary adjustments. This turned out great because there were numerous changes during this process. By not spending time on UI, we were able to move faster and more efficiently.

Our approach to the development process was highly iterative. We mock-tested bad designs early on, which allowed us to identify and rectify potential issues before spending too much time polishing the UI. This approach proved to be highly effective, and we moved faster and more efficiently toward a user-friendly application.

Throughout this period, all teams communicated constantly about the possibilities and limitations of sensor hardware and application. This was a crucial step, as it allowed all the teams to work as one big team and understand the possibilities ahead of us.

With the goal of ensuring simplicity and error-proofing, we designed the provisioning process to be as seamless as possible. Our foremost objective was to prevent technicians from accidentally locking the sensor with the wrong configuration.

Unfortunately (or luckily, regarding who you ask), we couldn’t just “copy” a UX/UI design for provisioning from Behance or Dribble because no one had done anything similar before.

 

## My Precious: The LED ring

The first step in designing the provisioning process was to determine the hardware's possibilities and limitations.

The first obstacle we encountered is that sensors are typically set up in two steps by two people. First, they mount and power them on, and then they provision them.

The issue here was identifying the sensors in the app during the second step. With multiple unprovisioned sensors on the same floor, the technician needs to make precise identification of the sensor they plan to provision.

After consideration and brainstorming, we came to the conclusion that sensors should advertise their unique ID in the wild until provisioning is over. The app catches the ID and assigns a color to each sensor. The, LED ring on the sensor displays the assigned color to the technician in real-time.


![Smart_Sensor_Design.gif](https://strapi.suprabit.eu/uploads/Smart_Sensor_Design_433ce53527.gif)



This makes identifying the sensor easy, showing the technicians where the sensors are located on the ceiling. This ensures that the states in the app and in the real world are consistent.

This solution seems obvious now, but it was a crucial step in designing a user-friendly provisioning experience.

 

## The Locking Puzzle: The provisioning process

### The problem

The next issue we stumbled upon was the locking of the sensors. Instead of sending their data through Wi-Fi or Ethernet (eliminating the need to set up cables or access points throughout the building), the sensors create a Bluetooth mesh network that transmits data to the gateway sensor that's connected to the internet.

Since sensors are provisioned into a Bluetooth mesh, the app can only communicate with them via Bluetooth during provisioning. Once the process is complete, they begin using Bluetooth to communicate with other sensors in the same mesh network. 
If there's an incorrect configuration, someone has to manually hard reset the sensors by pressing a device button. This is never ideal, especially when sensors are mounted on a high ceiling in a commercial space.

Through this process, a backbone of the design was created: a four-step provisioning process.

 

### The process

Once a project (such as a single building) has been created, technicians can create networks for sensors to communicate on. These networks can be created per floor, or according to the client's requirements.


![SmartSensorProvisioning.png](https://strapi.suprabit.eu/uploads/Smart_Sensor_Provisioning_53dd150a19.png)



1. The first step to provisioning sensors is selecting the one you wish to provision. The application displays all unprovisioned sensors in the surrounding area. Each sensor has a unique color to aid the technician in selecting the correct sensor based on real-world data.

2. The following step prompts the technician to stand beneath the sensor. This step is crucial to ensure the strongest possible connection with the sensor.

3. After confirming their position, an animation will begin that is visible both in the app and on the real-world sensor. This step is essential to ensure the provisioning of the correct sensor. While this may seem unnecessary, we want to empower technicians to be certain in their actions and minimize any potential for errors.

4. In the final step, the user can add configuration for the selected sensor.

 

## Designing with intent

For the provisioning process, we designed an icon for the smart sensor that changes color based on the color of real-world sensors. In the initial designs, we were just using simple colored circles to represent sensors. At first glance, this “illustration” may seem over-complicated. However, in initial tests, we noticed it allowed first-time users to make a stronger mental connection between the physical sensor and its representation in the application.


![Designing-different_smart_sensors.gif](https://strapi.suprabit.eu/uploads/Designing_different_smart_sensors_dde6f0b7b7.gif)

Sometimes we want to abstract real-world elements to their bare minimum, simplifying them to basic shapes or symbols. However, the experience we had with the smart sensor icon reminds us of the importance of designing with intent. It highlights the significance of considering the users' cognitive processes and their ability to make connections between physical objects and their digital representations. By intentionally designing icons or visual elements that align with users' mental models and facilitate comprehension, we enhance user experiences and foster a deeper understanding of the system or product. This emphasizes the value of purposeful design decisions that prioritize user engagement over mere visual aesthetics.

 

## Language is also design?!

Once one or multiple sensors have been configured, they must be provisioned into a Bluetooth mesh. In this step, we learned a valuable lesson about thoughtful design and language's impact on user interactions. The irreversible nature of provisioning sensors into the network posed unique challenges which made careful consideration essential.

We firmly believe that good design goes beyond just aesthetics; it extends to the words we choose to communicate with users. The terminology used can profoundly impact how users perceive and navigate an application. Hence, we dedicated time to ponder the best way to name each action during the provisioning process.

For those not familiar with the context, provisioning refers to configuring and setting up a sensor for its intended purpose and network connectivity. 

Unlike most cases, our sensors couldn't be edited or reconfigured once provisioned, which led us to avoid using the term "Provision" altogether. We were mindful not to introduce any connotations that word might have with technicians and cause confusion. Instead, we adopted "Configure" to signify the initial setup of sensors, and "Lock" for the actual process of provisioning them into the network.

To remove any confusion, we even went a step further and displayed the word "Lock" only on the popup window informing the user about the consequences of the action they were about to perform, and used a lock icon on the button.

 

## Rethinking Symbolism

However, we soon realized that our approach had unintended consequences. The term "Lock" and its icon on the button created confusion among our initial test group. The symbolism of the lock did not represent a clear action. It didn't align with the actions technicians were accustomed to, and many of them forgot to press it. This left the provisioning incomplete. Despite explanations, they frequently missed the step, making it clear that the process wasn't intuitive enough.

Recognizing the need for a different approach, we decided to revamp the buttons. Instead of the lock icon, we introduced a clear "Finalize Provision" button. By incorporating a term familiar to technicians, the significance of finishing the provisioning process became more evident, and as a result, their memory lapses ceased to be an issue.

![Locking_nodes_BLE_mesh.gif](https://strapi.suprabit.eu/uploads/Locking_nodes_BLE_mesh_b8748622e1.gif)



This experience taught us the immense importance of user-centric design. By understanding the specific context and needs of our users, we were able to craft a more intuitive and seamless provisioning process. It reinforced our belief that language and design must work harmoniously to create a truly user-friendly application. Through constant iteration and a willingness to learn from feedback, we successfully transformed a potentially confusing experience into a smooth and efficient one for our users.

 

## Conclusion

In conclusion, the process of designing a smart sensor provisioning app not only taught us the significance of collaboration and user-centric design but also highlighted the profound impact of intentional language and iconography. By addressing challenges proactively and focusing on delivering a seamless and enjoyable experience, we successfully crafted a high-quality, user-friendly app that surpassed expectations. As technology continues to evolve, the lessons from this journey will undoubtedly serve as a strong foundation for future endeavors in designing innovative and user-centric applications.

large_SmartSensorMobile.gif

medium_SmartSensorMobile.gif

small_SmartSensorMobile.gif

thumbnail_SmartSensorMobile.gif

SmartSensorMobile.gif

Step into the journey of developing a smart sensor provisioning app, as we shed light on the intricate design process, the critical role of user-centric design, and how collaboration led to an app that exceeded client expectations. A compelling case study for tech enthusiasts, app designers, and IoT professionals alike.

A Journey Through Designing a Smart Sensor Provisioning process: Bluetooth mesh

# We needed a change

People say that the website is the face of the company, and that is indeed true. The website is often the first thing somebody sees about your company and if they see an IT company with a bad, ugly or non-functioning website, imagine what they will think about the company itself.

Our old website was kind of out of date and since Suprabit is a company working with cutting edge technologies and following modern trends, we had to update our website to better represent us - what we do and who we are.

# Choosing what we want

Before doing a project like this, we had to agree on what we want to show on our website, how to package it and how to put emphasis on things we think are the most important. After the agreement had been made, our designer had to make a design prototype and web development team had to design application architecture and select the technologies to work with.

# Development

Our designer used **Figma**, a vector graphics editor and prototyping tool, to create the design which our development team would have to follow. For content management, we selected **Strapi**. Strapi is one of the best headless Content Management Systems, it is open source, 100% built in JavaScript and very simple to set up. **Next.js** is an open-source development framework built on top of Node.js enabling **React** based web applications functionalities such as server-side rendering and generating static websites. Since we are already experienced in developing Next.js applications, it was an easy decision to select this technology for building our website.

Following the design in Figma, the development team built React components. Next.js was important here to render as much as possible on the server side, and then serve the client with components already populated with content from Strapi. This increases user experience as the client has much fewer requests per page and pages load much faster.

# Deployment

For deployment of our web application and even through the development process, we used **Docker** containers for both Strapi API and for Next.js app. **Docker Compose** came in handy for easier management of both containers with only few command lines in the terminal. **Digital Ocean** is our selected cloud service provider and during the development phase, we had set up a dev environment and deployed our application iteratively as it was being built and as new features were being added. To do that without connecting to the server and running several commands lines every time, we created a **GitHub Action** to do all of that for us, deploying the application version on the main branch.

Once the app was ready, we needed to make it run over HTTPS protocol, instead of HTTP, and finally update DNS servers to route www.suprabit.eu to our server. 

large_Suprabit-web-1440x810.jpg

medium_Suprabit-web-1440x810.jpg

small_Suprabit-web-1440x810.jpg

thumbnail_Suprabit-web-1440x810.jpg

Suprabit-web-1440x810.jpg

Designing a new look for our website. Selecting technologies and principles to build our website on, implementing them and finally deploying the website to cloud.

Smart Sensor - Case Study

Effortless OTA Updates for BLE Mesh Devices via Mobile App

How To Get To a Great Design? Tips From a UI/UX Designer

A Journey Through Designing a Smart Sensor Provisioning process: Bluetooth mesh

Building our own website