NickSchaden
Pocket

Gucci: site redesign

Redesigning fashion e-commerce and branding for a global powerhouse.

In 2009, Gucci began an ambitious redesign of their e-commerce and branding flagship at gucci.com. The scope was for roughly six months of design followed by six months of development and launch in 13 countries (including e-commerce, translations, different product offerings) simultaneously.

My work was split roughly 60/40 between development and design. My formalized, primary role during the redesign was as front end web lead. I oversaw three other internal front end developers and small development features by an external agency. I also generated a style guide to improve efficiency between designers and developers and worked heavily on UX initiatives for “World of Gucci”, the branding side of gucci.com.

Core development

  • Developed gucci.com’s branding and e-commerce content in HTML, CSS and JavaScript.
  • Established scope and guidelines for redesign’s “future forward” front end architecture (HTML5, Jquery based JavaScript, CSS3 for animations, Cufon for font deployment)
  • Set formalized coding guidelines for front end team and external agency work.
front end presentation
Slides from a front end tech presentation given to Gucci tech heads and management.
front end presentation
coding standards doc
Redesign coding guidelines for fellow developers.

World of Gucci

  • Worked with designers, branding producers to create layout and design of the branding (non e-commerce) side of gucci.com
  • Started with simple paper sketches, mood boards, then moved quickly to lower fidelity wireframes in Keynote
  • Ran usability tests in Keynote with Gucci staff to get feedback
mood board
Mood board created with designers for visual look behind World of Gucci.
wireframes
World of Gucci wireframes, created in Keynote.
wireframes

Style guide

  • Created formalized style guide in psd, pdf format to tighten collaboration between designers (both internal, external) and internal front end development team
  • Guide focused on color palette, spacing, typography, multi column grid system
  • Greatly improved transitions from psd based wireframes to formalized web code
grid presentation
Keynote grid presentation given to designers and tech team on proposed grid system.
style guide
Style guide recommendations for core spacing and layout.

iPad support

  • With iPad 1 released several months before “go live” date, single-handedly researched, altered code base of gucci.com to work with the device via a modified navigation, swipe integration
  • Conducted interviews with native iPhone app designers and developers, ran competitive research on preexisting mobile-friendly web sites and native apps
ipad simulated
Simulation of 2010 gucci.com on an iPad.
original home page
One of Gucci's first home pages post redesign in 2010.