Domestic APP practice! Revealing the entire design process of JD Apple Watch V1.0

In recent years, wearable devices have gradually come into people's attention, and JD.com JDC has also joined the exploration team to give users a complete experience.

A new platform

The design concepts of Google and Apple's Watch are basically the same, and we face the same problems on both platforms. How to reflect the characteristics of the Watch platform itself, which is focused on the scene, minimalist, and lightweight, is a question we always think about during the design process.

How to make it work on such a small screen? What functions to put? How to make the experience complete?

[[137398]]

Still starting from the scene

• User-initiated use scenarios: Watch can transplant some functions of mobile phone applications to help users use these functions in appropriate scenarios. For example, on the bus, I want to see where the things I bought at noon are. There are too many people and it is inconvenient to take out the phone in the briefcase, so I raise my wrist to check. Walking on the road, I suddenly remembered that I was out of rice at home, and said to the watch on my wrist: "Buy a bag of rice." The watch recommended three types of rice: one that I had bought before, a hot seller, and one that was on sale. I chose one of them, then selected my home address, and completed the purchase.

• User passive usage scenario: The best experience of Watch as a wearable device is that the corresponding content is displayed on it just when the user needs it, allowing users to use it while cooking, eating, running, and chatting. In other words, the user receives an appropriate message in a scenario. For example, when you are almost home, the Watch vibrates, and you raise your wrist to see that the courier has set off.

Based on the above scenarios, we have preliminarily determined the functions we hope users will experience on the watch: 1. Voice shopping; 2. Message access

Don't become a constant vibrator

The Watch will be in close contact with the user's skin for a long time. Based on this close relationship, the user is more sensitive to the vibration on the Watch than the mobile phone, so we need to control the vibration frequency on the Watch to avoid disturbing the user.

We reorganized the existing messages on JD.com based on the two dimensions of importance and user relevance, and divided users into ordinary users and customized users. We pushed important information to all users' Watch. We pushed more messages to customized users who have subscribed to "reminders to check in" and "discounts and promotions".

Complete the operation on Watch quickly

There is a "5-second rule" in "Design Principles for Android Wear", which states that the longer users use apps on the Watch, the more they will be disconnected from the real world, forcing them to pause their real-life activities to handle the Watch, thus defeating the purpose of wearable devices being convenient. Therefore, all "interactive behaviors" on the Watch should be more efficient, and it is recommended that each task be completed within 5 seconds.

We reduce the time users spend in the application by shortening the operation process and improving the efficiency of user browsing .

Shorten the operation process:

When developing the voice purchase function, the demand should be clearly defined as helping users to conveniently purchase products that require little effort to purchase, such as daily necessities, food, etc.

Reduce the difficulty of user selection and move the online process offline. The general purchase process: search - select products - submit order - pay to place the order. On the watch, we let users use voice search, and only display the top three products related to the user, so that users can make a choice quickly. Then they can submit the order by simply selecting the address. We cut off the huge online payment process and changed it to offline cash on delivery. After streamlining the online process in this way, users can complete online purchases immediately when they think of it.

Flattened information structure. On mobile phones, most applications use a conventional "progressive" interface information architecture that goes deep layer by layer. Often, because the layers are too deep, users need to jump to different interfaces layer by layer to meet their needs. Such interaction is obviously not suitable for Watch. We conducted many exploratory attempts on information architecture and finally adopted a "double-layer structure" model, laying out the order information flatly, and only expanding the logistics content of the lower layer when the user has a clear intention to view it. (On mobile phones, orders are classified by status, such as: pending payment, completed, etc.)

Improve user browsing and usage efficiency:

Display one piece of information at a time. When there is more secondary information, put it on the secondary page. When there is other parallel information, switch the page display.

Simplify the text as much as possible. Information is expressed through keywords and phrases rather than complete sentences. Here I would like to share with you a technique for simplifying text expression, which is the form of icon + copy. For example: "The logistics progress of the items you purchased on JD.com has been delivered by the courier." After simplification, it is an icon of JD.com's unique logistics transport vehicle + the copy of "the courier is leaving."

Increase the font size. The screen size of the Watch itself is small for portability. Increase the text size appropriately to ensure that users can understand it at a glance on their wrist.

Use reasonable pictures. Pictures are more vivid and intuitive than text, and users can understand more easily by adding pictures. For example, after purchasing a product, the user checks the logistics and wants to know where the product is. When expressing the information of "what", you can use a product picture instead of a product list.

Simple interaction, using large gestures for operations on the Watch. In the query function, switching between orders, and order operations, we use large gestures to ensure that users can easily see what they want to know in any scenario. (Large gestures: not precise operations like clicking a small button)

When it comes to order details, it is inevitable to introduce some more complex interactions, and forcing users to complete these operations on the wearable platform is certainly not appropriate. We guide users to the matching handheld device, where they can complete the task on the large screen, and then return to the wearable device to get the results of the operation. Touching the action button will launch the relevant application page on the user's matching smartphone, and the user will complete the specific interaction on the phone.

#p#

Visual Style

How to design this area? And follow the design principles of the two platforms while highlighting JD’s own brand? This poses a big problem for our visual designers.

We retain JD Red, and Apple Watch uses black in its design to make the page more stable and consistent with the platform design; Android Wear uses a white background to make the page younger and more smoothly connected with the platform.

Polishing details

From the initial product information architecture, interaction drafts, first drafts, and operational demos, we have been pondering the relationship between the user model and the operational logic, and considering the placement of interface elements.

In the project, we used hand-drawn drafts and paper prototypes to quickly communicate design ideas with product and development teams. In order to most realistically reflect the problems we encountered in the design, we also worked with development colleagues to produce a high-fidelity, operational demo (the prototype tool on the watch was still blank), fully presenting the entire application information framework and interactive behavior.

Before the Apple Watch went on sale, we came up with a very original way to simulate the visual experience on the watch because we didn't have the real machine: we made a paper model with 1:1 color printing and wore it on the wrist. Although we had a test machine when designing Android Wear, there were still some differences in visual restoration. For example, although the icon was designed according to the standard size, the display effect on the watch was not ideal. We used a ruler to measure and find visual deviations. After continuous polishing, we finally restored the visual effect with high fidelity and presented the best visual experience to users.

Product iteration

JD Watch V1.0 has only realized the initial access function, which will be gradually improved and optimized in future iterations. We hope that our sincerity can be recognized by JD users, and we will always keep our original intention of bringing the best experience to users and produce more excellent products.

refer to:

• Design Principles for Android Wear

  http://developer.android.com/design/wear/principles.html

• Apple Watch Human Interface Guidelines

  https://developer.apple.com/watch/human-interface-guidelines/