Design,
Code,
and HCI

cardi-o

After Affects, Illustrator, Photoshop
Spring 2019



How do we experience time?

Sure, we read time by looking at the many clocks around us: walls, buildings, devices both analogue and digital. We read time and interpret the information as a numerical constraint to help order our everyday lives. We load it with value both explicit and implicit, split it into blocks, shuffle the blocks around, and pride ourselves in elegantly arranging the blocks within bigger blocks within even bigger blocks (just look at Google Calendar – it’s a perfect visual embodiment of this).

But that’s how we read time. Reading time is discrete, whereas experiencing time is continuous. We experience time in a much more fluid, unconforming way, a process that cannot be expressed in simple numbers.

The Apple Watch, as Jony Ive describes it, is a definitively personal device that “connects with the wearer at an intimate level to both embrace individuality and inspire desire”. Silky Apple marketing aside, the Apple Watch to me is an exciting human-machine interface and a chance to seamlessly integrate bodily experience with hardware and software. There are many existing time interfaces for the watch, and all of them prompt the user to read the time but not necessarily experience it. I wanted to design an interface that uses the intimate qualities of the watch interactions and allows the user to experience time in a deeply personal way. I also posed to myself the additional challenge of doing this without any reference to convention time. The result is cardi-o.

Ideation

I chose to represent time with the heartbeat. With the Apple Watch’s heartbeat sensor on the surface of our bodies acting as the interface between our internal and sensory worlds, we can understand our presence in time through the lens of our bodily experience. I had two primary goals in mind for the cardi-o interface: to depict the heartbeat graphically as the main watchface and to have some sort of a review feature where the user can look back and see their heartbeat over time. To start, I sketched some early ideas on paper, exploring particle systems, concentric rings with a darting clock “hand”, and two revolving balls inspired by a game called Duet.

I decided to pursue the Duet-inspired design because it was the most interesting to me graphically, and began creating some static screens in Sketch. The basic idea was for the two balls to fuse together in a ball of white light when the user’s heart beat, and split back up afterwards. I then became very interested in that moment of fusion: the white ball appears quite malleable and contains colourful layers underneath to give it a playful dimension. As a spinoff idea, I started focusing on the white ball and added some additional colours to the underlying layer besides the original red and blue. I played around with making the ball a ring instead, to reduce the brightness of the white and the attention it was getting. After talking about these ideas at a critique and reviewing feedback, I decided to continue with the ring design.

However, I was still interested in the transition from the ball to the ring: it seemed like an opportunity to add an extra layer of information to the heartbeat data. This, along with the meditative qualities of Apple’s Breathe app for watchOS, inspired me to create a “focus mode” for cardi-o. Intended to capture the user’s state of physical and mental equilibrium, the ring will gradually become thick when the user’s heart rate is consistent for a long duration of time, only to only to turn thin again when their heart rate changes. I also experimented with the ring growing into a completely filled circle, but discarded it due to graphic dissonance stemming from when the ring’s center closed in completely. Also, the ring made a good motif that I could use throughout the interface.

For yet another extra layer of information, I varied the colour of the ring with the user’s heart rate, just a small touch to graphically amplify the change of condition.

An Alternate View

To address my goal of allowing the user to look back on their heartbeat history, I created a “graph view” where the current heart rate is plotted as a line graph, relative to past heart rates, and coloured according to speed. The user can navigate the graph by zooming in and out with the crown and by swiping/tapping. To accompany this continuous display of time, I added the ability to mark discrete moments in time by tapping the screen in the normal “clock” view and later viewing them in the graph view. The ring motif comes handy here to make a strong graphic connection across the two views.

Perhaps the toughest part of this project was figuring out an intuitive and seamless way to switch between the two views, and one that abided by Apple’s Human Interface Guidelines for watchOS. I considered Force Touch, but it is primarily mapped to customization features. I considered having the user can scroll down/swipe left or right to access the graph, but the two views then became too connected. I ended up deriving a “force scroll” functionality. I reasoned that the graph view is a broader, more holistic view of the clock view, so the user should be able to “zoom out” to see it.

Existing mappings have already been established for scrolling the crown and zooming: the crown is used Apple Maps to zoom in and out. However, because the two views are quite different, it seemed too easy for the user to just move the crown slightly and change to the other view (they can even do it on accident). I was also planning to use the crown zoom to navigate the graph. To make the view switch more intentional, the user has to “force scroll” past a certain threshold (that’s two or more “scroll clicks” for those who’ve used an Apple Watch) in order to switch views.

Future Work

I think cardi-o’s graph view has the potential to circulate in a very interesting way: people can use the interface to record body-time experiences of important events, whether it be physical like a workout, or emotional such as a wedding. They can look back on how they felt in the moment(s), screenshot the graph, and share it if they wish. If I had more time, I would add a feature for the user to easily export the graph for sharing and/or personal use. The use cases are incredibly diverse, and the results are intimate, powerful, and unique.

Conclusion

As an Android user and Material Design enthusiast, I was very grateful to have the chance to familiarize myself with Apple’s watchOS design guidelines and overall design philosophy. After hours of scouring through the Apple Human Interface Guidelines, I now have a much more attentive eye towards Apple’s software design techniques (and also hardware, but to a lesser extent). And of course, designing for non-traditional screen sizes is always a challenge, and experience working with such constraints will be useful to my future work.

Special thanks for the students of VIS415 – Advanced Graphic Design, Eric Li, and David Reinfurt for their valuable guidance and feedback throughout this project.