Forbidden Planet LandingForbidden Planet Landing

Forbidden Planet

Case Study: a Responsive Pop-up Webstore

Forbidden Planet, located in downtown New York City, is one of the largest sellers of comic books, graphic novels, science fiction, toys, and associated collectibles in the world. Aside from the physical store all of their goods are available for delivery worldwide via their responsive site.

For this case study 100 products were selected from their inventory to create a pop-up store for Spring 2017.

Landing Page Copy 3Landing Page Copy 3

It Always Begins With Research

After a visit to the brick and mortar location in the Village, a collection of 100 items were gathered to be showcased on the pop-up website. The store visit was also helped me to get a feel for who Forbidden Planet’s customers are and to develop a deeper understanding of the store’s brand personality.

Adventures in Information Architecture

After choosing a variety of products including, comics, graphic novels, apparel bags, and novelty items came the task of arranging them into categories for display on the pop-up site. I began with four rounds of open card sorting that resulted in a very similar grouping of 10–11 categories. After creating 8 major categories, one with 2 subcategories, I began 3 rounds of closed sorting, all of which ran successfully.

Site mapping seemed to be the next logical step as once our categories were settled on we had the basic skeleton of our website fleshed out.

Forbidden Planet Pop-up Site Map

Competitive Analysis

In order to further inform my design I looked into Forbidden Planet’s competitors' websites noting the features they had. I chose to look into Dreamland Comics, Things From Another World, and Impulse Creations: all ecommerce sites for brick and mortar stores based in the United States. I also looked into comic publisher’s sites such as Marvel, DC, and Dark Horse, all of which were very interactive but geared towards subscribing and publishing as opposed to retail sales.

Below is a competitive analysis chart created to give me some further insight going forward:

Clockwise from left: Dreamland Comics / Things From Another Planet / Impulse Creations / Forbidden Planet

Competitive Analysis Chart

Synthesis & Design

Meet Trung, a tech savvy single father in his mid 30’s and Forbidden Planet's Primary User Persona. With his hands full at work or at home, he favors anything that may save him hassle or money.

Taking cues from Trung's persona I attempted to focus on the folowing: descriptive categorization, suggestions based on their interest, new inventory updates, easy search, and easy shipping and returns, I had an idea of how to begin iterating and what features to prioritize.

Forbidden Planet Spring Pop-up Color Palette

Final Prototype

Once I was able to flesh out the user flow I began testing with my first iteration in Invision in a mobile format. Despite Trung’s preference for mobile I took into account the benefits of beginning with mobile to identify and prioritize your key features and then scale up accordingly. I also took into consideration the fact that a single father is busy and despite a preference for desktop, building a responsive site for this kind of user should be designed to be efficient on mobile, where ease of use is paramount.

The final prototype as depicted below was designed to help the user to both find a specific item as well as discover new items through large hero images linking users to new and promotional items, as opposed to simple images of popular superhero characters like the current Forbidden Planet home page.

FB Screens CopyFB Screens Copy

Next Steps

Should this pop up site be successful, several of its elements could be implemented into the main Forbidden Planet website, which in comparison to its closest competitors appears to be very user friendly, however could benefit from a rework. Additional pop up sites could also be implemented to promote and raise awareness of important launch dates for merchandise and popular characters.

View Next Project

[unex_ce_button id="content_01rc9reao" button_text_color="#434343" button_font="regular" button_font_size="72px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="" button_padding="" button_border_width="0px" button_border_color="" button_border_radius="0px" button_text_hover_color="#ff347b" button_text_spacing_hover="1px" button_bg_hover_color="#ffffff" button_border_hover_color="" button_link="http://claudegrant.com/ikea" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]Ikea[/ce_button]