TRAKTIME REAL-TIME UPDATE FOR YOUR NEXT TRAIN JOURNEY. ANDROID WEAR & APP A watch face interaction with data complications providing an informative user experience.!1 1
WATCH FACE A watch face with data complications providing an informative user experience. SIMPLE, CLEAR Key information is understandable at a glance DATA, VISUALLY DISPLAYED Time left until departure for your next immediate train in the hour Icons illustrate mode; going work to or from home Balanced watch face elements by using consistent alignment.... 1010 Victoria St. 7mins ACTIVE MODE WHERE, WHEN Station where train departs from with time left in a container ALWAYS-ON MODE
VALIDATE Done as a quick exercise for the Reply Xchange eevent. WHAT WE WNATED TO DO Then as an R&D exercise to advance our knowledge of developing on the platform. TFL API Core Functionality Display time SKETCH Display time until your next train departs the station Limit animation to save power Design Android Dev - Wear Android Lead Android Dev - App CRITIQUE CRITIQUE dev + designer whole team PRESENT PRESENT SKETCH PROTOTYPE
ANDROID WEAR INTERACTION TYPE WATCH FACE Wear makes it easy for users to be more connected to both the online and real worlds by making important information available at a glance. Android Wear uses 4 interaction types: notifications, watch faces, native apps, and voice commands. Watch faces Watch faces can tell more than time; they can show relevant, timely data. By including a gadget called a complication, installed apps may display useful data - providing the right information at the right time. https://designguidelines.withgoogle.com/android-wear The majority of Wear devices have round displays, which have 22% less UI space than rectangular displays. Round displays also need larger margins for text to be easily readable. Design for round devices first to make sure your layout works within the smaller size constraints. People wearing watches are regularly in motion, whether they are standing, gesturing, or running to catch a bus. Test designs in situations that involve user movement to make sure the design is usable at a glance.
Typography Watch faces and complications Roboto Condensed 25 ANDROID WEAR GUIDELINE Light 22pt, leading 26.4pt Maximum font size: Headlines, page headings Light 20pt, leading 24pt Dialog titles, notification titles, notification body text Regular 22pt, leading 26.4pt Regular 20pt, leading 24pt Value 16:43 BRU 1h 5m 25 Confirmation overlay Percentage 16:43 BRU Time 1h 5m Failure overlay 25 Colour 22:32 Open on phone overlay Light 18pt, leading 21.6pt Confirmation screen text Regular 18pt, leading 21.6pt 582.35 4,239 steps 16:43 BRU Red 500 #F44336 #FF4336 #A62C23 Pink 500 #E91E63 #FF216B #A62C23 Purple 500 #9C27B0 S: 50% #EC80FF #9224A6 Deep Purple 500 #673AB7 S: 50% #AE80FF #5E35A6 #661B15 #660D2B #5A1666 #3A2166 #4D1410 #4D0A20 S: 100% #41004D S: 100% #1C004D #330D0B #260510 S: 100% #210026 S: 100% #0E0026 Light 16pt, leading 19.2pt Body text, list item text, conversation text, app launcher items text, contact item text Light 14pt, leading 16.8pt Fuse (countdown timer) text, menu item descriptions Light 12pt, leading 16pt Timestamps, metadata, etc Material Design for Wearables Sticker Sheet Regular 16pt, leading 19.2pt Regular 14pt, leading 16.8pt Regular 12pt, leading 16pt 582.35 25 726.39 GOOG 25 0:00:15 0:00:15 1h 5m Indigo 500 #3F51B5 S: 50% #8093FF #3A4AA6 #242E66 S: 100% #000B4D S: 100% #000626 Teal 500 #009688 #00FFE5 #00A695 #00665C #004D45 #002622 Yellow 500 #FFEB3B #FFEB3B #A69926 #665E17 #4D4712 H: 22º S: 68% #26160C Brown 500 #795548 #FFB499 #A67563 #66483D #4D362E #261B17 Blue 500 #2196F3 S: 50% #80C6FF #1766A6 #0E3F66 S: 100% #002A4D S: 100% #001526 Green 500 #4CAF50 #6EFF72 #47A64A #2C662E #214D22 #102611 Amber 500 #FFC107 #FFC107 #A67E05 #664D03 #4D3A02 H: 22º S: 44% #261C15 Grey 500 #9E9E9E (White) #FFFFFF #A6A6A6 #666666 #4D4D4D #262626 Light Blue 500 #03A9F4 S: 50% #80D7FF #0272A6 #014666 S: 100% #00344D S: 100% #001A26 Light Green 500 #8BC34A #B5FF61 #76A63F #486627 #364D1D #1B260F Orange 500 #FF9800 #FF9800 #A66300 #663D00 #4D2E00 #261700 Blue Gray 500 #607D8B #B0E5FF #7295A6 #465B66 #35454D #1A2226 Cyan 500 #00BCD4 #00E1FF #0092A6 #005A66 #00444D #002226 Lime 500 #CDDC39 #ECFF42 #99A62B #5E661B #474D14 H: 161º S: 41% #172621 Deep Orange 500 #FF5722 #FF5722 #A63716 #66220D #4D190A #260D05 White #FFFFFF Black #000000
DESIGN EXPLORATIONS VERSION 1
VIDEO With a single tap on the watch face, users can open an app associated with a complication or change the look of the watch face itself, such as its colour. PROTOTYPE WATCH FACE
DESIGN EXPLORATIONS VERSION 2
DESIGN EXPLORATIONS APP A B C FINAL
THANK YOU & QA