SlideShare a Scribd company logo
design examples
Gordon Cohen
digital tools used:
omnigraffle keynote axure
1. Research
2. Current Information Architecture & Navigation
3. Design and Iteration
4. Conclusions
Goals and Objectives
We’re looking to redesign the information architecture and
optimize our web site for both the desktop, tablet and mobile
environments.
PROJECT OBJECTIVES
• Re-conceptualize the navigation and information
architecture of our web site (sorting methods for products,
homepage layout, separation of different elements).
• Optimize the homepage and menu to display properly on
desktop, tablet and mobile phones.
• Create prototypes of the desktop and mobile versions of
lowepro.com
from the client:
• competitive analysis
• task analysis with users
• card sorting
We identified user needs, prioritized
features, developed information
architecture, navigation schema and
user flows, made and tested
responsive prototypes.
This was created as a 2 week project
with one partner.
Research
User Profiles
We did some card sorting to
understand how people would
expect to find information and if
they understood the
terminology.
Came up with 2 user profiles
that had the mindset of:
• I know what I want and
quickly navigate to the
product
• i’m unsure and I want to
explore
Design scenarios for these 2
use-cases
In our review and user testing we found that it was confusing that menus would take people
to different types of pages. Users felt like they weren't getting all the information and were
confused when taken to a page they didn't expect.
Some links would take people to e-commerce store pages and some to marketing material.
Current Information Architecture & Navigation
This existing sitemap is too complex,
especially for mobile
Proposed Sitemap
Proposed Information Architecture & Navigation
• Make an obvious distinction between
e-commerce and marketing pages
• Follows updated sitemap
Cross Platform Design
• Carrying over the same principles to the mobile platform
• Consistent design and brand across platforms
Design Process
A challenge on mobile was smaller
real estate and we decided to
prioritize the first use case of going
directly to the product
Navigation Prototypes built in keynote
http://marvl.in/jf7eehttp://marvl.in/262e40

More Related Content

Similar to DesignExamplesGordonCohen-lowres

Developing a framework of design principles for single page websites and thei...
Developing a framework of design principles for single page websites and thei...Developing a framework of design principles for single page websites and thei...
Developing a framework of design principles for single page websites and thei...
World IA Day Copenhagen
 
Chapter 2 | Website design & development
Chapter 2  | Website design & developmentChapter 2  | Website design & development
Chapter 2 | Website design & development
MikaStuttaford
 
Chapter 2 | Website design & development - pf
Chapter 2  | Website design & development - pfChapter 2  | Website design & development - pf
Chapter 2 | Website design & development - pf
MikaStuttaford
 
Internet Retailer Web Design 2014 - Product Page
Internet Retailer Web Design 2014 - Product PageInternet Retailer Web Design 2014 - Product Page
Internet Retailer Web Design 2014 - Product Page
sweiskircher
 
What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?
JamesParker406701
 
User centered design process - Measurefest Presentation
User centered design process - Measurefest PresentationUser centered design process - Measurefest Presentation
User centered design process - Measurefest Presentation
flashbender
 
Digital Marketing Course Week 3: Digital Assets
Digital Marketing Course Week 3: Digital AssetsDigital Marketing Course Week 3: Digital Assets
Digital Marketing Course Week 3: Digital Assets
Ayca Turhan
 
Importance of Mobile App Architecture For Mobile App Development
Importance of Mobile App Architecture For Mobile App DevelopmentImportance of Mobile App Architecture For Mobile App Development
Importance of Mobile App Architecture For Mobile App Development
Helios Solutions
 
T2L3.doc
T2L3.docT2L3.doc
T2L3.docbutest
 
A user experience designer Tina Lee's portfolio
A user experience designer Tina Lee's portfolio A user experience designer Tina Lee's portfolio
A user experience designer Tina Lee's portfolio
Tina Lee
 
Case Study 2 - Portfolio Project Final - Google UX Design Certificate
Case Study 2 - Portfolio Project Final - Google UX Design CertificateCase Study 2 - Portfolio Project Final - Google UX Design Certificate
Case Study 2 - Portfolio Project Final - Google UX Design Certificate
AbelKCS
 
TechOut_Generalized Workflow
TechOut_Generalized WorkflowTechOut_Generalized Workflow
TechOut_Generalized WorkflowKabeed Mansur
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdf
TECHCENTRAL3
 
Objective Digital Case Studies 2012
Objective Digital Case Studies 2012Objective Digital Case Studies 2012
Objective Digital Case Studies 2012Objective Experience
 
Free presentation template for web design projects
Free presentation template for web design projectsFree presentation template for web design projects
Free presentation template for web design projects
Thomas Talavera Karslake
 
planning-and-costing2.pptx
planning-and-costing2.pptxplanning-and-costing2.pptx
planning-and-costing2.pptx
SaqlainYaqub1
 
A Case for Outside-In Design
A Case for Outside-In DesignA Case for Outside-In Design
A Case for Outside-In Design
Sandro Mancuso
 
Portfolio 1 pages-deleted
Portfolio 1 pages-deletedPortfolio 1 pages-deleted
Portfolio 1 pages-deleted
PriyankaMalik37
 

Similar to DesignExamplesGordonCohen-lowres (20)

Developing a framework of design principles for single page websites and thei...
Developing a framework of design principles for single page websites and thei...Developing a framework of design principles for single page websites and thei...
Developing a framework of design principles for single page websites and thei...
 
MotivityLabs Design Process
MotivityLabs Design ProcessMotivityLabs Design Process
MotivityLabs Design Process
 
Chapter 2 | Website design & development
Chapter 2  | Website design & developmentChapter 2  | Website design & development
Chapter 2 | Website design & development
 
Chapter 2 | Website design & development - pf
Chapter 2  | Website design & development - pfChapter 2  | Website design & development - pf
Chapter 2 | Website design & development - pf
 
Internet Retailer Web Design 2014 - Product Page
Internet Retailer Web Design 2014 - Product PageInternet Retailer Web Design 2014 - Product Page
Internet Retailer Web Design 2014 - Product Page
 
What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?
 
User centered design process - Measurefest Presentation
User centered design process - Measurefest PresentationUser centered design process - Measurefest Presentation
User centered design process - Measurefest Presentation
 
4D Life Cycle
4D Life Cycle4D Life Cycle
4D Life Cycle
 
Digital Marketing Course Week 3: Digital Assets
Digital Marketing Course Week 3: Digital AssetsDigital Marketing Course Week 3: Digital Assets
Digital Marketing Course Week 3: Digital Assets
 
Importance of Mobile App Architecture For Mobile App Development
Importance of Mobile App Architecture For Mobile App DevelopmentImportance of Mobile App Architecture For Mobile App Development
Importance of Mobile App Architecture For Mobile App Development
 
T2L3.doc
T2L3.docT2L3.doc
T2L3.doc
 
A user experience designer Tina Lee's portfolio
A user experience designer Tina Lee's portfolio A user experience designer Tina Lee's portfolio
A user experience designer Tina Lee's portfolio
 
Case Study 2 - Portfolio Project Final - Google UX Design Certificate
Case Study 2 - Portfolio Project Final - Google UX Design CertificateCase Study 2 - Portfolio Project Final - Google UX Design Certificate
Case Study 2 - Portfolio Project Final - Google UX Design Certificate
 
TechOut_Generalized Workflow
TechOut_Generalized WorkflowTechOut_Generalized Workflow
TechOut_Generalized Workflow
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdf
 
Objective Digital Case Studies 2012
Objective Digital Case Studies 2012Objective Digital Case Studies 2012
Objective Digital Case Studies 2012
 
Free presentation template for web design projects
Free presentation template for web design projectsFree presentation template for web design projects
Free presentation template for web design projects
 
planning-and-costing2.pptx
planning-and-costing2.pptxplanning-and-costing2.pptx
planning-and-costing2.pptx
 
A Case for Outside-In Design
A Case for Outside-In DesignA Case for Outside-In Design
A Case for Outside-In Design
 
Portfolio 1 pages-deleted
Portfolio 1 pages-deletedPortfolio 1 pages-deleted
Portfolio 1 pages-deleted
 

DesignExamplesGordonCohen-lowres

  • 1. design examples Gordon Cohen digital tools used: omnigraffle keynote axure
  • 2. 1. Research 2. Current Information Architecture & Navigation 3. Design and Iteration 4. Conclusions
  • 3. Goals and Objectives We’re looking to redesign the information architecture and optimize our web site for both the desktop, tablet and mobile environments. PROJECT OBJECTIVES • Re-conceptualize the navigation and information architecture of our web site (sorting methods for products, homepage layout, separation of different elements). • Optimize the homepage and menu to display properly on desktop, tablet and mobile phones. • Create prototypes of the desktop and mobile versions of lowepro.com from the client:
  • 4. • competitive analysis • task analysis with users • card sorting We identified user needs, prioritized features, developed information architecture, navigation schema and user flows, made and tested responsive prototypes. This was created as a 2 week project with one partner. Research
  • 5. User Profiles We did some card sorting to understand how people would expect to find information and if they understood the terminology. Came up with 2 user profiles that had the mindset of: • I know what I want and quickly navigate to the product • i’m unsure and I want to explore Design scenarios for these 2 use-cases
  • 6. In our review and user testing we found that it was confusing that menus would take people to different types of pages. Users felt like they weren't getting all the information and were confused when taken to a page they didn't expect. Some links would take people to e-commerce store pages and some to marketing material. Current Information Architecture & Navigation
  • 7. This existing sitemap is too complex, especially for mobile Proposed Sitemap
  • 8. Proposed Information Architecture & Navigation • Make an obvious distinction between e-commerce and marketing pages • Follows updated sitemap
  • 9. Cross Platform Design • Carrying over the same principles to the mobile platform • Consistent design and brand across platforms
  • 10. Design Process A challenge on mobile was smaller real estate and we decided to prioritize the first use case of going directly to the product
  • 11. Navigation Prototypes built in keynote http://marvl.in/jf7eehttp://marvl.in/262e40