iphone home.001.jpeg

BACKGROUND

 

THE PROBLEM AND TASK

With an immense inventory of products, Forbidden Planet needed a restructuring of the information architecture and interface to allow users to find the products they are searching for. 

After being provided with 3 personas and an inventory of 90 products (with 10 additional products), we were to utilize UX best practices to further develop the business research and respond with a website design catering to the needs of the user and client. Best practices included user flows, navigation sitemap, card sorting, contextual inquiry, and heuristic evaluations. The insights from these methods laid the foundation for the development of wireframes and digital prototypes.

subway.jpeg
 

THEPROCESS

 

PROCESS

How I Chalked It Up

I utilized a formula that included defining a method, analyzing the finding, and implementing a feature. I repeated this formula 5 times to produce a structural and visual redesign of the Forbidden Planet web presence, resulting in a low-fidelity prototype. Let's get started.

 

process.png
 

FORMULAONE

 
HOME page analysis

HOME page analysis

Method

I dove into analyzing the three provided personas. What I was interested in was the favorite brands of the personas. I then wanted to understand what made these brands click on a digital platform.

Could there be a common denominator that could be applied to Forbidden Planet?

 

Finding

I noticed that the websites had a similar graphic feel. They were all light and airy. This was especially prominent in the global navigation, where the text stands isolated as opposed to blocked in.

 
 
 

Feature

This finding resulted in driving the graphic style of the proposed website. A white background and airy text prevent a bold or overly-saturated image. There is a balance of negative and positive space to define each category.

Home Page.png

FORMULATWO

 

Method

Next, I needed to learn more about the current market. I identified two competitive companies (Midtown Comics + ThinkGeek) and one comparative company (Dicks Sporting Goods). I did a heuristic analysis using the Abbey Covert Model to understand what works and what doesn’t work with the digital presence of each of these companies.

Finding

When I was analyzing the “Usefulness” of each company’s website, I was drawn to a common denominator within the global navigation bar. Each company had either sale or clearance category in red amidst the global navigation. It was what immediately caught my eye on the home page, and it was what I was always tempted to press.

process 2 finding.png
 

Feature

This resulted in the addition of a category to the global navigation what would attract the user. It would contrast with the other navigation options through the use of a color mask. Ideally, this would become a feature that would increase the use of the site and further increase online sales.

Home Page.png
 

What would be that feature?

 

FORMULATHREE

 

Method

To answer that question, I decided to perform a contextual inquiry — I had to go to the actual store. I walked around the store trying to understand the culture of the company. What was the experience in the store? Could the experience of the physical store be applicable to the digital store?

 

Finding

Exploration. People were there to explore and peruse the aisles. They were not necessarily there for an intended purchase. It was more of an activity to see what they stumbled across.

 

forbidden planet color.png
 

Feature

Discovery feature in the global navigation. This would be a dropdown feature in which users select their interests (from different characters to brands to media), and then products are generated based on these interests. Think of one of those recipe apps in which you select your available ingredients in your kitchen, and then a recipe is churned out based on those selections. Only instead of ingredients, were talking about comics. This feature would then mirror the physical experience on a digital platform.

Home Page Discover Dropdown.png
 

FORMULAFOUR

 
Persona provided by general assembly

Persona provided by general assembly

Method

A return to user research. I returned to the user personas to see what more I could learn about my users. What stands out with the user? How can I design for this user?

 

Finding

Given Daria’s background as a writer, it was no surprise that she “has a keen eye for sharp copy”. It is also noted that we can serve her best through “characterful copywriting”. This is a finding that stood out, and became the next task for me to solve.

 

 

Feature

It can be challenging to try and be creative with copy, especially when you’re referring to the copy in the global navigation. However, I had an idea. Could I replace a noun with a verb?

 
 

What I decided to do was create the global navigation options of read, play, wear, collect, watch, and discover. As opposed to literature, toys, clothing, etc. I thought this copy may also play into the light-hearted and playful nature of Forbidden Planet.

global nav.png
 

FORMULAFIVE

 

Method

To test if this copy was successful, I performed a closed card sort with a user. I placed header index cards with the appropriate copy, and instructed the user to organize the 100 products respectively.

 

Finding

The copy was a success. The user placed the products under each category without difficulty. He even stated that the verbs were helpful because they could be more broad than the nouns and encompass more.

closed card sort

closed card sort

Card sort results

Card sort results

 

Feature

I chose to use verbs within my global navigation. However, this was just the first level of IA. I continued the next levels of IA with nouns to help the options become more specific as the user progressed.

Information Architecture.jpg
 

THEPROTOTYPE

 
 
 
 
discovery flow

discovery flow

 
checkout flow

checkout flow