#ThursdayPlay | Layar – VR & AR Prototyping App

For my second Thursday Play, I am reviewing a VR/AR app, Layar, which I have been using for prototyping over the last few weeks. You can also check out this post on my personal blog.

What is Layar?

Dutch startup Layar is considered one of the front-runners in developing augmented reality interactions, famous for their Layar app for Android and iOS which lets users use their phones camera to ‘see’ digital information on top of A/R enhanced objects.

layar3

“Layar connects our digital lives with the physical world. With the Layar Creator, a self-service web application for activating print pages with digital content, Layar is pioneering the interactive print movement and paving the way for a more robust future for the publishing industry in a digital age.” Layar Website

I came across Layar last month when I needed to prototype an augmented reality experience my groupmates and I had created. In the middle of installing UNITY and ordering a Google Cardboard, my teacher suggested this website/app experience to us as a way to more easily prototype what we were trying to show. For this purpose, it worked great, although it had limitations on the free account regarding WiFi connection, advanced features (as usual).

layar1

However, Layar’s strength lies in its development web app, Creator which may have the potential to transform, or at least keep transforming, digital publishing. Creator, paired with Layar, allows publishers to make static printed publications interactive by using a smartphone to create virtual/digital layer on top of the content. Publishers can include things like videos, links, buy buttons and attach them to any image that they scan in and set (think a QR code, but any actual image).

It also includes Ge0-Layers which is an A/R interactivity feature triggered by geofencing that a developer sets up using a connected JSON database and API. This part of the Layar experience is in contrast to the scanning images method, and is actually a whole separate part of the app. I didn’t get to explore this much because it’s a paid feature to create maps, but from a user standpoint – I checked out a couple of public ones – it seems to work really well.

The App

The Layar app itself supports the Layar experience, allowing the extended A/R functionality to work on user’s smartphones.

As far as an app goes, it is very simple, with few screens. I have broken down the user-flow in the following slideshow. You can also see a demo of the app below.

Video Demo of How it Works

https://www.youtube.com/watch?v=wi80g9WJvmw

Final Thoughts

It would seem that the Layar app’s main functionality would be to scan for A/R layers, given that this is the home screen, and all else is accessible via the hamburger.

However, given that the Geo-layers menu button is actually a drop-down with much more hidden under it, I am a bit confused about why the app is organized the way it is. Are geo-layers not as important as scanning for an A/R layer with the phone?  Is it newer?

One downside of this app is that the geo-layers are great because they actually alert you when near a geotag for the taggable thing. However, given that you need to actually scan something to get the layar experience, you have to know that you can scan it first and that it is A/R enabled.

Until a critical mass occurs and people assume that most things are A/R enabled or “layered”, I don’t think that a given user would find it easy to know what/when to scan for the additional content (unless maybe they partner with a specific publishing agency to do a promotion around this and EVERYTHING of there is scannable, and users know.)

At the end of the day, I think A/R has some really interesting potential and that Layar is beginning to explore some of the applications we may see with it in the future. While the navigation and some of the core functionality is confusing in terms of priority, I think that overall this is a great app for prototyping A/R experiences, and maybe one day it will be a good app for supporting them in practice as well.

Free Box 2.0 | Now for Apple Watch!!!

A New Platform

For the next iteration of our final project, Sneha and I were asked to reimagine functionality within our apps-in-progress for either an Apple Watch or AppleTV experience. Alternatively, we could explore accessibility functionality for the app on the phone (e.g. for those with vision or hearing impairment).

Given the purpose of FreeBox, to help students discover and share extra project materials on campus, we thought that the Apple TV experience would be irrelevant. Since the freeboxes themselves are located on campus, and half of the app’s core functionality is to show live streams of the different boxes, allowing people to see what is available and head over to check it out, we thought there would be no reason to be able to want to see it in your TV at home. Makes it kind of hard to get to the nearest box when something cool is added.

Given that this part of the apps functionality is both in the spirit of serendipitous discovery and that it has a certain immediacy and voyeurism about it – you are keeping an eye on the freebox and want to be the first to get there when something you want is added – we thought that it would fit nicely with Apple Watch.

Apple’s Human Interface Guidelines specify that Apple Watch app experiences should be lightweight interactions that support personal communication and maintain a holistic design (using both the watches hardware and touch interface as a seamless UI). After learning about these specifications – neither Sneha or I have ever used an Apple Watch – we both thought that it sounded like a perfect fit for Free Box, but also inspired us to make a couple of quick changes to the actual app to better support the watch experience – and app experience overall.

  1. Add a “Pin to Top” function for messages. This will allow you to tag a message to that appears with a pin badge and is sticky to the top of your inbox. This will allow you to quickly save messages for later with the watch app.
  2. Push Button Update Alerts: We had before discussed our idea to include one small on-site interactions near the actual freebox. We really want the whole act of leaving things at the Freebox to be as easy as possible, but we realized that people needed to see what the table looked like on the stream ( to arrange items in right way) and a way to update others that something was added.

Without this functionality, it might be a little too abstract for people to check a live stream of the Freebox, and a bit boring. With this solution, people can also subscribe to location alerts – something users rated highly desirable during our user testing surveys – and be updated when the freebox there has been updated. This also allows us to connect the Apple Watch to the app in a really concrete way.

The purpose of Freebox Apple Watch is to bring the immediacy of receiving important updates right to your wrist. Many apple watch apps use the watch interface to handle updates and quick interactions with content, and we think that this approach is best.

Core Apple Watch Functionality

Obviously, this means we need to cut down the functionality for the Apple Watch version of the app to only handle managing alerts and only really going one or two interactions deep into engaging with the content (e.g. reading and responding to a message)

With this in mind, we cut down the functionality for the watch to he following:

  • App Itself – Will show a stream of subscribed alerts for different types of app updates. Can scroll through and check.
  • Alerts – 3 Types
    1. Freebox Location Updated – Activated when on-site push button hit and user is subscribed to receive location updates for that box
    2. Message Replies – Activated when user receives a reply to a message board post, or to one of the messages they sent to another user
    3. Tagged/Subscribed Material Updated – Activated when a post that has a certain material tagged (e.g. electronics, fabric, wood etc.) is added to the message board

Testing The App Out

After making a couple of screens with how we thought the alerts should look, we were lucky enough to have a friend who owned an Apple Watch take a look and let us video her getting different types of updates and responding to messages. We learned that updates have a really cool animation where the app logo pops up then fades back into the message detail view that comes up after. We also realized that you have to use the crown on the watch (the circle on the right side) to go back to the watch home screen, or to exit the app when finished. Finally, we learned that you can swipe on the screen to bring up contextual menus to quickly edit/dismiss messages.

With these insights in mind, we redesigned our screens and started the interactive prototype on InVision (wanted to mix it up for once).

Pictures From App

Feedback from Class & Changes

We presented our Apple Watch app to class last week and demoed how the app could be accessed from the home screen, as well as getting an alert come in. We had overall positive feedback however, we did make some mistakes with how apple watch apps can work in general and conventions/restrictions for in-app designs (logos, colors etc.)

  • Can’t Have Different Alert Colors – Must be App Icon
  • Video is Good to go! Can show the video on the watch, as well as opening up on the phone (will improve handoff to phone)
  • Contextual dismiss menu for messages is okay to have as back-up, but still need dismiss button to be there
  • Can fit lines of text in messages

After this feedback we fixed up the app and re-did the screens to incorporate the new changes.

Check out the new screens and our interactive prototype below.

New Pictures From App

Interactive Prototype (Invision) – Most Final Version

Here is the most up to date version of our interactive prototype on InVision. We will text this with one or two apple watch users to make sure the changes work with the platform, and demo next week as part of our connected experience for our final.

http://invis.io/GD78L6FVF

Free Box 2.0 | The Return

Introducing FreeBox 2.0

Posting this a little late (had trouble with Mobile Media blog), so have been hosting on my own blog.

Wireframes

Here are our wireframes & background explanation for Freebox 2.0. We will post our redesigns shortly for the next step, still collating some more user testing before summing up last rounds changes.

As always, you can also see the full post on Dana Marten’s blog.

Continue reading Free Box 2.0 | The Return

Spice It Up TvOS | Final Presentation

 

This week we presented our final design for our Apple TV version of our mobile apps from our first project.

Last time I presented several wireframes for Spice It Up TvOS that tried to communicate the essential experiences of the app as translated for an at home experience.

Throughout this process I did a lot more thinking about what it means to be using a TvOS app at home. How does it fit into one’s life? Who will you be using it with? What kind of interactions will change given this new technology?

Continue reading Spice It Up TvOS | Final Presentation

Mobile Media | Hot or Not (Apple TV!!!)

This week in Mobile Design we bring you Apple TV!!!!

Now I have my misgivings about Apple TV overall – in terms of its role as a home media center compared to other solutions – but I’m super excited about this project.

Designing for TV is a brand-new experience for me and very very different out of the box than designing for iOS.

Continue reading Mobile Media | Hot or Not (Apple TV!!!)

Spice It Up | (Most) Final Prototype & Presentation

So we come at last to the end of our first project for Mobile Media, our food-app for either iOS or Android.

It’s funny, but my biggest reflection doing this – besides always do more user testing (which I learned hard last semester) – was actually on iOS UI elements and navigation.

Continue reading Spice It Up | (Most) Final Prototype & Presentation

Spice It Up – More Iterations & Feedback

Another week, another iteration. This week I focused on bringing together more of the design elements of Hot or Not I had started mapping out during the last round of prototypes. Throughout this process of building the app, page by page from the wireframes, I also did a lot of user testing and made many changes to the flow and functionality.

Continue reading Spice It Up – More Iterations & Feedback

#ThursdayPlay – Happn

I just ran across a “radically new dating app” this last week called Happn.

Happn is a new type of dating app that pairs you with people you pass by everyday. As they put it:

“Find the people you’ve crossed paths with. Walking down the street, at a cafe, at work, at a party… Discover the people you’ve crossed paths with, the people like you, the people you’d like to find again.”

Continue reading #ThursdayPlay – Happn

Project 1 Write-Up | Spice It Up food App

 

spiceituplogo

Here is a quick write-up of my progress after two weeks working on our iOS or Android food app. You can see my concept, process, images and formal presentation on my own WordPress blog entry (trying to collate content) at the link below.

Project 1 | Spice it Up – An Overview

Please feel free to leave comments on this blog entry for our Mobile Media class to streamline feedback. You are also welcome to leave comments on my own blog if you prefer. I will receive it either way! 😀

Material Design | Poetry in Motion – Dana Martens

Finally have obtained a brand-new computer after this week’s saga and am posting last week’s blog assignment: to read Apple’s HIG or Google’s Material Design Guide and give examples of 3 things we learned!!!

Since I studied the HIG last semester for my iOS class, I thought it would be useful to see Google’s approach. Although I can develop for iOS, using an iPad, I’m an Android user through and through with my phone. I’ve come to realize this actually gives me a very different subconscious and unintentional understanding of Android vs. iOS. One of learning through recognition, and user experience versus recall from principles learned for design.

Continue reading Material Design | Poetry in Motion – Dana Martens