Key benefits of reusable components

  • We can build consistently and focus on workflows and logic, not web forms and list items
  • We can reuse code instead of roping in a developer
  • We can maintain our code by seeing our patterns in one place, define elements in our application, and keep redundancy to a minimum

MailChimp Pattern Library

Modularizing designs

What Federico points out is that a ship, a building, and a car are merely collections of components. Components are manageable and flexible. So long as the components join together seamlessly in the end, modularizing the pieces translates to flexibility, speed, and paradoxically both independence and collaboration.

“I began to think in terms of “designing software for mass manufacture.”

“The end result is a system—a system of individual and interchangeable parts that start at the smallest possible level and grows from there. Components are then assembled from these individual parts, and these components make up some of the core parts of our app. Once a group of components are assembled, we get a fully functioning page inside our application that is consistent in design and architecture with the other pages of our app—all because the pages share the same architecture.”

Architecting a Pattern Library by Federico Holgado

How to sell a component library to stakeholders?

    General KPI’s:

  • Cost
  • Customers acquired
  • Acquiring cost
  • Churn
  • Conversion to sale
  • Size of deal
  • Customer profitability
  • Customer satisfaction
  • Support costs/case avoidance
    IT and engineering exec’s

  • Cost savings from reuse
  • Compatibility with bulletproof open source libraries
  • Lower training cost of technical staff
  • Lower quality assurance (QA) costs during release
  • Lower costs to support the code over time
  • Ability to scale up quickly to outsource due to better documentation
    Brand and Marketing

  • Improved engagement (time on site, “funnel tractors” such as wizards and videos)
  • Better conversion by using well-hones, time-tested, proven high-conversion winners)
  • Consistent visual and interaction identity for the brand, by baking the rules into the components
  • Huge time-to-market advantages
  • Lower cost with vendors, since they won’t be charging you to reinvent the wheel with each new project

Curtis (2010) p. 147-9

Is your organisation ready for a library?

  • Communication
    Everyone else will want to know – in simple terms – what this coponent library is all about, hocalw it works, and what it means to them. Your story must be siple, concrete, direct, and focused on how each group and individual may be affected. (…)
  • Workflow
    Component libraries impact at least two critical workflows: how you produce a design solution for each project versus how you maintain your library’s assets, guidelines, and documentation across projects. (…) Depending on how much your library spreads into the activities f cross-functional teams, you’ll need to map out those impacts and come together across teams to decide how milestones, artifacts, expectations, and participation will need to shift.
  • Collaboration
    A component library can be one way for teams to improve collaboration.That said, be mindful that different disciplines may see a library in different lights. So don’t try to fit a square peg in a round hole, but seek to maximise collaboration and participation in your effort.
  • Participation
    Design and engineering teams commonly lead and own library development. But other participants can benefit from, learn from, contribute to, or even immerse their work in the foundation created by the library, too. Product managers start to author Product Requirement Documents or product backlogs that refer to components. QA begins to bind test cases to component codes and variations. Copywriters write copy, variations, and error messages mapped concretely to modular design treatments. The component library’s collaborative nature – not the design assets, but underlying principles of modular thinking and standards – can appeal to many disciplines as a platform into which to inject their influence. (…)
  • Documentation
    (…) As you roll out a library, will deliverables change dramatically, be thrown away, or even be invented from the ground up?

Curtis (2010) p.143-6

Web Credibility

We have compiled 10 guidelines for building the credibility of a web site. These guidelines are based on three years of research that included over 4,500 people:

  1. Make it easy to verify the accuracy of the information on your site.
    You can build web site credibility by providing third-party support (citations, references, source material) for information you present, especially if you link to this evidence. Even if people don’t follow these links, you’ve shown confidence in your material.
  2. Show that there’s a real organization behind your site.
    Showing that your web site is for a legitimate organization will boost the site’s credibility. The easiest way to do this is by listing a physical address. Other features can also help, such as posting a photo of your offices or listing a membership with the chamber of commerce.
  3. Highlight the expertise in your organization and in the content and services you provide.
    Do you have experts on your team? Are your contributors or service providers authorities? Be sure to give their credentials. Are you affiliated with a respected organization? Make that clear. Conversely, don’t link to outside sites that are not credible. Your site becomes less credible by association.
  4. Show that honest and trustworthy people stand behind your site.
    The first part of this guideline is to show there are real people behind the site and in the organization. Next, find a way to convey their trustworthiness through images or text. For example, some sites post employee bios that tell about family or hobbies.
  5. Make it easy to contact you.
    A simple way to boost your site’s credibility is by making your contact information clear: phone number, physical address, and email address.
  6. Design your site so it looks professional (or is appropriate for your purpose).
    We find that people quickly evaluate a site by visual design alone. When designing your site, pay attention to layout, typography, images, consistency issues, and more. Of course, not all sites gain credibility by looking like The visual design should match the site’s purpose.
  7. Make your site easy to use — and useful.
    We’re squeezing two guidelines into one here. Our research shows that sites win credibility points by being both easy to use and useful. Some site operators forget about users when they cater to their own company’s ego or try to show the dazzling things they can do with web technology.
  8. Update your site’s content often (at least show it’s been reviewed recently).
    People assign more credibility to sites that show they have been recently updated or reviewed.
  9. Use restraint with any promotional content (e.g., ads, offers).
    If possible, avoid having ads on your site. If you must have ads, clearly distinguish the sponsored content from your own. Avoid pop-up ads, unless you don’t mind annoying users and losing credibility. As for writing style, try to be clear, direct, and sincere.
  10. Avoid errors of all types, no matter how small they seem.
    Typographical errors and broken links hurt a site’s credibility more than most people imagine. It’s also important to keep your site up and running.

Stanford Guidelines for Web Credibility


Positivism is a philosophy of science based on the view that information derived from logical and mathematical treatments and reports of sensory experience is the exclusive source of all authoritative knowledge, and that there is valid knowledge (truth) only in scientific knowledge. Verified data received from the senses are known as empirical evidence. This view holds that society, like the physical world, operates according to general laws. Introspective and intuitive knowledge is rejected. Although the positivist approach has been a recurrent theme in the history of Western thought, the modern sense of the approach was developed by the philosopher and founding sociologist Auguste Comte in the early 19th century. Comte argued that, much as the physical world operates according to gravity and other absolute laws, so also does society.

From Wikipedia

Component library

A component library isn’t about limiting innovation. Instead. it empowers designers to reuse solutions to problems that have already been solved so they can focus more on the problems that don’t have solutions. When individuals no longer reinvent vast portions of a design with every project, productivity increases and headaches diminish.

Curtis (2010) p.17

Component library: decision making matrix

    Lower < Component Value > Higher

  • Limited < Scale of Reuse > Extensive
    How much will the component be reused across experience?
    How many different page types could use this component?
  • Same < Similarity > Different
    How similar is this component candidate to existing components?
    What makes this component justifiably different than other components?
  • Narrow < Specifity > Global
    Is this component specific to a page, section, content type, or context?
    May I use this component in a different context, and if not, why not?
  • Trivial < Significance [for different people/stakeholders] > Vital
    How important is this component relative to our design objectives?
    Is this component important to a sponsor or executive?
    What are the impacts of making tradeoffs regarding this component?
    Can you prioritize these components, from most to least important?
  • Unstable < Sustainability > Permanent
    • How often do you think the component will change?
    • Are there ongoing or future projects that could impact this component?
  • Complex < Sophistication > Simple
    Do you anticipate reusing existing styles/CSS or creating many new styles?
    Are there specific technologies, tools, or frameworks that would need to be utilized (for example video) beyond standard CSS and HTML markup?
    Are there any behaviours and states that need extensive development and testing, or is implementation straight forward?
  • Obtuse < Sociability > Obvious
    How easy is it to explain the component’s purpose?
    How simple are the structures, behaviours, and content attributes?
    Do some stakeholders have difficulty ‘getting it’ immediately?
    How strictly would you govern the usage of this component?
    Would you need extensive editorial or interactive guidelines to ensure that it’s used correctly, or simple guidelines that enable flexible use?
  • Independent < Sync > Correlated
    Is this item a variation of an existing component?
    Is this component related to or always used with another component?
    Can this component be documented on its own?
    Is this component limited to one page type, or can it be used in many places?

Curtis (2010), p. 174-6

Pattern vs Component

Patterns and components are reusable design solutions. In addition, patterns and components can be:

  • Described via attributes like ‘Use when’, rationale, and solution guidelines
  • Managed in a library
  • Rendered as reusable assets, whether HTML/Css frameworks or design libraries to produce wireframes and comps
  • Utilized during projects by designers, design technologists, engineers, and other disciplines
  • Authored and maintained via a (hopefull) well defined workflow
  • Based on the needs of an organization
  • Influenced and enhanced based on user research

Patterns and components are not the same. Both Components represent chunks of visual design (HTML/CSS) that are combined into a composite Web page. Patterns are sprinkled within and across components. Sometimes they overlap. A few components are simple enough to map to a specific pattern, such as search and tabbed navigation.


  • Pattern: Interaction Model; a theory about how a general design problem can be solved (e.g. progressive disclosure)
  • Component: Execution of a pattern or element; a specific way to solve a specific design problem
  • Module: A configuration of components (!Not defined by Curtis)

Curtis (2010) p. 11-5