Apple Watch Designs

JingletonJingleton DEForum Administrator, Xamarin Team, Insider, University, Developer Group Leader Xamurai
edited March 2015 in Community

Have you designed a beautiful Apple Watch UI in Xamarin Studio or Visual Studio?

Show users what you've been spending your time on!

Post a screenshot of your storyboard here.

Posts

  • PedroFernandesPedroFernandes PTMember ✭✭

    Wake Alarm Clock - never been easy to wake up

    Because  Watch is all about glancing and quick info, providing vital information such as sleep efficiency should be only at a distance of one glance!
    In the morning at a glance see how was your sleep quality, check your alarms, and before you go to bed check your quick info about how much time left to wake up.

    Storyboard:
    Glance (sleep efficiency):
    Sleep (more detailed info about sleep):
    Alarms (list of all alarms) and Quick Info (about next alarm and how much time left to wake up):

    Simplicity and Quick Info is all  Watch asks for.

    My Best Regards,
    Pedro Fernandes

  • MathieuMasciotraMathieuMasciotra USUniversity
    edited March 2015

    Here's our entry:

    We did an Apple Watch version of our TaxiHail app, an Android and iOS app to book a taxi available in more than 120 cities in North America, Europe and Middle East.

    Here's a blog post and a video about our experience:
    http://www.apcurium.com/overview-and-first-feedback-on-the-watchkit-sdk-for-xamarin/

  • mikeirvingappsmikeirvingapps GBMember

    work in progress build of Grid Ref Watch.

    Get Mapping References on your wrist, from the GPS on your iPhone.

    Will support GB / Irish / Swiss / Gauss Kruger and UTM Grid Coordinate Systems, with the user setting their preference on their iPhone.

    Based on my highly successful series of other grid reference apps - see http://www.mike-irving.co.uk/apps

  • (Posting again. Sorry, links to images were deleted)

    Eggs boiled the right way with "Eggact"

    Size, Quantity and Pressure must be carefully considered when boiling the perfect eggs

    Storyboard

    Close-ups

    Count down to #Eggact eggs!

    Video

    https://vimeo.com/122631311

  • CarloWahlstedtCarloWahlstedt USMember
    edited March 2015

    Created an Apple Watch app with Xamarin that I named FlipTime.

  • jeroenvandenBeltjeroenvandenBelt DEMember ✭✭

    Track your Flight Simulator with FSXTrack. Works on the go, no need to be in the same WiFi network.

  • LeeMallonLeeMallon GBInsider, University ✭✭

    Car Parking App

    Often when driving into busy areas, you'll be looking for a car park with available spaces. It can be difficult to find a space if your normal car park is full. This app allows you to quickly view nearby car park occupancy levels along with estimated levels over the next few hours, based on historical carpark and live congestion data. Once you've found your car park booking a space is simple and all only takes a few seconds on the watch. Once parked the app provides haptic feedback when the user's booked time is close to running out, along with a notification.

    Our blog post about building for Apple Watch and this app can be found here:
    http://www.rarelyimpossible.com/blog/2015/3/17/building-apple-watch-apps-using-xamarin-our-development-experiment

    Storyboard:

    User Interface:

    The Apple Watch calls for quick interaction and simple views, which influenced the design of the UI.

    Car Park Info:

    Booking a Space:

    Glance:

    Our blog post about building for Apple Watch and this app can be found here:
    http://www.rarelyimpossible.com/blog/2015/3/17/building-apple-watch-apps-using-xamarin-our-development-experiment

  • hussamhussam USMember, University

    @LeeMallon, how did you manage to integrate haptic feedback into your watch app? I've been wanting to use it, but all online sources say that its API isn't open yet. Did you find a workaround?

  • SlavaBaroulineSlavaBarouline AUMember ✭✭

    Snore Stop App

    I have started to work on a prototype for a new Apple Watch app. The app is designed to help people to control snoring.

    App Description:

    Do you snore in your sleep? Our app will help you (and your family) to eliminate this problem!

    When going to bed keep your new shiny Apple Watch on your wrist and your trusty iPhone nearby.
    The iPhone will monitor your sleep and every time you start to snore your Apple Watch will start to vibrate and will interrupt your snoring.

    After the snoring has stopped the vibration will cease automatically.

    App features:

    • Great user interface.
    • Easy to use, large buttons.
    • Several vibration settings.
    • Last night statistics at your glance.
    • You can easily check if the app helped to stop snoring.
    • You can see a pattern of the snore sound and the vibrations applied.
    • You can pause/resume the monitoring from your watch.

    Storyboard:

    As this is a prototype I chose to keep the app's design simple and to try the concept first. I am sure the app will evolve in the future and the design will become more elaborated.

    User Interface:

    The main challenge was to squeeze as much functionality as possible into a very little screen and at the same time to keep the app's user interface appealing.

    Thank you for reading!

  • PedroFernandesPedroFernandes PTMember ✭✭

    @SlavaBarouline How does your app work in real life context?

    I am asking this because supposedly the Watch will be charged overnight as Tim Cook said due to only 18 hours of battery. having 18 hours of mixed usage during the day plus 8 hours of sleep and using it overnight i believe the Watch would be with no battery in the morning.

    There is a way of using it overnight with no battery problems but that would require the "wearer" to have his hand cuffed on the Watch plugged to the charging wire which i think is not very much practical.

    This are the first reasons why I actually didn't used the watch as an alarm clock which the primary function of my app.

    Let me know your toughs.

    My Best Regards,
    Pedro Fernandes

  • PedroFernandesPedroFernandes PTMember ✭✭

    @hussam @LeeMallon There no way Car Parking App or any other app to have access to Haptic Feedback as said in  Forum: https://devforums.apple.com/thread/254540?tstart=15

    There is no access to these hardware features at this time, though there is presentation of a text input controller via WKInterfaceController, which will involve the microphone. Past that, I have no information concerning forthcoming releases.

    Hope i Helped.

  • hussamhussam USMember, University

    @PedroFernandes Thanks, that's what I thought as well. I hope they open up the taptic/haptic APIs soon.

  • PedroFernandesPedroFernandes PTMember ✭✭

    @hussam Me too! you have no idea how much is my enthusiasm about those new technologies. I am really hoping they make it more open in the future, it is very normal that they strict access in the first iteration of the Watch OS.

    So many possibilities are waiting us :)

  • PedroFernandesPedroFernandes PTMember ✭✭

    I am updating my entry (first post in this thread) reason is I updated my app design and i am also giving new information (video, real life context etc...).

    Wake Alarm Clock - never been so easy to wake up!

    Entry:


    enter image description here

    iPhone App

    The iPhone app is an Alarm Clock that allows you to snooze by literally slapping your phone and turning off the alarm using 4 modes (tap, slide, shake, flip). I am preparing an all new version 5.0 which will feature the Watch and sleep analysis using M7 co-processor which you can start recording and terminate the app and comeback to stop recording and everything is made at zero battery cost.

    iTunes Link: https://itunes.apple.com/us/app/wake-alarm-clock-never-been/id723980702?mt=8

    Watch App

    Because Watch is all about glancing and quick info, providing vital information such as your sleep efficiency should be only at a distance of one glance!

    Real Life Context Scenarios:

    Scenario 1: In the morning eating your breakfast at a glance see how was your sleep efficiency recorded by your iPhone. Tap on the glance opens the Watch App and you can see exactly what time did you went to bed, when did you wake up, and most importantly how much quality sleep time did you had. All in less than 3 seconds.
    Scenario 2: At any time see an overview of all your created alarms weather are they enabled when are they going to repeat and their names.
    Scenario 3: If you like to control your sleep time and keep those 8 hours of sleep Just before you go to bed quickly check how much time left to wake up and see if you meet your standard.


    Key Aspects that I am following very strictly when developing for Watch:

    • 3 Seconds Interaction Rule: As  suggests, the app shouldn't take more than 3 seconds of interaction to provide what the wearer want's in a given context.
    • Only Important Information: Followed by the 3 seconds rule, only showing important quick information instead of loads of info is the key.
    • The iPhone app should do most of the work: Power hungry tasks are being performed by the iPhone, things like parsing all the alarms, processing sleep analysis report and checking the nearest alarm.
    • Minimized Traffic: A well-performing watch extension requires little traffic and only updates what actually changed.
    • Usage of Black Colors: The screen is OLED which is very power efficiency with black pixels.
    • No Overnight Usage: As Tim Cook said with 18 hours of mixed usage you will end up very much likely charging your Watch overnight. By accepting this affirmation I also accepted that practically no wearer if none will sleep wearing the Watch and by so apps that require overnight monitoring/interaction are OBSOLETE. By this reasons a replication of my alarm clock to the watch is not viable in all ways, at least while there aren't battery life improvements.

    Storyboard

    enter image description here

    Glance

    enter image description here

    Sleep

    enter image description here

    Alarms

    enter image description here

    Wake

    enter image description here

    Demo Video Showing Full Functinonallity Paired with iPhone


    App Featured in WatchAware.com [First Version]: http://watchaware.com/watch-apps/wake-alarm-clock-never-been-so-easy-to-wake-up

    Note: Clicking in my name is redirecting to this thread.

    Thanks for reading.

    Warm Regards,
    Pedro Fernandes

  • MatthieuMatthieu USMember ✭✭

    Hello,

    Here's my entry for the contest: MölkKeep, an app to keep scores during a game of Mölkky, a throwing game from Finland. More information here: http://en.wikipedia.org/wiki/Molkky

    There are a several Mölkky apps in the AppStore, but a phone is unwieldy to use during games. The watch however, is perfect in such settings, as the early beta testers have confirmed: good for repetitive tasks and quick access.

    Enter the players in the MölkKeep iPhone app and the watch then takes over to keep scores, show the leaderboard, warn players who are eliminated (or about to be!) and congratulate the winner.

    Video demo:

    The tweet:

    Xamarin Studio screenshot:

    Xcode screenshot:

    Matthieu

  • SlavaBaroulineSlavaBarouline AUMember ✭✭

    @PedroFernandes I suspect that with such a small battery it will take not more than an hour to charge it.

    To use my app users will have to charge the watch before or after they sleep.
    Should not be much of a problem - I usually charge my iPhone at work.
    ;-)

    Cheers.

  • WaldemarCichonWaldemarCichon DEMember ✭✭

    iFelicitas - woman´s period cycle information recording

    My first Watch-Application will be an App for recording some information about the woman´s monthly cycle information and calculating from those a prognosis for the probability to get pregnant or not. This prognosis will be shown in a form of easy understandable icon together with a period of days, in which this state will remain. Both information will be displayed in the glance view of the app. If configured also a notification will be displayed on the beginning of the day, in which the getting pregnant probability will change.
    It will be an app for both, for that woman / couples which want to get pregnant without stress and also for those which will contracept in only natural way (i know, the reliability of this method is not very high, but there are people which don´t use any mechanical or chemical method - it´s for them).
    The information, which can be recorded are the begin and end of bleeding, the pain of ovulation (noticeable only by some woman), the temperature measured every day at the same time and the mucus consistency, which both helped to rise the exactness of the forecast.
    The first three informations are recorded only by saving it´s timestamp. The temperature und mucus related informations will have a timestamp and also a numeric value or specification chosen from some specific descriptions. The temperature will be chosen in localised way - in Fahrenheit or Celsius degrees.
    The entered timestamp and values will be also displayed in the companion app and can be there be edited / corrected and also some statistics will be displayed. The information will also be written to the medical center, if it will be possible to do it there.

    Here a screenshot of the Xamarin Studio´s designer.

    Here some screens in the emulator´s window.

    and the glance with a the duration and probability:

    There is also an alternative set of icons, which we like very much.

    drawing

  • WaldemarCichonWaldemarCichon DEMember ✭✭
    edited March 2015

    MOCCA-Order transmission and time recording app extension

    There is also a second Watch from me in my pipeline. This is a extension to an existing Order transmission and time recording app, which is working with a (dotnet) backend through a web service. The employee gets his orders for the current day through the web service and continuously tapp in the start and the end of his work. After choosing a project he can see the tasks to do inside of this project. He can end a task completely or partially. The current state is immediately sent to the office and there the clerk could see on a desktop application the state of all projects / tasks and also what each employee is doing at this moment.
    The employee can also start a break or several configurable events, like going to a shop for work purposes. Those function will be displayed by the menu facility. He also can see an overview about the work he has done today or some days back in the time. In the glance view he can see the current task he´s doing in relation to the time planned. If a new very important order / task will be sent by the office he can see an notification and the new order / task will be integrated in the appropriate list.
    The backend app prepares also invoices after a project is completed.

    Here is the Xamarin-Studio screenshot of my story board.

  • JasonFoxAZJasonFoxAZ USUniversity ✭✭

    Wow! There are a lot of great submissions here, nice work everyone! I guess I'll take a stab at this too.
    Like most people here I spend the bulk of my day writing code and I usually have 2 or 3 different projects to track time on (think weekly time reporting). Therein lies the problem, sometimes I get lost in code and completely lose track of time. So I thought it would be cool to build an app to help me keep track of time spent on each of my current active projects.

    TaskTracker makes it easy to see time spent on your current project as well as providing an easy switch mechanism for when you switch tasks.

    Setting the active task can be done from the or watch. Once I come up with a clever way to this, the watch and/or phone will "ask" you what you are currently working on -- helpful if your lost in code!

    Simple concept, but hey, I like simple!

  • Poz1Poz1 ITUniversity ✭✭
    edited March 2015

    RealWeather

    After the success on Windows Phone, RealWeather is ready to take over the world onboard of the Apple Watches :wink:

    Description

    RealWeather is the only app in the store that is not afraid to speak freely!
    No more "Sunny"or "Cloudy" but awesome sentences that better describe the weather condition!
    This app, and it's unique interface will literally change the way you are used to check the weather!

    On Apple Watch

    Opening the app we find the cities that the user has set in the settings, we can swipe between them.
    The color of the items depends on the temperature of the place, warm color for hot places, cool for cold ones.
    If we we "Force Touch" the pages, using the menu, we can change the page to show the weather:

    • in 3 hours
    • in 6 hours
    • in 9 hours
    • of tomorrow
    • of the day after tomorrow

    In addition to that the app is also able to notify weather alerts! (if available)




    WP Store
    Softpedia Review

  • mhenkemhenke USMember

    Pocket Yoga (PktYoga.app)

    • Relax heart rate using Taptic Engine feedback on wrist
    • Relax breathing using acoustic feedback (headphones recommend)
    • Exercise Yoga workout from the watch
    • Beginners mode features silhouette for easy learning
    • Use digital crown to browse poses and create personal work out
    • Resume interrupted workout

    (@michaelhenke: tweet)

    PktYoga

  • MatthewOConnorMatthewOConnor USBeta ✭✭

    It's great to see the other watch projects in progress! My app is an extension for OBD Fusion, my OBD2 vehicle diagnostics app.

    OBD Fusion Description

    OBD Fusion is an app that allows you to connect to your vehicle and read live diagnostic data. You can calculate fuel economy, create live dashboards, clear your check engine light, and much more!

    Watch App

    OBD Fusion on Apple Watch provides quick access to vital vehicle and trip data. You can check on the health of your vehicle, such as whether your check engine light is on. Forget how much fuel you have left in your tank? OBD Fusion
    stores that information for you, and you can quickly view the fuel level on your watch, even when you are away from your vehicle. You can also see data about your last trip, such as the time, distance, and fuel economy.

    Forget where you parked? No problem. OBD Fusion will display your car's location on a map so you can easily find it. Finally, if you parked at a meter, set the meter time on your watch and get a reminder before the meter runs out. No more parking tickets for expired meters!

    image

    image

    image

    image

  • Wing_CWing_C USMember, University

    Mom's Angry?

    Description: If you are a kid, you always wonder if your mother is angry about you forgetting to do your assigned tasks. This is the app can help. Mom's Angry is a Apple watch app which design specific for reminding you what the tasks your mother has been assigned to you. You can view the list of your assigned tasks for Today, Tomorrow and the rest of week. Easy access to Mom's angry index thru the app or Glance mode. As well as, send messages to your Mom, Dad or other family members anytime by using this app on your Apple Watch.

    App Features:
    - Main Menu screen: You can assign the app features by clicking these 3 buttons on this screen, including View Tasks, Mom's Angry (Index)? and Message to.
    - View Tasks screen: You can see list of tasks by Today, Tomorrow and the rest of the week, as well as view task detail information and mark as completed.
    - Mom's angry screen: Graphic representation of how angry your mother currently is based of your tasks performance, and it will show your remaining numbers of tasks of today.
    - Message to screen: You can select which family members' message to thru this app.

    Attached is the screenshots of the storyboard and screens flow below.

  • JeffLaughlinJeffLaughlin CAMember

    I'm working on a fun people-finder iWatch app. It is based on the classic game Marco Polo! Basically people running the app will be able to quickly find other iWatch fans. The watch (via their phone or bluetooth speakers) will shout out Marco or Polo whenever another iWatch user is within range.

    Future enhancements include working cross-platform - perhaps different voices for Android vs iPhone watches.

  • MiguelRochefortMiguelRochefort USMember
    edited March 2015

    Coinbase

    Unofficial implementation of Coinbase (bitcoin wallet) on the Apple Watch.

    image

    Features

    • View balances

    • View transactions

    • Receive money (QR code)

    • Send money (contact list)

    Storyboard

    Video

  • KraigMcConaghyKraigMcConaghy USBeta ✭✭

    Still in progress but I'm building an Apple Watch app to monitor our background server systems. Eventually I will probably modify it for build servers as well.

    Excited to be trying out Xamarin's #AppleWatch development #BuiltWithXamarin pic.twitter.com/goMiFpucRt

    — Kraig McConaghy (@kraigmcconaghy) March 23, 2015
  • TimSneedTimSneed USUniversity ✭✭

    Pomodoro

    I am building a pomodoro app with some social features, and thought this would be perfect for an Apple watch app. To get a feel for how to communicate between an extension and the app, I used Wormhole Sharp.

    image of stuff

    This was cool to setup and discover how the app can pass messages to the extension and vice versa! There are three views in the app, the "main" view where the pomodoro timer can be controlled. A "today" view where the user can view their number of pomodoros for the day. This view uses the HandleWatchKitExtensionRequest override in the AppDelegate to make a call to my Akavache cache to get cached data.

    The third view in the app uses a table view to display some static statistics for user performance. It also uses the delegate method and pulls information out of the reply dictionary from the parent app.

    The Glance view provides a simple view to show the user their current status (break or work) and how many Pomodoros they have accomplished and have left for the day.

    My storyboard.

    I definitely found how the multiple ways to have the extension communicate with the parent app the most interesting part of this weekend project. I cannot wait to refine this concept and get it to the store.

  • LeeMallonLeeMallon GBInsider, University ✭✭

    Hi @hussam, @pedrofernandes is right you can't do it yet. We have been building the app in hope they open the API for our X minutes before feature. We have a work around in the way we send notifications but not sure how reliable it will be on the device. We shall have to wait until April to test. Hopeful Apple will release the API access sooner so we don't have to hack it :)

  • PedroFernandesPedroFernandes PTMember ✭✭

    @LeeMallon that's right! As I said before the main problem with  Watch is the current limitations in software which are mainly derivated from the hardware limitation and people seem to not being aware of it. People are prototyping amazing apps but I'm sure the major part will not perform very well in a real life context. And that's the main problem here.

    Is the real life context and how it works. The example I talked before, apps that require the user to wear the watch overnight are completely obsolete because of the hardware limitations and you can check my post to see what I am talking about. Apps should make people lives easier not harder so for example forcing the user to charge the watch just to use at night is definitely not the way to go even if I had an excellent idea.

    I will be pleased when they have a stronger battery and open more the watch os so I can develop apps that will require usage overnight as well supporting haptic feedback tech.

    I am really pushing the watch to the limit and my intentions are to push even harder when I get my hands on.

  • MichaelOConnorMichaelOConnor USUniversity ✭✭

    HANYU.CO Mandarin Chinese

    Learn Chinese with help from your Apple Watch. Have a look at your vocabulary list, practice recognizing vocabulary with simple exercises and even drill into details like character radicals.

    Of course, made with Xamarin.

  • RenjiThomasRenjiThomas USMember

    Hi All,
    My idea is to have a Smart Fuel Buddy for car, which talks to the Cars OBD interface and recommends fuel station

  • hussamhussam USMember, University

    TapTap Watch

    Building apps for the Apple Watch using Xamarin turned out to be incredibly easy and fun. I wanted to work on an original concept app instead of just using the watch for notifications. Since Taptic/Haptic/Sensors are not open yet, I built a two-player game. One player on the Watch, the other on the iPhone. The players play simultaneously, whoever taps more, wins.

    I'm sharing my code with the community. It was a fun process: https://github.com/hussamal/TapTapMatch

    Here is a screenshot (and I will add a video and better explanation in a second -- just need to catch the cut-off first :-))!

  • MerveAKGZMerveAKGZ USMember

    Our App is called Monkyy. When you start your app you will have e-monkey that you can feed, love and take care of it's hygiene. This app will take you to your childhood. You will enjoy taking care of your digital monkey "Monkyy". Don't forget Monkyy cannot survive if you forget to feed, love or clean him.

    Features:

    • Easy to use
    • 3 buttons for feeding, cleaning and love
    • 3 mood icons to show you how Monkyy feels.

  • hussamhussam USMember, University
    edited March 2015

    TapTap Match (Extended Explanation)

    My first post was a bit terse because I wanted to meet the 12pm contest deadline. With that behind us, let me share some more details about my application.

    What is it?

    A simple two-person tapping game. One player uses the iPhone, the other uses an Apple Watch. Whoever taps more in 30 seconds, wins.

    Why is it cool?

    The game itself is simple, but technology behind it is pretty cool. It relies on the extension app running on the watch, and the "full" iPhone app running on the phone at the same time. Both applications must be in the foreground and communicate in lock step for this to work. I think that is pretty awesome technically. Plus, it represents a novel use of the WatchKit API where the watch application is seen as a second "remote controller" for an application that is being viewed or played on the phone already. It is also pretty freaking awesome that Xamarin.iOS + WatchKit makes this easy to implement.

    But why??

    I wanted to build something that demonstrates a novel use/concept of the Apple Watch (as encouraged by the contest announcement). Most Apple Watch applications I've seen were for either consuming notifications, or inputing data. This makes sense given the watch's form-factor. However, I wanted to see what more we can do. I originally wanted to do something with the Haptic engine or Taptic feedback, but these APIs aren't open yet unfortunately. So I chose this project.

    Cool highlights

    • When the watch application launches, it pauses until the phone application is launched. It automatically detects when that happens and proceeds.
    • The watch app (the extension project) is the "driver" for the experience. It launches the game on both the watch and the full phone app.
    • The phone and watch applications are constantly exchanging data about user taps.
    • Non-technical cool highlight, this was my first Apple Watch application. I followed Xamarin's tutorials on Saturday, and coded the application on Sunday. C# + Xamarin.iOS is freaking awesome :smile:

    Show me

    The code is on github here: https://github.com/hussamal/TapTapMatch ,
    at the bottom there is a screenshot of the Interface Designer, but I think the easiest way is to check out this video here (includes a super quick tour of the code):

    Finally

    I think this is pretty awesome! I love all the entries on this thread, and I am so looking forward to what we can build together!!

    image

Sign In or Register to comment.