UX Design Immersive — Project 2 Retro

Redesign E-Commerce Site UX in 2 Weeks, Using Various Tools and Methods: Sketch, OmniGraffle, Competitive Analysis, Contextual Research, Taxonomy, Information Architecture, Heuristics, and User Testing

In the week 2 and 3 of the General Assembly UX Design Immersive Course, the basics of taxonomy, information architecture, heuristics, web layouts, design process, competitive analysis, and contextual research were covered during these two weeks, which felt like two months.

I was given a brief to redesign the website for a well-known NYC retailer, Fishs Eddy. I’ve bought things from Fishs Eddy for the past 20 years, as I had a habit of stopping by the quirky store whenever I was nearby and to pick up some colorful bowls or buy some weird things on impulse, or to simply browse through the overpriced vintage pickings.

COMPETITIVE ANALYSIS

There were three personas (hypothetical target customers) provided for the redesign. We were to choose the one most suited to the project. I had never used the Fishs Eddy online store, so I wanted to look at some of its competitors where I have actually bought things online, such as Fab.com (mobile shopping app), CB2, West Elm, and Sur La Table. Urban Outfitters was provided as the persona’s favorite brand, and Anthropologie was mentioned by the owner of Fishs Eddy as a brand to aspire to, so I benchmarked both. Amazon was already considered a threat in the brief.

I printed out screenshots of all the above sites and whatever additional competitors I could think of (H&M interiors, Bed Bath & Beyond, IKEA, etc.), put them up on the wall, and began taking notes on how they categorized their dinnerware and kitchen products, as well as their strengths and weaknesses.

Considering the Fishs Eddy’s product line of vintage inspired items, witty copy, and actual vintage items, I chose the persona most suited to the project — Dexter, a 26 yr old scriptwriter who likes to entertain at home, is into retro chic, appreciates good copywriting, and buys things via mobile sites. He also prefers large product photos and fast checkout process. I created quadrants to map out the different brands and how they suited Dexter’s needs. I also noticed that Fishs Eddy needed a way to differentiate their real vintage offerings vs. replicas & vintage-inspired items.

We were asked to analyze the user flow of our chosen persona through the competitor sites and to design a user flow prototype around the chosen persona’s journey through the Fishs Eddy site. I chose Fab.com since it’s a good example of “mobile-first” e-commerce experience and has a very fast checkout. I also looked through CB2 for their review process, and West Elm for their visual product pages.

We were also given 90 products to use in taxonomy exercise (card sorting, site-map creation) and instructed to choose 10 additional products from the retailer to create a prototype of the new site. Since I felt like dinnerware and kitchen utensils were relatively easy to categorize, I wanted to apply the card-sorting technique to things that were very subjective and emotional, such as “Feelings” and “Look” to get a deeper insight into Fishs Eddy line of products.

SITEMAPPING AND WIREFRAMING

As we grappled with taxonomy and competitive analysis, we simultaneously learned to use tools such as Sketch and OmniGraffle to create sitemaps and wireframes.

OmniGraffle Sitemap
Sketch Wireframes

I also learned to rapidly turn these mid-fidelity wireframes into prototypes using InVision and Marvel.

IN VISION PROTOTYPE
MAVEL MOBILE PROTOTYPE

PROTOTYPES IN ACTION

DESKTOP PROTOTYPE:
https://invis.io/SR6UQZ78K#/149229237_0.1_LOHP_DESKTOP

MOBILE PROTOTYPE:
https://marvelapp.com/2e5hgc4

https://marvelapp.com/2e5hgc4

USER TESTING

As soon as the prototypes were ready, I took them on the road and asked some users for feedback. I was lucky to have found someone who is a vintage shopper as a user tester.

I initially had two sliders — A vintage slider with the years on the bar, and a price range slider.

Both fared badly in the test as users did not want to use sliders to specify the vintage years or the price range.

So I replaced them with checkboxes and pre-defined ranges instead. I also came up with the filter to specify “Real Vintage” vs. “Replicas” since Fishs Eddy product line is notoriously hard to distinguish between real and replica to a layperson, as some of them use the original molds.

NEXT STEPS

As this was a two-week student project, there wasn’t much I could do to raise the fidelity of the prototypes. I also didn’t have much time to iterate. Had this been a real life project, I would have liked to spend 3 months doing more iterations and user research with increasingly higher fidelity prototypes. It would also be nice to have gotten some AB tests going in production to get some statistical significance, although that should not be the be-all-end-all of decision making. I was glad to finally sit down and learn how to use Sketch and Omnigraffle, as well as to play around with InVision and Marvel. Once I broke out of Adobe creative suite mindset (although I still relied on them for color corrections and minor pixel pushing), these tools made so much more sense in rapidly designing mobile and web sites.

SEE FINAL PRESENTATION IN SLIDESHARE
http://www.slideshare.net/kamitera/general-assembly-ux-design-immersive-course-project-2

Thank you for reading!

Please feel free to comment & hit the tiny green heart thingy below.