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:

  • Kai Schaller

    I love this idea! What a great way to virtually try something on. Seems like there would be some interesting things to explore with switching the camera between the front and back (depending on if you’re looking at something like a necklace vs. a piece of clothing in a mirror) as well as being able to easily scale the piece you’re viewing.

    How long did it take you to mask out the necklace? It’s a pretty complex image, but I think the end result was totally worth it.

    • Thanks, Kai! Oh man, I can’t remember how long it took to mask the necklace out. I think a couple hours. Ideally I’d love to have a 3D asset so a wearer can pinch and rotate it.

  • Pingback: Xcode Native Prototype Example – Lembas | David Hoang()

  • Pingback: Xcode Native Prototype – Lembas | David Hoang()