Citizen Supply E-commerce Microsite

Artisan goods for dudes

Citizen Supply is Atlanta's marketplace for curated artisan goods. Their mission is to connect local artists and makers to consumers. They are looking to design an e-commerce microsite focused on attracting a very specific user with up to 100 highly curated products from their inventory. The goal is to work with the information architecture and interface design to produce a e-commerce microsite that satisfies the users need and conveys the brand’s image.

Goals
• satisfy needs of the user and goals of the business
• stay true to the brands mission, look + feel
• organize the site into logical, meaningful categories

Constraints: 2 week deadline, no website at the time

Methodology
card sorting, contextual research, online research, inventory review and taxonomy, guerrilla interviews and conversations, contextual observation/inquiry, usability testing, competitive analysis 

What I did
project management, analysis of inventory, brand research, sketching + wireframing, digital prototypes, interaction design, user flows, site maps, design, promotional video demo reel, presentation deck, desktop prototype, mobile site

Tools
Sketch, InVision, Marvel, InDesign, Photoshop, After Effects


Process

Research + Discovery

The journey began by outlining what the needs of my persona were, then finding a store within Ponce City Market that could align with his needs.

My persona is male, mid 20s to early 30s, he has an appreciation for unique items that have character and money is no issue. As I visited a variety of stores within Ponce City Market through the lens of my persona, I felt that one store in particular would be a perfect fit, problem was that at the time, they had no existing website to go off of.

The store I chose for my persona was Citizen Supply. Citizen Supply defines itself as Atlanta's marketplace for curated artisan goods whose mission is to connect local artists and makers to consumers.

"Our intent with the opening of Citizen Supply is to build a platform for makers and artisans to bring their products to market and interact with the people who buy them, creating a direct connection from the source to the end user and reinforcing the local entrepreneurial economy."

My initial research began on foot, as I entered the store for the first time I take note of all the interactions that would take place as a consumer entering the physical space. Upon first impression, the store feels very open, almost sparse, there is a quality about it that intentionally feels under designed. This makes sense as Citizen Supply mission is to serve as platform for the talents of its local artisans.
 

As an observer, I focused, photographed and collected a variety of items throughout the store to see if any patterns would emerge. I found contextual cues throughout the space that allude to this theme of citizenship: the wooden chairs, the vintage movable type board, the typewriter-esque typeface used on its business and gift cards, how collections are grouped in "stations", and the fact that 70% of their inventory comes from local talent. These experiences collectively, allowed me to get a sense of their brand personality and what they were trying to express. It also convinced me that this store would be a great contender to satisfy my users needs and unique aesthetic.

I also made sure to be sensitive to the in store interactions that would take place. For instance, how salespeople approach me. In my first experience in the store, I was approached by Katheryn. She asked me if it was first time there, and as I browsed different items, she made sure to tell me a small detail about each artisan whose item I was looking at as well as unique product details. Thereafter, she guided and referred me to other items that I might also like. In hindsight, it was these kinds of in-store interactions that served as a compass for the digital experience.


Persona

Screen Shot 2016-04-03 at 7.27.01 PM.png

 

Competitive Analysis

Of these 7 competitors, by and large the areas that most competitors were lacking in were the following: user reviews, clever copy, online presence, and lack of a mobile friendly site. Local competitors like Crafted Westside, the Indie Craft Experience and Paris and Ponce despite having an actual brick and mortar, all lacked an online store. The opposite was true for competitors such as Etsy, Scoutmob and Amazon Handmade who had solely an online presence. 

If Citizen Supply decides to incorporate all areas highlighted in blue in the above chart, they'll have a leg up on its competitors.

Card Sorting

Card Sort Results

By and large all testers had encountered some grey area in regards to separating the inventory according into style categories. There was too much interpretation and overlap between the styles. I needed to explore other meaningful categories for my persona to shop.

One of my testers Everett noted that he wanted the ability to be able to shop by artisan, given the store is comprised of items that come from a variety of different vendors. He went on further to say that the store wasn't really for people who wanted to look for any one particular item, but more for people that wanted to simply explore.

The feedback that I received during testing, allowed me to explore other routes from which to create meaningful categories. This coupled with revisiting the physical store layout informed my next iteration. 

I used the physical space and layout of the store as a compass for the look and feel of the microsite, setting it up as a series of curated collections where you had the option to explore by artisan or through collections that had some kind of narrative.


AN ANALOGOUS JOURNEY

Aside from having a cover page with store location and hours, and presence on social media, there was no real frame of reference for me to draw conclusions or patterns from online. I really needed to revisit the initial research and 300+ photos I had taken of the store and its items. 


I decided to do a brick and mortar site map of the store and all of its inventory. I really needed to take a deep dive and explore the relationship of these items in their physical space. The above graphic is an aerial view of the actual store layout.

Above are the individual artisans organized according to the station they are placed in the store. I felt it was important to see what artisans were grouped with who in order to get a sense of where and how they might be related in the digital space. For instance if someone bought an item from Brothers Artisnal Oil, they might also buy something from Golden Apothecary.


The vendors shaded above were all items that fit the personal tastes of my persona and fit the following criteria

• targeted to males
• has some kind of Retro or Vintage inspired aesthetic
• has details that make it different from other products of its kind on the market
• potential to be a part of greater story/style

Site map

User Flow

Preliminary roughs

 

Mobile Site Demo Reel

Created with Sketch, Marvel, Quicktime + After Effects. 

The final solution met all criteria based on the needs of the persona and is based on the experience you might have in the brick and mortar store. After several rounds of card sorting, and exploration of the physical space, resolve was met by creating 2 silos from which the user could shop through, one that leveraged a more free and discoverable approach through Collections and the other which offered a more traditional Sort by Artisan view. Once in either one of the views, users can additionally sort by item. 

Offering an About for each of the vendors came as I recounted my first experience in the store with Kathryn, the store associate that told me of small details about each artisan as I browsed. Thereafter, I was guided and referred to other items that may have been of interest to me. These initial in store interactions would later serve as inspiration for how the digital experience would play out.

Desktop/Tablet

Click here to view the clickable desktop prototype

Contact me for the full case study.