Smart Watch - GUI Design and Development Solution with Sparklet

Smartwatches have become an integral part of our connected lifestyle. They are wrist-sized form factor devices that include all the functionalities of a smartphone and, are also capable of communicating with the cloud, and other streaming services via Bluetooth-connected smartphones (or) directly through Wi-Fi.

With the ever-growing demand for feature-rich wearables, OEMs have begun to boost their wearable performance by enhancing processor performance, improving battery life, upgrading monitoring and tracking features, enabling seamless connectivity, creating user-friendly interfaces, etc., to stay ahead in the competitive market.

Apart from its embedded hardware and firmware development skills, Embien's expertise in the field of UI/UX development has aided in building intuitive GUI screens for various IoT devices. One part of the latest requirements was to design and develop different GUI screens for a smartwatch to enhance real-life experiences using Embien’s Sparklet GUI library - specially optimized for the smart watch controllers.

Embien Specialization in GUI Design and Development

Wristwatches have evolved drastically ever since the last half-century – right from the discovery of digital watches in the 1960s to the ones we call “smartwatches” today. Present-day manufacturers intend to attract tech-savvy millennials, young and elderly users by adding several health-monitoring features, and enabling real-time access to health status, biometrics, etc., in their wearable products. This can be achieved only by building UI screens that are user-friendly in nature. As a result, developers are expected to build user interfaces that can sense, process, and analyse multiple embedded sensor data, internally.

At Embien, we design and develop intuitive GUI screens by incorporating the latest cutting-edge technologies for a variety of wearables and consumer electronic products. We minimize constraints by effectively assessing and enhancing UI prototypes & include user feedback in the primary phase of the test framework using an iterative approach. Apart from this, we create practical guidelines for effective user interface development, which will help improve the usability and elevate the overall user experience of user interface prototypes.

This smartwatch was developed on a microcontroller that is ideal for wearable device development. It is a high-performance microcontroller with real-time capabilities that supports additional features like digital signal processing, low power/voltage operation, etc., Embien’s Embedded Graphics team developed a quick solution to enable easy integration of four different GUI screens using its Sparklet GUI Library. Flint – the IDE for Sparklet development, helped create multiple working simulations quickly and create the final UI in a matter of few weeks.

Graphical User Interface Development for Smart Watches

As per the customer requirement, Embien designed and developed intuitive GUI screens for a smartwatch on an MCU platform. After brainstorming multiple wireframe ideas, we created the actual design using Photoshop - an industry leading image editing software. Once the customer approval is obtained, final UI is rendered and exported as images. These images were imported in the Flint IDE and complete UI logic was developed without any major coding. Finally, the business logic was integrated and firmware was made to run on the smart watch controller.

The below images depict some of the different GUI screens designed for the smartwatch, namely: Clock Screen, Menu Screen, Heart Rate Screen, and Result Screen:

The clock screen has different views – analog and digital – with the analog design having clock movement mimicking actual clock-hands. The interactive menu screen supports all touch interactions like swipe, slide, pinch etc. A Graph was used to display the acquired ECG data along with derived heart rate information. We incorporated smooth graphics and enabled features such as zoom-in, zoom-out, auto-scale supported. Fast anti-aliasing and auto-scaling was employed for a smooth rendering of the lines. An interface that presents the results of various activities like step count, calories burnt, etc., was displayed in a dynamic way using progress bar animations. Users were provided with options to set the desired goal to finish a task. Upon completion, users were given the honour in terms of the leader board.

Embien’s Expertise

Embien’s Graphics team successfully designed and developed GUI Screens for the smartwatch along with a well-developed mobile application interface within a short period of time. The Power-Duo of Sparklet and Flint helped achieve this with minimal effort.

Embien has been working extensively with OEMs and Tier 1 vendors in enabling the latest features for their wearables, IoT Gateways, Home Security Systems, Industrial HMI’s, PoS Terminals etc.Our specialization also includes working with Automotive vendors to create powerful Instrument Graphics clusters.