Functional jewellery UI
Wearable and Embedded UI/UX
Here you can find a collection of interface demos I have made for Korulab. All images and UI concepts are subjects to company property and all the copyrights apply unless states otherwise.
— With love, Sasha
If you are one of the people who has been running with a tracker or buying Apple Watch because you can not stay away from purchasing new Apple products* — you may have noticed that wearable on-screen experience vary a lot from gadget to gadget.
What can be interesting in designing for such a tiny screen?
It takes heroic patience to find “a mood” that your client wants, with this very client peeking over your shoulder. Luckily, with digital product we can have multiple iterations within a day. The challenge that we face daily at work is bringing easy-to-read display to the most trivial data out there.
There is clearly more than one way of laying out a basic map screen on a 176x220 screen of watch. Well, to be brutally honest, rendering a map on your watch is like shooting your Uber ride to the outer orbit of the Earth. This is not the UI challenge, however.
When I came to Koru 3 years ago, Christian Lindholm, gave me a task to make “buttons that look nothing like buttons, but are still clearly buttons”. (What he said was a little more graceful, but the message was such). Now, in his earlier career Christian has put a “Profile” functionality under a Power Off button of your Nokia phones. If you did not like it — you know who is to blame. Now the challenge he had outline was to keep a jewellery-like quality of the user interface, while maintaining its functionality at the maximum level. That was a fun challenge to pick up and the Weather app interface you see below was one of the first tries I took in this direction.
Design dedicated part of our team loves the concept of the “live tiles” in the main menu switcher of a wearable device. Think of it: Why would you clutter the screen with a static text or icon, when you have so much valid data to surface? Well, backend folks are always ready to remind you, that having such a switcher means having to update multiple data streams on the fly. Hence, development complexity grows exponentially. But who doesn’t like a good challenge?
So, how do you signal to the user, that you have taken him from the switcher into the app? considering that the screen is usually 90% covered by a finger during a tap or a swipe, you have to give a good old bedazzle of an animation. I like a scaling bounce and an opacity change in my transitions. It might be too subtle on the first go, but I’m sure that with time it will pay back with clarity and its almost tangible literate reaction.
Revealing data that floats off the screen is a more complicated challenge. I always try to avoid giant arrows or scroll bars “hinting” at the expanded content. Pagination dots has become a pretty standard widget during the last years, and the way they are played out in an Android Wear transition is the state of the art UI (you see the icons for each page, that morph into usual dots within the first few seconds). At the same time, to scale widgets for both round and rectangular device, once has to keep solving this puzzle. In this design I have suggested a curve that would float work as a path for data display. One could play with “gravity” in the pagination widget, prioritising some nodes of the curve over the others during the scroll.
In terms of graphic design I believe there are much greater artists than I am. However, given a chance, I am lobbying for keeping lining style consistent within the interface. In my practice, I am still hopeful to meet a corporate client who would like to invest in such level of detailing. Matching icon, font character and mood of a line is much like designing luxury airline experience for users’ eyes.
Things that Photoshop can’t do.
Until recently it was pretty common for “designers” to be left out from the demo assembly. One would provide an image asset file set and will be asked to patiently wait while someone else composes a live interface mockup from these images. Luckily the times are changing and currently there are numerous tools enabling even the least technically skilled designers to test simple interactions with tools like InVision or Flinto.
I myself prefer actually learning how to code in the environment that I work with. This way I can understand what are the boundaries for my designs and how much would it cost for the client to stretch these boundaries.
A sample interface style map that you see above is a true challenge to implement in a demo. Details like a dynamic minute display are too expensive to develop just for the show. When I have just started working with Koru, my vision of “a cool” design was based on what would make the most engaging story for a client.
Learning the actual cost of a widget being developed became a true revelation. What I like about Koru framework is that numerous widgets exist in the system already. For example in the switcher you see above, I could use masking for a second hand to go “under” the clock. Developers may also appreciate the fact that the pagination widgets are ready as well. The screen capture you see above is actually an application that is ready to be ported to wearable hardware. Working with such opportunity is a fascinating experience. You do not have to plan what will go wrong, when you can try out all possible crash scenarios within a day.
Another crucial learning that falls beyond the realm of graphical solutions was a vision of a platform. Scaling your UI solution across multiple device form-factors and multiple scenarios is like writing love letters while thinking of the future divorce.
The benefit in learning various aspects of your core framework is that your design becomes technically mature. Growing a family of simple buttons that would communicate a solid interaction style is a very meditative process. I was in charge of composing the first public version of Koru’s SDK. Along with this work I have started working on the minimal Flat UI for Koru’s default development kit. In this case working means far more than thinking of what looks pretty. A simple button has multiple states and positions on screen. Decisions must be robust to hold a stand. Here, being able to code some basics is a live saver, since you can try the versions of your design way before you ever show it to the developers.
