<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>UI design Archives &#8212; Stampede: the strategic design &amp; technology company</title>
	<atom:link href="https://stampede-design.com/blog/tag/ui-design/feed/" rel="self" type="application/rss+xml" />
	<link>https://stampede-design.com/blog/tag/ui-design/</link>
	<description>We are creating better worlds though thoughtful design and technology. Connect with us!</description>
	<lastBuildDate>Tue, 07 Apr 2026 09:06:41 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>

<image>
	<url>https://stampede-design.com/wp-content/uploads/2024/02/cropped-Stampede-Favicon-old-32x32.png</url>
	<title>UI design Archives &#8212; Stampede: the strategic design &amp; technology company</title>
	<link>https://stampede-design.com/blog/tag/ui-design/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Design Libraries: The Key to Success (or Failure)</title>
		<link>https://stampede-design.com/blog/design-libraries-the-key-to-success-or-failure/</link>
					<comments>https://stampede-design.com/blog/design-libraries-the-key-to-success-or-failure/#respond</comments>
		
		<dc:creator><![CDATA[Faqihuddin Ghazali]]></dc:creator>
		<pubDate>Fri, 14 Feb 2025 04:32:13 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[design libraries]]></category>
		<category><![CDATA[design process]]></category>
		<category><![CDATA[design systems]]></category>
		<category><![CDATA[team workflow]]></category>
		<category><![CDATA[UI design]]></category>
		<guid isPermaLink="false">https://stampede-design.com/?p=17743</guid>

					<description><![CDATA[<p>We often see this: A company has built out their digital presence across web and mobile, serving millions of users. Despite pouring resources into digital transformation, the cracks are showing. Somehow buttons, fonts and interactions feel disconnected. Users struggle with inconsistency, developers waste time reinventing components and the brand presence is diluted. What should be&#8230;<a href="https://stampede-design.com/blog/design-libraries-the-key-to-success-or-failure/"> Keep reading</a></p>
<p>The post <a href="https://stampede-design.com/blog/design-libraries-the-key-to-success-or-failure/">Design Libraries: The Key to Success (or Failure)</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="lead">We often see this: A company has built out their digital presence across web and mobile, serving millions of users. Despite pouring resources into digital transformation, the cracks are showing. Somehow buttons, fonts and interactions feel disconnected. Users struggle with inconsistency, developers waste time reinventing components and the brand presence is diluted. What should be a seamless product becomes a patchwork of mismatched elements, like a digital Frankenstein.</p>



<p>Now think about your favourite digital services: the ones that just feel effortless to use. Every interaction flows naturally, and it all feels part of the same trusted experience. That&#8217;s not by accident. It&#8217;s the result of a well-structured design library, working behind the scenes to create consistency, scalability and trust.</p>



<p>As both a designer and a user, I’ve had my fair share of frustrations with clunky interfaces and mismatched branding in UI. And because of that, whenever I kick off a new project, I’m determined to avoid those pitfalls by building a solid foundation: the design library.</p>



<p>So in this article, I hope to share why building a robust design library is the key to tackling these pain points and creating seamless user experiences at scale. It’s also why I’m driven to write this: I’ve seen firsthand how a well-crafted design library can transform not just a single app, but an entire organisation’s digital ecosystem, something I’ll share further as we go along.</p>



<figure class="wp-block-image size-large is-style-expanded"><img fetchpriority="high" decoding="async" width="790" height="431" src="https://stampede-design.com/wp-content/uploads/2025/02/Frame-3466614-790x431.png" alt="A side-by-side comparison of scattered, unassembled LEGO blocks on the left and a fully built red and blue LEGO rocket launching on the right, symbolizing the transformation from chaos to structure—illustrating how a well-structured design library enables consistency, efficiency, and faster execution" class="wp-image-17777" style="object-fit:cover" srcset="https://stampede-design.com/wp-content/uploads/2025/02/Frame-3466614-790x431.png 790w, https://stampede-design.com/wp-content/uploads/2025/02/Frame-3466614-300x164.png 300w, https://stampede-design.com/wp-content/uploads/2025/02/Frame-3466614-768x419.png 768w, https://stampede-design.com/wp-content/uploads/2025/02/Frame-3466614.png 1408w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">A strong design library transforms scattered, inconsistent elements into a structured, launch-ready system—just like assembling LEGO blocks into a rocket ready for takeoff.</figcaption></figure>



<h2 class="wp-block-heading">Design library vs design system</h2>



<p>I will focus specifically on <strong>design libraries</strong> in this article rather than the broader concept of <strong>design systems</strong>. In simplest terms, a design library is a curated set of style guides and reusable interface elements like typography, color palettes, and buttons, that help teams maintain a consistent look and feel. A design system, on the other hand, goes a step further by having code-ready components, more extensive documentation, and processes that unify the way teams update and govern the design system.</p>



<p>While design systems offer a more comprehensive framework involving deeper collaboration with developers and product teams, most organisations might not need to start there. Instead, a solid design library lays the groundwork, setting the stage for a more scalable design system as the product and organisation evolve. Think of it as an early-stage design system, delivering immediate benefits in consistency and efficiency without overcomplicating things.</p>



<figure class="wp-block-image size-large is-style-expanded"><img decoding="async" width="790" height="358" src="https://stampede-design.com/wp-content/uploads/2025/02/Slide-16_9-2-1-790x358.png" alt="A diagram comparing design systems and design libraries. The design system section includes design principles, detailed guidelines, code snippets, developer documentation, and governance models. Within it, the design library is highlighted, consisting of two parts: Style guides (covering typography, colors, layout, spacing, icons, and content style) and Components library (including buttons, forms, toggles, tabs, badges, accordions, and more). The diagram visually represents how a design library is a subset of a broader design system." class="wp-image-17745" style="object-fit:cover" srcset="https://stampede-design.com/wp-content/uploads/2025/02/Slide-16_9-2-1-790x358.png 790w, https://stampede-design.com/wp-content/uploads/2025/02/Slide-16_9-2-1-300x136.png 300w, https://stampede-design.com/wp-content/uploads/2025/02/Slide-16_9-2-1-768x348.png 768w, https://stampede-design.com/wp-content/uploads/2025/02/Slide-16_9-2-1-1536x696.png 1536w, https://stampede-design.com/wp-content/uploads/2025/02/Slide-16_9-2-1-2048x928.png 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">Design library (containing style guides and component libraries) fits within a broader design system that includes governance, documentation, and code implementation.</figcaption></figure>



<h2 class="wp-block-heading">What makes a design library great</h2>



<p>In the years designing products across startups and enterprises, I’ve learned one crucial lesson: the bigger or more complex the organisation, the more important this foundation becomes. Let me explain why.</p>



<h3 class="wp-block-heading">First, design library is your brand&#8217;s digital DNA</h3>



<p>When most people think about design libraries, they picture a collection of UI components from popular design systems like shadcn/ui, Bootstrap, or the default iOS and Android UI kits. Just grab a UI kit, change some colours, and call it a day. While this might work for simple products, we&#8217;ve learned the hard way that it comes with significant costs, especially for complex products and enterprise projects.</p>



<p><strong>When a design library doesn’t carry the brand’s DNA, it leads to a generic-looking product, </strong>making it hard for customers to distinguish your brand from competitors. Look at Netflix, Duolingo, or Instagram, you can recognize them instantly, even without seeing their logos. That&#8217;s because the most successful businesses invest in design libraries that truly reflect their identity, extending beyond colors and fonts to shape the entire user experience.</p>



<p>I saw this firsthand while we designed a mobile app for manufacturing plant performance monitoring. Rather than defaulting to a generic enterprise style, we worked closely with stakeholders to channel their brand DNA of efficiency and innovation into the design. We introduced a sleek dark mode interface that highlight key metrics without overwhelming the user, while giving the product a modern, cutting-edge feel. These choices not only supported advanced data visualization but also aligned seamlessly with the company’s future-focused vision.</p>



<figure class="wp-block-image size-large is-style-expanded"><img decoding="async" width="790" height="499" src="https://stampede-design.com/wp-content/uploads/2025/02/Desktop-8-790x499.jpg" alt="A screenshot of a mobile app interface for manufacturing plant performance monitoring, displayed across three smartphones. The interface features a dark mode theme with green-highlighted key metrics for readability. The main dashboard presents real-time plant data, graphs for performance trends, and categorized operational indicators. The design emphasizes a clean layout, structured data visualization, and intuitive navigation, ensuring that engineers and executives can quickly interpret complex industrial data" class="wp-image-17800" style="object-fit:cover" srcset="https://stampede-design.com/wp-content/uploads/2025/02/Desktop-8-790x499.jpg 790w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-8-300x189.jpg 300w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-8-768x485.jpg 768w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-8-1536x970.jpg 1536w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-8.jpg 1622w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">A dark-mode mobile app designed for manufacturing plant performance monitoring, optimizing data visualization while maintaining clarity and usability.</figcaption></figure>



<p>Similarly, our work on the HMI Group hospital website was centered around building trust, an essential factor in healthcare decisions. The brand DNA was translated into the digital experience by focusing on clarity, warmth, and professionalism. We used clean, structured layout to make medical information easily accessible, a reassuring color palette that conveys safety and expertise, and real imagery of doctors and patients to create a sense of reliability and human connection. These design choices helped establish a confident user experience, ensuring patients felt informed and supported at every touchpoint.</p>



<figure class="wp-block-image size-large is-style-expanded"><img loading="lazy" decoding="async" width="790" height="438" src="https://stampede-design.com/wp-content/uploads/2025/02/Desktop-10-790x438.jpg" alt="A laptop and smartphone display the redesigned HMI Group hospital website. The website features a clean and structured layout with a reassuring color palette, real imagery of doctors and patients, and easy access to medical information. The mobile version highlights a message about genuine care, while the desktop version includes a doctor’s video introduction and appointment details, reflecting the site's focus on trust, clarity, and patient support." class="wp-image-17801" style="object-fit:cover" srcset="https://stampede-design.com/wp-content/uploads/2025/02/Desktop-10-790x438.jpg 790w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-10-300x166.jpg 300w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-10-768x426.jpg 768w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-10-1536x852.jpg 1536w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-10.jpg 1846w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">The redesigned HMI Group hospital website built to improve trust and clarity, ensuring patients feel informed, supported, and confident in their healthcare decisions.</figcaption></figure>



<h3 class="wp-block-heading">Handles the real-world complexity when basic UI kits fall short</h3>



<p>One real story stands out. A Global Fortune 500 energy company approached us to revive a project that had failed three times and cost millions. When we looked deeper, we realised the core underlying issue. The previous teams had built solutions without validating their assumptions with actual users. Without a structured design library to support rapid prototyping and testing, each iteration became expensive and time-consuming, making real user validation impractical.</p>



<p>The impact then was clear: users struggled with complex workflows and data visualizations that didn’t match their mental models or daily needs. What could have been caught early through proper user testing had instead led to costly rebuilds.</p>



<p>We knew we had to take a different approach. So we started by asking questions like:</p>



<ul class="wp-block-list">
<li>How can we use a design library to accelerate our user validation process and reduce the cost of iterations?</li>



<li>What patterns do users actually need for interpreting complex operational data effectively?</li>



<li>How do we ensure our design system supports continuous user feedback and evolution?</li>
</ul>



<p>From there, we built a design library that made complex industrial data analysis and reporting more accessible and intuitive. We implemented:</p>



<ul class="wp-block-list">
<li><strong>Legible typography</strong> with a clear hierarchy, ensuring key figures stood out for instant recognition.</li>



<li><strong>Strategic spacing and balanced UI density</strong> prevented data overload by grouping related metrics, making dashboards structured yet easy to scan.</li>



<li><strong>Color coding</strong> provided quick visual insights such as greens for positive trends and reds for warning, to help users identify key data points at a glance.</li>



<li><strong>Visual cues</strong> like progress status and last-update indicators enhanced clarity, ensuring users could quickly interpret real-time data without unnecessary friction.</li>
</ul>



<p>What truly excited us over the years was seeing the design library evolve into a <strong>scalable enterprise solution</strong> that served diverse user needs, from engineers tracking real-time equipment data to executives analyzing company performance metrics. Despite their distinct needs and technical expertise levels, users experienced a consistent, efficient interface throughout.</p>



<figure class="wp-block-image size-large is-style-expanded"><img loading="lazy" decoding="async" width="790" height="562" src="https://stampede-design.com/wp-content/uploads/2025/02/Desktop-7-790x562.png" alt="A screenshot of an industrial dashboard interface showcasing various UI components from a structured design library. The interface includes multiple button styles, a modal window with action buttons, and data visualization elements such as tables and progress indicators." class="wp-image-17749" style="object-fit:cover" srcset="https://stampede-design.com/wp-content/uploads/2025/02/Desktop-7-790x562.png 790w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-7-300x213.png 300w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-7-768x546.png 768w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-7-1536x1092.png 1536w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-7-2048x1456.png 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">Some UI components taken from the enterprise design library.</figcaption></figure>



<h3 class="wp-block-heading">Designed for real people and real needs, instead of generic user personas</h3>



<p>Sometimes, the most valuable lessons come from specialised projects. Take VivaValet, a digital product we designed to make technology more accessible for elders. Generic design libraries would have failed here because they don’t account for age-related accessibility needs like declining vision, reduced dexterity, and cognitive differences. So we needed to go deeper. Through extensive UI research, we studied how elderly users learn, interact, and think about digital interfaces. This led to crucial design decisions, like:</p>



<ul class="wp-block-list">
<li>Increased text size from 16px to 24px for better readability and less eye strain.</li>



<li>Carefully selected typography optimized for legibility.</li>



<li>Enhanced touch targets to prevent accidental taps, accommodating users with reduced motor skills.</li>



<li>High-contrast color schemes tested with vision disability tools, improving visibility.</li>



<li>Simplified navigation patterns aligned with elderly users&#8217; mental models.</li>
</ul>



<figure class="wp-block-image size-large is-style-expanded"><img loading="lazy" decoding="async" width="790" height="562" src="https://stampede-design.com/wp-content/uploads/2025/02/Desktop-1-790x562.png" alt="A set of mobile screens showcasing the VivaValet app, designed for elder care. The screens display large, high-contrast text, clear icons, and simplified navigation elements, ensuring readability and ease of interaction for elderly users. The rightmost image includes a typography guide, illustrating different text sizes and weights used for accessibility." class="wp-image-17750" srcset="https://stampede-design.com/wp-content/uploads/2025/02/Desktop-1-790x562.png 790w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-1-300x213.png 300w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-1-768x546.png 768w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-1-1536x1092.png 1536w, https://stampede-design.com/wp-content/uploads/2025/02/Desktop-1-2048x1456.png 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">Accessibility-focused design for VivaValet, a digital product tailored for the elders.</figcaption></figure>



<p>As surprising as it may seem, <strong>culture plays a big role in design libraries</strong>. What works well in one region may not translate effectively in another. Working across Southeast Asia has taught me that digital behaviors, expectations, and even visual preferences differ dramatically. A one-size-fits-all design library risks alienating users, making cultural awareness a key factor in creating effective, scalable designs.</p>



<p>Through research and testing, I’ve found that cultural considerations impact several design aspects, including:</p>



<ul class="wp-block-list">
<li><strong>Visual hierarchy and UI density</strong> – Apps in Asia often have denser layouts compared to Western counterparts. This reflects cultural differences in written language structure. Asian characters convey more meaning per symbol, leading to a preference for compact, information-rich interfaces. Western apps, by contrast, use more whitespace and minimalistic layouts.</li>



<li><strong>Color meanings and symbolism</strong> – Colors don’t mean the same thing everywhere. In the West, red often signals errors or warnings, but for Chinese, it represents luck and prosperity. Similarly, white conveys purity in Western cultures but is associated with mourning in some Asian traditions. Understanding these cultural associations prevents unintentional miscommunication.</li>



<li><strong>Bilingual interfaces that feel native, not translated</strong> – Direct translation isn’t enough. Sentence structures, reading flow, and emphasis vary across languages. For example, Malay and Thai sentence structures differ significantly from English, requiring thoughtful UI adjustments to ensure readability and natural phrasing.</li>



<li><strong>Local payment behaviors</strong> – Even digital payments aren’t universal; different regions have preferred methods. In Southeast Asia, QR code payments and bank transfers are common, while Western users are more accustomed to credit cards and PayPal. A well-structured design library must support these regional differences without overcomplicating the experience.</li>
</ul>



<p>By embedding cultural awareness into design librarie<strong>s</strong>, we ensure that <strong>digital products resonate with real users</strong>, fostering trust and engagement. Rather than applying generic user personas, we tailor experiences based on how people naturally interact with technology in different markets, ensuring usability, familiarity, and long-term adoption.</p>



<h3 class="wp-block-heading">Not self-limiting but continuously evolve to scale</h3>



<p>Early in my journey, I could get away with rigid design libraries for smaller products. But enterprise projects taught me a valuable lesson: if your design library can&#8217;t evolve, your digital platform can’t either.</p>



<p>A truly effective design library must anticipate growth, supporting new features, products, and even entire business lines as you scale. Ultimately, a robust design library is key to removing friction when your product suite expands, ensuring consistent user experiences across new markets, functionalities, and digital platforms.</p>



<h4 class="wp-block-heading"><strong>How do you know if your design library is too rigid?</strong></h4>



<p>A rigid design library often creates more problems than it solves. Some telltale signs include:</p>



<ul class="wp-block-list">
<li><strong>Hardcoded components</strong> that break or require extensive customisation when a new feature or product is introduced.</li>



<li><strong>Overly prescriptive guidelines</strong> that don’t allow flexibility for different teams, leading to workarounds and inconsistencies.</li>



<li><strong>Minimal documentation</strong> or poor onboarding, causing teams to misuse or abandon the library altogether.</li>
</ul>



<h4 class="wp-block-heading"><strong>What does a flexible design library look like?</strong></h4>



<p>Now, I build design libraries that are:</p>



<ul class="wp-block-list">
<li><strong>Component-based and scalable</strong>, ensuring that UI elements can be easily repurposed for new services.</li>



<li><strong>Structured for modularity</strong>, so teams can mix and match UI patterns rather than being locked into rigid templates.</li>



<li><strong>Supported by clear documentation and onboarding</strong>, ensuring that internal teams and external vendors can adopt it seamlessly</li>
</ul>



<p>We treat our design libraries as living documents, continuously engaging with stakeholders and testing with real users to identify pain points and opportunities for improvement. This feedback loop ensures our design libraries remain relevant and effective, allowing organisation to grow without sacrificing brand consistency or user experience.</p>



<figure class="wp-block-image size-large is-style-expanded"><img loading="lazy" decoding="async" width="790" height="606" src="https://stampede-design.com/wp-content/uploads/2025/02/IMG_0222-1-1-1-1-790x606.png" alt="A man in a red shirt is seated at a conference table, setting up a usability testing rig on a laptop, with a microphone and various cables connected. A woman in a hijab stands nearby holding a notepad, reviewing notes. The setting is a professional meeting room, prepared for a live usability test with an enterprise leadership team." class="wp-image-17751" style="object-fit:cover" srcset="https://stampede-design.com/wp-content/uploads/2025/02/IMG_0222-1-1-1-1-790x606.png 790w, https://stampede-design.com/wp-content/uploads/2025/02/IMG_0222-1-1-1-1-300x230.png 300w, https://stampede-design.com/wp-content/uploads/2025/02/IMG_0222-1-1-1-1-768x589.png 768w, https://stampede-design.com/wp-content/uploads/2025/02/IMG_0222-1-1-1-1-1536x1178.png 1536w, https://stampede-design.com/wp-content/uploads/2025/02/IMG_0222-1-1-1-1.png 1603w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">Our team setting up a usability testing rig for a live mobile app test session with an enterprise leadership team, ensuring real user insights to drive design improvements.</figcaption></figure>



<h3 class="wp-block-heading">The joy factor, making digital products people love</h3>



<p>Even in business contexts, emotional connection matters. When we worked with TNG ewallet on their in app parking, a locally infused microcopy was essential to making this an immediately resonant touch point for Malaysians. Users loved it so much they shared screenshots of our playful writing on social media.</p>



<figure class="wp-block-image size-large is-style-expanded"><img loading="lazy" decoding="async" width="790" height="444" src="https://stampede-design.com/wp-content/uploads/2025/02/Proposal_-Charge-N-Go-30_9-1-790x444.png" alt="Three UI message cards from Touch 'n Go's in-app parking module featuring localized Malaysian microcopy. The first card shows an illustration of two people jumping with excitement, with the text 'Kejap! It's free parking!' explaining that no payment is required during public holidays or after hours. The second card displays a person with an exclamation mark, accompanied by 'Adoi! Something's gone wrong,' indicating an issue. The third card, titled 'Free-ish parking!' informs users that after-hour parking requires no full payment. These messages use playful, culturally relevant language to create a more engaging user experience." class="wp-image-17752" style="object-fit:cover" srcset="https://stampede-design.com/wp-content/uploads/2025/02/Proposal_-Charge-N-Go-30_9-1-790x444.png 790w, https://stampede-design.com/wp-content/uploads/2025/02/Proposal_-Charge-N-Go-30_9-1-300x170.png 300w, https://stampede-design.com/wp-content/uploads/2025/02/Proposal_-Charge-N-Go-30_9-1-768x432.png 768w, https://stampede-design.com/wp-content/uploads/2025/02/Proposal_-Charge-N-Go-30_9-1-1536x864.png 1536w, https://stampede-design.com/wp-content/uploads/2025/02/Proposal_-Charge-N-Go-30_9-1-2048x1152.png 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">Locally infused microcopy in Touch &#8216;n Go’s in-app parking module, designed to make everyday interactions more relatable and enjoyable for Malaysian users</figcaption></figure>



<p>As a Malaysian born and bred UX design and development agency, we know Malaysians well. We believe that adding delightful, culturally relevant details is key to creating memorable experiences. By infusing the local culture into interface elements, microcopy, and overall design, we make digital products feel personal and engaging, even for something as everyday as parking or payment applications. This human touch can transform mundane interactions into moments of genuine delight.</p>



<h3 class="wp-block-heading">Real business metrics improvements</h3>



<p>Remember that Fortune 500 enterprise project we redesigned? The results speak for themselves:</p>



<ul class="wp-block-list">
<li>90% Monthly Active Users (MAU)</li>



<li>30% improvement in Manufacturing Plant Cycle Efficiency</li>



<li>50% reduction in plant interruptions</li>



<li>Expansion across 14 applications</li>
</ul>



<p>While the design library wasn’t the sole driver of these metrics, it played<strong> a crucial role in enabling rapid prototyping, structured validation, and efficient design production</strong>, helping teams iterate faster and implement changes at scale.</p>



<p>What surprised me the most was seeing other projects within the same enterprise begin adopting the design library, amplifying its impact far beyond the original scope. With a shared system in place, teams could build upon existing components, reducing duplication and streamlining workflows. This is the testament to what I mentioned in the introduction: a well-structured design library doesn’t just improve a single app; it has the potential to scale across an entire digital ecosystem of the organisation.</p>



<p>Over time, we’ve consistently seen how a well-structured design library accelerates operational excellence:</p>



<ul class="wp-block-list">
<li>Product and development teams release features faster</li>



<li>Different departments easily maintain a unified brand</li>



<li>Updates and maintenance become more efficient</li>



<li>New team members quickly get up to speed</li>



<li>External vendors deliver high-quality work with fewer inconsistencies</li>
</ul>



<p>Ultimately, these metrics highlight that a well-structured design library isn’t just about looks; it’s a strategic asset that boosts operational efficiency, ensures user satisfaction, and strengthens brand credibility across the entire organisation.</p>



<figure class="wp-block-image size-large is-style-expanded"><img loading="lazy" decoding="async" width="790" height="736" src="https://stampede-design.com/wp-content/uploads/2025/02/IMG_5826-790x736.jpg" alt="Two team members standing next to an interactive digital kiosk displaying a data-driven enterprise dashboard. The background features a large screen highlighting key business metrics and benefits such as increased productivity, reduced reporting time, and cost savings. The touchscreen interface showcases a structured data visualization system, demonstrating the impact of a well-structured design library in scaling across enterprise solutions." class="wp-image-17753" srcset="https://stampede-design.com/wp-content/uploads/2025/02/IMG_5826-790x736.jpg 790w, https://stampede-design.com/wp-content/uploads/2025/02/IMG_5826-300x280.jpg 300w, https://stampede-design.com/wp-content/uploads/2025/02/IMG_5826-768x716.jpg 768w, https://stampede-design.com/wp-content/uploads/2025/02/IMG_5826-1536x1432.jpg 1536w, https://stampede-design.com/wp-content/uploads/2025/02/IMG_5826-2048x1909.jpg 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">The design library we developed scaled effectively and was widely adopted across multiple products, delivering enterprise-wide value and receiving industry recognition. <a href="https://stampede-design.com/blog/human-centred-designs-powering-digital-and-sustainability-initiatives-at-petronas/">Read more on our works for this enterprise client here</a>.</figcaption></figure>



<h2 class="wp-block-heading">Hard-won lessons: what actually works</h2>



<p>After building design libraries for everything from small startups to major enterprises, here&#8217;s what I&#8217;ve learned:</p>



<h3 class="wp-block-heading"><strong>Lesson #1: Start with understanding</strong></h3>



<p>Instead of jumping straight to UI components, start by understanding your users, operations, and vision. The strongest design libraries are built on deep insights, ensuring they address real needs rather than just assembling UI elements.</p>



<h3 class="wp-block-heading"><strong>Lesson #2: Build for your reality</strong></h3>



<p>Focus on creating components that solve your specific challenges. Align your library with your team’s workflow and product requirements so it grows with your needs instead of forcing unnecessary constraints.</p>



<h3 class="wp-block-heading"><strong>Lesson #3: Think long-term</strong></h3>



<p>Approach your design library as a strategic investment rather than a quick fix. The most successful libraries support where organisations are going, not just where they are today.</p>



<h3 class="wp-block-heading"><strong>Lesson #4: Test with real scenarios</strong></h3>



<p>The true test of a design library is how well it handles your most complex use cases. Every library improves dramatically through thorough testing with users in real scenarios.</p>



<p>In fact, we’ve found that with the right foundational elements in place, you can go from hypothesis to user-tested prototype in a 5-day design sprint. Because the UI components already adhere to consistent branding and standards, teams can focus on testing new ideas, rather than building everything from scratch.</p>



<figure class="wp-block-image size-large is-style-expanded"><img loading="lazy" decoding="async" width="790" height="445" src="https://stampede-design.com/wp-content/uploads/2025/02/20220128_123151-790x445.jpg" alt="A close-up of designer’s hands interacting with a laptop displaying a prototype of a data visualization dashboard. Another iPad screen on the right shows a digital sketch of the data dashboard for design reference," class="wp-image-17754" style="object-fit:cover" srcset="https://stampede-design.com/wp-content/uploads/2025/02/20220128_123151-790x445.jpg 790w, https://stampede-design.com/wp-content/uploads/2025/02/20220128_123151-300x170.jpg 300w, https://stampede-design.com/wp-content/uploads/2025/02/20220128_123151-768x432.jpg 768w, https://stampede-design.com/wp-content/uploads/2025/02/20220128_123151-1536x865.jpg 1536w, https://stampede-design.com/wp-content/uploads/2025/02/20220128_123151-2048x1153.jpg 2048w, https://stampede-design.com/wp-content/uploads/2025/02/20220128_123151-360x204.jpg 360w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">A rapid prototype built from the team&#8217;s storyboard during a design sprint, tested with real users the following day.</figcaption></figure>



<h2 class="wp-block-heading">Final thoughts: Building a foundation for lasting impact</h2>



<p>A well-designed design library is more than just a collection of UI components. It&#8217;s a foundation for digital success. By investing in a robust, flexible library, you can accelerate product development, create user-friendly experiences, and ensure your brand stands out in an increasingly crowded market.</p>



<p>At Stampede, we&#8217;ve helped organisations build design libraries that truly transform their digital capabilities. If you&#8217;re considering this for your organisation, let&#8217;s discuss how we can create something that doesn&#8217;t just look good, but delivers real impact. Reach out to&nbsp;<a href="mailto:studio@stampede-design.com" target="_blank" rel="noreferrer noopener">studio@stampede-design.com</a></p>



<p></p>
<p>The post <a href="https://stampede-design.com/blog/design-libraries-the-key-to-success-or-failure/">Design Libraries: The Key to Success (or Failure)</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/design-libraries-the-key-to-success-or-failure/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Finding Inspiration for UI/UX Design</title>
		<link>https://stampede-design.com/blog/finding-inspiration-for-ui-ux-design/</link>
					<comments>https://stampede-design.com/blog/finding-inspiration-for-ui-ux-design/#respond</comments>
		
		<dc:creator><![CDATA[Chee Seng Leong]]></dc:creator>
		<pubDate>Thu, 29 Dec 2022 07:18:01 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[creative process]]></category>
		<category><![CDATA[design inspiration]]></category>
		<category><![CDATA[design tools]]></category>
		<category><![CDATA[resources]]></category>
		<category><![CDATA[UI design]]></category>
		<guid isPermaLink="false">https://stampede-design.com/?p=11322</guid>

					<description><![CDATA[<p>I recently did a knowledge-sharing session with my colleagues on how to find design inspirations outside of the Internet and why it is valuable to find them through other means. This article discusses how I find inspiration and stay stimulated to design. Why is finding inspiration an essential process of&#160;design? Finding inspiration is the process&#8230;<a href="https://stampede-design.com/blog/finding-inspiration-for-ui-ux-design/"> Keep reading</a></p>
<p>The post <a href="https://stampede-design.com/blog/finding-inspiration-for-ui-ux-design/">Finding Inspiration for UI/UX Design</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="lead">I recently did a knowledge-sharing session with my colleagues on how to find design inspirations outside of the Internet and why it is valuable to find them through other means. This article discusses how I find inspiration and stay stimulated to design.</p>



<h2 class="wp-block-heading">Why is finding inspiration an essential process of&nbsp;design?</h2>



<p>Finding inspiration is the process of being mentally stimulated to do or feel something, especially to do something creative.</p>



<p>In UI/UX design, it helps the designers build a moodboard, a group of design inspirations that the designers will use as a reference for colours, UI components and sometimes even interactions.</p>



<p>These inspirations are essential so that it helps the designer to come up with something special and unique for a problem they are trying to solve</p>



<h2 class="wp-block-heading">What are the limitations of finding inspiration on the Internet?</h2>



<p>Finding inspiration for UI design seems very easy these days as information is readily available on the Internet. However, inspiration on the Internet can sometimes be limiting.</p>



<figure class="wp-block-image size-large is-style-rectangular"><img loading="lazy" decoding="async" width="790" height="337" src="https://stampede-design.com/wp-content/uploads/2022/12/Screenshot-2022-12-27-at-3.25.22-PM-790x337.png" alt="" class="wp-image-11327" srcset="https://stampede-design.com/wp-content/uploads/2022/12/Screenshot-2022-12-27-at-3.25.22-PM-790x337.png 790w, https://stampede-design.com/wp-content/uploads/2022/12/Screenshot-2022-12-27-at-3.25.22-PM-300x128.png 300w, https://stampede-design.com/wp-content/uploads/2022/12/Screenshot-2022-12-27-at-3.25.22-PM-768x327.png 768w, https://stampede-design.com/wp-content/uploads/2022/12/Screenshot-2022-12-27-at-3.25.22-PM-1536x654.png 1536w, https://stampede-design.com/wp-content/uploads/2022/12/Screenshot-2022-12-27-at-3.25.22-PM-2048x872.png 2048w" sizes="(max-width: 790px) 100vw, 790px" /></figure>



<p>Based on my observations and experience, searching for inspirations you don’t know is hard. It’s almost always the things you already know or are interested in. This bias can limit the designers from finding something out of the box.</p>



<p>Inspiration platforms such as Dribbble and Behance, accessible to the public, are too aesthetically focused and not functional if applied to UI/UX design.</p>



<p>Moreover, some problems can’t be found easily online, especially issues from large corporations with specific users and goals that might not be available online compared to B2C applications.</p>



<h2 class="wp-block-heading">So, what other ways can the designers gather more interesting inspirations?</h2>



<p>Most of the time, designers will gather inspiration during a project which is quite reactive. Inspiration is all around us in our daily lives, and we need to train our senses to detect them proactively and, most importantly, record them for future reference.</p>



<h3 class="wp-block-heading"><strong>Experience kiosk interface design</strong></h3>



<p>Places like public transport stations and your country’s city centres can help designers to be inspired with a lot of applicable inspirations. The reason is that you experience how people use and interact with services, tools and apps.</p>



<div class="wp-block-jetpack-tiled-gallery is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:69.30029%"><figure class="tiled-gallery__item"><img decoding="async" alt="" data-height="786" data-id="11328" data-link="https://stampede-design.com/?attachment_id=11328" data-url="https://stampede-design.com/wp-content/uploads/2022/12/121823E8-3165-4E39-BAC4-24DDC56F1C5D_1_105_c-790x621.jpeg" data-width="1000" src="https://i0.wp.com/stampede-design.com/wp-content/uploads/2022/12/121823E8-3165-4E39-BAC4-24DDC56F1C5D_1_105_c-790x621.jpeg?ssl=1" data-amp-layout="responsive" /></figure></div><div class="tiled-gallery__col" style="flex-basis:30.69971%"><figure class="tiled-gallery__item"><img decoding="async" alt="" data-height="1182" data-id="11329" data-link="https://stampede-design.com/?attachment_id=11329" data-url="https://stampede-design.com/wp-content/uploads/2022/12/BDE4B1A9-37EE-49D4-A1A8-4D3ADED033DF_1_105_c.jpeg" data-width="665" src="https://i2.wp.com/stampede-design.com/wp-content/uploads/2022/12/BDE4B1A9-37EE-49D4-A1A8-4D3ADED033DF_1_105_c.jpeg?ssl=1" data-amp-layout="responsive" /></figure></div></div></div></div>



<p>I like to explore the usability of kiosk UI in public transport stations, fast food chains, and tourist spots whenever I use them in my country and other places. I like to observe how locals and tourists use it, such as:</p>



<ol class="wp-block-list">
<li>How they interact with it, whether they need clarification or some help from others to use the interface</li>



<li>Who are the users? Are they locals or tourists?</li>



<li>How do they pay for the fare? Is it through e-wallets, credit cards or physical banknotes</li>
</ol>



<p>These user interfaces and interactions can serve as good inspirations for design later on, especially for service design.</p>



<figure class="wp-block-image size-large is-resized is-style-default"><img loading="lazy" decoding="async" src="https://stampede-design.com/wp-content/uploads/2022/12/3731459C-AA15-4449-809A-65B44C887177_1_105_c-790x352.jpeg" alt="" class="wp-image-11330" width="948" height="422" srcset="https://stampede-design.com/wp-content/uploads/2022/12/3731459C-AA15-4449-809A-65B44C887177_1_105_c-790x352.jpeg 790w, https://stampede-design.com/wp-content/uploads/2022/12/3731459C-AA15-4449-809A-65B44C887177_1_105_c-300x134.jpeg 300w, https://stampede-design.com/wp-content/uploads/2022/12/3731459C-AA15-4449-809A-65B44C887177_1_105_c-768x342.jpeg 768w, https://stampede-design.com/wp-content/uploads/2022/12/3731459C-AA15-4449-809A-65B44C887177_1_105_c.jpeg 1328w" sizes="(max-width: 948px) 100vw, 948px" /><figcaption class="wp-element-caption">Train lines inspiration for labelling in user flows</figcaption></figure>



<p>These user interfaces and interactions can serve as good inspirations for design later on, especially for service design.</p>



<p>It might help designers build user journey maps and determine a better interaction for specific users, as many people of different ages and life experiences use these public systems.</p>



<h3 class="wp-block-heading">Skincare shops</h3>



<p>I also like seeing the packaging designs from skincare shops like Innisfree, body shop, and loccitane.</p>



<figure class="wp-block-image size-large is-resized is-style-default"><img loading="lazy" decoding="async" src="https://stampede-design.com/wp-content/uploads/2022/12/IMG_2244-1-790x790.jpg" alt="" class="wp-image-11336" width="948" height="948" srcset="https://stampede-design.com/wp-content/uploads/2022/12/IMG_2244-1-790x790.jpg 790w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2244-1-300x300.jpg 300w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2244-1-150x150.jpg 150w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2244-1-768x768.jpg 768w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2244-1-1536x1536.jpg 1536w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2244-1-2048x2048.jpg 2048w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2244-1-95x94.jpg 95w" sizes="(max-width: 948px) 100vw, 948px" /><figcaption class="wp-element-caption">Package designs from loccitane</figcaption></figure>



<p>The package design contains a lot of lovely illustrations created by talented illustrators in Malaysia and from other countries.</p>



<p>They act as colour inspiration that you can touch and feel compared to Dribbble, Behance’s digital version. You can learn how colours are paired to achieve harmony, which UI designers can use in the digital world. Though, of course, you should follow only some things.</p>



<h4 class="wp-block-heading">Books</h4>



<figure class="wp-block-image size-large is-resized is-style-default"><img loading="lazy" decoding="async" src="https://stampede-design.com/wp-content/uploads/2022/12/2C0FE0EF-B733-4E48-B7F8-CBE934991CF9_1_105_c-1-790x593.jpeg" alt="" class="wp-image-11338" width="949" height="712" srcset="https://stampede-design.com/wp-content/uploads/2022/12/2C0FE0EF-B733-4E48-B7F8-CBE934991CF9_1_105_c-1-790x593.jpeg 790w, https://stampede-design.com/wp-content/uploads/2022/12/2C0FE0EF-B733-4E48-B7F8-CBE934991CF9_1_105_c-1-300x225.jpeg 300w, https://stampede-design.com/wp-content/uploads/2022/12/2C0FE0EF-B733-4E48-B7F8-CBE934991CF9_1_105_c-1-768x576.jpeg 768w, https://stampede-design.com/wp-content/uploads/2022/12/2C0FE0EF-B733-4E48-B7F8-CBE934991CF9_1_105_c-1.jpeg 1024w" sizes="(max-width: 949px) 100vw, 949px" /><figcaption class="wp-element-caption">Thailand Creative &amp; Design Center (TCDC) Design library</figcaption></figure>



<p>Before, user interface designs were a thing now. One of the best inspirations for designers to gather are from books, especially for designers that don’t design for digital screens.</p>



<p>I love flipping through design books as not only do they look nice physically, but they also have some excellent documentation on how things are designed.</p>



<p>I’m always very into grid, typography and signage design in train stations, so I bought some design books that talk about them, such as how and why they were implemented in such a way.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="790" height="790" src="https://stampede-design.com/wp-content/uploads/2022/12/IMG_2243-1-790x790.jpg" alt="" class="wp-image-11339" srcset="https://stampede-design.com/wp-content/uploads/2022/12/IMG_2243-1-790x790.jpg 790w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2243-1-300x300.jpg 300w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2243-1-150x150.jpg 150w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2243-1-768x768.jpg 768w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2243-1-1536x1536.jpg 1536w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2243-1-2048x2048.jpg 2048w, https://stampede-design.com/wp-content/uploads/2022/12/IMG_2243-1-95x94.jpg 95w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">Some design books I owned that guides me in design</figcaption></figure>



<p>Based on the image above. You might think these books are for graphic and type designers, which is true. It is also usable for UI designers on the digital screen; the theory is still the same. They are just applied on a different medium with particular requirements that UI designers need to consider.</p>



<p>Some books are written in other languages but I mainly needed the visual inspiration and if I needed to read it, I’ll use Google Lens to translate it through my phone’s camera.</p>



<h2 class="wp-block-heading">Interfaces from movies and&nbsp;games</h2>



<div class="wp-block-jetpack-tiled-gallery is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:48.67111%"><figure class="tiled-gallery__item"><img decoding="async" alt="" data-height="712" data-id="11340" data-link="https://stampede-design.com/?attachment_id=11340" data-url="https://stampede-design.com/wp-content/uploads/2022/12/martian-UI-790x469.png" data-width="1200" src="https://i1.wp.com/stampede-design.com/wp-content/uploads/2022/12/martian-UI-790x469.png?ssl=1" data-amp-layout="responsive" /></figure></div><div class="tiled-gallery__col" style="flex-basis:51.32889%"><figure class="tiled-gallery__item"><img decoding="async" alt="" data-height="900" data-id="11341" data-link="https://stampede-design.com/?attachment_id=11341" data-url="https://stampede-design.com/wp-content/uploads/2022/12/nasa_martian-UI-790x444.jpeg" data-width="1600" src="https://i0.wp.com/stampede-design.com/wp-content/uploads/2022/12/nasa_martian-UI-790x444.jpeg?ssl=1" data-amp-layout="responsive" /></figure></div></div></div></div>



<p>Interfaces from movies and video games, especially futuristic ones, usually have UIs that WOW audiences and gamers. That WOW factor is one of the best things designers can capture and apply to their designs.</p>



<p>However, these inspirations also have their limitations. It might not be suitable for normal public users, but it might be possible for heavy engineering applications or high-tech projects if you are working on one.</p>



<p>There is one way to overcome this limitation (it doesn’t apply to all of the sci-fi movies) is that choose sci-fi that is more realistic such as The Martian which isn’t too far away into the future and it is more realistic.</p>



<p><strong>You can find these inspirations here:</strong></p>



<ul class="wp-block-list">
<li><a href="https://territorystudio.com/" rel="noreferrer noopener" target="_blank">Territory Studio</a></li>



<li><a href="https://gmunk.com/" rel="noreferrer noopener" target="_blank">Gmunk</a></li>
</ul>



<h2 class="wp-block-heading">Journaling your inspiration</h2>



<p>Finally, make it a habit to observe the interactions between this UI and interactions and take note of it. You don’t have to write it down in a pocket notebook. Using your phone’s camera is a great way to capture and save the information to your computer.</p>



<p>These are the ways that I found helpful as a UI/UX designer to train myself to capture inspiration even when I’m not actively designing something so that I can use them whenever I need them. It saves time and teaches the designer to be sensitive to potential solutions that are already available but need to be more straightforward.</p>
<p>The post <a href="https://stampede-design.com/blog/finding-inspiration-for-ui-ux-design/">Finding Inspiration for UI/UX Design</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/finding-inspiration-for-ui-ux-design/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Microinteractions: Details that Are Not the Details</title>
		<link>https://stampede-design.com/blog/details-not-details/</link>
					<comments>https://stampede-design.com/blog/details-not-details/#respond</comments>
		
		<dc:creator><![CDATA[Zana Fauzi]]></dc:creator>
		<pubDate>Fri, 06 May 2016 04:55:24 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[details]]></category>
		<category><![CDATA[interaction design]]></category>
		<category><![CDATA[microinteractions]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[UX craft]]></category>
		<guid isPermaLink="false">http://dev.stampedelabs.com/client/v3/wp/?p=6357</guid>

					<description><![CDATA[<p>We have seen microinteractions - we encounter them every day. Here are some rundown on microinteractions and how they could help make or break the website.</p>
<p>The post <a href="https://stampede-design.com/blog/details-not-details/">Microinteractions: Details that Are Not the Details</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="lead" class="lead">The <a href="https://stampede-design.com/about/">strategists at Stampede</a> are up to something again. One day, Jared the Content Strategist, who ran <a href="http://constructs.stampede-design.com/" target="_blank">Constructs</a>, and I sat down for a meeting about interfaces in general.</p>
<p>We ran through a number of websites we liked and as we cooed over every single detail that makes the user experience even more delightful, we decided to create our own Slack channel called #ui-inventory. There, we shall post our favourite interface elements, be it icon, copy, buttons, forms etc. This shall serve as references for both of us as we work on our strategies for projects as well as for our UI/UX designer, Shaza. Who knows what shall we do with the repository later?</p>
<p><div class="full"><img decoding="async" class="alignnone wp-image-7581" src="https://stampede-design.com/wp-content/uploads/2016/05/brain.gif" alt="The Brain" /></div></p>
<h2>What are microinteractions?</h2>
<p><a href="http://microinteractions.com/what-is-a-microinteraction/" target="_blank">Microinteractions</a> can be defined as ‘contained product moments that revolve around a single use case—they have one main task’. They can impact things such as:</p>
<ul>
<li>Turning things off or on</li>
<li>Commenting in any digital medium</li>
<li>Changing a setting or process</li>
<li>Viewing a notification or message</li>
<li>Sliding down the “screen” on a mobile device to refresh content (maybe with sound)</li>
<li>Interacting with a data element, such as checking the weather</li>
<li>Accomplishing any single task</li>
<li>Connecting devices, such as those for multi-player games, or printing from your laptop</li>
<li>Sharing or liking a photo or video on a website</li>
</ul>
<p><a href="http://www.odannyboy.com/" target="_blank">Dan Saffer</a>, Director of Interaction Design at <a href="http://smartdesignworldwide.com/" target="_blank">Smart Design</a> and the author of the book <a href="http://microinteractions.com/" target="blank">Microinteractions</a>, says “Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favourite or “like” something, you are engaging with a microinteraction. They are everywhere: in the devices we carry, the appliances in our house, the apps on our phones and desktops, even embedded in the environments we live and work in. Most appliances and some apps are built entirely around one microinteraction.”</p>
<p>The book Microinteractions is inspired by Charles Eames’ maxim, <em>“The details are not the details. They make the design.</em>”</p>
<p><div class="full"><img decoding="async" class="alignnone wp-image-7583" src="https://stampede-design.com/wp-content/uploads/2018/02/microinteractions-structure.jpg" alt="Micro-interactions Structure" /></div></p>
<h2>Examples of microinteractions in UI</h2>
<p>We have seen microinteractions. They are nothing new and we encounter them every day, often adding joy to our experience when they are done well.</p>
<p><div class="full"><img decoding="async" class="wp-image-7587" src="https://stampede-design.com/wp-content/uploads/2016/05/mailchimp-rock.gif" alt="Mailchimp Rocks" /><p class="capt_block">Mailchimp’s series of monkey hands are my favourite microinteraction so far</p></div></p>
<p>We see them when we see <a href="http://reface.me/wp-content/uploads/new-friend-request.png" target="_blank">new friend requests in Facebook</a>, <a href="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAXsAAAAJGJkYTcyMzVjLTQzZjAtNGU5ZS1hZmU5LTExNGViYjczNWNlNQ.png" target="_blank">the iPhone 6s’ new 3D Touch feature</a>, <a href="http://bostonhumanfactors.com/wp-content/uploads/2015/02/IMG_33201.png" target="_blank">the Uber rides waiting for requests around our block</a>, <a href="http://baymard.com/blog/highlight-products-if-in-users-cart" target="_blank">that the new cute iPhone cases we added to the cart while shopping are already highlighted so that we don’t forget which ones</a>, <a href="https://marcabraham.files.wordpress.com/2013/07/youtube-feedback-loop.png" target="_blank">the new Psy videos in Youtube</a>, that we<a href="https://chriswrightdesign.com/articles/neglected-design/img/fig2_mailchimp.jpg" target="_blank"> have successfully sent that email campaign in Mailchimp</a>, <a href="https://www.safaribooksonline.com/library/view/microinteractions-full-color/9781491945957/httpatomoreillycomsourceoreillyimages1820522.png" target="_blank">the simple case of figuring the strength of our chosen password</a> and <a href="https://s-media-cache-ak0.pinimg.com/236x/8a/f7/9a/8af79afece147c42a000e153e5ea7128.jpg" target="_blank">even in our favourite Slack</a>, when our password which consists of mixed cases and numbers got too dreadful for us to type in mobile.</p>
<h2>How do you know you need a microinteraction?</h2>
<p>Simon Proudfoot from <a href="http://www.demacmedia.com/" target="_blank">Demac Media</a> has given <a href="http://www.demacmedia.com/design-user-experience/microinteractions/" target="_blank">a great analogy</a> on how to know whether you need a microinteraction — ask yourself two simple questions:</p>
<ul>
<li>Does adding this microinteraction potentially take away from the user interacting with some other part of the site? (if no, proceed)</li>
<li>Does this add experience to the user? (if yes, proceed)</li>
</ul>
<p>Otherwise, they are not necessary. In other words, think of microinteractions as some final personal touches to your product on top of the already amazing existing product.</p>
<h2>The future of microinteractions in UI</h2>
<p>The Next Web outlines some <a href="http://thenextweb.com/dd/2015/08/17/why-micro-interactions-are-the-secret-to-great-design/#gref" target="_blank">great guidelines on making sure microinteractions work well</a>:</p>
<ul>
<li><b>Micro-interactions must live on through repeated use.</b> What’s fun and quirky on first use might become annoying after 100 uses. Be cautious of gimmicks or odd design cues.</li>
<li><b>Simplicity rules.</b> Simple type, simple language, simple colors, and simple design. Don’t make the design any more complicated than the action.</li>
<li><b>Give each micro-interaction a human voice.</b> Text should read <a href="http://thenextweb.com/dd/2015/05/06/6-simple-tips-for-designing-copy-on-the-web/" target="_blank">like people talk</a>, not like a machine.</li>
<li><b>Add a fun divot with animation, but don’t go crazy.</b> Consider the bouncing icon in the dock of your MacBook as a program loads. It lets you know the program is responding with a simple animation but does not get in the way of what you are doing.</li>
<li><b>Create a visual harmony with other elements</b>. If your app has a blue color scheme, micro-interactions should use the same hues so that the visual connection to the parent design or app is there for users.</li>
<li><b>Don’t overthink it.</b> Overdesigning a micro-interaction can be lethal. Let’s go back to the simplicity of the text message notification. Just a simple, singular display on the screen with enough information to be effective – who the message is from, what the message contains and a way to respond.</li>
<li><b>Consider each detail with care.</b> Because micro-interactions are so small, every element of the design matters. Ensure that every detail, down to the last pixel, is perfected before launch.</li>
<li><b>Think about further adaptations or how subsequent micro-interactions will work.</b> Does the exact same thing happen every time for every user? Or are there changes to the micro-interaction over time? (Consider the alarm that gets louder each time after the snooze button is hit.) These smart details will set the best micro-interactions apart from everything else.</li>
</ul>
<p>If done well, the tiny humanising details in microinteractions have the power to add delight to the websites or apps. They could not be done half-baked, yet they could not be overdone.</p>
<p>They are the details that could make or break the website or the app.</p>
<p><em>This article was <a href="http://curated.stampede-design.com/2016/04/details-that-are-not-the-details/" target="_blank">originally posted</a> on <a href="http://curated.stampede-design.com/" target="_blank">Curated@Stampede</a>.</em></p>
<p>The post <a href="https://stampede-design.com/blog/details-not-details/">Microinteractions: Details that Are Not the Details</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/details-not-details/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>8 Clean and Minimal Ways to Display E-Commerce Products</title>
		<link>https://stampede-design.com/blog/8-clean-minimal-ways-display-e-commerce-products/</link>
					<comments>https://stampede-design.com/blog/8-clean-minimal-ways-display-e-commerce-products/#respond</comments>
		
		<dc:creator><![CDATA[Dahlia Ahad]]></dc:creator>
		<pubDate>Thu, 25 Sep 2014 19:51:12 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[e-commerce]]></category>
		<category><![CDATA[minimal design]]></category>
		<category><![CDATA[product display]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[visual design]]></category>
		<guid isPermaLink="false">http://dev.stampedelabs.com/client/v3/wp/?p=5905</guid>

					<description><![CDATA[<p>An e-commerce store design sometimes gets in the way of the product and overwhelms user. How do we design product displays that are clean and minimal?</p>
<p>The post <a href="https://stampede-design.com/blog/8-clean-minimal-ways-display-e-commerce-products/">8 Clean and Minimal Ways to Display E-Commerce Products</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p class="lead" class="lead">Your product category page is similar to a storefront in a shopping mall. Sometimes you are drawn to a minimal but creatively displayed storefront that puts their product in the best light by removing clutter.</p>
<p><img decoding="async" class="alignnone size-full wp-image-5859" src="https://stampede-design.com/wp-content/uploads/2014/10/blog-8-ways.jpg" alt="Blog 8 ways" /></p>
<p>In an e-commerce store, at times the design gets in the way of the product. It overwhelms user. A good design blends in the background, almost unnoticeable even. The question is, how do we keep a product display page clean and minimal with so many things vying for user&#8217;s attention?</p>
<p>Here are 8 excellent examples of how you could do it.</p>
<h2>More Rare</h2>
<p><a href="http://www.morerare.com/" target="_blank">More Rare</a><span> is an online store operated by graphic designer Rieko Vining selling rare and antique vintage products from Japan. Rieko created a crispy clean site with tan-coloured background, a theme synonymous with antiquity, that displays products in a beautiful grid.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="603" class="alignnone size-full wp-image-5909" src="https://stampede-design.com/wp-content/uploads/2014/10/more-rare.jpg" alt="more-rare" srcset="https://stampede-design.com/wp-content/uploads/2014/10/more-rare.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/more-rare-245x300.jpg 245w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<p><span>It is so minimal that you won&#8217;t see any any description until you mouse-over an item. It captures a visit to a small vintage shop, where you let the charm of a product pulls you in before learning more about their story.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="537" class="alignnone size-full wp-image-5910" src="https://stampede-design.com/wp-content/uploads/2014/10/more-rare-1.jpg" alt="more-rare-1" srcset="https://stampede-design.com/wp-content/uploads/2014/10/more-rare-1.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/more-rare-1-275x300.jpg 275w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<h2>AIAIAI</h2>
<p><span>Headquartered in Copenhagen, </span><a href="http://www.aiaiai.dk/" target="_blank">AIAIAI</a><span> is an audio design company producing modern, minimalist headphones and earphones deliver clear, amplified sound. True to being Denmark’s leader in acoustic design and engineering. their online store retains the neat, grid-based layout, relying only on whitespace to distinguish one product cell from another.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="766" class="alignnone size-full wp-image-5911" src="https://stampede-design.com/wp-content/uploads/2014/10/aiaiai.jpg" alt="aiaiai" srcset="https://stampede-design.com/wp-content/uploads/2014/10/aiaiai.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/aiaiai-193x300.jpg 193w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<p><span>Much of the space is taken by product shots compared to the minimal footprints of product name and price. User can immediately switch between available colours simply by hovering their mouse too. This is a great option considering that most e-commerce only serves this interaction at the product card level.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="290" class="alignnone size-full wp-image-5912" src="https://stampede-design.com/wp-content/uploads/2014/10/aiaiai-2.jpg" alt="aiaiai-2" srcset="https://stampede-design.com/wp-content/uploads/2014/10/aiaiai-2.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/aiaiai-2-300x177.jpg 300w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<h2>Lush</h2>
<p><span>Lush is a company making fresh handmade cosmetics, headquartered in the United Kingdom. The brand uses wholely natural ingredients in their products and is an active advocate against animal testing. Lush&#8217;s products have an exclusive feel to them, almost as if every product is prepared delicately to order and sent directly to your bathroom from Lush&#8217;s famed </span><a href="https://www.lush.co.uk/kitchen" target="_blank">Kitchen</a><span>.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="708" class="alignnone size-full wp-image-5913" src="https://stampede-design.com/wp-content/uploads/2014/10/lush-1.jpg" alt="lush-1" srcset="https://stampede-design.com/wp-content/uploads/2014/10/lush-1.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/lush-1-208x300.jpg 208w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<p><span>The category display is immersive. Product placements follow a form of </span><a href="http://masonry.desandro.com/" target="_blank">masonry grid</a><span> — named after mason fitting stones in a wall — and are scattered among different themes like News and Features. The result is not severely minimal but still maintains a clean yet whimsically cluttered look. The contrast between the busy theme and sparse product details works too. Users can easily differentiate the two and by being quieter than the busy theme, a product actually shines better.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="524" class="alignnone size-full wp-image-5914" src="https://stampede-design.com/wp-content/uploads/2014/10/lush-2.jpg" alt="lush-2" srcset="https://stampede-design.com/wp-content/uploads/2014/10/lush-2.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/lush-2-282x300.jpg 282w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<h2>Artiitii</h2>
<p><a href="http://www.artiitii.com/" target="_blank">Artiitii</a><span> is an online store selling unique limited edition prints dedicated to the greatest artists in the world. Run by two childhood friends passionate about the beauty of combining music, art and design, Artiitii wants to bring something unique into a world of mass production. Each of Artiitii&#8217;s product is limited to 50 prints each, all carefully hand drawn.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="771" class="alignnone size-full wp-image-5915" src="https://stampede-design.com/wp-content/uploads/2014/10/artiitii-1.jpg" alt="artiitii-1" srcset="https://stampede-design.com/wp-content/uploads/2014/10/artiitii-1.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/artiitii-1-191x300.jpg 191w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<p><span>The prints are all in rectangular shape for easy framing but displayed in rounded avatar style — a very effective style useful to humanizing Internet content. Because each print is a labour of love and limited to 50, Artiitii includes the number of prints sold under every product. It gives a sense of urgency to fans and provides a motivation strong enough to complete the purchase before it goes out of print.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="411" class="alignnone size-full wp-image-5916" src="https://stampede-design.com/wp-content/uploads/2014/10/artiitii-2.jpg" alt="artiitii-2" srcset="https://stampede-design.com/wp-content/uploads/2014/10/artiitii-2.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/artiitii-2-300x251.jpg 300w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<h2>Anyi Lu</h2>
<p><a href="http://anyilu.com/" target="_blank">Anyi Lu</a><span> is another website that relies heavily on good product photography to hint users that more information is available by interacting with each product. They do take it up a notch through depth perception in every product shot. The grid is varied between 3 and 2 columns, with generous room to breathe, reminding us of those luxuriously sparse shelf space in high-end stores.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="763" class="alignnone size-full wp-image-5917" src="https://stampede-design.com/wp-content/uploads/2014/10/anyi-lu-1.jpg" alt="anyi-lu-1" srcset="https://stampede-design.com/wp-content/uploads/2014/10/anyi-lu-1.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/anyi-lu-1-193x300.jpg 193w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<p><span>As user hovers their mouse on a shoe, something interesting happens. The product will blur and recedes to the background a little to bring forth its name and price. It&#8217;s all done very stylishly though the effect is somewhat laggy for the first few tries.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="438" class="alignnone size-full wp-image-5918" src="https://stampede-design.com/wp-content/uploads/2014/10/anyi-lu-2.jpg" alt="anyi-lu-2" srcset="https://stampede-design.com/wp-content/uploads/2014/10/anyi-lu-2.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/anyi-lu-2-300x267.jpg 300w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<h2>HeyShop</h2>
<p>An online store from Barcelona, <a href="http://heyshop.es/" target="_blank">HeyShop</a> is the storefront for<a href="http://heystudio.es/" target="_blank">Hey Studio</a>, where they display and sell personal projects like posters and books. Hey is a small studio so the posters will be made on demand using digital printing and high quality paper. Similar to Artiitii, this print-on-demand service differentiates their products from other mass-produced items.</p>
<p>Products are displayed with minimal description but in different format, based on types. Books are placed in shelves, bags hanged and prints framed on the wall. Despite the different display modes, they all in the end feel like a unified gallery and it serves the Hey brand beautifully.</p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="736" class="alignnone size-full wp-image-5919" src="https://stampede-design.com/wp-content/uploads/2014/10/hey-1.jpg" alt="hey-1" srcset="https://stampede-design.com/wp-content/uploads/2014/10/hey-1.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/hey-1-201x300.jpg 201w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<p><span>Interacting with specific product will bring about a simple black panel, completely obscuring the image with product name, dimension (for prints), price as well as a link to view more info. What could be more amazing is if these items could do a little flip and show all information at the back of their frame, wall or book cover. It&#8217;s definitely a not a major feat with CSS3 nowadays.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="349" class="alignnone size-full wp-image-5920" src="https://stampede-design.com/wp-content/uploads/2014/10/hey-2.jpg" alt="hey-2" srcset="https://stampede-design.com/wp-content/uploads/2014/10/hey-2.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/hey-2-300x213.jpg 300w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<h2>Hard Graft</h2>
<p><span>Founded in 2007 by designers monie.ka and James Teal, </span><a href="http://www.hardgraft.com/" target="_blank">Hard Graft</a><span> produces upscale lifestyle accessories using premium leather and good old-fashioned workmanship. The brand carries beautifully crafted leather bags, iPhone/iPad cases and many more, using rich, premium and highly resourceful materials. Product shots absolutely takes center stage here, with oversized images showing the tiniest leather detailings. In deliberate contrast, product name and price are shown in tiny font sizes with the occasional sticker-style label informing user that an item is specific to a certain smartphone model.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="646" class="alignnone size-full wp-image-5921" src="https://stampede-design.com/wp-content/uploads/2014/10/hard-graft-1.jpg" alt="hard-graft-1" srcset="https://stampede-design.com/wp-content/uploads/2014/10/hard-graft-1.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/hard-graft-1-228x300.jpg 228w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<p><span>What&#8217;s interesting is how photography of the products at times breaks the grid by showing two products hanging from a horizontal bar spanning the entire page, effectively disrupting the dual-column scrolling. The result? The break serves as a resting point for your eyes and you tend to linger more to appreciate the exquisite craftmanship. Nicely done.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="462" class="alignnone size-full wp-image-5922" src="https://stampede-design.com/wp-content/uploads/2014/10/hard-graft-2.jpg" alt="hard-graft-2" srcset="https://stampede-design.com/wp-content/uploads/2014/10/hard-graft-2.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/hard-graft-2-300x282.jpg 300w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<h2>Patrik Ervell</h2>
<p><span>The last in our list is quite a unique website. </span><a href="https://patrikervell.com/" target="_blank">Patrik Ervell</a><span> is an American-born menswear designer based in New York City. His designs are characterized as utilitarian, minimal and elegant and it translates beautifully into his online shopping experience. The category page is minimally done with hardly any stray elements present. No other information is provided besides product name so user will need to click to view full details on the product page.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="698" class="alignnone size-full wp-image-5923" src="https://stampede-design.com/wp-content/uploads/2014/10/patrik-ervell-1.jpg" alt="patrik-ervell-1" srcset="https://stampede-design.com/wp-content/uploads/2014/10/patrik-ervell-1.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/patrik-ervell-1-211x300.jpg 211w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<p><span>When you first land on the website, the models will start moving in several directions to show users see how each outfit looks like from front and side. It’s almost like a watching a runway show and far more convincing than a 360-degree static product display. Being able to see real-life fitting of garments is something online customers will truly appreciate.</span></p>
<p><div class="full"><img loading="lazy" decoding="async" width="492" height="262" class="alignnone size-full wp-image-5924" src="https://stampede-design.com/wp-content/uploads/2014/10/patrik-ervell-2.jpg" alt="patrik-ervell-2" srcset="https://stampede-design.com/wp-content/uploads/2014/10/patrik-ervell-2.jpg 492w, https://stampede-design.com/wp-content/uploads/2014/10/patrik-ervell-2-300x160.jpg 300w" sizes="(max-width: 492px) 100vw, 492px" /></div></p>
<h2>Conclusion</h2>
<p>As shown in the examples above, e-commerce product display can take many forms. Some industries like the vitamins &amp; supplement rarely ventures outside their utilitarian design as it serves their purpose to provide as much information as possible for consumer comparison.</p>
<p>In others like fashion and lifestyle industry, you will notice more variations in getting the message across. Attractive product placements and beautiful photography truly are deciding factors whether your casual visitor will remain as one or becomes an active follower of your brand.</p>
<p>The post <a href="https://stampede-design.com/blog/8-clean-minimal-ways-display-e-commerce-products/">8 Clean and Minimal Ways to Display E-Commerce Products</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/8-clean-minimal-ways-display-e-commerce-products/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Showcase: Meet the Team pages</title>
		<link>https://stampede-design.com/blog/meet-the-team/</link>
					<comments>https://stampede-design.com/blog/meet-the-team/#comments</comments>
		
		<dc:creator><![CDATA[Mujib Jazmin]]></dc:creator>
		<pubDate>Sat, 12 May 2012 19:24:38 +0000</pubDate>
				<category><![CDATA[Inside Stampede]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[inside stampede]]></category>
		<category><![CDATA[meet the team]]></category>
		<category><![CDATA[team page]]></category>
		<category><![CDATA[UI design]]></category>
		<guid isPermaLink="false">https://stampede-design.com/blog/?p=2129</guid>

					<description><![CDATA[<p>Mujib believes that running a working team is like running a kitchen - no matter how bad the recipes are, if you own a great team of cooks and helpers, everything is going to turn out just fine.</p>
<p>The post <a href="https://stampede-design.com/blog/meet-the-team/">Showcase: Meet the Team pages</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Let me elaborate. I read an article by programmer Joel Spolsky, <a href="http://www.joelonsoftware.com/articles/fog0000000024.html" target="_blank">Big Macs vs The Naked Chef </a>&#8211; comparing a McDonald&#8217;s cook and Jamie Oliver from the Naked Chef.</p>
<blockquote><p>Behind every successful project there is a set of really awesome people.</p></blockquote>
<p>A McDonald&#8217;s cook follow a set of detailed instructions whilst Jamie just pinches in a bit of salt and throws in a little bit of rosemary &#8211; within his workspace is a flurry of willy-nilly ingredients tossed aside. In the end we all would come to an agreement that Jamie&#8217;s cooking tastes a lot better and much healthier than the stuffs cooked over at McDonald&#8217;s.</p>
<p>The same goes to running a project &#8211; if you have bad cooks no matter how good and detailed your recipes are the dishes are probably going down the drain (no pun intended).</p>
<p>This is why good people matter in a company &#8211; and how we showcase them to the world do too. These people need their credits and some good representation of who they are and how they look like. This is where team pages play a role. It would also give our clients an idea of how we look like (so that they can get to know us as well as not to scare them off!).</p>
<p>Without further ado, here I present my list of my favorite Meet the Team pages.</p>
<h2>#1 &#8211; Caxiamgroup.com</h2>
<p><a href="http://www.caxiamgroup.com/" target="_blank">Caxiamgroup</a> is a web design and development company located in Orlando, Florida. They have a carefully assembled team of strategists, designers, developers, programmers &amp; marketers. Check out their <a href="http://www.caxiamgroup.com/about/team/eric.cfm" target="_blank">Meet the Team</a> page.</p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-pd2d9kurkusk93761hqape8ksd.jpg" alt="" /></div></p>
<p>There is an attractive use of slider at the top of the page showing their team members categorized based on the transition from Creative to Technical team.</p>
<p>Everyone in the team is shown in three different poses as a way to show them that they are more than what they do at Caxiamgroup &#8211; for example Brian here, aside from a User Experience Designer, he is also a sweet family guy.</p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-j94trecesyt79axgtxuci7b4e4.jpg" alt="" /></div></p>
<p>Everyone gets to describe themselves in a set of keywords under their profile picture(s).</p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-eqcduy4u3txjtmnmiqmrm87n33.jpg" alt="" /></div></p>
<p>&#8230; along with some extra bits of random information accompanying their profile.</p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-eu73fmp48xd9dm77wndnu5kccx.jpg" alt="" /></div></p>
<h2>#2- Nordkapp.fi</h2>
<p><a href="http://nordkapp.fi/" target="_blank">Nordkapp</a> is a group of experienced designers, strategists and technologists from Helsinki, Finland. Even the homepage looks stunningly smart already.</p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-fgryydxcmc3n5ucfd5i3rgantq.jpg" alt="" /></div></p>
<p>Click on any of the link on top and you will be directed to the page using our favorite <a href="https://stampede-design.com/2012/01/parallax-is-the-new-black/">parallax scrolling effect</a>.</p>
<p>The secret also lies in such strong copy to describe their team.</p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-868ha7n86wqdxhnqudqk6k2aex.jpg" alt="" /></div></p>
<p>The profile info is laid out so simple yet packs a punch. Not to mention (again), nice photographs too.</p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-nqys43puum4b728pdfkpxa637p.jpg" alt="" /></div></p>
<h2>#3- In2media.com</h2>
<p><a href="http://in2media.com/" target="_blank">In2media</a> is a digital agency hailing all the way from Copenhagen, Denmark. Established in 1994, the agency produces campaigns, corporate sites, brand channels, rich media sites, applications, and transaction sites as part of their solutions to strengthen the relations between clients and users.</p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-p185ygrebe5puxmruyw1f3udps.jpg" alt="" /></div></p>
<p>In general, click over any of those links and you will see that they have employed some cool CSS3 animations. The same goes when you hover the images, details and sliders in their Meet The Team section.</p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-bffmmyuimsd2kmm8dd25c99keg.jpg" alt="" /></div></p>
<p><div class="full"><img decoding="async" class="alignnone" src="https://img.skitch.com/20120512-jdynw1bp7sswd9ubexcensh8ud.jpg" alt="" /></div></p>
<p>These are just probably some of the Meet the Team pages that caught my eye, so if you have some other suggestions, feel free to drop them in the comments section.</p>
<p>(P/s: Check out our <a href="https://stampede-design.com/stampede-team.php">Meet the Team</a> page!)</p>
<p>The post <a href="https://stampede-design.com/blog/meet-the-team/">Showcase: Meet the Team pages</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://stampede-design.com/blog/meet-the-team/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
	</channel>
</rss>
