Lessons From Dell's Design Library
-
Upload
jim-machajewski -
Category
Technology
-
view
597 -
download
7
description
Transcript of Lessons From Dell's Design Library
![Page 1: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/1.jpg)
eDell
Dell Design Library
Jim Machajewski, Bill Harrison & Ashley Eaton
![Page 2: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/2.jpg)
eDellConfidential2
Global Site Design
Our Mission: To become the world’s leading in-house digital agency
through a balance of art and commerce, agility and
innovation, and strategy and execution.
Our Charter:In every project we deliver to the vision of creating simple,
intuitive, Dell.com experiences driven by customer needs.
We have a LOT of work to do
![Page 3: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/3.jpg)
eDell3
Dell’s Presence Online
2000“The BOOM”
2009Global Site Design is Formed
1996Dell.com launches
![Page 4: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/4.jpg)
eDell4
Our tasks:
• Global Site Design is responsible for transforming Dell.com’s user experience. That’s 24,000,000 or so pages globally.
• Rebuilding a site on such a massive scale requires that you start with a firm foundation.
• That’s where the library comes in
• DellDesignLibrary.com
So How Do We Plan To Do It?
![Page 5: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/5.jpg)
eDell5
Why do we have a library?
Our solution:
• We created a modular design system, including a relatively small number of parts and templates.
• These parts and templates can be rearranged almost infinitely to build any desired webpage.
• And these parts and templates, along with the instructions for using them, are housed in the Library.
![Page 6: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/6.jpg)
eDellConfidential6
Goals for the Library
Our goals:
• Consistency across projects
• Efficiency within projects
• Happier customers
![Page 7: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/7.jpg)
eDell7
The Library’s Core Features
• Robust document & contentmanagement
• Managed user privileges
• Faceted navigation/classification
• Customizable framework – HTML
– CSS
– template variables
– site structure
• Versioning
![Page 8: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/8.jpg)
eDell8
So What’s In the Library?
Patterns• Reusable, repeatable collections
of elements that can be embedded on a page
• More accurately considered components
• Defined by their function and purpose, not by visual design or location on the page
• Include specifications for globalization
• Used in combination to create complete templates, blueprints, launch layouts or pages
• Example: Data Table
![Page 9: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/9.jpg)
eDell9
Templates
• Blank Templates– Provide basic content areas and page layouts
– Used as foundations for creating complete templates
• Complete Templates– Use blank templates as their foundations
– Define patterns available in each area
– Used in blueprints and launch layouts
![Page 10: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/10.jpg)
eDell10
Building with Components
Blank Template
Coupe
Complete Template
Honda Accord
PatternWheel
![Page 11: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/11.jpg)
eDell11
How does a page come together?
Banner
Article Content
Article Teaser
Banners
Related Content
Masthead
Local Nav
![Page 12: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/12.jpg)
eDell12
Other Documents
• Blueprints– Reusable plans for implementing site sections
– Contain the superset of all components available in a repeatable set of pages, along with a meta-sitemap and a content guide
• Project Layouts & Comps– Repository for project documents that Global Site Design has
handed off
– Launch layouts and visual page comps
• Guides– Style guidelines
– Asset creation guidelines
– Tutorials
![Page 13: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/13.jpg)
eDell13
Who uses the library?
• Global Site Design’s user experience architects, visual designers, content strategists & account managers (90+ people)
• Internal development teams (2,000+ people)
• Internal marketing teams (200+ people)
• External development teams (Infinite)
• Dell’s agency partners (39 agencies, 300+ people)
![Page 14: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/14.jpg)
eDell14
A Global Audience• Argentina
• Australia
• Austria
• Bangladesh
• Barbados
• Belarus
• Belgium
• Brazil
• Canada
• Chile
• China
• Colombia
• Costa Rica
• Croatia
• Czech Republic
• Denmark
• Dominican Republic
• Egypt
• Finland
• France
• Germany
• Greece
• Hong Kong
• Hungary
• India
• Indonesia
• Ireland
• Israel
• Italy
• Japan
• Jersey
• Jordan
• Kenya
• Latvia
• Liechtenstein
• Luxembourg
• Malaysia
• Mexico
• Netherlands
• New Zealand
• Nigeria
• Norway
• Oman
• Pakistan
• Panama
• Peru
• Philippines
• Poland
• Portugal
• Qatar
• Romania
• Russia
• Serbia
• Singapore
• Slovakia
• South Korea
• Spain
• Sweden
• Switzerland
• Taiwan
• Thailand
• Turkey
• Turkmenistan
• Ukraine
• United Kingdom
• United States
![Page 15: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/15.jpg)
eDell15
• To create page comps
• To get updated style guidelines
• To get guidance on asset creation
• For UI requirements
• For control definitions
– Development support
– Functional guidance
How do people use the library?
![Page 16: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/16.jpg)
eDell16
Lessons Learned
• Be careful who you let set-up your framework manager
• Have a managed and centralized intake process
• Focus on definitions
• Metadata!
• On-going funding
![Page 17: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/17.jpg)
eDellConfidential17
…AND a benevolent dictator
Have a Wheel of UX…
More Lessons Learned
![Page 18: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/18.jpg)
eDell18
• Cross referencing & content sharing
• DDUID – Dell Design Library Unique Identification System
• Integration of GSD’s proprietary prototyping framework
• Integration with iRise• Multi-channel patternization
– Client-side applications– Mobile/tablet– Personalization– Authentication– B2B– Partnerships
Evolution & What’s Next?
![Page 19: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/19.jpg)
eDell
Thank You
For more info, contact us:http://www.delldesignlibrary.com/contact-us.html
![Page 20: Lessons From Dell's Design Library](https://reader035.fdocuments.in/reader035/viewer/2022062319/5564aa42d8b42a98268b4919/html5/thumbnails/20.jpg)
eDell
Q&A
For more info, contact us:http://www.delldesignlibrary.com/contact-us.html