Retrospective: Designing IA and Content Strategy for an E-Commerce Site

My Role

For this project, my role as a UX designer was to create information architecture and design a prototype of an e-commerce website for Forbidden Plant, a large seller of comics books, toys, and science fiction products in New York. At first I was somewhat intimidated by this project, mainly because I have very little knowledge of comic books and that specific culture. When I was given the 100 products with which I had to work, I was unsure what some of them even were! However it dawned on me that this would be an objective way to view the project without any of my bias. I could see myself having a harder time separating myself from the products if I was given The Strand since I’m an avid reader and know the bookstore well. With Forbidden Planet, I truly had to see what the user wanted and only use my research to inform my decisions (as any UX designer should do).

Objective

I was given a main persona who would influence the design of the site. My persona was Trung, a 38 year old single dad who cares about quality, price, and cool purchases. I read through the description of Trung and extracted the main things that he would be looking for in a site: Trust & Relationship, New Products, Easy Returns, and Product Ratings and Reviews. This list acted as a guideline for my design and throughout the process I made sure to refer back to this list to ensure Trung’s needs were being met.

Research

The first step of my research for this project was going to the physical Forbidden Planet store and performing a contextual inquiry. This was very helpful to get an understanding of the brand, feel of the store, and clietele. I saw there was a huge variety of products and noticed there was a large browsing culture. This confirmed the need for a featured or “What’s New” section so people are easily able to find products they might like. I also noticed it was a dark atmosphere, almost like you are on another planet, so I ensured to include this in my prototype design by having the background color black.

The next part of my research was a competive analysis of three companies that are similar to Forbidden Planet. I chose Midtown Comics, Newbury Comics, and Chameleon Comics. These three stores are competitors and all have online stores. I created user flows to get an idea of what the process was for product discovery, adding an item to the cart, and adding an item to the cart. Next, I compared these companies by performing a heuristic analysis with quanitative and qualitative measures (see the chart below). I decided to sort my analysis by Findability, Clarity, and Credibility — I believe these three factors are the core of what is important to my main persona Trung. I provided a written analysis and gave each critrea a 0–5 ranking (5 being the best). Midtown Comics came out on top for finability and clarity — I decided to use them as a model for designing the struture in my prototype. Chameleon Comics had a clearly marked contact section that was valuable. However, I was surprised to see that none of these sites had easy returns or the option to review a product. I know this is something that Trung is looking for in a site, so by including these features in my prototype, Forbidden Planet would become a standout from it’s competitors.

The next step of the research process was card sorting. This was an extremely valuable step for me considering I did not know much about the types of products I had. I performed four open card sorts with people who had at least a basic knowledge of the products. I saw trends pop up for what people thought should be the main level categories. Right away I noticed that the problem products were collectibles. Some people thought they should go under Toys, while others said Home Decor would be more appropriate since a collectible is not necessairly a toy.

After synthesizing all of my data and thinking of a global solution, I decided to merge toys and collectibles into one main category: “Toys / Collectibles.” I then performed a few closed card sorts to validate my decision. Everyone was able to successfully place the products so I decided to stick with those six categories as the main level: Books, Games, Apparel, Home Decor, Movies, and Toys/Collectibles. Next, I created a site map to organize the data and clearly see the information architecture.

Design

After completing my research and synthesizing my data, I was ready to start designing. I came up with five design goals that I wanted incorporate based on my main persona and the research.

With these in mind, I started to put my ideas on paper then transfer them into a modular design in Omnigraffle.

Wireframing in Sketch was the next step to get a more detailed design. I included the global and sidebar navigation, the product name, ratings, reviews, etc. I really enjoyed this step since I started to see all my ideas and research come to life. Even though some of the details took while to get right in Sketch (considering I’m still a novice) I had fun and quickly learned a lot of shortcuts and ways to efficiently create my design.

Once I had about ten wireframes of my prototype, enough for the user to find a product, add it to the cart, pay, and checkout, I was ready to user test. I uploaded the wireframes to Invision and created a clickable prototype. I also loved the option to hover over a section, like a button on the global navigation. It’s a small touch that makes it feel like a realisitc website.

Given my time constraints I was only able to test this protoype on two people. I received both positive and negative feedback.

The users liked the “What’s New” feature, the rating system, and they were able to understand the global navigation. However, the users disliked the sidebar navigation saying it “feels awkward on the righthand side” and thought that some of the buttons were too big. Finally, one of the users mentioned the Order Summary was very empty and didn’t include enough information during checkout. All of this feedback was very useful — I wish I could’ve done a few more user tests to confirm what exactly the users were looking for, but in the mean time this was enough to positively impact the overall user expereince of my prototype.

Below is my iterated design of the payment page and product page. On the payment screen I included more information in the Order Summary to include the shipping information and the total price. This change also would add to Trung’s want of trust with a company and his concern with price — he can clearly see everything laid out concerning what he is paying for the products. On the product page, I moved the sidebar to the lefthand side so improve the familiarity and accessibility — the users are used to this layout. I also used this opportunity to change the sidebar from grey to black to be more consistent with the brand of being on another planet.

I imported the updated designs to Invision and created the final version of the clickable prototype for Forbidden Planet:

The last step of the design process was to create user flows going through my newly designed prototype. The three user flows I created were for product discovery, the checkout process, and adding a product to the cart.

Next Steps

At this point I feel confident in the usability and brand of my protoype. With more time, I would love to design more features to be included in the interactive prototype such as writing a review, rating a product, and returning a product. I would also want to do more user testing to get the most efficient experience for all users. Finally, I would like to create high-fidelity wireframes with detailed colors and features to explore more ways to invoke Forbidden Planet’s brand.

What I Learned

This project was a great test of time management and figuring out the best way to approach and interpret the research. I enjoyed learning and applying different research techniques such as heuristic analysis and user flows. I learned to use Omnigraffle, Sketch, and Invision and feel like I have a good grasp of how to efficiently use these programs for different parts of the design process. Compared to P1, I believe I improved my time management since I now have a better understanding of how much time it actually takes to complete some of these tasks. I was able to practice my presentation many times so that I could confidently present my findings and design within the 8-minute timeframe. Most of all, I discovered that I love seeing my research and ideas come to life in wireframes and prototypes. It is my favorite part of the process and doesn’t feel like “work” — I wish I had more time to design and include even more pages in the prototype.

What I Could Improve On

After completing my presentation, I realized that I did not include any information about the second and tertiary user personas. There are definitely parts of my design that would serve the needs of Daria and Roland, but I failed to include this in my presentation and provide an explanation of how their needs were met. In the future, I will be sure to include this information so every aspect and benefit of my design is accounted for in my presentation.

Some other valuable content that I should have included are annotated wireframes. In my presentation, I decided to explain the features of my wireframe and iterations out loud, but I believe it would’ve been more valuable if I had annotated the wireframes so the client could see exactly where these features were. The annotations could also be more detailed than the basic explanations that I provided of my wireframes and prototypes. For my next project, I will include these annotations so the client has the option to read and see them instead of relying on myself to be present and explain everything.

Overall, this project has been a great learning experience and I am excited keep on discovering and improving my UX process.