<?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>ux Archives &#8212; Stampede: the strategic design &amp; technology company</title>
	<atom:link href="https://stampede-design.com/blog/tag/ux/feed/" rel="self" type="application/rss+xml" />
	<link>https://stampede-design.com/blog/tag/ux/</link>
	<description>We are creating better worlds though thoughtful design and technology. Connect with us!</description>
	<lastBuildDate>Tue, 07 Apr 2026 09:05: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>ux Archives &#8212; Stampede: the strategic design &amp; technology company</title>
	<link>https://stampede-design.com/blog/tag/ux/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Live Product Testing: The gap between working and working well</title>
		<link>https://stampede-design.com/blog/live-product-testing-the-gap-between-working-and-working-well/</link>
					<comments>https://stampede-design.com/blog/live-product-testing-the-gap-between-working-and-working-well/#respond</comments>
		
		<dc:creator><![CDATA[Azim Hasnan]]></dc:creator>
		<pubDate>Fri, 24 Jan 2025 09:21:36 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[live product testing]]></category>
		<category><![CDATA[product design]]></category>
		<category><![CDATA[quality assurance]]></category>
		<category><![CDATA[user testing]]></category>
		<category><![CDATA[ux]]></category>
		<guid isPermaLink="false">https://stampede-design.com/?p=17585</guid>

					<description><![CDATA[<p>&#8220;Our analytics show users are completing their tasks,&#8221; the enterprise product owner told me confidently. &#8220;The features are all functioning as designed.&#8221; Yet adoption wasn&#8217;t growing as expected and user satisfaction scores were stagnant. This scenario plays out more often than you might think &#8211; products that work perfectly fine on paper, but somehow fail&#8230;<a href="https://stampede-design.com/blog/live-product-testing-the-gap-between-working-and-working-well/"> Keep reading</a></p>
<p>The post <a href="https://stampede-design.com/blog/live-product-testing-the-gap-between-working-and-working-well/">Live Product Testing: The gap between working and working well</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">&#8220;Our analytics show users are completing their tasks,&#8221; the enterprise product owner told me confidently. &#8220;The features are all functioning as designed.&#8221; Yet adoption wasn&#8217;t growing as expected and user satisfaction scores were stagnant.</p>



<figure class="wp-block-image size-large is-style-expanded mb-20"><img fetchpriority="high" decoding="async" width="790" height="377" src="https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-1-790x377.png" alt="A usability testing session conducted on-site. Features a user, a researcher and a laptop opening a website being tested for its usability." class="wp-image-17591" srcset="https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-1-790x377.png 790w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-1-300x143.png 300w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-1-768x366.png 768w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-1.png 1141w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">Similar to any usability testing session &#8211; the difference this time is using a live product instead of a prototype.</figcaption></figure>



<p>This scenario plays out more often than you might think &#8211; products that work perfectly fine on paper, but somehow fail to truly resonate with users in practice.</p>



<h2 class="wp-block-heading">Why teams skip live testing (and why that&#8217;s understandable)</h2>



<p>Let&#8217;s be honest &#8211; when you&#8217;re managing a product team, live testing often feels like a luxury you can&#8217;t afford. You&#8217;re juggling feature requests, fixing bugs, meeting deadlines and keeping stakeholders happy. The product is live, metrics are &#8220;okay,&#8221; and testing seems like something that can wait.<br>We get it. We&#8217;ve worked with enough product teams to understand the reality:</p>



<ul class="wp-block-list">
<li>Your backlog is already overwhelming</li>



<li>Resources are stretched thin</li>



<li>Stakeholders want new features, not refinements</li>



<li>Getting access to real users is challenging</li>



<li>Testing could disrupt existing workflows</li>
</ul>



<p>But what I’ve learned time and time again remains true: skipping proper testing now almost always costs more in the long run. When products evolve without deep user understanding, teams end up building features that don&#8217;t solve real problems, fixing symptoms instead of root causes, and missing opportunities for genuine improvement.</p>



<h2 class="wp-block-heading">What live testing really reveals: three stories</h2>



<h3 class="wp-block-heading">Story 1: The Trust Deficit</h3>



<p>A few years ago, while investigating an underused performance monitoring feature in an enterprise reporting application, we discovered something unexpected. Users had developed elaborate verification routines, double-checking every number in Excel. Why? A lack of trust in the data, stemming from inconsistent data input and unclear data lineage.</p>



<p>The solution wasn&#8217;t in the dashboard design &#8211; it was in fixing the upstream data collection process and making data sources transparent.</p>



<p><strong>Impact: </strong>The improved data collection process and transparency transformed how teams used the system. Analysts stopped maintaining parallel Excel sheets and began trusting the platform for critical decisions. Team leads reported more confident decision-making in planning meetings and the platform became their single source of truth for performance discussions.</p>



<h3 class="wp-block-heading">Story 2: The Presentation Paradox</h3>



<p>We were brought in to find out why a reporting dashboard was failing to drive action in executive meetings, despite its sophisticated analytics capabilities. Live testing revealed the core issue: we were forcing a long-form analysis tool to serve as a presentation medium.</p>



<p>This led to a breakthrough solution &#8211; creating a separate presentation mode that prioritised narrative flow over deep analysis, allowing presenters to tell clear data stories while maintaining access to detailed insights.</p>



<p><strong>Impact: </strong>The new presentation mode transformed how teams communicated data insights. What was once a source of confusion in executive meetings became a powerful storytelling tool. Leaders could now focus on strategic implications rather than questioning the numbers, leading to more decisive actions based on data insights.</p>



<h3 class="wp-block-heading">Story 3: Hidden Opportunities</h3>



<p>Late last year, I was part of the team at Stampede who were tasked to conduct a UX gap analysis for Malaysian government. We tested a startup ecosystem accelerator website with real users to identify the gap, but walked away with so much more. Not only did we identify immediate usability issues and recommended practical fixes, we also discovered unexpected ways users were finding value in the platform.</p>



<p><strong>Impact:</strong> Beyond addressing the immediate usability issues, the insights led to the development of new services that better matched how startups were actually using the platform. The client was able to evolve their offering from a simple resource website to a more comprehensive support platform that better served their ecosystem&#8217;s needs.</p>



<figure class="wp-block-image size-large is-style-expanded mb-20"><img decoding="async" width="790" height="372" src="https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-2-790x372.jpg" alt="A usability testing session being observed from observer room. Features a pair of researcher note-taking the session using their laptop." class="wp-image-17595" srcset="https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-2-790x372.jpg 790w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-2-300x141.jpg 300w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-2-768x361.jpg 768w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-2-1536x723.jpg 1536w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-image-2-2048x964.jpg 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption">Observing the session from a separated space provided valuable insights for both our team and stakeholders.</figcaption></figure>



<h2 class="wp-block-heading">The Stampede Approach: What’s the (whole) story?</h2>



<p>While many testing approaches focus on isolated aspects like UI or functionality, our methodology is designed to give product teams a holistic, more complete picture. To us, real insight comes from understanding not just how users interact with your product, but how your product fits into their broader work life.</p>



<p>Our approach combines both quantitative and qualitative methods, because we&#8217;ve learned that neither tells the complete story alone. When we spot a pattern in the data, we investigate the &#8220;why&#8221; through careful observation. When we observe interesting behavior, we validate its significance through data. This dual-lens approach helps establish clear causation, not just correlation.</p>



<h2 class="wp-block-heading">Making it work: our testing methodology</h2>



<p>Live product testing isn&#8217;t just about watching users click through interfaces. It&#8217;s a carefully orchestrated process that begins long before we meet any users and continues well beyond the testing sessions themselves. The team has refined our methodology through years of testing products across different scales and industries, from startup platforms to enterprise systems.</p>



<p>Here’s what we do and why they are effective.</p>



<h3 class="wp-block-heading">Setting the foundation well</h3>



<p>We begin by understanding the product context deeply. Having focused conversations with stakeholders to understand business goals and constraints, reviewing analytics to spot patterns worth investigating and designing research that fits your specific situation are all necessary homework. We&#8217;re particularly careful about selecting participants who can provide relevant insights &#8211; people who use your product in meaningful ways as part of their daily work.</p>



<p>As UX designers, what we look for is striking the right balance between rigour and flexibility. While we have a structured approach, we stay adaptable to product team&#8217;s needs and constraints. This thoughtful preparation helps us maximise the value of every testing session while minimising disruption to their operations.</p>



<h2 class="wp-block-heading">Testing approaches</h2>



<figure class="wp-block-image size-full is-style-expanded mb-20"><img decoding="async" width="1523" height="720" src="https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-1-3.png" alt="A diagram distinguishing between 3 different usability testing approaches for live products: staging environment testing, direct live testing and high-fidelity prototype testing. Explanations for their definition and considerations are also attached." class="wp-image-17614" srcset="https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-1-3.png 1523w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-1-3-300x142.png 300w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-1-3-790x373.png 790w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-1-3-768x363.png 768w" sizes="(max-width: 1523px) 100vw, 1523px" /></figure>



<h3 class="wp-block-heading">1. Direct Live Testing</h3>



<p>We observe users interacting with your actual live product in their natural work environment. This means watching real tasks being completed with real data and real stakes. It&#8217;s like shadowing a user through their workday, observing not just how they use your product, but how they integrate it into their broader workflow. While this approach requires careful planning to avoid disrupting production systems, it often reveals the most valuable insights about how your product is actually being used in the wild.</p>



<h3 class="wp-block-heading">2. Staging Environment Testing</h3>



<p>Think of this as a dress rehearsal with your product. We create a testing environment that mirrors your production system, complete with realistic data and workflows, but in a controlled space where we can safely observe user behaviour. This approach is particularly valuable for financial systems, healthcare platforms, or any product where testing in production isn&#8217;t feasible. The key is making the staging environment feel real enough that users interact with it naturally.</p>



<h3 class="wp-block-heading">3. High-Fidelity Prototype Testing</h3>



<p>Sometimes we need to recreate specific parts of your live product as an interactive prototype. This might be because we want to test a particular user journey in isolation or we need to simulate a specific state of your product that&#8217;s hard to replicate in the live environment. As we carefully rebuild these scenarios, we can focus user attention exactly where we need it and iterate quickly on potential solutions.</p>



<h2 class="wp-block-heading">Multi-method integration</h2>



<p>Sometimes the most powerful insights come from combining methods:</p>



<ul class="wp-block-list">
<li>Using analytics to identify patterns, then investigating through live testing</li>



<li>Combining prototype testing with live system observation</li>



<li>Validating qualitative insights with quantitative data</li>



<li>Cross-referencing findings across different user groups and contexts</li>
</ul>



<figure class="wp-block-image size-full is-style-expanded mb-20"><img loading="lazy" decoding="async" width="1523" height="720" src="https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-2-3.png" alt="A diagram showing how other research methods and data sources can strengthen usability testing data, in different phases throughout the research journey. Ultimately leading to product improvement strategy." class="wp-image-17615" srcset="https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-2-3.png 1523w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-2-3-300x142.png 300w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-2-3-790x373.png 790w, https://stampede-design.com/wp-content/uploads/2025/01/Blog-diagram-2-3-768x363.png 768w" sizes="(max-width: 1523px) 100vw, 1523px" /></figure>



<h2 class="wp-block-heading">When to consider live testing</h2>



<p>Every product team faces moments when they need deeper insights than analytics alone can provide. Perhaps your metrics look good but user feedback suggests otherwise. Or maybe you&#8217;re planning a major evolution of your product and need to ensure you&#8217;re moving in the right direction.</p>



<p>Live product testing delivers particular value when:</p>



<ul class="wp-block-list">
<li>User adoption isn&#8217;t meeting expectations despite good technical performance</li>



<li>Users are creating workarounds to your carefully designed processes</li>



<li>You&#8217;re seeing high task completion rates but low return usage</li>



<li>Feature usage patterns don&#8217;t align with your product strategy</li>



<li>You&#8217;re planning significant product evolution and need ground truth</li>
</ul>



<p>Often, teams discover that live testing would have helped them avoid months of misdirected development effort. The insights gained typically go far beyond the initial scope of investigation, revealing opportunities for improvement that weren&#8217;t visible through other methods.</p>



<h2 class="wp-block-heading">Ready to bridge the gap?</h2>



<p>So what could look like a simple usability issue at first, could signals a deeper opportunity to make your product truly work for your users.</p>



<p>This is what fascinates me about live product testing: the way small, everyday user behaviours can point us toward significant opportunities. Time and again, I&#8217;ve seen how these insights help teams avoid months of building solutions for the wrong problems.</p>



<p>Your product likely has similar stories waiting to be uncovered. While you focus on keeping your product running and delivering new features, we can help you spot these patterns and understand what they&#8217;re telling you about your users&#8217; real needs.</p>



<p>—</p>



<p>If you&#8217;re wondering about the hidden potential in your digital product, we&#8217;d love to hear your story. Reach out to <a href="mailto:studio@stampede-design.com" target="_blank" rel="noreferrer noopener">studio@stampede-design.com</a></p>



<p><em>This post is part of our ongoing series about evidence-based product evolution. Follow us for more insights about building products that stand the test of time.</em></p>
<p>The post <a href="https://stampede-design.com/blog/live-product-testing-the-gap-between-working-and-working-well/">Live Product Testing: The gap between working and working well</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/live-product-testing-the-gap-between-working-and-working-well/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>10 Lessons from Designing A Product</title>
		<link>https://stampede-design.com/blog/10-lessons-from-designing-a-product/</link>
					<comments>https://stampede-design.com/blog/10-lessons-from-designing-a-product/#respond</comments>
		
		<dc:creator><![CDATA[Faqihuddin Ghazali]]></dc:creator>
		<pubDate>Wed, 21 Feb 2024 03:30:16 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[design practice]]></category>
		<category><![CDATA[design process]]></category>
		<category><![CDATA[lessons learned]]></category>
		<category><![CDATA[product design]]></category>
		<category><![CDATA[ux]]></category>
		<guid isPermaLink="false">https://stampede-design.com/?p=13906</guid>

					<description><![CDATA[<p>When I first joined Toro, which is a product team in Stampede (torotimer.com), the team was in the midst of a sprint. For those who are not familiar with sprint, it is a set period of time during which specific work has to be completed and made ready for review, usually involving the product owner,&#8230;<a href="https://stampede-design.com/blog/10-lessons-from-designing-a-product/"> Keep reading</a></p>
<p>The post <a href="https://stampede-design.com/blog/10-lessons-from-designing-a-product/">10 Lessons from Designing A Product</a> appeared first on <a href="https://stampede-design.com">Stampede: the strategic design &amp; technology company</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img loading="lazy" decoding="async" width="790" height="495" src="https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-790x495.png" alt="" class="wp-image-13907" style="width:950px;height:auto" srcset="https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-790x495.png 790w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-300x188.png 300w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-768x481.png 768w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-1536x962.png 1536w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-2048x1282.png 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption"><em>One of the prototype screens</em>.</figcaption></figure></div>


<p class="lead">When I first joined Toro, which is a product team in Stampede (<a href="http://torotimer.com/">torotimer.com</a>), the team was in the midst of a sprint. For those who are not familiar with sprint, it is a set period of time during which specific work has to be completed and made ready for review, usually involving the product owner, the design and development teams. The outcome is usually a prototype or solution to a problem, alongside valuable insights about customer needs and preferences.</p>



<p>In my case, the sprint focused on a freelancer product, which we internally called as Toro Freelancer. My colleague Luqman and I set out to build a new prototype for Toro, as well as being responsible for the testing research plan and participant recruitment.</p>



<h3 class="wp-block-heading">Lesson 1: It&#8217;s okay to take a step back to solve the problem</h3>



<p>From the ideas we had, the product owner selected a few viable ones, but also realised that they were skewed towards a known solution space. There are many solutions out there to help freelancers get paid easier, and beating this dead horse won’t really help our users in a meaningful way.</p>



<p>What we missed were strong ideas for helping our freelancer improve their productivity in a way that is sustainable for them. Realising this, we took a step back to shift our focus on the right problem.</p>


<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="790" height="444" src="https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-3-790x444.jpg" alt="" class="wp-image-13920" srcset="https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-3-790x444.jpg 790w, https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-3-300x170.jpg 300w, https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-3-768x432.jpg 768w, https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-3.jpg 960w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption"><em>Step back to focus on the right problem.</em></figcaption></figure></div>


<h3 class="wp-block-heading">Lesson 2: Standing out from the competition</h3>



<p>Initially, I thought it was merely a minor issue to miss the step of having solid ideas for the right problem. But after the testing later on I realised one more lesson, which is that in making a product, we need to differentiate ourselves from the competitors, not just create another similar tool in the market.</p>



<p>Focusing on user’s problem in being productive sustainably really tested our product market fit. If we did not take a step back to focus on that opportunity, we might just waste our time creating another common quotation/invoicing tool, getting further from our goal of making freelancers subscribing for Toro.</p>


<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="790" height="457" src="https://stampede-design.com/wp-content/uploads/2024/02/Group-4569-790x457.png" alt="" class="wp-image-13908" srcset="https://stampede-design.com/wp-content/uploads/2024/02/Group-4569-790x457.png 790w, https://stampede-design.com/wp-content/uploads/2024/02/Group-4569-300x173.png 300w, https://stampede-design.com/wp-content/uploads/2024/02/Group-4569-768x444.png 768w, https://stampede-design.com/wp-content/uploads/2024/02/Group-4569-1536x888.png 1536w, https://stampede-design.com/wp-content/uploads/2024/02/Group-4569-2048x1184.png 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption"><em>Back to whiteboarding to focus on product differentiator feature</em>.</figcaption></figure></div>


<h3 class="wp-block-heading">Lesson 3: Be selective about what we want to test</h3>



<p>One lesson that I learned from prototyping is that we need to be selective in what we want to test. Not everything has to be interactive in a product test. Sometimes we may want to keep a non-interactive item like a button that cannot be clicked, so we can ask the user to guess where it might lead. Test time is limited and this will help us to be more efficient and focused on the actual hypothesis we are testing.</p>



<h3 class="wp-block-heading">Lesson 4: Be intentional in design</h3>



<p>Another lesson is to be intentional in prototype design, to the small details. I learned this from a situation where I only randomised the variation height of bars in the chart, without any deep thought. However, during the testing, the users interpreted the bar chart in a certain way, like the chart was designed intentionally to show something. At that moment, it exposed my bias that some users actually do think and care about the tiny details.</p>



<p>Being intentional with the details is also another reason why we need to design the prototype with a smooth continuity so that users are not confused, surprised or distracted. For example: add a confirmation modal first to smoothen the flow, remove an existing CTA which can distract the user from the tested path etc.</p>


<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img loading="lazy" decoding="async" width="790" height="197" src="https://stampede-design.com/wp-content/uploads/2024/02/Early-Day-790x197.png" alt="" class="wp-image-13909" style="width:950px;height:auto" srcset="https://stampede-design.com/wp-content/uploads/2024/02/Early-Day-790x197.png 790w, https://stampede-design.com/wp-content/uploads/2024/02/Early-Day-300x75.png 300w, https://stampede-design.com/wp-content/uploads/2024/02/Early-Day-768x191.png 768w, https://stampede-design.com/wp-content/uploads/2024/02/Early-Day-1536x383.png 1536w, https://stampede-design.com/wp-content/uploads/2024/02/Early-Day-2048x511.png 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption"><em>Look at the pointing hand emoji in the image: It is just a simple non-interactive green bar but we could ask many questions around this to test our hypothesis.</em></figcaption></figure></div>


<h3 class="wp-block-heading">Lesson 5: Ask the right questions to screen the right users</h3>



<p>As I was taking the lead for user recruitment, initially I was thinking of an easy path: Edit an existing screening survey, spread it anywhere, pick the users and schedule the slots.</p>



<p>I did not expect it would be hard and time-consuming to find the right users. It was a moment of clarity for me as to why a certain UX agency has dedicated researchers only for user recruitment.</p>



<p>The screening survey attracted many scammers because of the monetary incentives, plus it was posted not in the right channels. We mitigated this by verifying through their LinkedIn profile or portfolio link.</p>



<p>Asking the right questions also means only asking the essential questions. I learned the hard way that sensitive questions, such as gender and marital status can be intrusive, especially when they do not carry any weight in finding the right users. Essential questions could make the screening form shorter, which would mean less friction for the users while providing enough info for designers to filter them.</p>



<h3 class="wp-block-heading">Lesson 6: Be pragmatic, not dogmatic</h3>



<p>Finding the right channel to funnel quality users was also important. What worked in the past might not work this time. After getting so many wrong users in the list, I started to think “If I were an established freelancer, where would I be to connect with like-minded people?”. I eventually hit a jackpot when I found a few Slack channels that vet the users to ensure a sustained professional community.</p>



<p>The benefits of getting the right users would later be manifested in the quality of the testing. The users could really relate well with the prototype especially when it was able to solve their pain points. I was super relieved when the right users stress-tested the prototype. Seeing what worked or did not work for them gave us some ideas on how we were gonna tackle the next step of the product.</p>


<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="790" height="444" src="https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-2-1-790x444.png" alt="" class="wp-image-13922" srcset="https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-2-1-790x444.png 790w, https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-2-1-300x170.png 300w, https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-2-1-768x432.png 768w, https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-2-1.png 960w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption"><em>We managed to get diverse freelancers of different specialties to stress-test the prototype.</em></figcaption></figure></div>


<h3 class="wp-block-heading">Lesson 7: Making mistakes is a part of growth</h3>



<p>Understanding different accents, handling internet connectivity issues, users being very prescriptive or just providing short simple answers, and managing time limits can be challenging to the facilitator. Having diverse users tested my ability to manage these sessions. As it was my first time handling a testing, having a more experienced designer observing me and providing detailed feedback improved my facilitation skills after each session.</p>



<p>I made the mistake of asking too many questions early on about what the user understood from the prototype. This consumed a lot of time and did not provide insight into whether the feature was useful (and how) or not (and why not). The reason we had testing in the first place was to test the prototype by understanding users&#8217; thoughts on how the prototype would or would not solve their problem.</p>



<p>After conducting the testing, I feel more confident to do user interviews/testing. At the same time, I want to keep training those muscle memories until my interviewing skill becomes natural.</p>



<p>Another lesson that I learned is we sort of established rapport with the users. They could be a great resource if we have questions related to our product research, such as the reason they are using separate tools for invoicing and time tracking. Some of the users were so willing to help us, and they were just an email away 🙂</p>


<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="790" height="444" src="https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-4-790x444.jpg" alt="" class="wp-image-13923" srcset="https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-4-790x444.jpg 790w, https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-4-300x170.jpg 300w, https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-4-768x432.jpg 768w, https://stampede-design.com/wp-content/uploads/2024/02/Slide-16_9-4.jpg 960w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption"><em>One of the interview sessions</em>.</figcaption></figure></div>


<h3 class="wp-block-heading">Lesson 8: On deciding what to ship</h3>



<p>As a product designer, I had a sense of ownership to carry the product to success. However, I had a lot of uncertainty about how to nudge the team in the right direction when prioritising features for the minimum payable product (MPP).</p>



<p>During the testing, we tested a lot of features based on our research. However, in reality, achieving the ideal state of a finished product requires going through multiple release cycles, which can take months or even years.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>So how do we prioritise certain features to ensure we are on the right path for users to start paying for Toro? What if our MYP is similar to all the other tools in the market? Will users be willing to pay for it?</p>
</blockquote>



<p>The testing showed that we have a Unique Selling Proposition (USP) module that can differentiate us in the market, as it solves major pain points for users. However, shipping that module requires a lot of effort and other foundational features to be shipped first.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="is-style-plain">Since we do not want to release a half-baked product, should we build all those features, including our USP module, before releasing the subscription plan?</p>
</blockquote>



<p>All of these questions were on our minds. After further reading and asking a few designers in the industry, we initially thought that a prioritisation workshop would provide more clarity on the path forward due to the inputs from the team. However, in our case, Shaza as the product owner, is well-versed in the feasibility, viability, and desirability, and this part is the product owner’s call to make, not the team&#8217;s. We learned that we should have discussed with the product owner first the best way this should be done.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="480" height="270" src="https://stampede-design.com/wp-content/uploads/2024/02/image.gif" alt="" class="wp-image-13924"/></figure></div>


<h3 class="wp-block-heading">Lesson 9: Learn from history</h3>



<p>Later, I learned that Figma did not have the collaboration feature when it was first launched. There are many examples of successful startups that launched their products without their best-known features yet. What is more important is to ship, measure, and learn, rather than dwell in the uncertainty of which features to ship first.</p>



<p>Nobody can predict the future, but we can try to make the best decision at the time with the info that we have. If we fail, we need to fail fast and iterate. If the minimum viable product does not go the way we wish, at least it saves us from wasting our time and effort on the queued features. At least we learn what is working and what is not.</p>


<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="790" height="504" src="https://stampede-design.com/wp-content/uploads/2024/02/Untitled-790x504.png" alt="" class="wp-image-13925" srcset="https://stampede-design.com/wp-content/uploads/2024/02/Untitled-790x504.png 790w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-300x191.png 300w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-768x490.png 768w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1536x980.png 1536w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled.png 1542w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption"><em>Figma 1.0 when launched in 2015. Note how different it was compared to now after countless iterations</em>.</figcaption></figure></div>


<h3 class="wp-block-heading">Lesson 10: Size the development effort carefully</h3>



<p>I also learned that a feature might carry more complexities than I initially thought. If we overlook certain details, it might surprise us in the development phase. For example, can the user edit the invoice that has been sent? What if we allow the invoice to be edited if the client hasn’t seen the invoice on Toro platform? How sure are we that the client hasn’t seen the invoice?</p>



<p>Thus, it is important to collaborate with the developer to understand what the considerations and technical constraints are to build the feature and to be specific (to a certain extent) so that developers won’t undermine the actual efforts needed.</p>


<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="790" height="474" src="https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-2-790x474.png" alt="" class="wp-image-13938" srcset="https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-2-790x474.png 790w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-2-300x180.png 300w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-2-768x461.png 768w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-2-1536x921.png 1536w, https://stampede-design.com/wp-content/uploads/2024/02/Untitled-1-2-2048x1228.png 2048w" sizes="(max-width: 790px) 100vw, 790px" /><figcaption class="wp-element-caption"><em>Our friendly developer came up with this list to proactively predict possible scenarios that we might overlook when prioritising feature</em>.</figcaption></figure></div>


<p>That concludes our 10 lessons. If you have any tips or best practices for designing valuable products, please share them in the comment section 👇</p>
<p>The post <a href="https://stampede-design.com/blog/10-lessons-from-designing-a-product/">10 Lessons from Designing A Product</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/10-lessons-from-designing-a-product/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>What Do Customers Look For In Your Online Store?</title>
		<link>https://stampede-design.com/blog/ecommerce-what-do-customers-look-for/</link>
					<comments>https://stampede-design.com/blog/ecommerce-what-do-customers-look-for/#respond</comments>
		
		<dc:creator><![CDATA[Jared Ng]]></dc:creator>
		<pubDate>Mon, 21 Mar 2016 01:44:38 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[customer experience]]></category>
		<category><![CDATA[e-commerce]]></category>
		<category><![CDATA[online retail]]></category>
		<category><![CDATA[user expectations]]></category>
		<category><![CDATA[ux]]></category>
		<guid isPermaLink="false">http://dev.stampedelabs.com/client/v3/wp/?p=6333</guid>

					<description><![CDATA[<p>Your customers are what keeps your online store running - so have you ever stopped and wondered what do users actually look for in your online store? Jared, our content strategist, runs through the basic guidelines.</p>
<p>The post <a href="https://stampede-design.com/blog/ecommerce-what-do-customers-look-for/">What Do Customers Look For In Your Online Store?</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">So you own an online store, you&#8217;re getting a healthy stream of customers visiting your website and making purchases. Your customers are what keeps your store running, they visit your website, browse its contents and most importantly, make purchases. It&#8217;s no wonder why so many e-commerce businesses are moving towards a customer focused approach. But even with knowing all of this, have you ever stopped and wondered what do users actually look for in your online store?</p>
<p><div class="full"><img decoding="async" class="alignnone wp-image-7194" src="https://stampede-design.com/wp-content/uploads/2016/03/ecommerce.jpg" alt="What Customers Look For" /></div></p>
<h2>Design</h2>
<p><div class="full"><img decoding="async" class="alignnone wp-image-7196" src="https://stampede-design.com/wp-content/uploads/2016/03/design-wireframe.jpg" alt="Design Wireframe" /></div></p>
<p>This goes without saying, having a great design attracts users to come visit the website. Its design is essentially your store front and if your users do not like how it looks, chances are they&#8217;ll be hitting the back button and going elsewhere. Web users also tend to be also very trendy, with all the exposure they have with other pretty looking websites. Because of this, your customers will likely prefer to see a <a href="http://www.christmaselves.com.au/" target="_blank">modern-looking website</a> than let&#8217;s say, a <a href="http://uglytub.com/" target="_blank">website that looks like it was from the 90s</a>.</p>
<h2>Speed &amp; Reliability</h2>
<p>Depending on the size of your online store, load speed and down times will mean a lot to your users. E-commerce sites such as Amazon has a lot of products, even more is the amount of traffic the website gets. If you&#8217;re online store has a fair number of things to sell and have many users accessing it, then you&#8217;ll want to make sure that the website loads quickly. To your customer, waiting for a page to load can be a daunting endeavor. Your website needs to be in a state where the user can get the content they want, at the time they request it.</p>
<p>What&#8217;s worse than a slow website? Downtime. Nobody likes getting their journey cut short due to unforeseen circumstances. To your users, down time is a big no-no and can leave a very strong negative impression on your brand. Avoid this from happening at all costs.</p>
<h2>Product Catalog</h2>
<p><div class="full"><img decoding="async" class="alignnone wp-image-7199" src="https://stampede-design.com/wp-content/uploads/2016/03/product-catalogue.jpg" alt="Product Catalogue" /></div></p>
<p>You could be selling a handful of products or a warehouse&#8217;s worth, the most important thing is if your customer can actually find what they are looking for. Like how real brick-and-mortar stores have shelves to store wares and aisles to categorize types of products, online stores need to be able to sort products based on understandable categories. This will enable the user to be able to browse and search what they are looking for. To your customer, this part of their user journey is important because if they become frustrated by not being able to find what they want, chances are they&#8217;ll end up leaving your website discontented.</p>
<h2>Product Details</h2>
<blockquote><p>They have nothing else to rely on other than the details that you are providing them.</p></blockquote>
<p>One of the biggest differences in going to a store to buy something versus shopping online is that when you&#8217;re on the web you can&#8217;t actually see what you&#8217;re buying, at least not physically. This is why product details are very important to the online shopper. They have nothing else to rely on other than the details that you are providing them. If abundant and reliable information is provided to the customer, chances are they will feel more confident in what they&#8217;re looking at and will likely lead to a sale.</p>
<p>Clear product details consists of:</p>
<ul>
<li>Product images from various angles</li>
<li>Description of the product</li>
<li>Size &amp; dimensions</li>
</ul>
<h2>Shipping Charges</h2>
<p>For anyone who is familiar with buying things online, shipping charges become a norm. Your customers know that there will be shipping charges but the most important thing is to clearly show how much the shipping costs are. No one likes to see surprise costs at the tail end of their buying journey. For whatever your customer is paying, the total price should be broken down and itemized clearly on what they are actually paying for, this also includes the shipping costs.</p>
<h2>Ease of Payment</h2>
<p><div class="full"><img decoding="async" class="alignnone size-full wp-image-7187" src="https://stampede-design.com/wp-content/uploads/2016/03/payment.jpg" alt="Payment" /></div></p>
<p>Payment is the final step for your customer before they can begin waiting for what they&#8217;ve bought to arrive on their doorstep. The payment step is also one of the phases where a large number of drop-offs can happen and it all falls back to your e-business payment model. Two common types of payment methods for online purchases are credit card payment or using payment gateways. Your payment process should be fairly straight-forward using secured methods of payment. This is actual money that users are prepared to pay, the minute they notice that it seems not secure, the likely outcome will be the user dropping-off from the transaction.</p>
<h2>Security</h2>
<blockquote><p>Users expect their data to be protected and encrypted to prevent identity theft&#8230;</p></blockquote>
<p>To your customer, security is another important factor on your website. Users expect their data to be protected and encrypted to prevent identity theft, and this is where SSL certificates come in. SSL allows sensitive information such as credit card numbers, social security numbers, and login credentials to be transmitted securely. If your e-commerce website has an SSL certificate that is active, users will be able to tell by seeing a green padlock at the address bar of their browsers. This tells users that they are protected and can go ahead with shopping securely.</p>
<h2>After Sales</h2>
<p>When a customer has completed a prior transaction in the past, sending them an online newsletter can sometimes be a treat. Based on what they&#8217;ve purchased, you can promote items that the customer may like. This will act as a reminder to the user that your website is still around and attract them back for the next shopping spree.</p>
<p>By understanding what the customers wants, you can tailor a personal experience to said customers which will in turn make them want to revisit your online store.</p>
<p>The post <a href="https://stampede-design.com/blog/ecommerce-what-do-customers-look-for/">What Do Customers Look For In Your Online Store?</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/ecommerce-what-do-customers-look-for/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>The Evolution of E-Newsletters</title>
		<link>https://stampede-design.com/blog/evolution-e-newsletters/</link>
					<comments>https://stampede-design.com/blog/evolution-e-newsletters/#respond</comments>
		
		<dc:creator><![CDATA[Zana Fauzi]]></dc:creator>
		<pubDate>Tue, 08 Mar 2016 01:36:29 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[communication strategy]]></category>
		<category><![CDATA[digital marketing]]></category>
		<category><![CDATA[email marketing]]></category>
		<category><![CDATA[newsletters]]></category>
		<category><![CDATA[ux]]></category>
		<guid isPermaLink="false">http://dev.stampedelabs.com/client/v3/wp/?p=6323</guid>

					<description><![CDATA[<p>Email newsletter is one of the most versatile business tools to reach customers. What's interesting is the recent trend of individuals, people like you and me sharing personalised, curated email newsletters. Zana takes a look into this trend and shares some of her personal favourite newsletters.</p>
<p>The post <a href="https://stampede-design.com/blog/evolution-e-newsletters/">The Evolution of E-Newsletters</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">Email marketing has quickly gone up to become one of the most versatile tools to reach customers when it comes to marketing brands and products. With the help of a number of platforms such as <a href="http://mailchimp.com/" target="_blank">Mailchimp</a>, <a href="http://www.constantcontact.com/index.jsp" target="_blank">Constant Contact</a>, <a href="http://litmus.com/" target="_blank">Litmus</a>, <a href="http://www.getresponse.com/" target="_blank">GetResponse</a> and many more, it is easy to implement custom and/or ready-made designs, segregate customers into specific groups, schedule mail sending time, generate reports, analyse trends and better forecast results through data-driven approach. All we need is a good strategy, and these platforms can help us achieve our goals accordingly.</p>
<p><div class="full-c-b"><img decoding="async" class="alignnone size-full wp-image-7091" src="https://stampede-design.com/wp-content/uploads/2018/02/evolution.jpg" alt="evolution" /></div></p>
<h2>From &#8220;me, me, me&#8221; to &#8220;I care about you&#8221;</h2>
<p>There used to be a time when brands used to be implementing &#8220;me, me, me&#8221; approach in the email marketing campaigns. Some email marketing mistakes as ran through by <a href="http://www.smallbusinessadvocate.com/small-business-article/the-evolution-of-e-newsletters-1094" target="_blank">Don Sadler</a>, which rang true as early as 2004:</p>
<h3>&#8220;It&#8217;s all about me.&#8221;</h3>
<p>Many companies still don&#8217;t get the fact that it&#8217;s not all about them. E-newsletters that get bogged down in how great the company is, how many products they have, how long they&#8217;ve been in business, etc., etc., are doomed to failure, because people just don&#8217;t care about that. Readers want to know what&#8217;s in it for them.</p>
<h3>No clear target audience.</h3>
<p>You simply can&#8217;t be everything to everybody. As noted above, the tighter and more narrow your niche and content, the better.</p>
<h3>Way too long.</h3>
<p>With e-newsletters, people want to quickly get to the information that&#8217;s going to help them, digest this and then move on. If they know they can read your e-newsletter and get something of value in a couple of minutes, rather than having to slog through page after page, they&#8217;re much more likely to add you to their &#8220;must read&#8221; list.</p>
<p>The &#8220;me, me, me&#8221; approach sure  works after a while, but as according to Dale Carnegie:</p>
<blockquote><p>To be interesting, be interested.</p></blockquote>
<p>Today&#8217;s email marketing campaigns seem to move more than just a &#8216;campaign&#8217;. Most of the products and brands send weekly email newsletters detailing on their opinions, their work culture and things they find interesting enough to share &#8211; something very personalised and with a more human touch.</p>
<p>This gets customers to warm up more to them, knowing that there are <em>real</em> people behind these products working hard to give the best for them, and in return, they would appreciate it more.</p>
<h2>Email newsletters for everyone</h2>
<p>Recently I have been noticing an increase of individuals creating personal, curated email newsletters. To be honest, some of them are really, really good. Again, with easy-to-use platforms such as Mailchimp and <a href="https://www.tinyletter.com/" target="_blank">Tinyletter</a> (I have been contemplating on creating my own, but could not find great topics to share). It is really interesting to see this evolution, of how some methods that were once accessible to companies are now open to interesting individuals ready to share their valued opinions.</p>
<p>I <em>love</em> the Internet.</p>
<h2>Lists of list</h2>
<p>Here are some of the e-newsletters I have been subscribing and they are all my favourites. Feel free to add your recommendations in the comments!</p>
<h3>UI/UX</h3>
<ul>
<li><a href="http://uxdesignweekly.com/" target="_blank">UX Design Weekly</a></li>
<li><a href="https://uxthought.uie.com/" target="_blank">UX Thought of the Day</a></li>
<li><a href="http://www.theuxnewsletter.com/" target="_blank">Mailchimp UX</a></li>
<li><a href="https://www.interaction-design.org/subscription/subscribe" target="_blank">Interaction Design Foundation</a></li>
</ul>
<h3>Web Design and Development</h3>
<ul>
<li><a href="https://wdrl.info/" target="_blank">WDRL</a></li>
</ul>
<h3>Companies and Brands</h3>
<ul>
<li><a href="https://blog.asana.com/" target="_blank">Asana</a></li>
<li><a href="https://www.bigcommerce.com/blog" target="_blank">BigCommerce</a></li>
<li><a href="https://blog.bufferapp.com/" target="_blank">Buffer</a></li>
<li><a href="https://signalvnoise.com/" target="_blank">Basecamp &#8211; Signal v. Noise</a></li>
<li><a href="http://blog.invisionapp.com/" target="_blank">Invision</a></li>
<li><a href="http://us4.campaign-archive1.com/home/?u=567793a28afe72c2577b85061&amp;id=a9994e6f07" target="_blank">The Great Discontent</a></li>
</ul>
<h3>Technology, Culture, Music etc.</h3>
<ul>
<li><a href="http://tinyletter.com/realfuture" target="_blank">Real Future</a></li>
<li><a href="http://tinyletter.com/meanwhile" target="_blank">Meanwhile</a></li>
<li><a href="http://tinyletter.com/jamieskella/archive" target="_blank">Experience Innovation</a></li>
<li><a href="http://us11.campaign-archive2.com/home/?u=25c33bdcf7d6a4a5939b1ae9a&amp;id=0d0c9bd4c2" target="_blank">JK Glei</a></li>
<li><a href="http://tinyletter.com/sawyer" target="_blank">Good Reads</a></li>
</ul>
<h3>Miscellaneous (Writing, Ideas, Productivity, Cats!)</h3>
<ul>
<li><a href="http://aworkinglibrary.com/category/letters/" target="_blank">A Working Letter</a></li>
<li><a href="http://themoderndesk.com/" target="_blank">The Modern Desk</a></li>
<li><a href="http://thethread.co/" target="_blank">The Thread</a></li>
<li><a href="http://tinyletter.com/weightshift" target="_blank">Weightshifting</a></li>
<li><a href="http://www.buzzfeed.com/tools/email?utm_medium=email&amp;utm_campaign=Cats%2520219&amp;utm_content=Cats%2520219+CID_b09edc3dab83e7132208685b6615dd58&amp;utm_source=BuzzFeed%2520Newsletters&amp;utm_term=Sign%2520up%2520to%2520get%2520BuzzFeed%2520in%2520your%2520inbox" target="_blank">Buzzfeed</a></li>
<li><a href="http://www.thnkclrly.com/newsletter/" target="_blank">Think Clearly</a></li>
</ul>
<p>In the meantime, be sure to also subscribe to our <a href="https://stampede-design.com/weekly/">Stampede Weekly</a> to receive latest and curated web topics, from best practices and UX ideas to design inspirations &amp; productivity tips!</p>
<p>(Thank you <a href="http://www.wired.com/" target="_blank">Wired</a> for the photo.)</p>
<p>The post <a href="https://stampede-design.com/blog/evolution-e-newsletters/">The Evolution of E-Newsletters</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/evolution-e-newsletters/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Improving navigation on large accordion content panels</title>
		<link>https://stampede-design.com/blog/improving-navigation-on-large-accordion-content-panels/</link>
					<comments>https://stampede-design.com/blog/improving-navigation-on-large-accordion-content-panels/#comments</comments>
		
		<dc:creator><![CDATA[Shaiful Borhan]]></dc:creator>
		<pubDate>Mon, 29 Apr 2013 17:46:35 +0000</pubDate>
				<category><![CDATA[Field Notes]]></category>
		<category><![CDATA[accordion]]></category>
		<category><![CDATA[front-end development]]></category>
		<category><![CDATA[navigation UX]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[ux]]></category>
		<guid isPermaLink="false">https://stampede-design.com/blog/?p=3602</guid>

					<description><![CDATA[<p>Accordions are one way to improve content presentation in a website, but when they get vertically huge they can be quite a navigational nightmare. Shaiful shows you the solution using an awesome jQuery workaround.</p>
<p>The post <a href="https://stampede-design.com/blog/improving-navigation-on-large-accordion-content-panels/">Improving navigation on large accordion content panels</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">Whether you are using them for menus or displaying content, the accordions are cool. However in special cases when your accordion grows vertically huge, navigating through the panels can be slightly counterintuitive.</p>

<p>The issue occurs when you&#8217;ve reached the bottom of a very tall panel, and you clicked on the next panel switch to open the respective panel (which happens to be a very tall panel too). The scrollbar will stay at the same position while this new panel opens and the last panel closes and ends up putting your view at the bottom of the content of the new panel.</p>

<p>I have created a quick demo of this issue <a href="https://stampede-design.com/demo/shaiful/large-accordion/large-accordion.html">here</a>. I&#8217;m using the awesome jQueryUI library to produce the accordion by the way. Click on the panel switch for <em>Section 2</em> to expand it. Then scroll down until you see the panel switch for <em>Section 3</em> and click on it. You will have to scroll up to get to the beginning of the content of <em>Section 3</em>. Not very nice.</p>

<p>To improve the navigation, a simple auto-scroll feature can be added to the accordion that brings the browser viewport to the top of the opened panel. In jQueryUI, we can take advantage of the <em>activate</em> event hook to trigger the auto-scroll. As for the scrolling itself, we can simply use jQuery&#8217;s <em>animate</em> function to add a smooth scrolling effect for a nice touch.</p>

<p>The final accordion code is as follows.</p>

<pre class="brush: jscript; title: ; notranslate">
$( &quot;#accordion&quot; ).accordion({
	heightStyle: &quot;content&quot;,
	collapsible: true,
	active: false,
	activate: function( event, ui ) {
		if(!$.isEmptyObject(ui.newHeader.offset())) {
			$('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
		}
	}
});
</pre>

<p>Check out the updated demo <a href="https://stampede-design.com/demo/shaiful/large-accordion/large-accordion-fix.html">here</a>.</p>

<p>Let me know what you think of this workaround. Have a nice day!</p><p>The post <a href="https://stampede-design.com/blog/improving-navigation-on-large-accordion-content-panels/">Improving navigation on large accordion content panels</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/improving-navigation-on-large-accordion-content-panels/feed/</wfw:commentRss>
			<slash:comments>19</slash:comments>
		
		
			</item>
	</channel>
</rss>
