This document summarizes the redesign process of Fishs Eddy's website. The process involved extensive user research including competitor analyses, user interviews, card sorting, and usability testing of prototypes. Key steps included defining product goals, researching competitors and users, creating site maps and wireframes, prototyping, and testing the prototype with users. Testing revealed the new site map improved navigation and reduced checkout steps. Next steps include additional user testing, refining wireframes, and exploring a mobile app.
Julie Grundy gives an overview of user experience Design, why it's important, guiding principles, UX research overview, and tactics used by UX professionals. November 2015.
Basic introduction to (mainly Nielsen) usability principles for a non UX audience. Content oriented with examples of success stories (both public sector complex sites) and their impact on objectives.
Marketing and Advertising: web design, web information architecture, usabilit...David Engelby
Marketing and Advertising: Focusing on web communication and web design via the C.R.A.P. framework, usability testing (heuristics, Think Aloud Test, card sorting). Includes an assignment for students. Validated slides with source links.
By David Engelby 2013
Intro talk on lean unmoderated user testing given at General Assembly, Los Angeles in spring 2013. Covers basics, benefits & limitations, when to test, what to test, and a case study.
Not Just a Pretty Face: Combining Form and Function for Maximum ConversionsWP Engine
The design, UX and ecommerce experts at agency Digital River, who will walk you through steps you can take to optimize the flow within your website and maximize conversions, showing examples and common mistakes made.
To view the on-demand webinar, register now at: https://hs.wpengine.com/webinar-form-function-maximum-conversions
UXD - A quick overview on what you need to work with your UX team Guilherme Rodrigues
The UXD team came up with a presentation, covering some of the point we have in our day to day work. Information architects, designers and front-end participated to build up this doc in order to practice and be more familiar with UCD process, agile project management, UX research and so on.
Have a look on the presentation and help us to build it up.
This is a quick overview of my design process which I can hardly call my own, because most of it is based on the work done by various experts in the field. I have compiled this to make it easier for anyone to get a quick overview of an end to end research to development lifecycle.
Julie Grundy gives an overview of user experience Design, why it's important, guiding principles, UX research overview, and tactics used by UX professionals. November 2015.
Basic introduction to (mainly Nielsen) usability principles for a non UX audience. Content oriented with examples of success stories (both public sector complex sites) and their impact on objectives.
Marketing and Advertising: web design, web information architecture, usabilit...David Engelby
Marketing and Advertising: Focusing on web communication and web design via the C.R.A.P. framework, usability testing (heuristics, Think Aloud Test, card sorting). Includes an assignment for students. Validated slides with source links.
By David Engelby 2013
Intro talk on lean unmoderated user testing given at General Assembly, Los Angeles in spring 2013. Covers basics, benefits & limitations, when to test, what to test, and a case study.
Not Just a Pretty Face: Combining Form and Function for Maximum ConversionsWP Engine
The design, UX and ecommerce experts at agency Digital River, who will walk you through steps you can take to optimize the flow within your website and maximize conversions, showing examples and common mistakes made.
To view the on-demand webinar, register now at: https://hs.wpengine.com/webinar-form-function-maximum-conversions
UXD - A quick overview on what you need to work with your UX team Guilherme Rodrigues
The UXD team came up with a presentation, covering some of the point we have in our day to day work. Information architects, designers and front-end participated to build up this doc in order to practice and be more familiar with UCD process, agile project management, UX research and so on.
Have a look on the presentation and help us to build it up.
This is a quick overview of my design process which I can hardly call my own, because most of it is based on the work done by various experts in the field. I have compiled this to make it easier for anyone to get a quick overview of an end to end research to development lifecycle.
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!