A Nerd and His Wireframes

My client Forbidden Planet’s NYC location logo
You will be designing a clickable prototype around an online shopping experience. Your design should meet the goals of the users (represented by the 3 given personas), the goals of the business, and the goals of the brand. Your designs should be tested by users and follow best practices.
I’m nervous about the scale of the assignment
The thought of doing the presentation is still nerve racking to me
I hope this goes smoother than project 1

These were some of the thoughts I wrote down the first day we received the task for project 2. I was very nervous about the scale of the project. I was just getting used to the idea of working on mobile, but the idea of creating a design and flow for a desktop site made me question my ability to make something that big. I was up for the task and trusted the process and I was also sure that the topics we covered in class would be enough for me to work on my own.

On Site Visit:

The first thing I did once I found out I was assigned with Forbidden Planet, I made sure to do some general top of the line research. I looked the company up online and what items they were selling.

Once I had a general understanding the next thing I wanted to do was an on site visit.

site visit to Forbidden Planet

I really enjoyed this part. It also was helpful to get a feel of how they organize things in the store to help me decide on how to organize my website design. I noticed that there could be an infinite number of ways the items in the store could be organized, but I would have to figure that out once I got into my card sorting which was my next step.

Card Sorting:

The card sorting process was very daunting not only because of the idea of having to organize and categorize 100 items that everyone would agree on, but because of the time. I underestimated the amount of time each sorting would take place. Everyone was coming from different backgrounds of knowledge on the items for Forbidden Planet so there was a lot of confusion as well. I eventually had to look up some of the items so that I could explain it to the people sorting the cards to better inform their decision. I did however enjoy watching the way people think. It was cool to ask them their thought process on where the put each item and why.

Photos of Card Sorting process

During card sorting is also when I found out who my persona would be. I chose Daria as my persona since Forbidden Planet provides comic books and older items which would be considered retro-chic, one of Daria’s interests in her profile. She also helped me decide my 10 items to add to the 90 items provided. Since she is a fan of retr0-chic items, I made sure to include retro and stylish items to the list.

In the end I would say that card sorting was one of the points of research that took the most time to plan, execute, and analyze. I believe this was due to the process I was using. I was taking the responses from the people doing the card sorting and put them onto an excel doc where I then found the commonalities and sorted them from there. This process took a great amount of time. From there I was able to create my site map.

A clip of the excel doc I used to organize my 100 items

SITEMAP:

After I had my 100 items organized and categorized on my excel doc I was able to use omnigraffle to create my sitemap. I actually really enjoyed the omnigraffle lesson. I liked moving things around and organizing them on the program. I feel that some of my colleagues had a bit of a harder time using the program so I tried and offer help where I could. It felt really nice to know that I could offer assistance to those who had helped me in the previous project.

The site map I created for my Forbidden Planet micro site

Even though my excel doc with all 100 items on it took me a long time, it really did help me get through my site map much quicker. Moving forward I think I will stick to using omnigraffle when creating sitemaps and user flows. After I felt confident with my site map I moved my focus onto the competitive analysis.

COMPETITIVE ANALYSIS

My competitive analysis was very interesting for me. After doing some research on comic stores in nyc and establishing where such items would normally be bought,

I came up with the competitors The Strand, Midtown Comics, and Amazon.com. I also included Jim Hanley’s Comics and St. Marks Comics even though they did not have much of an online presence,

I wanted to have a handle on who was in the market similar to Forbidden Planet. I also made the competitive categories to be items in the store, the site capabilities and features, and the checkout process. I felt that this would give me a better handle on the competition and help answer the question of how to make the e-commerce experience the best it could be for the client. It also helped me figure out my key insights that the client had great inventory and a strong brand, but the e-commerce experience felt as though it could be updated and there could be more sections that provided users insight into what is new and noteworthy or that are hot items online, which is a feature that the competitors all had on their sites. After I checked out the competition and had my general idea for the site now that I had the site map, I was ready to create my user flow.

User Flow

The user flow lesson was a little confusing to me at first. I was unsure as to what the elements of the flow meant in terms of action that user made and the site pages their action brought them to. After speaking with a couple of class mates, I had a better understanding on how my flow would look and moved from having an unclear flow to a more organized and simple user experience. The user flow did not take me too much time in the process.

Photo of my rough draft user flow and my final product and checkout flow

CONTENT STRATEGY

The content strategy was a fun lesson in class. I am a big fan of aesthetic and simple designs so to see good and bad examples in class as well as how to best utilize those skills was very interesting and fun for me. I also have since then found myself exploring more blogs and design accounts on social media to see what other people are doing. It might be something worth looking into in the future if I have time to play with sketch more and expand on my skill set there.

My other favorite part of this process was looking at other online e-commerce sites that were doing a very good job at content strategy. I found myself favoring sites like Warby Parker, Dollar Shave Club, Squarespace, and Nike. I used those sites with a positive user experience to guide me when I was doing digital wire framing.

Sketching/Digital Sketching

For sketching I thought the best way to start was with designing and planning out the mobile sketches first. This way I would know what was necessary to have and what wasn’t as important so that I didn’t have to clutter the site for no reason.

Mobile sketches for client

The mobile sketches gave me a better idea on what I wanted and needed on the desktop design. There were some features that made it to the mobile and not the desktop version however and vice versa including the hamburger menu and the ability to change the view of the category page.

Once I had the mobile sketches taken care of I checked in with a classmate and their technique was to sketch out the original desktop site to get a feel on how it looked and where some edits could be made.

Whiteboard sketch of current client desktop site

After sketching out the current site, I was able to move forward and start planning and sketching my version of the micro site. I also want to note that during this whole process I always try to have Daria in mind. I would often have the printout of her bio and my notes for her out on the desk or table for reference when making edits to my sketches. This helped remind me to add elements like the ability to write and leave product reviews, give multiple product photos so she knows what she’s getting, provide good and smart copy that reflected the brand, the social media element, and the simple and rewarding checkout process.

Sketches for desktop Home, mobile, and product pages

I had a lot of fun with the category page designs. I looked on sites for smaller startups to see how they showed their category pages as well as combining features from sites like amazon along with nike and other e-commerce sites. I also didn’t want to steer too far away from the brand image so I couldn’t get as creative as I wish I could’ve but it was still a fun and enjoyable process.

I was getting pressed for time at this point and had to hammer out my digital sketches so I could get started on my user testing. I didn’t have time to sketch out my checkout page so I had to go off of inspiration from online and create it on the sketch program.

Mobile digital wireframes

The digital sketching ended up taking me much longer than I had anticipated. It was very easy however to jump from my drawn sketches to the program sketch. I made sure to spend a good amount of time and detail in my drawn sketches for that reason and I thought the payoff was pretty good. I was hoping to have a bit of a higher fidelity prototype but did not have the time to do so.

Desktop digital wireframe homepage

I also thought a story would help with the narration of Daria but I was nervous about my ability to draw. I figured it was better to have something that I could present and have to give them a better idea on my persona and her lifestyle and buying habits. I felt as long as I was there to give explanation to the story I tried to create, it would be enough to get the message across to my audience, the client.

My decent sketch attempt at a story line for Daria’s buying experience

User Testing & Next Steps:

I liked how my desktop and mobile wireframes turned out. The design was simple but navigational and the flow seemed straightforward. This thought quickly dissipated during user testing. It turned out that there were some elements that could have been edited to be a bit more clear to the user. I am always surprised to find out that what I thought would make sense, is not as intuitive as I think.

For next steps I would have edited the layout to make it a tad more organized in terms of staying consistent with design elements (text size, image sizes, etc). User testing also proved that my checkout page felt “rushed” and crowded the way I put the entire checkout process on one page. Given the opportunity, these would be some of the adjustments I would make to my design.

The Presentation

I was not proud of my presentation during project 1 so I made sure to spend much more time rehearsing my timing. My goal was to make it through my entire presentation without being clapped off. It was a very stressful morning but after rehearsing my timing and talking points 6–7 times I felt more comfortable with myself. I feel as though during the presentation I spoke too quickly and tried to remind myself to slow down but I can’t be too sure how that was perceived. I hope to feel more comfortable speaking in front of the class and clients in the future.

Final Key Takeaways

This project really threw me for a loop. I always felt behind everyone else in the class during my design process. This caused me to have to push myself to move forward and not spend so much time on certain aspects like card sorting and competitive research and hand sketching. I did however do a better job at documenting my process and keeping track of my time. I enjoyed looking at other e-commerce sites and seeing what cool and innovative things they were doing to make the checkout process more pleasurable to the user. I also found myself jumping around a lot with my research. Even when I was on the hand sketching portion of the project I found myself doing research on the side to see how other sites were doing with their sites. I also discovered that my design process is very agile in that I jump around and move quickly during different phases in order to keep up with the deliverable timeline. I also learned to not depend on technology to work when you need it to. My computer has been acting up and caused some significant delays toward the end of the project and provided much more stress than I cared for. I have gotten very diligent with saving my progress.