Social Media Mall Abbot Kinney Blvd

The concept, a walk thru of the UI, and the backend used to manage it the social media of stores on Abbot Kinney Blvd.

Concept

Quick jump to: Concept - User Interface - Backend - Live Demo

Abbot Kinney Boulevard is an open air mall.

Instead of multiple levels of stores and restaurants inside a building, Abbot Kinney is a tree lined street that customers can walk down, window shop, buy a coffee or meal and meet up with friends. (Just like a mall).

The main goal of shopping malls is to bring customers together in one convenient location and to share in the concentrated FOOT traffic. Most stores don’t do the same for their online presence; a store will exist in a silo on the internet and there is no effort to bring customers together and share in the CLICK traffic with other stores.

Stores having online social media adjacent to each other is of benefit to all. Just as window shopping is a great pathway for a person to buy something, clicking on products online is a great pathway for a person to buy something.

Adjacent stores in the physcial world sharing foot traffic:

The stores in the online world sharing click traffic:

Links to buy a product at the store's website can be presented in the cards above.

Clicking on 'Info' button presents a new card with location, hours, website links, maps and more. Additional functionality, such as a link to OpenTable to make a reservation at a dinner restaurant, can be added:

The concept doesn’t have to only be applied to malls, it can be applied to the adjacent stores on Main St. found in any town or city.

In fact, the stores don’t have to be physically adjacent, they can be conceptually adjacent. For example, a sunglass store’s social media might benefit from being adjacent to a surf board store's social media, all while none of them being physically close to each other.

The people running the stores don’t have to do anything extra; no additional work, no maintenance is required other than what the stores already post to social media.

Just as high foot traffic areas are ideal to attract customers to new products, so it is with high online click traffic. A Netflix style carousel for browsing a collection of store's social media is a familiar way for customers to browse and "window shop" online.

The code I have written and on display at abbotkinneybl.veniceca90291.com can be applied to any mall or any group of stores.

User Interface

Quick jump to: Concept - User Interface - Backend - Live Demo

The Abbot Kinney user interface is a "carousel" style. Everyone that has browsed streaming movie collections will be familiar with it.

Here is Amazon Prime's version of it (Netflix's version, Hulu et al are all like this):

The Abbot Kinney layout is basically the same but with a few features to make browsing social media easier. Here is the Abbot Kinney version:

Here is a brief walk through of how it all works.

The right arrow button navigates to other stores in the category:

The next stores' social media is displayed after clicking on the right arrow button. Example of the next content:

Clicking on the reload button brings the display to the first item in the row and clicking on the left arrow displays the preceding three items.

Each store title has a downward arrow in the far right of the title row:

The downward arrow loads the most recent social media content for the store into the entire row. For example, clicking on the downward arrow in the Scotch & Soda title row loads Scotch & Soda's content:

Once the downward arrow is clicked, it becomes an upward arrow:

Clicking on the upward arrow in the Scoth & Soda row returns to displaying everyone in the category row.

Clicking on the info button displays info about the store like address, link to map, store hours and web links. Once displayed, clicking on the info button again returns the display to social media.

The first page of Abbot Kinney is a category selection page that enables browsing stores by certain categories or by "all":

Once you select the categories you want, hit Submit and only those selected categories will be displayed.

Everything works exactly the same on your phone. The "responsive" web design ensures the layout fits for a variety of screen sizes and swiping can be used to navigate instead of buttons: