Challenge
We partnered with Vector in order to define and implement an intuitive user experience for their innovative watch. Challenges 30 days battery life Watch, not an iPod on your wrist An open platform Gestures The Grid The challenge: Find the right grid for round smartwatches that designers can use to build watch faces and apps.
Solution
The watch features an e-ink LCD screen, a 30 day battery life, a smartphone control app as well as its own operating system and open developer API that allows them to create their own apps and faces. With a combination of iconic design and essential technology, Vector watches entered the aggressive wearables market with a very ambitious proposition, to keep you connected with your business, family and friends with a 30-day battery life on a single charge. The key to a successful complex device is to make it feel simple. Our team translated Vector’s complex technology and features into a streamlined product experience to meet the brand’s vision of simplicity and subtle luxury. Minding that the watch doesn’t have a touch screen, our challenge was to figure out the best user experience on a monochrome digital dial with physical crown and push buttons. From designing watch faces and adding complications (functions like date, weather, distance walked) to integrated applications and notifications, Okapi collaborated with the Vector team to develop a straightforward interface with intuitive navigation gestures. We built a smart geometric grid to fit Vector’s proprietary lightweight OS on both their round and rectangular smartwatches (Luna and Meridian), custom fonts and icons, and a UI guide that allows room for growth. We’re proud to have worked so closely with such an ambitious company. Happy to announce that the Vector Watch software platform and team joined Fitbit in January 2017. How it works In order to preserve 30 days of battery life, Vector watch is pairing with your mobile phone which it uses as the main system brain for the majority of required tasks. This doesn’t impose a significant battery consumption on the phone either as the application is heavily optimized, it also offers cross-platform compatibility with availability for Android, Windows Phone and iOS. Colors When thinking of black and white screens most people think of old tv sets that were actually greyscaled with 256 colors, on Vector Watch we literally had only 2 colors to work with. No shades of grey, no antialiasing, just blocky white pixels on a black background were the only thing we had in order to create the illusion that things are rounded. We were inspired by the halftone print technique, which uses various dot sizes in order to reproduce brightness, and while we could not change the pixel sizing, we could however make use of their density in order to obtain three additional grey tones. This technique helped us generate shadow effects, volumes and various other user interface elements. Fonts Starting with the '90s the vectorial fonts entered the computer industry. Their main advantage is that they scale up without any issues. However, on small resolutions, they start to look blurry or glitchy. When it comes to colors or screen resolution, the Vector watch screen is more closely related to the '70s - '80s type of displays than modern ones. From the first tests it was clear that we will have problems going with vector fonts (TrueType) and so we’ve started to look for alternatives, ending up with research on how the bitmap fonts were used back in the day. We’ve looked for old computer sets, we’ve installed emulators and we’ve found out that a few decades ago you had to create a separate font file for each font sizing you needed and the pixels were set manually one by one for each letter and each correspondent size version. So that’s what we ended doing. We’ve defined the graphic style through a master font and then we’ve re-created the same style 5 more times pixel by pixel, letter by letter, in order to cover all font sizes that we’ve needed for the device. Each size is about 350 characters (extended Latin), which accommodates usage for any country/language in the world that utilizes the Latin alphabet. Iconography Since the watch had to support app integrations, the next step after creating the custom fonts was to design the accompanying icon set. Based on the grid and usability rules we ended up with 4 different sizes for each icon. The icons helped the standard app development process as wand at the same time they were offered to third-party developers that wanted to contribute with their own creations. We didn’t want to let other people add new graphic elements to the watch in this first version, primarily for interface consistency and at the same time utilizing the standard set also saved memory space in the system. Since the watch had to support app integrations, the next step after creating the custom fonts was to design the accompanying icon set. Based on the grid and usability rules we ended up with 4 different sizes for each icon. The icons helped the standard app development process as wand at the same time they were offered to third-party developers that wanted to contribute with their own creations. We didn’t want to let other people add new graphic elements to the watch in this first version, primarily for interface consistency and at the same time utilizing the standard set also saved memory space in the system. Complications We’ve defined the required assets for building complications, such as dial modules, progress bars, text widgets and so on. Faces We have designed 12 default watch faces, and when the platform opened for developers then other designers started submitting their own creations too utilizing the graphic assets that we’ve prepared for them. Apps App integration is a key part of the watch functionality, and so we’ve designed interfaces for two types of applications, the standard ones such as timer, fitness, music, notifications and settings, as well as third-party apps like Uber, Nest and Evernote.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.