Prototyping

tvOS Parallax

With the release of tvOS, a primary focus (pun intended) is on layered images. Apple provides a really nice parallax preview tool for your app's assets. The model in this prototype is Emily Ratajkowski, which I jokingly call this Ratallax.

Resources:


Lembas iPhone App Prototype

Since it's New York Fashion Week I have been thinking a lot about digital products that could enhance the shopping experience of a shopper. My friend Lana is the owner of a store called Lembas, which sells handmade jewelry and bridal accessories. I asked her if I could use her store as an example of a prototype to build. She also makes some amazing products, so consider shopping there!

lovisaarmpiece001

One problem often encountered in shopping is a way to preview or get a vibe of how something might look on you. Context and occasion are key. I decided to explore ways to integrate a preview experience that seems supplementary to the use of the app; remaining useful while not being the primary focus.

In this prototype I knew I wanted to use the iPhone's native camera view and decided to use Form, a prototyping tool by Relative Wave (recently acquired by Google). At first glance Form has many similar aspects to Quartz Composer. I like to work with nodes and patches because I like to visualize prototypes in a radial fashion.

form

I essentially created a camera view that lives at the bottom z layer of an app, almost like a drawer you could access as if you were reaching for a mirror.

In an ideal world, I would get 3D rendered images of the jewelry, but since this is a prototype I took one of Lana's photos to mask out the object.

mask

For prototyping, I often work with Sketch paired with a prototyping tool in parallel. The level of fidelity I use is as much to get the idea across.

lembas

IMG_1188

 

Here is a quick video of the prototype I put together.

[pexvimeo pex_attr_src="https://vimeo.com/139134265"][/pexvimeo]

You can learn more about Lembas here. Follow on:


Cell animation prototypes

https://vimeo.com/131626155

I've been inspired by my friend William Van Hecke (User Experience Lead at Omni Group) who has been posting daily on his blog about thoughts on design. I will try to follow his example by writing daily as an excuse to use my 12" MacBook (yay) but may not post everything. However, what I will do instead is create a design prototype once a week. I'm doing a presentation in July about creating prototypes with Origami and will share these prototypes eventually on my GitHub account.

This project is an exploration of the behavior of cells. In this fictitious app I explored the idea of custom cells that can expand. This allows a user to tap on a list of people to contact them.

I also wanted to prototype the behavior of marking something as done. This gesture recognizer interaction is popular among many 3rd party apps on iOS. In this prototype, swiping slightly will be conditional and show a user a checkmark indicating that "This will be marked as done".


Quartz Composer Prototype for Fashion App

Experimenting with a horizontal interface for browsing through different looks. Tapping would expand the details. Used Facebook Origami to prototype this.


Apple Watch Concept: The Usual Coffee

Every day during the work week at 3pm, a group of people at our Black Pixel team go get coffee together at "Coffee O'Clock". Besides our CTO mixing it up often, we tend to get the same thing. The barista even knows what we're going to get, but always asks just to confirm. I was looking for a Watch idea to play around with, and it made me wonder, "What if there was an app that would let me order my coffee before I get in line?

In this use case, I'm using one of my favorite coffee shops, Sight Glass, as an example for an app.

The assumption is a wearer would walk into the establishment and have location on. The app would recognize that the wearer is near the location and push that data to Apple Watch. The ida is a simple app for a wearer to let the establishment know if he or she is ordering the usual so the baristas can queue up the orders in hope to create a better workflow.

Below is a design for three sample views: Short Look Notification, Long Look Notification, and Long Look Notification scrolled. Some design notes:

  • The transition from Short to Long Look Notification occurs if the wearer taps on the screen or continues to hold the watch up.
  • When scrolling, the body will scroll under the sash.

watch

Note that the assumption would be that there is an iPhone app since Apple Watch apps interact with WatchKit via a WatchKit extension.

Untitled-2

WatchKitExtension

Some notes for designers when working on Apple Watch apps:

  • Do not design the experience like an iOS app. This is a different context than a phone. Often I have seen Watch app concepts too over-designed.
  • The wearer will probably interact with Watch very briefly. My mindset has been "How can someone use this in less than one second?"

Apple has provided their Human Interface Guidelines as well as very detailed resources.


Sharing Interaction in Quartz Composer

sketch

I was experimenting with ways of revealing social sharing options on the iPhone while playing in Quartz Composer (Origami). In this example app (not a real app) there is a group of images that show which of your friends have listened to this song as well. The share icon is on the right of it.

  • I created a behavior that when the sharing options are expanded, the profile photos of friends would collapse to de-clutter the space.
  • I wanted the share icon to transform into a close button. It was really important to make sure the close button replaced where the share button was so the user would not have to move his or her finger/thumb anywhere to dismiss it.

How I Did It

The animation itself is quite simple. My intention was to have the social icons seem like it exploded out of the share button.

  • Alpha is set at 0.0 and turns to 1.0.
  • Scale is at 0.8 and turns to 1.0
  • Each icon is given its own unique z-rotation to give it the impression that they are moving independently from one another (as they are).
  • I used a Bouncy Animation to give the animation a bit of friction and tension.

sharing_ux_-_Editor

le_musique


HTC Homepage Takeover Solution

This is one of the solutions in the HTC re-design I am most proud of. It is almost not noticeable but I think it enhances the user's experience. During the launch of the HTC One (m8) we were asked to create a promo that would take over the entire homepage. I wanted to make sure that the user had the ability to dismiss it by either clicking/tapping on the X or scrolling to reveal the original homepage.

This footage is of the implemented solution. (great job dev team!)