Project 2 at General Assembly

E-commerce website

Our second challenge as UX Design Immersive at General Assembly was to create a new E-commerce website based on a reduced inventory list that was given to us from four existing retail online stores. We also had to choose among three fictitious user’s personas. Our design should meet the goals of one of the users persona with one of the retail brand. Forbidden Planet was my retailer brand.

The Information Architecture

I started to use the information by analyzing the reduce inventory list through the Open Card Sort process, I asked three fellows to sort 90 item cards into categories using their own way. Apparently they seemed to know how to organize into categories almost all geek items, which surprised me a lot, because I was not familiarized to the nerd world. I started to get annoyed with this project immediately.

Open Card Sort by Brandon Wolfson

The Competitive Analyses

The second step was to analyze competitive on line stores to understand the market. I select three similar geek retails site: Thinkgeek, Tfaw.com and J!nx. After some research on each site using the criteria that I thought were important to be analyzed. I could then create this table and from that I started to understand better the geek e-commerce market, but it was not enough. At this point, I still had a big question mark on my mind. I needed to build my content strategy, so I went to visit the local store at 832 Broadway, New York.

Forbidden Planet Store Research

Forbidden Planet front at 832 Broadway, New York

It was a pretty amusing visit! I was amazed by the local store and to see users of different ages, dads and sons, mothers with their children, students, teenagers and also elderly people into the store, reading comics, looking around and enjoying their time with that big amount of geek stuff. I took the opportunity to talk with an employee about the best sellers and he told me that it was certainly action figures and comics, manly when a new movie, a TV series, or a new game is released in the market and shown in the media, the sales grow. He specifically talked about Dr Who items, this tv series was completely unknown few years ago, and now it is a huge bestseller. After that, things started to be clearer in my mind and I finally could create a strategy content to my project.

The second week

The second week began with classes on two excellent technical tools that greatly helped me in the project: OmniGraffle and Sketch. OmniGraffle was great to draw the user flow and map site while Sketch was perfect to design the site itself. Both are easy to use and to learn, which helped a lot in the whole process. But all design started in a draft and it is a nice exercise to put down on paper my ideas before digitalize them in these awesome programs.

Pin ups feedback

Another good exercise we did during the process as UX Design in General Assembly is the Pin ups day. When all the students pin up their project stage through the class walls and we are encourage to offer feedback to each other. What a great opportunity to review ideas and see the others. The amount of time saved is huge and the learning is better.

I changed most of my previous ideas based on these feedback and move on to the next steps, more confident and conscious of the entire web site design process.

I simplified my User Flow and my site map aligned with the persona scenario I had created to the entire project. After all, we are supposed to tell a story during our presentation at the end of the week.

The Responsive Design

We also must create responsive design to a mobile version, what was indeed an excellent opportunity to understand how simple and intuitive our site navigation should be. When you try to think in a mobile application, the first thing is less is more. It has to be fast and easy to use, and because of that they asked us to design the mobile version first. And then go back to the desktop site version, it became as simple as the mobile one.

I tried to create a simple navigation bar based on that preceding open card sort exercise with one single advertise banner from the Forbidden Planet site. In the mobile version, the navigation bar was adjusted to a column bar showing all the categories and subcategories. We should allow customers to shop by major brands, so I put this option in each category.

The category page was created to show all the inventory items available to my scenario story, when my persona want to find one specifically action figure to present to one of her close friend, whose birthday was coming up. That fictitious friend is a amateur comedian and fan of David Cross. My chosen persona named Daria, is looking for this unique gift. I also create another search option in the mobile version, with big pictures or small ones.

The product detail page should have specific items such as to allow customers to read and write reviews of a product, allow for multiple images per product and must allow customers to contact the business. I also put a column with related products and in the mobile version I keep both option of read and write a review as a drag window in order to save space.

InVision Prototype

The last step was create a usable prototype of the project, into the InVision, another great tool that was introduced to us during this project 2. After that, we just need to test our prototype among the classmates. The feedback were again extremely helpful to all learning precess as UX Design. I tried to incorporate almost all new ideas and suggestions I have received. Here you can find my prototype link and explore for yourself. https://invis.io/Q38EHBGFV

I can not wait to the next project!

Show your support

Clapping shows how much you appreciated Paulo Márcio Moreira’s story.