SlideShare a Scribd company logo
Redesign of Fishs Eddy’s Website
T h e R e t r o s p e c t i v e
H e c t o r N a n d e z 0 7 . 1 7 . 2 9 1 5
Project overview
Processes and tools
For project two, we were tasked to resdesign Fishs Eddy’s website and create a
working prototype of our design. It was quite an exciting journey to come into this
project not knowing anything and come out with eight newly minted skills.
In the beginning of our assignment I inspected the website for about fifteen min-
utes. I went to each page in the website and tested the search-ability of ten prod-
ucts. From this preliminary analysis I concluded that Fishs Eddy had a robust web-
site layout design and it was going to take a lot to find some flaws.
As we progressed, we were taught the following methods of analysis in order to
deeply understand and find what is fundamentally off-putting in web design best
practice principles and how we can improve upon the existing design through the
used of site mapping and prototyping.
The Processes that were used are as follows:
• Market Positioning Research
• Competition Feature Comparison
• Competition Heuristics Evaluation
• Competition Layout Analysis
• Competition Product User Flows
• Original vs Redesign User Flow analysis
• User Interviews
• Contextual Inquiry
• Card Sorting
• Site Mapping
The Tools that were used are as follows:
• Omnigraffle
• Adobe Illustrator
• Sketch
• Invision
• Keynote
• Photoshop
1
My first step was a product definition stage, as I explained in the beginning, I did
preliminary research and analyzed Fishs Eddy website and took notes of my initial
findings. I kicked off my plan, based on the rubric guideline given to us and studies
my personas so I could start identifying friends that resembled that persona and
interview them.
The Design process
Step one
2
Define
Build
& Deploy
Analysis
&
Iterate
Ideate
Prototype
User
test
Product Definition
Moving into research, I refined my assumptions and filled in some of the blanks. The
quality of this phase was based on complexity of the existing website, timing,
resources, level of existing knowledge, and limited access to information from the
executives at Fishs Eddy.
Research Processes used:
A. Competitive and Market Analyses
During my research I found that Fishs Eddy didn’t have any immediate competitors
around them but they did have major eCommerce competition and I built my
research around these two companies;
Crate & Barrel and Williams & Sonoma
During my market research I began to realized how broad of a market they serve.
Fishs Eddy does not specialize in any single market and they have products that
appeal to every demographic. This explains why their store is so cluttered and why
they have so much inventory. Fishs Eddy has been in operation for over 18 yrs and
their brand image of having everything you for your household needs at any price
will not change. This is when I realized that Fishs Eddy needs to focus on having an
uncanny organization like no other website, to balance out their store layout, which
3
Step two
User Research
B. Feature Comparison
A feature comparison was conducted between Fishs Eddy and it’s competitors in
order to understand what features it has that are working well and how it stacks up
against its competitors. This analysis works well in helping identify new or unneces-
sary features.
During my anaylsis I realized all other websites had a wordy landing page menu and
extremely long drop down menus that take up the front banner when the user is navi-
gating through it. This presented an opportunity for a feature elimination discovery.
C. Heuristics Analysis
Heuristic evaluation involves having a small set of evaluators examine the interface
and judge its compliance with recognized Abboy Covert Heuristics usability
principles.
During my analysis, I chose three improtant UI features ad based on how many
Heuristic elements applied I gave it a score accdoringly. There are seven heuristics
and a score of one would be bad and a score of seven would signify excellent
usability.
4
Step two
B. Layout Analysis
I Conducted a layout design analysis for Fishs Eddy and it’s competitors. This helped
ensure that I create a website look and feel that not only looks good but hits the
markin our area of focus which is efficiency and organization. Some of the questions
I asked included.
Analysis and test the search, menu, submenu, log in page, shopping cart of all
three sites.
What do you want a visitor to do on the site? List the sequence of events you
would like the visitor to go through.
How will you define the success of the site?
Are there any competitor sites that you would like to use as a benchmark? What
are they doing well on their site?
Are there any sites that have a look and feel that is attractive to your target audi-
ence? List them.
How efficient is it to add products to the shopping cart?
Will there be a site search? If so, what are the fields and how much space will it
occupy?
5
Step two
6
Step three
Contextual inquiry is a semi-structured interview method to obtain information about the
context of use, where users are first asked a set of standard questions and then
observed and questioned while they work in their own environments. During this phase I
used the follow tools:
• User Interviews
• In store observations
• Card Sorting
Card sorting is a simple technique in user experience design where a group of sub-
ject experts or "users", however inexperienced with design, are guided to generate a
category tree or folksonomy. It is a useful approach for designing information archi-
tecture, workflows, menu structure, or web site navigation paths.
Context Inquiry and Implementation
7
Step Four
Implementation
During implementation, I took all the data I had gathered and created a series of
site maps and wireframes.
Site Maps
Home
Dinnerware CookingwareServewareCo ee & TeaGlassware Utensils
Footer
Fancy Plates
Simple Plates
Fancy Bowls
Simple Bowls
Wine
Cups
Gifts
Mugs Spoons
Forks
Knives
Napkins
Salad
Spice
Dispensers
Pots
Pans
Knives
UtensilsDessert
First Iteration Third Iteration
Sixth Iteration
Now that I had a site map created, I was ready to create a medium fidelity wirerame,
which would later be protyped using Invision App. The following are basic wireframes
for the website.
8
Step five
Protyping
Now that I had the website prototyped, I was ready to go into usability testing where I
made a scenario and had my user testers sit down and try to accomplish the scenario.
The scenario:
“You are hosting a wine and cheese party for a friend and you realize you are ten
reserve wine glasses short. Visit Fishs Eddy website, add ten wine glasses to your shop-
ping cart,”
Results:
After testing on five users, I was able to conclude that the usability of my prototype
scores high on the heuristics scale and that the site mape proved easy to navigate and
cut one step of the check out process out of the user flow as demonstrated below.
9
Step Six
Usability Testing
It was a great pleasure to work on this project and learn so mcuh abou the household
items industry.
Five things I took away:
• You are not the user
• Main users are cannot be identified through assumption
or observations alone. Research, research, research.
• You could be the best user research there is but
if you cannot communicate your findings effectively, you
have done nothing.
• Visual design is not everything.
• One of the biggest User Experience research skills on can
have is the ability to document a process properly.
Next Steps:
• Conduct more user testing
• Reiterate on existing wireframes; create high fidelity versions.
• Research the benefits of creating a Fishs Eddy App
10
Conclusion
Take Aways and Next Steps
Thank you!

More Related Content

Similar to Retrospective Project two_Hector_Nandez

User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
Julie Grundy
 
Official Usability Project
Official Usability ProjectOfficial Usability Project
Official Usability Project
Maria Gabriela
 
Usability 101
Usability 101Usability 101
Usability 101
Nick Leigh
 
Prototyping for web and mobile workshop
Prototyping for web and mobile workshopPrototyping for web and mobile workshop
Prototyping for web and mobile workshopSimon Phillips
 
5 Second Test
5 Second Test5 Second Test
5 Second Test
Sandeep Jagtap
 
Marketing and Advertising: web design, web information architecture, usabilit...
Marketing and Advertising: web design, web information architecture, usabilit...Marketing and Advertising: web design, web information architecture, usabilit...
Marketing and Advertising: web design, web information architecture, usabilit...
David Engelby
 
Lean User Testing Intro
Lean User Testing IntroLean User Testing Intro
Lean User Testing Intro
Jessica DuVerneay
 
How to Create User-Centric Websites.docx
How to Create User-Centric Websites.docxHow to Create User-Centric Websites.docx
How to Create User-Centric Websites.docx
Zinavo Pvt Ltd
 
Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?
Johan Verhaegen
 
Official Usability Project
Official Usability ProjectOfficial Usability Project
Official Usability Project
Maria Gabriela
 
Andrea Roberts UX Portfolio
Andrea Roberts UX PortfolioAndrea Roberts UX Portfolio
Andrea Roberts UX Portfolio
Andrea Roberts
 
Not Just a Pretty Face: Combining Form and Function for Maximum Conversions
Not Just a Pretty Face: Combining Form and Function for Maximum ConversionsNot Just a Pretty Face: Combining Form and Function for Maximum Conversions
Not Just a Pretty Face: Combining Form and Function for Maximum Conversions
WP Engine
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team
Guilherme Rodrigues
 
G1_Product-Design-G1_Product-Design-G1_PD
G1_Product-Design-G1_Product-Design-G1_PDG1_Product-Design-G1_Product-Design-G1_PD
G1_Product-Design-G1_Product-Design-G1_PD
2020107940
 
Design process
Design processDesign process
Design process
Sudeep Dasgupta
 
25 march introducing design methods
25 march introducing design methods25 march introducing design methods
25 march introducing design methods
Abhishek Sagar
 
25 march introducing design methods
25 march introducing design methods25 march introducing design methods
25 march introducing design methodsAbhishek Sagar
 

Similar to Retrospective Project two_Hector_Nandez (20)

User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
UsabilityReport
UsabilityReportUsabilityReport
UsabilityReport
 
Official Usability Project
Official Usability ProjectOfficial Usability Project
Official Usability Project
 
Usability 101
Usability 101Usability 101
Usability 101
 
Prototyping for web and mobile workshop
Prototyping for web and mobile workshopPrototyping for web and mobile workshop
Prototyping for web and mobile workshop
 
5 Second Test
5 Second Test5 Second Test
5 Second Test
 
Marketing and Advertising: web design, web information architecture, usabilit...
Marketing and Advertising: web design, web information architecture, usabilit...Marketing and Advertising: web design, web information architecture, usabilit...
Marketing and Advertising: web design, web information architecture, usabilit...
 
Lean User Testing Intro
Lean User Testing IntroLean User Testing Intro
Lean User Testing Intro
 
How to Create User-Centric Websites.docx
How to Create User-Centric Websites.docxHow to Create User-Centric Websites.docx
How to Create User-Centric Websites.docx
 
Portfolio
PortfolioPortfolio
Portfolio
 
Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?Website Usability & User Experience: Veel bezoekers, weinig klanten?
Website Usability & User Experience: Veel bezoekers, weinig klanten?
 
Official Usability Project
Official Usability ProjectOfficial Usability Project
Official Usability Project
 
Andrea Roberts UX Portfolio
Andrea Roberts UX PortfolioAndrea Roberts UX Portfolio
Andrea Roberts UX Portfolio
 
Not Just a Pretty Face: Combining Form and Function for Maximum Conversions
Not Just a Pretty Face: Combining Form and Function for Maximum ConversionsNot Just a Pretty Face: Combining Form and Function for Maximum Conversions
Not Just a Pretty Face: Combining Form and Function for Maximum Conversions
 
UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team UXD - A quick overview on what you need to work with your UX team
UXD - A quick overview on what you need to work with your UX team
 
G1_Product-Design-G1_Product-Design-G1_PD
G1_Product-Design-G1_Product-Design-G1_PDG1_Product-Design-G1_Product-Design-G1_PD
G1_Product-Design-G1_Product-Design-G1_PD
 
Case Studies
Case StudiesCase Studies
Case Studies
 
Design process
Design processDesign process
Design process
 
25 march introducing design methods
25 march introducing design methods25 march introducing design methods
25 march introducing design methods
 
25 march introducing design methods
25 march introducing design methods25 march introducing design methods
25 march introducing design methods
 

Retrospective Project two_Hector_Nandez

  • 1. Redesign of Fishs Eddy’s Website T h e R e t r o s p e c t i v e H e c t o r N a n d e z 0 7 . 1 7 . 2 9 1 5
  • 2. Project overview Processes and tools For project two, we were tasked to resdesign Fishs Eddy’s website and create a working prototype of our design. It was quite an exciting journey to come into this project not knowing anything and come out with eight newly minted skills. In the beginning of our assignment I inspected the website for about fifteen min- utes. I went to each page in the website and tested the search-ability of ten prod- ucts. From this preliminary analysis I concluded that Fishs Eddy had a robust web- site layout design and it was going to take a lot to find some flaws. As we progressed, we were taught the following methods of analysis in order to deeply understand and find what is fundamentally off-putting in web design best practice principles and how we can improve upon the existing design through the used of site mapping and prototyping. The Processes that were used are as follows: • Market Positioning Research • Competition Feature Comparison • Competition Heuristics Evaluation • Competition Layout Analysis • Competition Product User Flows • Original vs Redesign User Flow analysis • User Interviews • Contextual Inquiry • Card Sorting • Site Mapping The Tools that were used are as follows: • Omnigraffle • Adobe Illustrator • Sketch • Invision • Keynote • Photoshop 1
  • 3. My first step was a product definition stage, as I explained in the beginning, I did preliminary research and analyzed Fishs Eddy website and took notes of my initial findings. I kicked off my plan, based on the rubric guideline given to us and studies my personas so I could start identifying friends that resembled that persona and interview them. The Design process Step one 2 Define Build & Deploy Analysis & Iterate Ideate Prototype User test Product Definition
  • 4. Moving into research, I refined my assumptions and filled in some of the blanks. The quality of this phase was based on complexity of the existing website, timing, resources, level of existing knowledge, and limited access to information from the executives at Fishs Eddy. Research Processes used: A. Competitive and Market Analyses During my research I found that Fishs Eddy didn’t have any immediate competitors around them but they did have major eCommerce competition and I built my research around these two companies; Crate & Barrel and Williams & Sonoma During my market research I began to realized how broad of a market they serve. Fishs Eddy does not specialize in any single market and they have products that appeal to every demographic. This explains why their store is so cluttered and why they have so much inventory. Fishs Eddy has been in operation for over 18 yrs and their brand image of having everything you for your household needs at any price will not change. This is when I realized that Fishs Eddy needs to focus on having an uncanny organization like no other website, to balance out their store layout, which 3 Step two User Research
  • 5. B. Feature Comparison A feature comparison was conducted between Fishs Eddy and it’s competitors in order to understand what features it has that are working well and how it stacks up against its competitors. This analysis works well in helping identify new or unneces- sary features. During my anaylsis I realized all other websites had a wordy landing page menu and extremely long drop down menus that take up the front banner when the user is navi- gating through it. This presented an opportunity for a feature elimination discovery. C. Heuristics Analysis Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized Abboy Covert Heuristics usability principles. During my analysis, I chose three improtant UI features ad based on how many Heuristic elements applied I gave it a score accdoringly. There are seven heuristics and a score of one would be bad and a score of seven would signify excellent usability. 4 Step two
  • 6. B. Layout Analysis I Conducted a layout design analysis for Fishs Eddy and it’s competitors. This helped ensure that I create a website look and feel that not only looks good but hits the markin our area of focus which is efficiency and organization. Some of the questions I asked included. Analysis and test the search, menu, submenu, log in page, shopping cart of all three sites. What do you want a visitor to do on the site? List the sequence of events you would like the visitor to go through. How will you define the success of the site? Are there any competitor sites that you would like to use as a benchmark? What are they doing well on their site? Are there any sites that have a look and feel that is attractive to your target audi- ence? List them. How efficient is it to add products to the shopping cart? Will there be a site search? If so, what are the fields and how much space will it occupy? 5 Step two
  • 7. 6 Step three Contextual inquiry is a semi-structured interview method to obtain information about the context of use, where users are first asked a set of standard questions and then observed and questioned while they work in their own environments. During this phase I used the follow tools: • User Interviews • In store observations • Card Sorting Card sorting is a simple technique in user experience design where a group of sub- ject experts or "users", however inexperienced with design, are guided to generate a category tree or folksonomy. It is a useful approach for designing information archi- tecture, workflows, menu structure, or web site navigation paths. Context Inquiry and Implementation
  • 8. 7 Step Four Implementation During implementation, I took all the data I had gathered and created a series of site maps and wireframes. Site Maps Home Dinnerware CookingwareServewareCo ee & TeaGlassware Utensils Footer Fancy Plates Simple Plates Fancy Bowls Simple Bowls Wine Cups Gifts Mugs Spoons Forks Knives Napkins Salad Spice Dispensers Pots Pans Knives UtensilsDessert First Iteration Third Iteration Sixth Iteration
  • 9. Now that I had a site map created, I was ready to create a medium fidelity wirerame, which would later be protyped using Invision App. The following are basic wireframes for the website. 8 Step five Protyping
  • 10. Now that I had the website prototyped, I was ready to go into usability testing where I made a scenario and had my user testers sit down and try to accomplish the scenario. The scenario: “You are hosting a wine and cheese party for a friend and you realize you are ten reserve wine glasses short. Visit Fishs Eddy website, add ten wine glasses to your shop- ping cart,” Results: After testing on five users, I was able to conclude that the usability of my prototype scores high on the heuristics scale and that the site mape proved easy to navigate and cut one step of the check out process out of the user flow as demonstrated below. 9 Step Six Usability Testing
  • 11. It was a great pleasure to work on this project and learn so mcuh abou the household items industry. Five things I took away: • You are not the user • Main users are cannot be identified through assumption or observations alone. Research, research, research. • You could be the best user research there is but if you cannot communicate your findings effectively, you have done nothing. • Visual design is not everything. • One of the biggest User Experience research skills on can have is the ability to document a process properly. Next Steps: • Conduct more user testing • Reiterate on existing wireframes; create high fidelity versions. • Research the benefits of creating a Fishs Eddy App 10 Conclusion Take Aways and Next Steps Thank you!