Prototyping for Brick & Mortar Stores

How I used Framer to design digital in-store screens to augment the ‘offline’ shopping experience.

Suitsupply Store in San Francisco

Since three months I’m a UX designer at Suitsupply. Coming from solely e-commerce jobs, working here opened up a world of omni-channel possibilities for me.

A little bit about me

I’ve been designing websites and web applications for the last three years or so. And the last 2 years I got into prototyping quite intensively, partly because I discovered Framer 🙌. However, when you browse the Framer Gallery— with awesome examples — you’ll only see prototypes for touch devices.

I was about to design a screen of 1080 by 3840 pixels (two full HD tv screens on top of each other). Was I able to use Framer for my project? Hell yes! But before going all geeky into design processes and prototyping. Let me introduce you to my new employer.

And a very brief Suitsupply history

Suitsupply disrupted the industry of suit selling and tailoring by providing impeccable tailored suits for warehouse prices, to say it bluntly. And since the beginning they’re also been doing it online.

Suitsupply clients demand top notch clothing and do not flinch back to new and emerging technologies. This makes them very perceivable to e.g. online shopping, an on-demand styling service and digital in-store screens that augment the ‘offline’ shopping experience.

The last couple of weeks I’ve been working on the latter.

Now the geeky part 🤓

Since we’re collecting data about how our customers feel toward our service, we could make this information insightful through in-store screens.

And that is exactly what we did.

Step 1: pencil and paper

Just to brainstorm on how to display data, which data and to determine what layout works best I use the good old pen and paper.

Some brainstorming on what information to display and how to compose the elements

Step 2: Visual mockups in Sketch

These sketches were shortly after translated to mockups in Sketch to define a visual style. Sketch and its new symbols since Sketch 3.7 and Invision’s Craft plugin really helped me to quickly iterate and review several versions with real data.

Step 3: Framer!

Framer has a great feature to import your designs directly from Sketch. Although that would be easier, I wanted to use real data! And that’s why Framer was the perfect prototyping tool for this project.

Step 3.1: Modules

I was already familiar with jQuery and its Ajax capabilities. So the first thing I did was importing the jQuery library. There’s a sweet example in the Modules section in the Framer docs, that tells you exactly how to import any library from npm.

And since my data contained mostly employees names and their roles I also imported the TextLayer for Framer module to display the data nice and neat.

# Require jQuery
$ = require(“npm”).jquery
# Require TextLayer
TextLayer = require(“TextLayer”)

Step 3.2: Device and setting up the scene

The prototype needed to fit on two full HD Samsung TV’s and that’s exactly a screen that is not listed in the standard list of devices in the Framer app. So I had to define a “tv” device by hand. Which looks like this:

# Device
# deviceType can be either “phone” or “desktop”
x = Screen.height / 3840
Framer.DeviceView.Devices[“tv”] =
 “deviceType”: “desktop”
 “screenWidth”: 1080 * x
 “screenHeight”: 3840 * x
# Set custom device
Framer.Device.deviceType = “tv”

An extra addition was a variable x divided by the screenHeight of the device so this prototype fits on whatever screen you’d to like.

It works on all screen sizes

Step 3.3: The content

As you can see in the design, the screen contains a list of cards with information. With a simple jQuery Ajax snippet I imported a json file which contains the store employee’s name, profile picture, his or her role, the current score and what review was given recently.

feed = $.ajax
 url: “employees.json”
 contentType: “application/json;”
 dataType: “json”
 jsonpCallback: “callback”
feed.error ->
 print “feed.statusText”
 
feed.done (data) ->
 # Create cards

Then with the jQuery .each() function I iterated over the data and created a card for each top level object of the json file.

# An object looks like this
{
  name: “Annabel”,
  role: “Sales advisor”,
  time: “9.00 pm”,
  rox: “94”,
  item_img: “http://statics.suitsupply.com/images/products/Suits/box_look_desktop_retina/Suits_Blue_Plain_Washington_P4848_Suitsupply_Online_Store_1.jpg",
  item_title: “Washington Blue Plain”,
  item_price: “299”
}

Whenever the Ajax function is done loading all the data I need to do a couple of things.

• Create cards
• Stack the cards
• Animate the cards

Step 3.4: Create a card

I had to create a card.

A card containing a time stamp, review, picture, name, role and rating

And repeat that card for each object in the json file using jQuery’s $.each() function.

Before creating these cards I’ve created a PageComponent called reviews.

reviews = new PageComponent
reviews.scrollHorizontal = false
reviews.content.backgroundColor = null

And put each card while creating them in the review.content and placed them beneath each other.

card = new Layer
  parent: reviews.content
  y: (i - 1) * (cardHemp + cardPemp)

Eventually to do something with these layers I pushed them in a new array called cards.

feed = $.ajax
  url: “https://sheetsu.com/apis/v1.0/8fea45d7"
  contentType: “application/json;”
  dataType: “json”
  jsonpCallback: “callback”
feed.error ->
  print “feed.statusText”
 
feed.done (data) ->
 
  # Create cards
  $.each data,(i,e) ->
    card = new Layer
    
    # Create all child layers as listed above
    
    cards.push(card)

A card is created for each object and placed in a PageComponent called “reviews”

Step 3.5: Animation

What I want to simulate is that whenever a new review comes in. The list should refresh but of course with a smooth animation.

Whenever a new review comes in three things happen:

• A new card appears by shifting its opacity to opaque, scales in and moves down.
• The other cards also move down.
• The last card scales down and its opacity shift to complete transparency and thereby disappears.

Bringing all the steps together resulted in this prototype.

Why Framer?

That’s most of all a personal preference. Besides design I love to code. It helps me understand how things work. Although I’m not creating production code, while making these prototypes I get a good grasp of how a developer would think.

That being said, this prototype really helped the developer to quickly build the final product. The developer could for example read the coffeescript file and copy the bezier-curves I used for animation.

And testing was really easy, we just to put the final product and the prototype. The end result was spot on!

This product was first published at the opening of our San Francisco store at 175 Maiden Ln. I would love to hear what you think about it!