Interview Image

WSD-F10 Engineer Interview

Exterior, UI Design Series

Information about the smart operation
and user-friendly design of the WSD-F10.

True outdoor watch performance in a minimalist design

——— It is impossible to talk about a product without mentioning its design. Here we will sit down with Koji Kachi who was in charge of the exterior design of the WSD-F10, and Tomohiro Hamaue who oversaw its color, material, and finish (CMF) design.

Kachi:As I think you heard during the product and planning and mounting design interviews, the development of the WSD-F10 took a number of years to complete. Because of this, there was a very large number of people involved in the development and a variety of different designs were proposed during the period from when the project initially kicked off up until the final product was produced.

By the time I took over as the person in charge of the external design, the outdoor concept was already in place, and so I applied myself in coming up with a design that incorporated new concepts while maintaining and building on what was already in place. Unlike a standard analog watch, the entire face of the WSD-F10 is a liquid crystal display. For me personally, progressing with the work while keeping everything coordinated with the user interface was very stimulating.

Hamaue:Colors, materials, and the finish, which we abbreviate to "CMF," are also essential parts of the product design, beside they are what determine the visual impact of the product. The WSD-F10 comes in a choice of four different colors, including the main orange color that is the choice of many outdoor adventurers.

Timepiece Product Division

Koji Kachi

Timepiece Product Division

Tomohiro Hamaue

———Tell us something about some of the design points of the exterior.

Kachi:There are various methods, such as concept sketches, CAD designs that can be used in the initial stages of exterior design, but before we can move into mass production we create prototypes. The shapes of the case and bezel, how much screws protrude, the form of each component, and other fine details are crafted to give us an idea of the final form in terms of size, mass, and other factors. Using this as a basis, we go back and forth with the mounting design division until we are able to finalize the material, shape, dimensions and other details of each part.

Early mock-upEarly mock-up

Kachi:The WSD-F10 has a dual nature: it is a smartwatch and it is also an outdoor tool. The problem was to find the best way to combine these two natures into a final whole. Basically, we thought about how to create a simple form with minimal decoration, so as not to interfere with face readability. There was also a constant ongoing review of the overall balance of the design with careful attention to the finest details.

For example, let's consider the shape of the bezel. If you look at the edges that come into contact with the glass, you will see that the bezel areas at the top, bottom left, and right have a gentler slope. This is to avoid catching of the fingertip when a screen is swiped during operation. It also adds a unique look to the face of the watch. The width and angle of this slope was very carefully calculated.

Even the front screw heads were carefully selected in consideration of the screw hole type, the shape of the screw top, and other factors. In the end, we decided on beveled tri-point screw heads which prevent interference with clothing. All of this may sound like trivial detail, to use they were important considerations. The WSD-F10 represent the sum total of the care and consideration given to such minute details.

OperationOperation

Bezel and front screw prototypeBezel and front screw prototype

———What went into the CMF design?

Hamaue:The goal of CMF design was to come up with colors and quality that are suitable for outdoor clothing and tools.

  • WSD-F10GN
  • WSD-F10RG
  • WSD-F10BK
  • WSD-F10RD

Color variations

Hamaue:One of the most important considerations was, of course, the impression of quality presented by the bezel. Using a solid-color resin material as a base, we applied a transparent metallic coating followed by multiple layers of a clear coating for high durability. The result is an elegant metallic look. The complex form of the bezel also makes it possible for the WSD-F10 to present a variety of different views, depending the lighting angle.

To further enhance the elegant look, we came up with a choice of different colors in addition to the main orange color. All of the colors are produced by new coating and paint application processes that were made possible through a process of trial-and-error. The color produced by a coating is affected by the type and the volume of coating applied. A thin coat creates a garish effect, while a thicker coat results in a metallic effect. It took a lot of time and hard work for us to reproduce the exact hue that the designers had in mind.

But we feel that the end result was clearly worth the effort we put into it.

Metallic base + Clear coatingMetallic base + Clear coating

Coat appearance checking using a special plateCoat appearance checking using a special plate

Quality control color samplesQuality control color samples

———Everything about the WSD-F10, from its form to its materials, coloring, finish and more seems to have been carefully considered to identify it as a unique type of outdoor smartwatch.


Easy to read, easy to use, comfortable to wear

——— Now let's hear from Shinichi Moritani, who is a designer, about the user interface, which is the "face" of the WSD-F10.

Moritani:The most important thing to keep in mind when designing the WSD-F10 user interface was that it is basically a wristwatch. Because of this, there were two points that influenced our designs. First was the need to provide users with instant access to variety of different information.

The second was the need for a simple design that is easy on the eyes. The WSD-F10 is packed with a wide array of functions for outdoor uses, which means that the wearer will spend more time looking at the face compared to a standard smartwatch. We wanted to eliminate showy pop-ups, over-the-top animations, and other elements that would tend to interfere with outdoor users keeping an eye on the information constantly being updated on the display.

Both of these design points to us were the most fundamental conditions for a smartwatch being designed by a timepiece manufacturer like CASIO.

Once we were able to satisfy these conditions, it was necessary to come up with a user interface design that demonstrates CASIO originality. The hurdles were high, but it was well worth the effort.

Product Design Department, Design Center

Shinichi Moritani

———Please tell us something about some of the specific features of the WSD-F10 user interface design.

Moritani:First, in order to satisfy the conditions of instant information presentation and a design that does not interfere with presentation, we had to incorporate these concepts into the component parts of the interface. In particular, we limited the use of colors on the display to the basic monotone black and white, plus two more colors. A basic black background with white figures provides plenty of contrast for easy reading. The other two colors are attention-grabbing red, along with blue for supplementary information, all of which make information intuitively recognizable. We felt that these were the best colors for presenting information in the limited space available in a watch face. This is the minimalist design concept of the TOOL app screens. On the Fishing Time screen, for example, optimal fishing time frames are indicated in red, while secondary fishing time frames are indicated in blue.

The TOOL app has six different functions, each of which is capable of measuring different data. No matter what type of data is being presented, minimalist faces were designed to present the information to the wearer. When taking a bearing reading, the northerly pointer plays the most important role. The white part lets you see what mode you are currently in at a glance.

The design of the round LCD is also a major feature. The circular periphery can be viewed as a 24-hour time dial that gives a feel for the passage of time or a 360-degree directional dial that provides a visualization of the space around you. It is both universal across all of the TOOL functions and, at the same time, tailored to the needs of each function. I personally find this to be quite interesting. For the Sunrise/Sunset screen, you can simultaneously get a sense of the times and the angles at which the sun will rise and set.

Image board for UI designImage board for UI design

Fishing TimeFishing Time

Digital CompassDigital Compass

Sunrise/Sunset TimesSunrise/Sunset Times

Sunrise/Sunset AzimuthsSunrise/Sunset Azimuths

———Was there anything else you concentrated on besides colors and layout?

Moritani:First of all, we developed new original fonts for use on the interface. We attempted to create a font that satisfied our need for minimalism and originality. The simpler font, the more detail you can achieve. For timekeeping, measurement values, and other main display letters and numbers, we adopted a powerful, easy-to-read linear design that is perfectly suited for use by an outdoor tool.

Font samplesFont samples

Moritani:For the background, we use a low polygon graphic theme. The polygon shapes add a touch of multi-dimensionality to the otherwise flat background. By changing the arrangement of the polygons for each function, we can the image of a mountain for the Altitude Graph, rolling waves for the Tide Graph, and more.

Altitude graphAltitude graph

Tide GraphTide Graph

Moritani:Finally, we need to say something about display animation. The TOOL screen is structured using a number of different layers, and each layer is designed to perform its own individual transition when TOOL is started up and when the screen is changed by a swipe operation. Screen transitions react to the movement of your finger, much as if they are living things, which makes operation interesting and fun. As with the low-polygons, this also adds a sense of multi-dimensionality to the flat design.

Transition animations were created using the Adobe Flash animation tool, and are the result of a long evolution during which a large number of possibilities were considered. We feel that the end products of such efforts help to create a feeling of interaction between the watch and user that adds some enjoyment to operation throughout the day.

Demo screen created with FlashDemo screen created with Flash

———It seems that the exterior, CMF, and user interface designs played very important roles in achieving the intended WSD-F10 product design while maintaining the essential outdoor concept. At the same time, of course, they also needed to be coordinated with product planning, mounting design, app development and other teams involved in the creation of the WSD-F10. It's no wonder that that so many people are finding the WSD-F10 a joy to own and a pleasure to use.