Project 2: E-Commerce Design & IA
I do all of my shopping online, so I was super stoked about designing an e-commerce experience from scratch!
Design a clickable prototype around Fishs Eddy’s online shopping experience.
The design should meet the goals of all 3 personas, the goals of the business, and the goals of the brand.
Resources provided: 3 personas and 90 products.
Time to complete: 2 weeks.
BUSINESS & COMPETITIVE ANALYSIS
I have never heard of Fishs Eddy until this project, so the first thing I did was Google it. I found some news articles about the founders and read about their history and how they started the shop. Their business is based off selling edgy and unique kitchen and dinnerware. I’ll go into a bit more detail about the company later in the blog.
I wasn’t able to find any any direct competitors, however, that didn’t mean there weren’t any competitors at all. Any retailer who sold kitchen and dinnerware should be considered one (from small mom and pop shops to large department stores). For the purpose of this competitive analysis, I chose 3 e-commerce sites that had a similar style/vibe to Fishs Eddy because they sold products unique to their brand: Urban Outfitters, Etsy, and Hayneedle.
The first thing I compared were the features that were important to the 3 personas. Under the “How we can serve” section of the persona descriptions, I grabbed the features and placed them into a comparison chart.
Through my comparison chart, I was able to identify some of the industry’s best practices (i.e. product reviews and product recommendations are an absolute must!) and areas that competitors were lagging in. For example, Hayneedle was the only competitor that provided a customer loyalty program. Etsy didn’t have a very flexible return policy because everything really depended on individual sellers. These were the areas that Fishs Eddy needed to focus on to gain a competitive advantage.
COMPETITIVE USER FLOWS
To take it one step further, I generated user flows to compare the length of the checkout process.
The Goal: Purchase 1 coffee mug
The Assumption: I already have an account and I am already logged in.
Based on the user flow chart above, I was able to see that Etsy had the most efficient checkout process. It took a total of 11 clicks from Homepage to Checkout to own a coffee mug. This was definitely something to keep in mind when designing Fishs Eddy’s checkout process.
While generating my user flows, I was able to evaluate the heuristics of my competitors as well.
I found all 3 websites fairly easy to navigate. The language wasn’t confusing and all 3 provided options to contact their customer service if I had any trouble. A few differences were:
- Etsy didn’t leave bread crumbs, so I had no clue where I was on the site.
- For Hayneedle, it was actually easier to find items through their navigation rather than the search bar. This could be due to the amount of products they offer.
For the purpose of buying a coffee mug, all 3 websites were useful in helping me complete this goal.
FISHS EDDY BRAND RESEARCH
Through browsing Fishs Eddy’s story page, contextual inquiry, and reading Yelp reviews, I learned a lot about the brand.
I discovered Fishs Eddy had a lot of artistic, unique, eclectic kitchen & dinnerware (from retro to vintage) that were great for gift giving. Most of their items were grouped by theme. The store felt like a museum for dish/dining enthusiasts, except, items were purchasable. A few keywords used to describe Fishs Eddy’s brand were:
- Very New York
- Great customer service
- Got every kind of “ware” out there!
This sounded like an amazing store experience, and I needed to figure out how we can replicate this same experience online! To do that, I needed to identify who the target users were, and how Fishs Eddy can cater to their needs.
The client provided 3 personas to work with. I needed to choose one primary user to focus on when ideating my design, while also keeping the other two in mind.
It was inevitable for me to choose Dexter as my primary persona because everything about him screamed Fishs Eddy! He loved to cook and entertain. He was a big fan of retro-chic. He was all about authenticity, exclusivity, and loved to share New York’s unique culture. He loved brands that expressed their personality through words. All of which is what the Fishs Eddy’s brand was all about! How could I have chosen anyone else?
Competitive/business analysis completed? Check. Identified primary persona? Check. Now I need to strategize with what kind of information is going on the website!
100 PRODUCT INVENTORY LIST
In addition to the 90 products provided at the beginning of the project, I was also tasked to add an additional 10 products to the inventory list. Dexter was the primary persona being focused on here, so it seemed to make the most sense to add items that would target him. He was the type of user that will generate the most revenue for the company.
Key words from Dexter’s bio that I focused on are:
- Cook & entertain
- Retro items
- Sharp Copy
- NYC Culture
Using the above key words as a reference, these were the items I chose:
OPEN CARD SORT
Yay! I finally had 100 products in my inventory list, but now I needed to figure out how to categorize them. I started by conducting 4 open card sorts to get a general feel of how other users categorized these items without any direction.
- Users sorted by product type.
- Users sorted by activity.
- Users sorted by material.
- Users used a combination of the above.
CLOSED CARD SORT
Once I got a bit more information on how users categorized items, I was able to move on to closed card sorts. For my first closed card sort, I attempted to stick to a “verb” theme for my main categories and added some subcategories underneath based on what I believed to be an easy way for users to organize them.
- User found “verb” categories to be confusing.
- User felt stressed because most items fit in multiple categories and didn’t know where to place the item under.
- User focused more on subcategories and completely forgot about the main categories.
- User felt there were too many items going under one category.
- User suggested a complete re-organization of categories.
Iteration # 1:
For the first card sort, I was too focused on being consistent with the “verb” theme than with how users perceived these categories. So for my first iteration, I completely removed the verbs, and changed it to be more consistent with the user’s main categories from the first open card sort and how the competitors categorized their kitchen and dinnerware departments.
I grouped items by similarity and came up with a new set of categories for each color. I also tried to simplify by not including any subcategories.
- User felt “Cookware” and “Bakeware” should be combined because most of the items in both categories could be used interchangeably.
- User mentioned the “Serveware” category (a very important one for kitchen shoppers) was completely missing.
- User felt subcategories would make it easier for users to identify where an item belonged.
Iteration # 2:
I’ve implemented the revisions the user mentioned above and conducted 2 more closed card sorts.
- Users felt the categories were understandable.
- Users mentioned there were still a few miscellaneous items they were unsure of because they didn’t know what those items were.
The feedback for changes were minimal so I knew I had a solid set of categories and I needed to move on to the next step!
My next step was to create a sitemap with Omnigraffle. This was my first time using Omnigraffle, so there was a bit of a struggle at first. However, once I got the hang of it, I was mapping things like a true pro.
My site map consisted of 3 sections — Utilities, Navigation, and Footer.
The utilities consisted of search, login, and checkout. This was a global element that users would see on every page. Depending on whether the user was logged in or not, the “Login” would change to “My Account”.
The navigation consisted of main categories (global element), subcategories, product pages, etc. The color code for the navigation sections were:
- White: Main Categories
- Light Gray: Subcategories
- Dark Gray: Product Pages
I also added a New Arrivals and Sale section to the main navigation because they had those sections in the physical store as well. It only made sense!
The footer section consisted of tools you needed if you wanted to learn about the company, policies, legal terms, contact options, etc. (Also a global element).
Once I figured out what my global elements were, I sketched out my wireframes on pen and paper. From there, I digitized them using an application called Sketch. The main pages looked something like this:
It was my first time wireframing, so I thought the website looked pretty awesome. However, without user feedback, I couldn’t be sure. Through Invision, I prototyped my wireframes and in total, tested 3 users.
There were some positives:
“The whole process felt very familiar and easy to navigate.”
“Very efficient checkout process. The less clicks, the better!”
There were also some suggestions that lead to iterations:
In addition to user tests, I also generated user flows for all 3 personas based on how they would walk through the website.
- Dexter purchased his item through the navigation route, because he was tech savvy and knew what he wanted.
- Edda appreciated the recommendations based off of past purchases and purchased an item through the recommended aisle from the personalized homepage.
- John wanted to purchase something trending and cool for his daughter, so he purchased an item from the top picks section from the personalized homepage.
- Test my final prototype. Due to time constraints, I haven’t had a chance to user test it yet. It would be great to get feedback.
- Have Fishs Eddy’s owners test the prototype. It would be great to get feedback on whether or not this design fits their business goals.
- Make the website mobile/tablet compatible. For users like Dexter, most of their purchases are made at the convenience of their mobile phones.