Forbidden Planet — A Retrospective
And so I progressed onto my second project of the UXDI at General Assembly. Our task — to develop a redesign of an E-Commerce site (with a 100 product remit). In my case this meant taking on the mysterious entity Forbidden Planet. Though I was aware of its existence I had never ventured into one of their stores or thought about using their website. In this vein it was a blank slate for me to start on and was a challenge I was looking forward to tackling.
I was excited about getting too use and refine the techniques I had learned in P1 and also adding some new skills to my repertoire. The pre-project optimism was high and I was unaware of the obstacles I would face. I hope to detail in this entry the story of how I got to my final redesign, including areas in which I think I did well and the aspects of the process I found difficult (and hope to improve).
As I mentioned above, I was a not well-informed in regard to the operations of Forbidden Planet, aside from my knowledge of their main output, comic books and figurines. I knew that the company had been around for a number of years as I had walked past their stores numerous times in the UK when I was a lot younger. I had a very specific image of the clientele that the store catered to as well — mainly die-hard comic book enthusiasts who live and breathe the content on offer.
I knew that my preconceptions about Forbidden Planet however might not be correct! So my fellow UXers and I took it upon ourselves to visit the store and find out.
During our visit some of my assumptions were validated but a very important one was proved wrong. While the majority of products were comic books and action figures, I was extremely interested to see a number of parents at the store buying presents for their children (contrary to my idea of the lone die-hard comic fan demographic). This would be invaluable in the choice of persona I made with which to focus my user-centered redesign.
The cohort was provided with three potential personas to use for their project. In my case the choice was simple, I would be redesigning for Trung, a 38 year old father looking to purchase a gift for his 12 year old daughter, which they could play together. I had seen the demographic was physically visiting the stores for this exact purpose so it seemed logical that Forbidden Planet could attempt to take advantage of this online with a pop-up shop.
Trung had numerous preferences and pain points and I would seek to address as many of these as possible, but the main aspects I would focus my redesign on would be as follows: a quick purchase cycle (to limit the amount of steps a user needed to pick and purchase a product), customer reviews, ratings and social media connectivity (to provide the social proof that Trung desires with his purchases), as well as a means of taking advantage of his proclivity for popular brands and products.
In order to get a sense of the competitive environment in which Forbidden Planet was operating I carried out a number of competitive analyses. It was interesting to see that, with regard to the target of my redesign, there were direct competitors (other comic book memorabilia purveyors) as well as indirect competitors who sold the same kind of games as forbidden planet, among a huge array of other products. The larger e-commerce sites that I looked into were Amazon and Target, while the direct competitors were Midtown Comics, mycomicshop.com and Jim Hanley’s Universe.
I carried out the following analyses: a feature comparison, an element comparison, a layout comparison, a user flow comparison (on certain sites) and a market position analysis. There were numerous insights that could be preened from these investigations and potential small avenues with witch my Forbidden Planet pop up could seek to improve. However, the main takeaways that I took from the studies were that FP needed to tailor its site to cater to a larger portion of the market (to compete with the larger E-Commerce sites — Market Comparison), that the site should have limited options in order to stay within the user’s cognitive load (making decision making far easier — Element Comparison), and that the steps involved in selecting and purchasing a product should be minimized (User-Flow comparison).
By looking at Trung’s persona details and the competitive environment in which Forbidden Planet is competing, I was able to formulate a problem statement which I believe summarized the needs and goals of the user and business.
“Users like Trung are simply too busy to sift through specialist sites in order to find the unique products they have to offer, and tend towards larger E-Commerce sites such as Amazon. Forbidden Planet could capture a portion of these users with a sleek, easy to use and socially connected redesign”.
To begin the process of designing a Forbidden Planet pop-up, I would need to establish an information architecture to organize the 100 products. To do this I would carry out a card-sorting exercise. This would involve an open card sort, providing a number of testers with the opportunity to categorise the 100 products at their own will, then closed card sorts — repeating the process but prescribing the categories myself (informed from the open sort results). I would aim to carry out numerous card sorts, and I was able to establish my IA having carried out 4 open card sorts and 2 closed card sorts.
During the open card sorts I discovered what knowledge each user had of the type of products on offer as well as Forbidden Planet itself. This helped me to see any insights into their decisions as well as the questions I asked the testers throughout. While there were general groups that were commonly used in some of the card sorts, users had difficulty placing some products into specific categories mainly due to the uncommon nature of the products (I had to prompt the testers various times as to what some products actually were). One tester also created extremely particular categories for each product. While this was confusing at first, I actually found it extremely helpful when creating my subcategories of the main categories (provided by the broader titles more commonly used during the sorts).
“I have no idea what this product is.”
“This definitely falls into accessories.”
“Is this a game or an accessory?”
I chose my categories and subcategories and proceeded to my closed card sorts. While the first tester found it quite easy to locate the products in the groups I had created, there were a number of products that were left in limbo without a category. I discussed potential additional categories (Game Accessories) and alterations (Watches/Jewelry), and was able to come up with a new potential IA. When I tested this on my second closed card sorter, they had little problem placing the products in these categories. Any lingering doubts were again centered on an unfamiliarity with the products themselves. From this I created my provisional sitemap, which I would continue to look back on if problems arose.
Sketching / Wireframing
Once I had established my IA and the main aims of my redesign I went about exploring some potential options for my site. I began with low fidelity hand-drawn sketches playing around with the location of the offers, product images other content. I tried to reference some of Trung’s favorite websites and brands (Apple, Netflix and Banana Republic) when sketching to see what kind of format’s he would be used to. I also prioritized the prevalence of New Release and Hot Brands images to cater to his need for up to date product information and popular brands. Then I selected a few options and hand drew some higher fidelity sketches.
Once I had drawn these I showed them to 2 potential users and solicited their feedback — they gave me some good suggestions about additional features and the aesthetic and I applied these to my digitized wireframes (created using the program Sketch) which would be used in prototyping. I carried out the same process for a potential mobile version, but did not proceed to prototyping.
I applied my digitized wireframes (depicting the process by which the user would select and buy a product) to the Invision platform, created my hot-spots and set about testing on users. I carried out 3 usability tests in total. I would ask the user a number of questions about their knowledge of the products and Forbidden Planet, and then explained to them the scenario in which they would use the prototype. In this case they would be buying a board game — Ghostbusters — for their 12 year old daughter, they would need to find and buy the product.
I found that they followed the flow of the site very efficiently and managed to complete the process quickly, validating my user flow design. However, they all pointed out a number of common complaints with the aesthetic of my design and the location of content. The usability tests highlighted that the header and side tab made the page extremely cluttered, drawing the users attention away from the important aspect — the products. The manner in which I had designed the payment/shipping page also caused a lot of confusion and I was able to preen information for potential alternatives from their comments. The users also found the way I displayed Trung’s billing info left them wondering whether they needed to fill it out or not.
“Not a fan!”
“Do I need to fill out the billing info or is it done?!”
I iterated on my design using the information from my usability tests and made the following alterations:
- I changed the header so that the Trung info bar was smaller and at the very top of the page, and decreased the size of the main navigation buttons.
- I redesigned the payments and shipping page so that the tab system to make it easier for users to understand.
- I displayed the billing information in non-boxed form and added an ‘edit info’ button.
- I also removed some unnecessary copy from the product information content.
Readers can view my updated prototype here:
This prototype brought to you by InVisionAppinvis.io
The next steps in my redesign process would be as follows:
- Short term — Addition of filters options for brands and ages, try new checkout layouts, add pop-up to branding to ensure user knows where they are, add status/footer to mobile wireframes.
- Long term — Find more users of Trung’s background and predilection to test the prototypes on.
- Personal Development — Would seek to improve my wireframes in terms of CRAP.
I really enjoyed coming up with this redesign for Forbidden Planet’s pop-up shop. Though it was by no means perfect it felt like I feel proud to have come through this project without descending to the bottom of my emotional curve. However, there are a number of areas I was disappointed with and felt frustrated at.
I felt that the synthesis of competitive analysis was difficult and though I managed to hone in on some specific areas, I feel like the use of a strengths weaknesses and opportunities diagram as well as an illustration of the goals of the user and business and how I could help these overlap would have been extremely helpful. I would also have loved to use a storyboard to better depict the journey of my user and help frame my arguments for the redesign. Additionally I will definitely seek to improve my understanding and application of CRAP when designing by page layouts.
My main issue currently is my understanding of my own design process. I see where it is going but I still don’t think I have fully grasped how mine translates and can be explained. To put it better, I feel like I am still following the route given to me by our (wonderful) instructors and need to get a better feel for my personal style. Finally, I was frustrated by my presentation. Though I got my message across I still feel my delivery and story can be better represented.
That said, I feel I am a far more prepared than I had imagined I would be at this stage and have taken each step as it comes. I can’t wait for P3!