<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Browser</title>
    <description>The latest articles on DEV Community by Browser (@browserlondon).</description>
    <link>https://dev.to/browserlondon</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F121062%2F806560a4-a2d3-4fb2-8e59-891d9438f21b.jpeg</url>
      <title>DEV Community: Browser</title>
      <link>https://dev.to/browserlondon</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/browserlondon"/>
    <language>en</language>
    <item>
      <title>Do MVPs Fail Us?</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Wed, 04 Sep 2024 01:09:12 +0000</pubDate>
      <link>https://dev.to/browserlondon/do-mvps-fail-us-3e3</link>
      <guid>https://dev.to/browserlondon/do-mvps-fail-us-3e3</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc8h04f5bxo310f4cc7cb.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc8h04f5bxo310f4cc7cb.jpg" alt="Image description" width="800" height="507"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Minimum Viable Product (MVP) has been a cornerstone of startup methodology for over a decade, promising a way to validate ideas quickly and efficiently. But as markets evolve and customer expectations soar, a question emerges: Does the MVP way of thinking fail us?&lt;/p&gt;

&lt;p&gt;This question isn’t about abandoning the MVP concept entirely, but rather examining its limitations and exploring how we can evolve our approach to product development. In an era where user experience is crucial and switching costs can be significant, the traditional MVP may fall short in several critical areas:&lt;/p&gt;


&lt;li&gt;It often prioritises speed over adoptability&lt;/li&gt;
&lt;br&gt;
&lt;li&gt;It may not adequately address market fit beyond early adopters&lt;/li&gt;
&lt;br&gt;
&lt;li&gt;It can overlook crucial adoption barriers in favour of basic functionality&lt;/li&gt;
&lt;br&gt;
As we delve into this exploration, we’ll challenge the conventional wisdom surrounding MVPs and propose a more holistic framework that addresses these shortcomings. By expanding our understanding of what “minimum” and “viable” truly mean in today’s market context, we can develop products that not only validate ideas but also pave the way for widespread adoption and long-term success.

&lt;h2&gt;Are there MVP alternatives?&lt;/h2&gt;

&lt;p&gt;&lt;b&gt;Which choice works for you?&lt;/b&gt;&lt;br&gt;
While the traditional MVP approach has been valuable, it’s crucial to expand our thinking to encompass a more comprehensive framework that addresses both product viability and market adoption.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Minimum Viable Outcome (MVO)
Focus on desired business and customer outcomes, setting specific, measurable, and time-bound objectives that align with overall business strategy and market needs.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;b&gt;Airbnb’s MVO&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;When Airbnb started, their MVO wasn’t just to create a platform for home-sharing. They focused on the specific outcome of making it easy and trustworthy for people to rent out their spare rooms. This outcome-focused approach led them to implement features like host and guest profiles, reviews, and a secure payment system. By concentrating on this core outcome, Airbnb was able to build trust in their platform and drive adoption in a market where the idea of staying in a stranger’s home was novel and potentially risky.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Minimum Viable Data (MVD)
Identify essential metrics for decision-making and AI model requirements, balancing data needs with privacy and security concerns. Include metrics that measure not just usage, but actual adoption and replacement of existing solutions.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;b&gt;Netflix’s MVD strategy&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;Netflix’s transition from DVD rentals to streaming required a careful MVD approach. They needed to gather enough data to inform their streaming strategy without compromising user privacy or overwhelming their systems. Netflix focused on collecting viewing habits, user ratings, and completion rates. This MVD approach allowed them to develop their recommendation algorithm, which became a key driver of user engagement and retention. By focusing on these essential data points, Netflix was able to personalise content suggestions, leading to increased user satisfaction and platform stickiness.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Minimum Viable Output (MVOU)
Deliver tangible artefacts that support both MVP and MVO, fostering collaboration across teams and enabling iterative improvement based on feedback. Ensure these outputs address key adoption barriers.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;b&gt;Spotify’s MVOU&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;When Spotify entered the music streaming market, they faced significant competition from established players like iTunes. Their MVOU strategy focused on delivering a seamless, fast, and legal way to access a vast music library. They started with a desktop application that emphasised speed and ease of use. This tangible output allowed users to experience the core value proposition immediately – instant access to millions of songs without the need to purchase individual tracks. By focusing on this key output, Spotify was able to overcome adoption barriers related to the perceived complexity and cost of digital music consumption.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Minimum Viable Segment (MVS)
Identify and focus on a specific customer segment that is most likely to adopt your product early and provide valuable feedback for iteration.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;b&gt;Slack’s MVS approach&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;Slack initially targeted tech-savvy teams, particularly developers, as their minimum viable segment. This group was more likely to adopt new communication tools and provide detailed feedback. By focusing on this segment, Slack was able to refine its product based on the needs of power users, which ultimately made it more robust and feature-rich for a broader market. This MVS strategy allowed Slack to build a strong foundation of enthusiastic users who became advocates for the platform, driving wider adoption.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Minimum Viable Adoption (MVA)
Consider the minimum features and value required to overcome adoption barriers such as switching costs and sunk investments in existing solutions. This concept integrates aspects of the Net Adoption Threshold (NAT) framework.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;b&gt;Zoom’s MVA strategy&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;When Zoom entered the video conferencing market, they faced established competitors like Skype and GoToMeeting. Zoom’s MVA strategy focused on simplifying the user experience to reduce adoption barriers. They made it possible to join a meeting with just one click, without requiring software downloads or complex setup processes. This approach directly addressed the switching costs associated with adopting a new video conferencing tool. By minimising these barriers, Zoom was able to achieve rapid adoption, even in a crowded market.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Minimum Viable Experience (MVE)
Design the core user experience that delivers the essential value of your product while ensuring it’s intuitive and engaging enough to drive continued use and adoption.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;b&gt;Duolingo’s MVE approach&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;Duolingo’s initial MVE focused on making language learning feel like a game. They distilled complex language learning concepts into bite-sized, engaging lessons that users could complete in just a few minutes. This gamified experience was crucial in overcoming the perceived difficulty and time commitment associated with learning a new language. By creating an MVE that was both educational and entertaining, Duolingo was able to keep users engaged and coming back, driving long-term adoption and habit formation.&lt;/p&gt;

&lt;p&gt;While these six approaches—MVO, MVD, MVOU, MVS, MVA, and MVE—offer distinct perspectives on product development and market entry strategies, it’s important to recognise that there is often significant overlap between them. For instance:&lt;/p&gt;

&lt;p&gt;Airbnb’s focus on trust-building (MVO) directly informed their data collection strategy (MVD) and user experience design (MVE).&lt;br&gt;
Slack’s choice of initial target audience (MVS) influenced both the core features they developed (MVOU) and the adoption barriers they needed to overcome (MVA).&lt;/p&gt;

&lt;p&gt;Zoom’s emphasis on reducing adoption friction (MVA) was intrinsically linked to their user experience design (MVE) and the outcomes they prioritized (MVO).&lt;/p&gt;

&lt;p&gt;This interconnectedness highlights the complexity of choosing the right approach—or combination of approaches—for your specific product and market context. Factors such as:&lt;/p&gt;


&lt;li&gt;Industry dynamics and competitive landscape&lt;/li&gt;
&lt;br&gt;
&lt;li&gt;Target audience characteristics and preferences&lt;/li&gt;
&lt;br&gt;
&lt;li&gt;Available resources and technological capabilities&lt;/li&gt;
&lt;br&gt;
&lt;li&gt;Regulatory environment and data privacy considerations&lt;/li&gt;

&lt;p&gt;All play crucial roles in determining which MVP strategy (or strategies) will be most effective.&lt;/p&gt;

&lt;p&gt;Given these complexities, deciding on the optimal approach often requires careful reflection, market analysis, and sometimes external expertise. It’s not uncommon for companies to struggle with identifying the most suitable MVP strategy for their unique situation.&lt;/p&gt;

&lt;p&gt;If you find yourself grappling with these decisions or seeking to optimise your product development and go-to-market strategy, consider some assistance.&lt;/p&gt;

&lt;h2&gt;Redefining “Minimum” in Product Development&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmwr2ieisaa7pnhk3t30g.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmwr2ieisaa7pnhk3t30g.jpg" alt="Image description" width="800" height="597"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;b&gt;MVP vs Waterfall&lt;/b&gt;&lt;br&gt;
Build for right now and scale as needed&lt;br&gt;
When we talk about “minimum” in the context of MVP or its variants, it’s crucial to consider the following factors:&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Organisational Resources&lt;/b&gt;&lt;br&gt;
The “minimum” should be defined in relation to the organisation’s available resources, including budget, personnel, and technological capabilities. It’s about maximising value creation within existing constraints while ensuring the product can cross the adoption threshold.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Timeline&lt;/b&gt;&lt;br&gt;
“Minimum” should be contextualised within the project timeline and market demands. It’s not just about speed, but about delivering the right value at the right time to drive adoption.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;User and Market Expectations&lt;/b&gt;&lt;br&gt;
The “minimum” should meet or exceed the baseline expectations of your target users and market. In mature markets, this baseline may be higher than in emerging ones. Consider not just feature expectations, but also the value required to overcome inertia and drive adoption.&lt;/p&gt;

&lt;h2&gt;The Power of Focus: When Traditional MVPs Thrive&lt;/h2&gt;

&lt;p&gt;&lt;b&gt;Keep your eyes on the ball&lt;/b&gt;&lt;br&gt;
While we advocate for a more holistic approach, it’s important to note that traditional MVPs can still succeed when they adhere to a philosophy of excelling in one core area. The key is to:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Identify a single, critical user need or pain point&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Develop a focused solution that addresses this need exceptionally well&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ensure the solution provides enough value to overcome adoption barriers&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Iterate rapidly based on user feedback to refine and expand the offering&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This approach can be particularly effective for startups or when entering new markets, where establishing a strong foothold with a singular focus can pave the way for future growth and wider adoption.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Aligning everyone and everything&lt;/b&gt;&lt;br&gt;
The big question of course is; How do we align the design, development, and deployment approach with Stakeholder dialogue?&lt;/p&gt;

&lt;p&gt;A group of people take part in a insight application workshop in our London office&lt;/p&gt;

&lt;p&gt;Product momentum at the speed of dialogue&lt;br&gt;
The chosen approach to product development should directly inform and shape stakeholder conversations, especially regarding market adoption. This alignment ensures that all decisions and feature requests are evaluated against the established process, goals, and adoption criteria. Here’s how this can work:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Clear Communication of Approach: Ensure all stakeholders understand the chosen development methodology and its focus on both viability and adoption.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Feature Evaluation Framework: Create a clear framework for evaluating new feature requests based on their contribution to both core value and adoption potential.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Stakeholder Education: Educate stakeholders on the benefits of the chosen approach and why considering adoption barriers is crucial for the product’s success.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Decision-Making Process: Establish a transparent process for feature decisions that considers both immediate viability and long-term adoption potential.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Iterative Feedback Loop: Set up regular check-ins with stakeholders to review progress, gather feedback, and assess adoption metrics.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;Evolving Beyond MVP-Centric Thinking&lt;/h2&gt;

&lt;p&gt;So, do MVPs fail us? If treated as the default tool, yes. If treated as an option to customise to the circumstances of the product’s circumstances, no. The MVP concept has undoubtedly revolutionised product development, enabling countless startups to test ideas and iterate quickly. However, in its traditional form, it often falls short of addressing the complex realities of today’s market landscapes.&lt;/p&gt;

&lt;p&gt;The failure isn’t in the MVP concept itself, but in our sometimes narrow interpretation and application of it. By expanding our framework to include considerations of market adoption, user experience, and long-term viability, we can evolve the MVP approach to meet the challenges of modern product development.&lt;/p&gt;

&lt;p&gt;Special thanks to Polina Zimmerman, Jason Goodman, &amp;amp; Mark Arron Smith, Finnian HaDiep, Guilherme Garcia, D Jonez&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2024/09/04/do-mvps-fail-us/" rel="noopener noreferrer"&gt;Do MVPs Fail Us?&lt;/a&gt; appeared first on &lt;a href="https://www.browserlondon.com" rel="noopener noreferrer"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>mvp</category>
      <category>opinion</category>
    </item>
    <item>
      <title>A UX Design Dilemma: Adapt Brand Guidelines or Start Afresh?</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Thu, 25 Apr 2024 11:23:31 +0000</pubDate>
      <link>https://dev.to/browserlondon/a-ux-design-dilemma-adapt-brand-guidelines-or-start-afresh-4pcm</link>
      <guid>https://dev.to/browserlondon/a-ux-design-dilemma-adapt-brand-guidelines-or-start-afresh-4pcm</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc8ccgk31ekmcnsbhr5s5.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc8ccgk31ekmcnsbhr5s5.jpeg" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Whilst the dream for most designers is to start a new project from scratch and have all of the creative licence and control that comes with that, this unfortunately isn’t always the case. Putting aside those fun projects that you may do when starting out (anyone else guilty of designing multiple travel and adventure apps just for fun?), a large proportion of projects will be some form of a redesign or continuous improvement to an existing product or platform. &lt;/p&gt;

&lt;p&gt;This is certainly more challenging and there is a lot to consider across all areas when it comes to the UX and UI design, not to mention the engineering. One of the many considerations we designers face is the use of the brand guidelines and their effectiveness and appropriateness for the job at hand. In this article, I’m going to discuss the two sides of the spectrum that we often face: adapting the brand guidelines vs starting afresh.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkqggu36yi6cc547gvdrq.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkqggu36yi6cc547gvdrq.jpeg" alt="Image description" width="800" height="533"&gt;&lt;/a&gt;&lt;br&gt;
Every brand strives to retain its identity both offline and online&lt;/p&gt;

&lt;h2&gt;The challenge at large&lt;/h2&gt;

&lt;p&gt;Before I dive into the minutiae of brand guidelines, it’s worth touching on the challenge as a whole when redesigning platforms and why you’d need to consider a redesign in the first place.&lt;/p&gt;

&lt;p&gt;Technology and design have developed at an unprecedented pace in recent years, resulting in many products and platforms becoming outdated fast, this of course causes issues across the entire customer experience. From outdated and inflexible technology to clunky and inaccessible interfaces, these outdated platforms end up and costing companies where it hurst the most, user traction and engagement. No one wants to lose out to a competitor platform.  &lt;/p&gt;

&lt;p&gt;Whilst a redesign can be considered costly, an investment into modernisation is just that, an investment, it can improve brand perception, increase productivity, enhance accessibility, plus create possibilities for continuous innovation and more. A company that turns its back on modernisation will be paying the price and may struggle to thrive in the constantly developing digital landscape we find ourselves in.&lt;/p&gt;

&lt;p&gt;Whilst a redesign goes far beyond the design of the interface, it will usually consider all areas of the user experience, having said that the UI design is an essential aspect that will have a significant impact on the accessibility, overall usability and perception of the product or platform. This is where the brand guidelines come in.  &lt;/p&gt;

&lt;h2&gt;The ideal scenarios&lt;/h2&gt;

&lt;p&gt;As a designer, there are two possible ideal scenarios when faced with redesigning a platform interface. One is that you are provided with incredibly thorough, thought-through, recent, carefully documented and digitally focused brand guidelines. The other is that you have to start completely from scratch. However, what is often the case is that you’re presented with something somewhere in the middle of these, something that perhaps has the basics, or wasn’t created with digital and UI design in mind. And even if you are that lucky designer who does get handed the wonderfully thought-through guidelines, there is still a good chance that some expansion upon it will be required for the purposes of the UX and UI design. &lt;/p&gt;

&lt;h2&gt;Guidelines aren’t the be-all-and-end-all&lt;/h2&gt;

&lt;p&gt;Before we answer the question at the beginning of this article, we must first take a look at the limitations of traditional brand guidelines, and why they are not the be-all-and-end-all for any redesign in the first place.&lt;/p&gt;

&lt;p&gt;Your traditional brand guideline documents are in some cases created by brand and marketing teams who may not necessarily be familiar with the intricacies and requirements of how a digital platform operates. Usually, their primary focus is on laying out the brand language, visual identity and creating rules and guidelines for various possible design scenarios. They don’t tend to go into the complexities such as context, error and validation messaging, or provide the detail required for interactive elements and states. &lt;/p&gt;

&lt;p&gt;Furthermore, you’ll be lucky if you’re presented with a colour palette or rules that has been developed with accessibility in mind. In fact, I have personally only come across a few traditional brand guideline documents that outline the colour contrast ratios of certain colour combinations from their palette. This isn’t to say that they’re not out there, it just means that what you are given to work with may well not have all of these bases covered.    &lt;/p&gt;

&lt;p&gt;In a perfect world, branding, design, marketing and product teams would all communicate wonderfully, creating a world in which brands are created with a digital-first approach, including all requirements and considerations for the UX and UI design, we might call this a design system. However, we don’t live in that perfect world and we often have to do the best we can with what we are handed. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feqafbrm2bbomwz2yblaf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feqafbrm2bbomwz2yblaf.png" alt="Image description" width="800" height="482"&gt;&lt;/a&gt;&lt;br&gt;
Design systems can be incredibly useful when it comes to scaling&lt;/p&gt;

&lt;h2&gt;Are they even relevant?&lt;/h2&gt;

&lt;p&gt;Another factor coming into play is this: How up-to-date are the brand guidelines that you’re being sent? After all, if they’re years old, they may no longer be fit for purpose anyway, and so a start-from-scratch approach may still be on the cards. That is, if you can clearly articulate the benefit of taking on what can be a much larger (and therefore, more costly) project. &lt;/p&gt;

&lt;p&gt;At the end of the day, if a brand has recently been developed or re-designed then you’re in with more of a chance of it being fit for purpose. And if the brand hasn’t been touched in years, isn’t digitally focused and has significant gaps, then you’re going to need to take a deeper look before starting any UX and UI redesign.&lt;/p&gt;

&lt;h2&gt;Why you may want to adapt the brand guidelines&lt;/h2&gt;

&lt;p&gt;One benefit of adapting the brand guidelines for an interface redesign is that your users will be familiar with that certain look and feel, and so may find it easier to adapt to the new interface. After all, a radical and sudden change to the interface that both looks and works so differently from what the users are familiar with can cause great frustration, and in the worst-case scenario, abandonment. &lt;/p&gt;

&lt;p&gt;We do see this happen with redesigns in many areas of design failing and causing huge amounts of financial loss and damage to the brand. From GAP’s rebrand in 2010 which cost $100 million to Twitter’s rebrand to X which is widely considered a failure, the examples are countless and act as a warning to all who attempt a rebrand or redesign. However, we can learn from others’ mistakes and are not doomed to repeat them. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc0g88pt0to97sc51vokf.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc0g88pt0to97sc51vokf.jpeg" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;br&gt;
Twitter’s controversial rebrand in 2023&lt;/p&gt;

&lt;h2&gt;Why you may want to start afresh&lt;/h2&gt;

&lt;p&gt;Whilst adapting brand guidelines may help users get to grips sooner with a redesigned interface, this isn’t to say that starting afresh will fail. If done well, and for the right reasons, it can be quite the contrary. &lt;/p&gt;

&lt;p&gt;At the end of the day, if there is a genuine need to start afresh, and the usability will be greatly improved in doing so, then sticking to possibly outdated and ineffective brand guidelines is not worth it for the sake of familiarity. To soften the blow in terms of changes (as we all know that users, and people in general, don’t always like change), a gradual approach of continuous improvement can be taken, whilst being sure to test on real users throughout the process.&lt;/p&gt;

&lt;h2&gt;So, what’s my preference?&lt;/h2&gt;

&lt;p&gt;I would go as far as to say that for a UX and UI designer, a preference towards creating guidelines from scratch may be the most common. It certainly would be my preference as it means you can create it exactly how you think is best, exactly in line with the needs of the product and users, whilst being sympathetic to the brand at large. &lt;/p&gt;

&lt;p&gt;But, at the end of the day, part of being a designer is being flexible and open to working in whichever way is necessary for a given job. If I’m handed brand guidelines to work through a redesign, I’ll make the best of it, but if I’m lucky enough to be able to start from scratch, that’s a good day all around, both for me and most likely for the interface too. &lt;/p&gt;

&lt;p&gt;In the past, I’ve been given no more than two hex codes to work with. Given the autonomy to flesh out all styles necessary for the project, I was able to create a thorough and cohesive set of styles and interface components that worked for the brand and platform, whilst ensuring their usability, legibility and accessibility. Beyond this, it also meant that the styles and wider design system were all documented within Figma, alongside the design files and prototypes, resulting in an easy and efficient workflow between design and engineering.      &lt;/p&gt;

&lt;p&gt;With that said, if you’re anything like me, you may find yourself itching to make changes to the brand and certain styles throughout the design process, but I do believe that sometimes working within restraints and relinquishing some control can make you a better designer. After all, any UX/UI designer with a good understanding of branding can create a beautiful set of styles from scratch, but taking something that has been handed to you and making that work for the brand, business and user, well that is a true skill.   &lt;/p&gt;

&lt;p&gt;Thanks to Tirza van Dijk, NordWood Themes and Giorgio Trovato for the photos on Unsplash ❤️ This post &lt;a href="https://www.browserlondon.com/"&gt;Browser London&lt;/a&gt;. &lt;/p&gt;

</description>
      <category>uxdesign</category>
      <category>brandguidelines</category>
      <category>digitalproducts</category>
      <category>frontend</category>
    </item>
    <item>
      <title>CSS Container Queries: Revolutionising Responsive Web Design</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Tue, 23 Apr 2024 11:41:09 +0000</pubDate>
      <link>https://dev.to/browserlondon/css-container-queries-revolutionising-responsive-web-design-3m4f</link>
      <guid>https://dev.to/browserlondon/css-container-queries-revolutionising-responsive-web-design-3m4f</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzzp5y5lq9ck2uvyn8s5u.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzzp5y5lq9ck2uvyn8s5u.jpeg" alt="Image description" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the ever-evolving landscape of web development, staying abreast of the latest and most efficient coding practices is paramount, we discussed how responsive web design has evolved in our 2019 article &lt;a href="https://www.browserlondon.com/blog/2019/08/19/should-we-still-be-selling-responsive-web-design/"&gt;‘Should we still be selling Responsive Web Design‘&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Now among the plethora of CSS advancements, one topic back in 2021 ignited the interest of developers worldwide: CSS Container Queries. At the time, &lt;a href="https://css-tricks.com/author/robinrendle/"&gt;Robin Rendle&lt;/a&gt; at CSS Tricks wrote a nice introduction titled &lt;a href="https://css-tricks.com/say-hello-to-css-container-queries/"&gt;‘Say Hello To CSS Container Queries‘&lt;/a&gt;. This innovative feature transformed how we approached responsive design, promising a level of flexibility and precision previously unattainable with traditional methods.&lt;/p&gt;

&lt;h2&gt;The dawn of a new era?&lt;/h2&gt;

&lt;p&gt;Historically, responsive web design has hinged on media queries that respond to changes in the viewport size, while media queries are of course effective, this approach has its limitations, particularly when dealing with complex components and layouts that require more nuanced adaptability. Whilst CSS Container Queries allowed developers to style elements based on the size of their parent container rather than the viewport, not necessarily a new era, but it made everything a touch more succinct.&lt;/p&gt;

&lt;h2&gt;Understanding container queries&lt;/h2&gt;

&lt;p&gt;The introduction of container queries marked a significant shift from the viewport-centric design philosophy. By focusing on the container, developers can create truly modular components that maintain their design integrity regardless of where they are placed on the page. This level of component-based design was of course a significant gain, especially in the era of web components and design systems. The Mozilla Developer Network (MDN) provides an authoritative overview of &lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries"&gt;Container Queries&lt;/a&gt;, including syntax, use cases, and browser support information.&lt;/p&gt;

&lt;h3&gt;How do container queries work?&lt;/h3&gt;

&lt;p&gt;At its core, Container Queries leverage the @container rule, which applies styles based on the conditions met by a container’s size. For instance, a card component could be styled to display its content in a single-column layout when in a narrow container but switch to a multi-column layout in a wider container.&lt;/p&gt;

&lt;p&gt;For a simple explanation, below is an example code snippet demonstrating how to use a CSS container query, as you can see it’s pretty simple. This example will show how you might style a component differently based on the width of its container. The goal is to create a card component that adapts its layout based on the container’s size. For this example, let’s assume we want our card to display its content in a single column when the container is less than 500px wide and switch to a two-column layout when the container is wider.&lt;/p&gt;

&lt;p&gt;First, we define the container in our HTML:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div class="container"&amp;gt;
  &amp;lt;div class="card"&amp;gt;
    &amp;lt;img src="image.jpg" alt="An interesting image"&amp;gt;
    &amp;lt;div class="content"&amp;gt;
      &amp;lt;h2&amp;gt;Title of the Card&amp;lt;/h2&amp;gt;
      &amp;lt;p&amp;gt;This is some description text that goes inside the card. It's more detailed when the card is wider.&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, we apply CSS for the card, including the container query:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.container {
  /* Define the container as a container query container */
  container-type: inline-size;
}

.card {
  /* Initial single column layout */
  display: block;
}

.card img {
  max-width: 100%;
  height: auto;
}

.card .content {
  padding: 1rem;
}

@container (min-width: 500px) {
  .card {
    /* Two-column layout for wider containers */
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }

  .card img {
    /* Adjustments for the image in a two-column layout */
    max-width: none;
    width: 100%; /* Adjust to fill the column */
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the .container class is designated as a container query container by setting container-type: inline-size;. This tells the browser that styles inside container queries should be applied based on the inline size (typically width) of elements with this class.&lt;/p&gt;

&lt;p&gt;The @container rule checks if the .container is at least 500px wide. If so, it changes the .card layout to a two-column grid layout. The image and text content inside the .card are automatically arranged into these columns, demonstrating a responsive design that adapts to the container’s size rather than the viewport size.&lt;/p&gt;

&lt;p&gt;This approach allows for more modular and reusable component styles, making it easier to maintain a consistent look and feel across different parts of a web application, regardless of the surrounding layout.&lt;/p&gt;

&lt;p&gt;For an in-depth look, the Mozilla Developer Network (MDN) provides a comprehensive overview of Container Queries which includes syntax, use cases, and browser support information should you need it.&lt;/p&gt;

&lt;h2&gt;The impact on responsive web design&lt;/h2&gt;

&lt;p&gt;In the real world, the introduction of container queries is more than just a technical update; it represents a paradigm shift in responsive design.&lt;/p&gt;

&lt;p&gt;Ultimately responsive web design (RWD) is centered around ensuring that web pages function well on a variety of devices and window or screen sizes. Typically, it relies heavily on media queries that apply styles based on the viewport size. Here are a few ways it’s reshaped the landscape since it became popular back in 2021:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Enhanced Modularity&lt;/strong&gt;: Components can now be designed in isolation, with their responsiveness encapsulated within. This leads to more reusable and scalable codebases.&lt;br&gt;
&lt;strong&gt;Simplified Layouts&lt;/strong&gt;: The complexity of managing responsive designs across various viewports is significantly reduced, as the focus shifts to the container level.&lt;br&gt;
&lt;strong&gt;Improved Performance&lt;/strong&gt;: By reducing the reliance on JavaScript for layout adjustments and minimizing the need for media query overrides, Container Queries can lead to more efficient and faster-loading web pages.&lt;/p&gt;

&lt;p&gt;Of course, when integrating the concept of responsive web design with container queries, like in the example provided below, you gain the ability to create components that are not only responsive to the viewport but also adaptable to their container’s size. This dual approach enhances the adaptability and reusability of components across different contexts within the same webpage.&lt;/p&gt;

&lt;p&gt;To illustrate how responsive web design might affect and work alongside the container query example, let’s extend the previous code to include viewport-based media queries. This will ensure our web page content is responsive not only to its container size but also to the overall viewport size, providing a more comprehensive responsive design.&lt;/p&gt;

&lt;p&gt;Extending the Example with Viewport-Based Media Queries&lt;br&gt;
We’ll add some media queries to adjust the overall layout and font sizes based on the viewport size, complementing our container query setup:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/* Base styles */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 1rem;
}

.container {
  container-type: inline-size;
}

.card {
  display: block;
}

.card img {
  max-width: 100%;
  height: auto;
}

.card .content {
  padding: 1rem;
}

@container (min-width: 500px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }

  .card img {
    max-width: none;
    width: 100%;
  }
}

/* Responsive Web Design adjustments */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .card .content {
    padding: 0.5rem;
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  body {
    font-size: 16px;
  }
}

@media (min-width: 1201px) {
  body {
    font-size: 18px;
  }

  .container {
    max-width: 800px;
    margin: 0 auto; /* Centering the container */
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this extended example, we’ve added viewport-based media queries that adjust the body font size and the .card .content padding based on the viewport width. This ensures that the text is readable and the content is comfortably spaced on devices of all sizes, from small mobile phones to large desktop monitors.&lt;/p&gt;

&lt;p&gt;The combination of container queries and viewport-based media queries allows for a highly flexible and responsive design. The container queries focus on the component’s responsiveness within its immediate context (the container), while the viewport-based media queries handle global page layout and typography adjustments based on the overall window size.&lt;/p&gt;

&lt;p&gt;This dual approach leverages the strengths of both methods, providing fine-grained control over component layouts in different contexts and ensuring the page is optimized for readability and usability across all devices.&lt;/p&gt;

&lt;p&gt;As a final note on this, Isaac Lee created a series of examples highlighting responsive container queries using Percy.io for visual regression testing. It serves as a good example of use with basic data. You can check out his &lt;a href="https://ember-container-query.netlify.app/dashboard"&gt;Ember Container Query page&lt;/a&gt;, or check &lt;a href="https://github.com/ijlee2/ember-container-query?tab=readme-ov-file"&gt;Isaac’s Github repo&lt;/a&gt; for reference and documentation.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frzbtssgb9hltok62z61u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frzbtssgb9hltok62z61u.png" alt="Image description" width="800" height="497"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;The challenges and the considerations&lt;/h2&gt;

&lt;p&gt;Despite their potential, container queries introduce new considerations for developers, especially when it comes to implementation:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Browser Support&lt;/strong&gt;: As with any new technology, browser support is gradual. Developers must consider fallbacks for unsupported environments.&lt;br&gt;
&lt;strong&gt;Learning Curve&lt;/strong&gt;: Adopting a container-centric approach requires a shift in mindset and potentially rethinking existing design patterns.&lt;br&gt;
&lt;strong&gt;Performance Implications&lt;/strong&gt;: While Container Queries can improve performance, misuse or overuse can lead to complexity and unintended consequences.&lt;/p&gt;

&lt;h2&gt;Looking ahead&lt;/h2&gt;

&lt;p&gt;As the web continues to evolve, so too do the tools at our disposal. CSS Container Queries are just the beginning of a new chapter in responsive design, offering a glimpse into a future where designs are more adaptable, efficient, and user-centric than ever before. The journey of exploring and mastering Container Queries will undoubtedly be filled with learning opportunities and creative challenges, but the potential rewards for developers and users alike are immense.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2024/04/23/css-container-queries-revolutionising-responsive-web-design/"&gt;CSS Container Queries: Revolutionising Responsive Web Design&lt;/a&gt; appeared first on &lt;a href="https://www.browserlondon.com"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>css</category>
      <category>frontend</category>
      <category>responsivewebdesign</category>
      <category>webapp</category>
    </item>
    <item>
      <title>Navigating the Dynamics of an External Team Collaboration</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Mon, 26 Feb 2024 17:28:35 +0000</pubDate>
      <link>https://dev.to/browserlondon/navigating-the-dynamics-of-an-external-team-collaboration-3cjp</link>
      <guid>https://dev.to/browserlondon/navigating-the-dynamics-of-an-external-team-collaboration-3cjp</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fckcmctt6yjd2l7fz39ae.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fckcmctt6yjd2l7fz39ae.jpeg" alt="Image description" width="800" height="533"&gt;&lt;/a&gt;&lt;br&gt;
As a frontend developer, the majority of my work revolves around JavaScript and TypeScript. However, recently I had the opportunity to collaborate with a backend team from another company that predominantly worked with Python. This collaboration presented its fair share of challenges, as described in our post titled SVG Gradients: Solving Curved Challenges, but it also provided invaluable insights and learnings. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftl468msz4bio9aeraf3k.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftl468msz4bio9aeraf3k.jpeg" alt="Image description" width="800" height="448"&gt;&lt;/a&gt; From our recent post: &lt;a href="https://www.browserlondon.com/blog/2023/07/24/svg-gradients-solving-curved-challenges/"&gt;SVG Gradients: Solving Curved Challenges&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here we share my experiences and lessons learned while working as part of an external team, highlighting the importance of effective communication and the power of mutual learning.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Communication Challenges&lt;/b&gt;&lt;br&gt;
One of the initial hurdles we faced was communication. Our respective companies had adopted different meeting structures and communication tools, which initially seemed inconsequential. However, as we progressed, it became evident that the constant switching between email, Slack, Jira, and Microsoft Teams was causing important messages to get lost.&lt;/p&gt;

&lt;p&gt;Recognising the need for streamlined communication, we decided to collaborate with the external development team and our project manager to simplify our processes. After thorough discussions, we made a couple of key changes:&lt;/p&gt;

&lt;p&gt;We reduced the number of meetings to one daily standup on Microsoft Teams, providing a central platform for team updates. &lt;/p&gt;

&lt;p&gt;We agreed to log all meeting notes in Jira, ensuring a centralised source of truth for technical requirements. &lt;br&gt;
These adjustments significantly reduced interruptions and distractions, allowing us to focus more on our tasks and tickets.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Overcoming Technical Differences&lt;/b&gt;&lt;br&gt;
Another significant challenge we encountered was the technical disparity between our frontend team’s use of TypeScript and the backend team’s reliance on Python. Building a type-safe API became more complex due to this divide.&lt;/p&gt;

&lt;p&gt;To alleviate this challenge, I took the initiative to learn MongoDB, a popular non-relational database frequently used by the backend team. Given that MongoDB generates JSON, my transition from JavaScript to this database was relatively seamless. I was fortunate to have experienced backend developers at my disposal, who provided guidance and directed me to valuable online resources. These resources accelerated my learning process, saving considerable time.&lt;/p&gt;

&lt;p&gt;Armed with a better understanding of MongoDB, I was able to actively contribute to the API design and development process. My knowledge of how MongoDB structures its data, particularly its practice of embedding documents, allowed me to create TypeScript interfaces and type definitions that aligned accurately with the backend requirements. This harmonisation resulted in fewer changes required for the API, leading to increased efficiency and satisfaction for the backend team.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Farffzjcjbxi22wy22amf.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Farffzjcjbxi22wy22amf.jpeg" alt="Image description" width="800" height="418"&gt;&lt;/a&gt;&lt;br&gt;
From the post: &lt;a href="https://www.ntspl.co.in/blog/5-ways-to-learn-mongodb/"&gt;5 Ways to learn Mongo DB Starter Kit article&lt;br&gt;
Embracing Cross-Company Collaboration&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Working with a backend team from another company undoubtedly posed challenges, but it proved to be a remarkably rewarding journey. By embracing the opportunity to acquire new skills and align methodologies, we successfully bridged the gap between our teams. This collaboration demonstrates that, with &lt;br&gt;
 the right approach, cross-company partnerships can enhance productivity rather than hinder it. &lt;/p&gt;

&lt;p&gt;Our commitment to effective communication, along with a shared willingness to learn from one another, brought us closer together and ultimately contributed to the project’s success.&lt;/p&gt;

&lt;p&gt;In the ever-evolving landscape of software development, working with external teams provides valuable opportunities for growth and knowledge exchange. By embracing these experiences, we expand our horizons, deepen our skill sets, and forge meaningful connections that transcend organisational boundaries.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2023/09/18/navigating-the-dynamics-of-an-external-team-collaboration/"&gt;Navigating the Dynamics of an External Team Collaboration&lt;/a&gt; appeared first on &lt;a href="https://www.browserlondon.com"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>opinion</category>
      <category>beginners</category>
      <category>mongodb</category>
      <category>javascript</category>
    </item>
    <item>
      <title>SVG Gradients: Solving Curved Challenges</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Wed, 21 Feb 2024 15:06:44 +0000</pubDate>
      <link>https://dev.to/browserlondon/svg-gradients-solving-curved-challenges-4i5b</link>
      <guid>https://dev.to/browserlondon/svg-gradients-solving-curved-challenges-4i5b</guid>
      <description>&lt;p&gt;In the world of programming, seemingly straightforward tasks can unravel into complex challenges. Recently, we encountered one such challenge while attempting to transform a Figma design into code. The task at hand involved creating a radial dial with a linear gradient – a seemingly simple requirement that soon proved to be more intricate than expected. &lt;/p&gt;

&lt;p&gt;In this post, we’ll delve into the world of SVG gradients and explore the solution we devised to tackle the challenges that arose, and argue why sometimes, being given complex engineering challenges like this can be highly rewarding.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;b&gt;Thrown a curveball&lt;/b&gt;
&lt;/h2&gt;

&lt;p&gt;At first, it seemed simple. There must be a library we can use to create the dial and apply a linear gradient to it. How hard could it be? &lt;/p&gt;

&lt;p&gt;And after a quick search of investigating libraries such as High Charts and FusionCharts we did find libraries capable of creating radial dials as well as generating linear gradients using SVG. However, the real complexity emerged when attempting to combine these two elements seamlessly. The obstacle lay in the nature of linear gradients defined within SVG. By default, linear gradients transition between colours along a straight line. When applied to the stroke of a circular path, the gradient’s direction remains linear, disregarding the curve of the circle. &lt;/p&gt;

&lt;p&gt;Consequently, if we were to apply a linear gradient to a complete circular dial created with a single curve, the gradient would follow a straight path rather than the desired radial path along the dial. That wouldn’t achieve the curved gradient that we were looking for – so it was back to the drawing board.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsf4lc8ofx81rr2ozc3ps.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsf4lc8ofx81rr2ozc3ps.jpeg" alt="Image description" width="800" height="533"&gt;&lt;/a&gt;&lt;br&gt;
&lt;b&gt;Breaking up the problem&lt;/b&gt;&lt;br&gt;
Instead, to achieve the effect of a smoothly transitioning gradient encircling the radial dial, we realised we needed to break the dial into multiple sections and apply distinct gradients to each section.&lt;/p&gt;

&lt;p&gt;In our example, we divided the dial into four sections, each assigned its own linear gradient. By thoughtfully selecting the colours for the gradient stops, we were able to create a continuous gradient appearance around the dial.&lt;/p&gt;

&lt;p&gt;Here, we start to see how we can construct a radial dial in SVG. The “d” attribute defines a path to be drawn. In this case, it’s specifying the path for the first quarter of our radial dial&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh4ylc2gdravs9h42ph02.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh4ylc2gdravs9h42ph02.png" alt="Image description" width="800" height="361"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The ‘M’ stands for “Move To” and sets the initial point of the path at the coordinates (150,10). The ‘a’ command creates an elliptical arc. This arc command has several parameters. The first two parameters, ‘120 120’, set the x and y radius of the ellipse used to draw the arc. The ‘0 0 1’ defines the x-axis rotation (which is zero), large-arc-flag and sweep-flag. The final ‘103.9230 60’ sets the end point of the path, which completes our arc. We then apply the gradient with the stroke attribute on the path.&lt;/p&gt;

&lt;p&gt;This process is repeated for each quarter of the dial. Each quarter gets its own path and its own gradient. This gives the effect of a single, smoothly transitioning gradient circling around the dial.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;b&gt;Dynamic Gradient Filling&lt;/b&gt;
&lt;/h2&gt;

&lt;p&gt;To dynamically fill the gradient along the dial, we leveraged the stroke-dashoffset and stroke-dasharray properties of the SVG path. This technique is commonly employed when creating radial dials. CSS tricks has an in depth write up on the approach: SVG line animation works.&lt;/p&gt;

&lt;p&gt;By setting the stroke-dasharray equal to the length of the path, we established a pattern of dashes and gaps resembling a dotted line encircling the circle. The stroke-dashoffset property determined the starting point of the dash pattern, effectively animating the stroke’s movement. By animating the stroke-dashoffset from the start of the path to the length of the path, the dash appeared to “travel” around the circle.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffzow5iic4l704nbo2ys9.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffzow5iic4l704nbo2ys9.jpeg" alt="Image description" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0o5eckzku0hhzp37tvn8.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0o5eckzku0hhzp37tvn8.jpeg" alt="Image description" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3c2ehkzxcbndfnbua5tr.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3c2ehkzxcbndfnbua5tr.jpeg" alt="Image description" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;b&gt;Embracing Complexity (Sometimes)&lt;/b&gt;
&lt;/h2&gt;

&lt;p&gt;While complex designs can translate into difficult technical challenges, they also serve as opportunities for programmers to hone their problem-solving skills. This is an integral part of what keeps programming interesting, at least for me.&lt;/p&gt;

&lt;p&gt;The complexities we face in programming often reflect the complexity of the designs we’re working from. Our Figma design, featuring a radial dial with a linear gradient, serves as a great example of how a visually appealing design element can introduce significant technical challenges.&lt;/p&gt;

&lt;p&gt;It’s easy as programmers to instinctively try and work with designers to come up with a compromise in terms of design spec. In fact that’s often the right approach. But sometimes, if you want your designs to stand out from the crowd, you’ll need to instead push past your comfort zone and come up with creative ways of solving your problems.&lt;/p&gt;

&lt;p&gt;Another way to put this is, while design complexities can translate into technical challenges, they also serve as opportunities for programmers to hone their most valuable skill, their ability to problem-solve.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0ohvzpmeuunax8nzg89c.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0ohvzpmeuunax8nzg89c.jpeg" alt="Image description" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2023/07/24/svg-gradients-solving-curved-challenges/"&gt;SVG Gradients: Solving Curved Challenges&lt;/a&gt;. First appeared on &lt;a href="https://www.browserlondon.com"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>researchdiscovery</category>
      <category>uxdesign</category>
      <category>webdesign</category>
      <category>css</category>
    </item>
    <item>
      <title>Lean Product Design: A Playbook </title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Fri, 23 Jun 2023 16:24:57 +0000</pubDate>
      <link>https://dev.to/browserlondon/lean-product-design-a-playbook-3o7p</link>
      <guid>https://dev.to/browserlondon/lean-product-design-a-playbook-3o7p</guid>
      <description>&lt;p&gt;Creating a new product is an exciting process. You’ve dreamed up a killer idea, drafted some sketches and maybe even started to think about how you’d make money out of this world beating idea.&lt;/p&gt;

&lt;p&gt;But hold up. Before jumping in and hiring a development team, or asking IT to build it out, take a step back and make sure that you’ve thought it through, recognised your assumptions and proved that they are correct. Are customers really going to want this?&lt;/p&gt;

&lt;p&gt;If the answer is no, the best time to find this out is now – the alternative is to find out after forking out a lot of money on coding an app that nobody wants. Fortunately, we can find this out with fast, cheap experiments, rather than paying for months of expensive development time.&lt;/p&gt;

&lt;p&gt;That’s where discovery comes in. It’s a chance to explore our customers and their problems in-depth. Here we find out their ‘jobs to be done’, and run experiments to see if customers really will react to your product in the way you expect (spoiler alert: they won’t).&lt;/p&gt;

&lt;p&gt;This guide gives you a heap of tactics that you can use to understand customer problems and test buying intent. This phase de-risks the whole venture since nobody; your investors, your board of Directors, your customers, your build partner, want to build something that nobody will use.&lt;/p&gt;

&lt;p&gt;—&lt;/p&gt;

&lt;p&gt;Throughout this guide I’ll be using a fictional product idea to give context to the concepts that I outline. I’ve used an example that is at a similar stage to the products that people approach us with at Browser: an idea for a new digital product where a little research has been done and a rough idea of the market and value proposition is known.&lt;/p&gt;

&lt;p&gt;The steps we’ll run through in this guide are as follows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Recognise your assumptions&lt;/li&gt;
&lt;li&gt;Test your assumptions&lt;/li&gt;
&lt;li&gt;Learn and move forward&lt;/li&gt;
&lt;li&gt;Develop a value proposition&lt;/li&gt;
&lt;li&gt;Run more experiments&lt;/li&gt;
&lt;li&gt;Define a strategy and roadmap
Let’s jump in.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Setting the scene
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Our product&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The example product that I’m going to use is an idea for a product that helps busy people find personal assistants. As a working title, we’ll call it PA Finder.&lt;/p&gt;

&lt;p&gt;That’s as much as we’ll define for the time being. At this stage, we don’t want to confine ourselves to a particular medium (an app, a physical product, a service). All we need is an idea for a problem and the kind of people that we believe are affected by it. Later, we’ll work out what the solution actually is.&lt;/p&gt;

&lt;p&gt;So let’s imagine that we’ve already done a bit of research: we’ve spoken to some contacts who use a Personal Assistant, looked at existing competitors and have even lined up a few beta users who are keen to try out the first version of our product. It might sound like we’re ready to start designing and coding our product. After all, fail fast, right?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--c8XYoB2g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2022/11/02152449/InVision-journeys.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c8XYoB2g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2022/11/02152449/InVision-journeys.png" alt="It’s tempting to jump straight into detailed designs straight away – don’t." width="800" height="466"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It’s tempting to jump straight into detailed designs straight away – don’t.&lt;/p&gt;

&lt;h3&gt;
  
  
  Staying in the problem space
&lt;/h3&gt;

&lt;p&gt;Well, before we get carried away, Dan Olsen (author of the Lean Product Playbook) has something to say about this. He stresses that when creating a new product or feature, teams explore the ‘problem’ space rigorously, before moving to thinking about solutions. This helps us focus on benefits, not features, and thus on the value that we are delivering to the customer, rather than measuring value based on the features that we are delivering.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NbnF_DYi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh3.googleusercontent.com/I1eBDIGFLlVXyRJL0sDpEQUBpjnr9Ae2CE6ZdQmELvNxifLYhpmp4bQISsP2yDhv5AjE2o61WuzmqCallIU7m_uZOq8NjYvTu3fjAjdKgoW9J8xIirrqZUrzWGz9_6tXSBbBH_FXeOcRcBHwwwad6ZM" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NbnF_DYi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh3.googleusercontent.com/I1eBDIGFLlVXyRJL0sDpEQUBpjnr9Ae2CE6ZdQmELvNxifLYhpmp4bQISsP2yDhv5AjE2o61WuzmqCallIU7m_uZOq8NjYvTu3fjAjdKgoW9J8xIirrqZUrzWGz9_6tXSBbBH_FXeOcRcBHwwwad6ZM" alt="Before thinking about the top of the pyramid, we need to make sure we’re right about the bottom." width="800" height="520"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Before thinking about the top of the pyramid, we need to make sure we’re right about the bottom.&lt;/p&gt;

&lt;p&gt;Since a solution is only valuable if we have first defined the problem/need correctly, for a large part of our discovery phase we want to stay in the problem space. The more we know about our customer’s problems, the more we de-risk all the work that comes with developing a solution. &lt;/p&gt;

&lt;p&gt;This doesn’t mean that we’re moving slowly though, or that we’re wasting time working on theories and documentation. As this guide will demonstrate, we’ll be carrying out real life experiments to test customer reaction to the problems we assume they have. Some of this is familiar tools like interviews and surveys, and we’ll also use techniques like dummy landing pages and ad campaigns to test buying intent.&lt;/p&gt;

&lt;p&gt;With this in mind, the focus of this guide will be the work done in taking a product back to the problem space, interrogating all the assumptions that we have made about our customers, market and our ability, before emerging again into the solution space with a bunch of evidence to back up what we plan to build.&lt;/p&gt;

&lt;p&gt;That brings us neatly to the next chapter, Recognise your assumptions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1. Recognise your assumptions
&lt;/h2&gt;

&lt;p&gt;You might have already jumped ahead and already started sketching out how your new product might look and work. That might come in handy later, but I strongly advise you forget about that for now and work through this step which focuses problems and solutions from a customer point of view.&lt;/p&gt;

&lt;p&gt;Before you start dreaming up solutions, putting pen to paper and hiring a team of coders, you need to understand the pains, gains and customer jobs of your product. At this stage we will search out the assumptions we are making, phrase them as hypotheses and then single out the ones that will make or break our business if they are incorrect.&lt;/p&gt;

&lt;p&gt;If you spend the time to do this, you’ll be on your way to creating a testable value proposition that will become the north star for your design, development and marketing. A proven truth that everyone can work towards. If you don’t, you are in danger of building features on a hunch that they are a good idea – a recipe for wasted time and money and a team that is pulling in different directions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Customer jobs, pains and gains
&lt;/h3&gt;

&lt;p&gt;Our starting point then, is with our customers. &lt;/p&gt;

&lt;p&gt;We’ll map out our customers’ pains, gains and customer jobs based on what we know so far. Depending on the amount of research that has already been carried out beforehand, there might be an element of guessing at this stage, but the idea is that we get everything that we think we know about our customers out in the open.&lt;/p&gt;

&lt;p&gt;In our workshops, we use the below chart to map this out (inspired by Strategyzer). We’ve applied our example product, Personal Assistant Finder, to this test to give you an idea of how it might look.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0DvEwpKU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh6.googleusercontent.com/lV86P-STGU4fAC8FSM-4_xU4VZ8DRZmCcCpuJhRy4OPXCjF0JPtimaxnf6S2RPrIwOxunk7oezkXoENTxTYYNq3NAL8KuqH_wo3B0pDkolKF60rdb2zBheA1YXNis4ErBdtjohAKLq_rTxPTHpxewy0" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0DvEwpKU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh6.googleusercontent.com/lV86P-STGU4fAC8FSM-4_xU4VZ8DRZmCcCpuJhRy4OPXCjF0JPtimaxnf6S2RPrIwOxunk7oezkXoENTxTYYNq3NAL8KuqH_wo3B0pDkolKF60rdb2zBheA1YXNis4ErBdtjohAKLq_rTxPTHpxewy0" alt="Pie chart" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let’s break these terms down.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Customer jobs&lt;/strong&gt;: What are the tasks that our customers need to do?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pains&lt;/strong&gt;: What are their pain points they encounter when carrying out these jobs?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gains&lt;/strong&gt;: What opportunities exist for them to make gains on their jobs?&lt;/p&gt;

&lt;p&gt;Once we’ve mapped this out we have a clear view of what we think our customer wants to achieve, the problems they have and the opportunities to improve. This might be based on some prior research, but it’s also okay if there is an element of guessing here – we’ll be testing it all in a moment.&lt;/p&gt;

&lt;h3&gt;
  
  
  Assumption Mapping
&lt;/h3&gt;

&lt;p&gt;Our next step is all about acknowledging how little we know. Whilst guessing is fine at this stage, it is important that we acknowledge what is a guess, and what is backed up by solid evidence. Assumption mapping helps us do this.&lt;/p&gt;

&lt;p&gt;Here we’ll plot what we think we know onto a grid and map our post-its by evidence vs. business importance. Below you can see how we have done this with our Personal Assistant product: we’ve taken post-its that we’ve identified in the pains, gains and jobs exercise, and applied them to our Assumptions Map to understand which of these are risky assumptions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yJeiXmL8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh4.googleusercontent.com/kqyb2vk6MqWrybquUuSrsK8-RPd9fOgS6Ilwh8CsO6H_9N-T3v63KcUM0heeEyHMJsLUJBRhz6LyTOmsZFYLlIAHlPIq9ruXntqLwhVLSy2ONjikbJI-NEXOv8WTV6nnGHJ67gI1XS6IGuPIvi19qPk" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yJeiXmL8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh4.googleusercontent.com/kqyb2vk6MqWrybquUuSrsK8-RPd9fOgS6Ilwh8CsO6H_9N-T3v63KcUM0heeEyHMJsLUJBRhz6LyTOmsZFYLlIAHlPIq9ruXntqLwhVLSy2ONjikbJI-NEXOv8WTV6nnGHJ67gI1XS6IGuPIvi19qPk" alt="Assumptions map" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here you can see a group of post-its in the top right hand quadrant. As the label suggests, these are our high risk items – we haven’t proved them and the product won’t work if they are incorrect. These are the things that we’ll test first.&lt;/p&gt;

&lt;p&gt;When assessing whether we have evidence, it’s easy to overstate the evidence that we have. Anecdotal evidence, competitor research or interviews are a good start, but they aren’t strong evidence and shouldn’t be treated as such.&lt;/p&gt;

&lt;p&gt;Strong evidence, such as users actually buying a version of our product, or at least signalling intent by signing up to a wait list, are indicators that we can really take seriously. They do take more investment in time however, so we’ll be working our way up to these kinds of experiments in the later steps. &lt;/p&gt;

&lt;p&gt;Once we’ve mapped this out, we move to the next stage of our process – Test your assumptions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2. Test your assumptions
&lt;/h2&gt;

&lt;p&gt;Once we’ve mapped out what we think we know about our customers, it’s time to run some tests.&lt;/p&gt;

&lt;p&gt;In the early stages of our process, we’ll use exploratory methods to prove or disprove our hypotheses. These tests focus on finding customer problems, rather than jumping to solutions. They will be one or a number of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Customer interviews (with a focus on jobs to be done)&lt;/li&gt;
&lt;li&gt;Expert interviews (with stakeholders, subject matter experts, frontline staff)&lt;/li&gt;
&lt;li&gt;Analysing search trends (are people searching about this problem?)&lt;/li&gt;
&lt;li&gt;Shadowing (observing how people act and what problems they face)&lt;/li&gt;
&lt;li&gt;Reading discussion forums (are people talking about this problem?)&lt;/li&gt;
&lt;li&gt;Surveys (how do people respond when we ask about this problem area?)&lt;/li&gt;
&lt;li&gt;Watching customers using existing products (what issues and limitations do they run into?)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Where possible, the whole team should be involved in this process. For us that typically means a designer, a tech lead, a product lead and one or two people from your team. Making sure that all we include a tech person in this early research so that they can see and hear the real world problems that our product will tackle. This helps them make better decisions when it comes to eventually building the product, and also they’ll have some great ideas when it comes to dreaming up solutions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GjflOat8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2022/06/10172349/Two-colleagues-work-at-a-desk-1536x1024.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GjflOat8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2022/06/10172349/Two-colleagues-work-at-a-desk-1536x1024.jpg" alt="In-person interviews are a great place to begin testing your assumptions." width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In-person interviews are a great place to begin testing your assumptions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Planning experiments using test cards
&lt;/h3&gt;

&lt;p&gt;A typical test card will look like the below. It shows what we are testing, how we will test it, what we will measure and what success looks like. We will often create multiple tests for each hypothesis, to make sure that these key assumptions are backed up with maximum evidence. This is an example from a hypothetical quiz app to find a personal assistant.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3_w3cDnS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh6.googleusercontent.com/lel1YU0ppdsg8yY4MgRESOiPjdSKlSAQY1d9QADoGx84n0StDgZLz3CchxK6GUZyoAXnj2SW6cMbBqCeNfAexUK5cdigW9eN7L1UZs0u_CxCRFTsCho6QZsoI_zqpxCCmd2uz6iEXXN_EL869N8TZBQ" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3_w3cDnS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh6.googleusercontent.com/lel1YU0ppdsg8yY4MgRESOiPjdSKlSAQY1d9QADoGx84n0StDgZLz3CchxK6GUZyoAXnj2SW6cMbBqCeNfAexUK5cdigW9eN7L1UZs0u_CxCRFTsCho6QZsoI_zqpxCCmd2uz6iEXXN_EL869N8TZBQ" alt="Example test card" width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The card contains 4 key points to keep us on track:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hypothesis&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Taken from our assumptions map, this is the thing that we want more evidence to be sure that it is true. We’ll tackle our ‘Unknown’ and ‘Critical’ hypotheses as a priority.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Test&lt;/strong&gt; – Describes what the test will consist of and the actions that we will take during it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Metric&lt;/strong&gt; – Documents what we will be measuring during the test.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Criteria&lt;/strong&gt; – Tells us what the threshold for a positive result is. We define this before the test begins.&lt;/p&gt;

&lt;p&gt;We’ll run through what we do with the results of these cards in the next section, Learn and move forward.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3. Learn and move forward
&lt;/h2&gt;

&lt;p&gt;Great! By this point we have identified our most risky assumptions, ran some experiments on them and collected a bunch of data about them that will help us decide if they are valid or not.&lt;/p&gt;

&lt;p&gt;But it’s not enough to just conduct experiments, jot down some findings and pat ourselves on the back. We need to take action from each and every one of them if we are going to squeeze all the value we can from them.&lt;/p&gt;

&lt;p&gt;A good way to document them is by splitting the results into a card that contains four sections: ‘We believed that’, ‘We observed’, ‘From that we learned that’, ‘Therefore we will’. Using our running example of our PA Finder, this would look like the following:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HYxCPwZ8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/06/19170007/Results-Card.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HYxCPwZ8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/06/19170007/Results-Card.png" alt="Example results card" width="800" height="532"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Whilst in the above example we’ve decided that the next course of action is to run some further experiments, it’s worth noting that we could take a few different routes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If the experiment was deemed to indicate that the hypothesis was true, we might decide to move forward with another, more time consuming but more reliable, experiment (such as a high fidelity prototype or a landing page)&lt;/li&gt;
&lt;li&gt;If the experiment was deemed inconclusive, we might repeat it, or look to other experiments that we have run or will run to see if they provide evidence either way.&lt;/li&gt;
&lt;li&gt;If the experiment was deemed to indicate that the hypothesis was incorrect and the experiments that we have run also point to this, we’ll accept this finding and rework our value proposition and/or business model to reflect this.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Advantages of documenting our findings in this way
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Keeping track of what we’ve learnt – we’ll be doing lots of experiments and we will want to refer back to them. These cards are easy to find and reference later.&lt;/li&gt;
&lt;li&gt;Structuring the way we think about results. The above approach makes sure that we’ve considered what we set out to learn, what we did learn and what we will do next.&lt;/li&gt;
&lt;li&gt;Getting everyone’s buy-in. The team will need to agree on these points, so it’s a great way of keeping everyone aligned to the evidence that we are gathering and the conclusions that we are drawing.&lt;/li&gt;
&lt;li&gt;Fast documentation – we don’t need to write a full on document, just jot down the key findings and move on. &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Step 4. Develop a value proposition
&lt;/h2&gt;

&lt;p&gt;By this stage we’ve assessed what we thought we knew about our customers, highlighted the things that we don’t have evidence of and will cause us serious issues if they are wrong, and methodically gone about testing them through experiments such as customer interviews, search volumes, competitor research and more.&lt;/p&gt;

&lt;p&gt;We should now be confident enough to start moving into the solution space by creating a value proposition based on this evidence. From this, we’ll then map out our business model before picking this apart for more risky assumptions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Creating a value proposition
&lt;/h3&gt;

&lt;p&gt;We’ll map out our gain creators, pain relievers and finally the products and services that we could offer. If we’re on to a winning value proposition, these should match up nicely to our user pains, gains and jobs to be done. If they fit together well, in theory, we’re looking at a good product market fit.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--c_TxitNb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh3.googleusercontent.com/MNrnI3KP2DGPq3Qn1dDudkZEfE-fzN3cb00rA9iwfJtC0zc6uPwkW4TffWGmpy9mD9tYXwOn3vLTf2LvaHtMETdzsKov5ZeSYNOsfi-YIREbMeIPR4RzoWGsCHn_nZJzmPWQcL-pChOQ6bcll0-3e6E" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c_TxitNb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh3.googleusercontent.com/MNrnI3KP2DGPq3Qn1dDudkZEfE-fzN3cb00rA9iwfJtC0zc6uPwkW4TffWGmpy9mD9tYXwOn3vLTf2LvaHtMETdzsKov5ZeSYNOsfi-YIREbMeIPR4RzoWGsCHn_nZJzmPWQcL-pChOQ6bcll0-3e6E" alt="Product and market fit diagram" width="800" height="871"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once we’re happy with our value proposition, we’ll start to map out our business model. At this point we should still be very aware that we’re still dealing with a lot of assumptions. That’s okay, We’re going to do some more assumption mapping at the end of this step.&lt;/p&gt;

&lt;p&gt;The Business Model Canvas looks like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8aoN0xhu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/06/19145106/Canvas.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8aoN0xhu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/06/19145106/Canvas.jpg" alt="Business model canvas" width="800" height="534"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Original concept: &lt;a href="https://www.strategyzer.com/canvas"&gt;https://www.strategyzer.com/canvas&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;On it, we map out the core parts of our proposed business model. These are sorted into the following groups:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Desirability&lt;/strong&gt; (do people need our product?)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Key propositions&lt;/li&gt;
&lt;li&gt;Customers relationships&lt;/li&gt;
&lt;li&gt;Channels&lt;/li&gt;
&lt;li&gt;Customer segments&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Feasibility&lt;/strong&gt; (can we build our product?)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Key partners&lt;/li&gt;
&lt;li&gt;Key activities&lt;/li&gt;
&lt;li&gt;Key resources&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Validity&lt;/strong&gt; (is our product commercially viable?)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cost structure&lt;/li&gt;
&lt;li&gt;Revenue streams&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The Business Model Canvas is a powerful way to find any gaps in the business model that have been overlooked. It’s also a strong tool to get the whole team aligned about what it is that we’re offering our customers, how we’ll deliver it and where the money is going to come from.&lt;/p&gt;

&lt;p&gt;Once this is done, we’ll move on to assumption mapping again. We’ll take everything that makes up our business model and interrogate it to work out what is crucial and still has little evidence backing it up.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_UHLX4i3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh3.googleusercontent.com/89g1XQl5cgjPA-387FCDO0RKNf942VgTGAyw1HG6HGacFFv1yf_hAvvO1MohJm5mU1o6x7sgO_5gl6EXH5GWdpZ_oCW80SFvsT1WKgeQm0BugG-6FxdDc-zNmPs6F7OLdrPiikIRU6qj7IbWfuLQXqk" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_UHLX4i3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh3.googleusercontent.com/89g1XQl5cgjPA-387FCDO0RKNf942VgTGAyw1HG6HGacFFv1yf_hAvvO1MohJm5mU1o6x7sgO_5gl6EXH5GWdpZ_oCW80SFvsT1WKgeQm0BugG-6FxdDc-zNmPs6F7OLdrPiikIRU6qj7IbWfuLQXqk" alt="Assumption mapping example" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5. Run more experiments
&lt;/h2&gt;

&lt;p&gt;Once we’ve mapped the assumptions made in our business plan, we’re ready to run even more experiments. Now that we’ve already tested some of the assumptions that we’ve had around our users, these experiments will be more complex and take longer to produce. They might be one of the following: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A simple landing page – creating a marketing page, driving traffic to it and measuring the conversion rate&lt;/li&gt;
&lt;li&gt;A clickable prototype – creating a clickable prototype, giving test users a scenario to work through and observing how they get on&lt;/li&gt;
&lt;li&gt;A low-code product – creating a working product, but using tools like Webflow or Bubble to produce something that simulates your product idea&lt;/li&gt;
&lt;li&gt;A single feature MVP – creating a coded product, but focusing on a single feature or assumption that we’d like to test&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EXkRWub7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2022/11/02155219/Seven-Seas-InVision-prototype-e1667407255890-2048x1070.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EXkRWub7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2022/11/02155219/Seven-Seas-InVision-prototype-e1667407255890-2048x1070.png" alt="A clickable prototype we created for Seven Seas." width="800" height="418"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A clickable prototype we created for Seven Seas.&lt;/p&gt;

&lt;p&gt;In many instances, a design sprint is a good way to approach this part of the product development process. It is a 4 or 5 day period where we define what we want to test, come up with a range of imaginative solutions, create a high fidelity, clickable prototype (of a landing page, or key part of the product itself) and test it out with a small number of customers. It is a great way of making decisions quickly and rapidly testing ideas.&lt;/p&gt;

&lt;p&gt;Whatever approach is taken, what’s important at this stage is that we test the most risky and important assumptions on our business canvas first, prioritising those that fall in the ‘desirable’ category over anything else. After all, if nobody is willing to buy our product because we’ve haven’t solved their problems in a compelling way, we need to find that out and make a pivot before we go any further.&lt;/p&gt;

&lt;p&gt;As in steps 2 and 3, we’ll create test cards to document exactly what we want to test here, and what success looks like. For example, if we build a landing page, we might want to test for buying intent and consider 50 enquiries in 1 week a success. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3_w3cDnS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh6.googleusercontent.com/lel1YU0ppdsg8yY4MgRESOiPjdSKlSAQY1d9QADoGx84n0StDgZLz3CchxK6GUZyoAXnj2SW6cMbBqCeNfAexUK5cdigW9eN7L1UZs0u_CxCRFTsCho6QZsoI_zqpxCCmd2uz6iEXXN_EL869N8TZBQ" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3_w3cDnS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh6.googleusercontent.com/lel1YU0ppdsg8yY4MgRESOiPjdSKlSAQY1d9QADoGx84n0StDgZLz3CchxK6GUZyoAXnj2SW6cMbBqCeNfAexUK5cdigW9eN7L1UZs0u_CxCRFTsCho6QZsoI_zqpxCCmd2uz6iEXXN_EL869N8TZBQ" alt="Test card example" width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 6. Define a strategy and roadmap
&lt;/h2&gt;

&lt;p&gt;From all of the work that we have done in the previous steps, we are now ready to define a product strategy. A good product strategy should describe what your product hopes to accomplish and how you plan to do it. It will be a document that any team member can look at and understand what the big picture is and make decisions, like what features to build, based on it. &lt;/p&gt;

&lt;p&gt;Remember that business model canvas that we produced in step 4? Well, that’s a great start for our product strategy. It documents how our product will be outwardly desirable, technically viable and financially feasible – three aspects a good product strategy should cover.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XWbuzE8y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/06/19170512/Canvas-1.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XWbuzE8y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/06/19170512/Canvas-1.jpg" alt="Product planning canvas" width="800" height="534"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To keep us from getting bogged down in documentation, we’ll simply update our canvas based on what we’ve learned during our previous experiments and use it as our product strategy. If needed, we can document this in a deck so that it’s presentable to stakeholders and the delivery team, to make sure that everyone is on the same page. &lt;/p&gt;

&lt;h2&gt;
  
  
  The product roadmap
&lt;/h2&gt;

&lt;p&gt;Once our strategy and objectives are agreed on, we’re ready to start planning our next experiments. All that’s left is to define what we’re going to focus on first. This is where a roadmap can help.&lt;/p&gt;

&lt;p&gt;We can create a roadmap quickly from what we’ve mapped on our business model canvas and assumptions grid. Our roadmap is simply a document that ranks hypotheses in priority order and shows what we’re going to investigate and deliver next.&lt;/p&gt;

&lt;p&gt;A Next Now Later roadmap is an excellent way to do this. It focuses the team and stakeholders on what is the most important thing to do right now and it is designed to resist the situation where the roadmap simply becomes a feature list that the delivery team works from. Instead, we frame our product as a series of hypotheses that need to be investigated, and add detail to them as they move to the ‘Now’ column.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QWP7FycX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh5.googleusercontent.com/QzQkCpYbmzSHCRzv8wEgghIT7W216vY0OxwKDt_OzcCHdSXaR4FqYgAFCjrOiW6t-lSdaFonAcrC3l_eYew9VDrlpFSSythghoPGVkpSsrvutmkmX09jJiXOUcYGtpNSy3jP5-jnFqV5eD8anVnTRB4" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QWP7FycX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh5.googleusercontent.com/QzQkCpYbmzSHCRzv8wEgghIT7W216vY0OxwKDt_OzcCHdSXaR4FqYgAFCjrOiW6t-lSdaFonAcrC3l_eYew9VDrlpFSSythghoPGVkpSsrvutmkmX09jJiXOUcYGtpNSy3jP5-jnFqV5eD8anVnTRB4" alt="Assumption roadmap example" width="800" height="568"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Taking our PA Finder app as an example, our ‘Now’ column might have something like: ‘Business execs will trust using a PA found online’. We might also attach OKRs to this in order to measure effectiveness, but that’s for another post. &lt;/p&gt;

&lt;h3&gt;
  
  
  Adopting an experimental mindset
&lt;/h3&gt;

&lt;p&gt;By now, we’re sure who our customer is, we have clear evidence what problems they have and what the opportunities exist and we’ve tested potential solutions with increasing certainty as to whether they are desirable for customers. We’ve then distilled all of this down into a product strategy and high level roadmap to show how we’ll realise it.&lt;/p&gt;

&lt;p&gt;This process doesn’t need to take months and it shouldn’t – all of the experiments described above can be done quickly and cheaply. As a rough guide, in 6 weeks you should be in a place where you are ready to start building your first iteration in earnest. &lt;/p&gt;

&lt;p&gt;The build phase should continue this spirit of experientation: it should be a fast (again, 6 weeks max) experiment, testing the most important hypotheses in our roadmap. The aim here is to get working software into our customers’ hands quickly, so we can continue to learn as we build the next iteration. &lt;/p&gt;

&lt;h3&gt;
  
  
  Continuous Discovery
&lt;/h3&gt;

&lt;p&gt;Although this guide has been presented in a linear way, this is a process that should be repeated constantly if it is to have any value. As you develop your product, you should continue to conduct experiments, big and small, in order to continue to learn about what customers value and what they don’t. &lt;/p&gt;

&lt;p&gt;You’ll find that parts of the product strategy and roadmap were wrong and therefore these documents should be constantly reviewed and updated as you learn. We call this ‘Continuous Discovery’ and you can learn more about it in Teresa Torres’ book, Continuous Discovery Habits. &lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2023/06/23/lean-product-design-a-playbook/"&gt;Lean Product Design: A Playbook &lt;/a&gt; appeared first on &lt;a href="https://www.browserlondon.com"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>researchdiscovery</category>
      <category>uxdesign</category>
      <category>digitalproducts</category>
      <category>digitalproject</category>
    </item>
    <item>
      <title>Yes, typography can have a huge impact on UX</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Mon, 17 Apr 2023 16:21:27 +0000</pubDate>
      <link>https://dev.to/browserlondon/yes-typography-can-have-a-huge-impact-on-ux-ij4</link>
      <guid>https://dev.to/browserlondon/yes-typography-can-have-a-huge-impact-on-ux-ij4</guid>
      <description>&lt;p&gt;I find it fascinating how design can impact user experience. Adjusting interface elements even a tiny amount can have an immediate and measurable effect on how people use and feel about a digital product, website or app. Typography, in particular, has been shown to have a significant influence on user perception and engagement. In recent years, there has been a shift towards using lowercase typefaces in brand names and headlines, and this trend is supported by research that suggests that it can create a softer and more approachable aesthetic, ultimately leading to a more welcoming user experience that promotes engagement.&lt;/p&gt;

&lt;p&gt;The recent relaunch of the Rolex website on March 27th serves as an excellent example of how a simple change in typography can drastically alter the overall look and feel of a website. The previous website design utilised ‘Helvetica Now’ in full capitals for headline statements, which gave off a bold and powerful impression. However, the redesigned website uses upper and lower-case headline statements, which creates a more refined and approachable aesthetic.&lt;/p&gt;

&lt;p&gt;This change in typeface also aligns with a broader trend in design towards using negative space to create a more modern look. By incorporating more space around elements (thanks in part to the now smaller headlines), the new Rolex website looks more streamlined and organised, making it easier for users to navigate. The overall result is a website that feels more modern and welcoming, which despite the price point of their products I believe is a strategic move by the brand to appeal to a younger audience.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oannsu44--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/04/17165017/Rolex-old-webite-2048x897.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oannsu44--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/04/17165017/Rolex-old-webite-2048x897.png" alt="The all-caps approach of the previous site design" width="800" height="350"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The all-caps approach of the previous site design&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--K9ka-uaS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/04/17164956/Rolex-new-website-2048x810.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--K9ka-uaS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://assets.browserlondon.com/wp-content/uploads/2023/04/17164956/Rolex-new-website-2048x810.png" alt="The new, softer, lowercase approach, introduced in March 2023" width="800" height="316"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The new, softer, lowercase approach, introduced in March 2023&lt;/p&gt;

&lt;p&gt;Of course, this is not the first time that typography has been used to create a specific look and feel. One of the most notable graphic designers to utilise typography in this way was Saul Bass. Bass was famous for his work on title sequences for films such as “Psycho” and “Anatomy of a Murder,” where he used typography to convey mood and tone. His bold and graphic typefaces set the stage for the films, drawing viewers in before the action even began.&lt;/p&gt;

&lt;p&gt;Another influential designer who has used typography in unconventional ways is David Carson. Carson was known for his experimental designs, which often incorporated distorted and illegible typefaces. His work challenged traditional design conventions, and his designs were often controversial. However, they also served as a reminder that design is not just about aesthetics but also about communicating a message.&lt;/p&gt;

&lt;p&gt;It is thought by cognitive scientists and typographers alike, that lower-case text is more legible than upper-case as the human eye can follow the contours and word shapes far easier. Yet lower-case letters are, on average, smaller in height and width than upper-case characters, which suggests an upper-case advantage. Studies have shown that the use of full uppercase typefaces can create a sense of authority, and even aggression or hostility, which can be off-putting to users – just think about those times you’ve had to apologise for sending a text message in FULL CAPS by mistake.&lt;/p&gt;

&lt;p&gt;By using a lowercase typeface for headlines, designers can also create more negative space, making a design web or print page feel more modern and approachable, impacting user perception and engagement. By using a lowercase typeface, designers can create a more conversational tone that can make users feel more comfortable.&lt;/p&gt;

&lt;p&gt;In conclusion, the recent relaunch of the Rolex website is just one example of how a simple change in typography can drastically alter the user experience. I believe that the use of lowercase typefaces is a trend that is here to stay, not only does it create a softer and more modern look and feel, but it also aligns with broader trends in design towards using negative space and simplicity. As designers, it is our responsibility to consider every detail in design and how it can impact the overall message that we are trying to convey.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2023/04/17/typography-can-have-a-huge-impact-on-ux/"&gt;Yes, typography can have a huge impact on UX&lt;/a&gt; appeared first on &lt;a href="https://www.browserlondon.com"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>uxdesign</category>
      <category>webdesign</category>
      <category>rolex</category>
      <category>typography</category>
    </item>
    <item>
      <title>Continuous improvement beats big ‘tada’ releases</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Fri, 10 Feb 2023 09:42:57 +0000</pubDate>
      <link>https://dev.to/browserlondon/continuous-improvement-beats-big-tada-releases-1d47</link>
      <guid>https://dev.to/browserlondon/continuous-improvement-beats-big-tada-releases-1d47</guid>
      <description>&lt;p&gt;A little thought experiment for you:&lt;/p&gt;

&lt;p&gt;Let’s imagine a client is building a digital product and wants to see what approach works best. They have two teams at their disposal and they will brief them to both build the same product, but with a variation on how they must complete it. Both teams possess the same resources, skill sets, abilities and knowledge, and both have one year to produce the best results. They will also have the same marketing channels and methods applied.&lt;/p&gt;

&lt;p&gt;Team one, let’s call them Red Team.&lt;/p&gt;

&lt;p&gt;They have been told they want a big launch in eight months’ time, followed by bi-monthly deployments. The product is to be kept under wraps until the big release. Testing is to be conducted totally in-house, alongside the client stakeholder.&lt;/p&gt;

&lt;p&gt;The Blue team, are told to use continuous improvement principles (more on this later) and is expected to launch an MVP (Minimal Viable Product) build asap, followed by regular deployments. They are free to test with any users, internally or externally to the business.&lt;/p&gt;

&lt;p&gt;Who would you bet produces the best results after 1 year?&lt;/p&gt;

&lt;p&gt;My money would be firmly placed on the blue team.&lt;/p&gt;

&lt;p&gt;Why? Because I have seen examples from other disciplines that show small incremental change yields better results. I’ve also seen (and been a part of) other agencies that have taken a long time to build a product, only to learn the hard way that they were on the wrong track. It’s painful (and expensive) only to find out that your market fit was wrong, or that users don’t understand how to use the product after you’ve laboured over it for twelve months.&lt;/p&gt;

&lt;h2&gt;
  
  
  Continuous Improvement in Sport
&lt;/h2&gt;

&lt;p&gt;Probably one of the most high-profile examples I can think of is the ‘Marginal Gains’ principle the British Cycling team used, with excellent results, under Dave Brailsford.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“The whole principle came from the idea that if you broke down everything you could think of that goes into riding a bike, and then improved it by 1%, you will get a significant increase when you put them all together”&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Dave Brailsford, BBC interview, 2012&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;In the world of Olympic sport and small margins, every aspect becomes important, and Dave Brailsford and the cycling team underwent a systematic approach to find marginal gains.&lt;/p&gt;

&lt;p&gt;Everything from looking at how the cyclists washed their hands – because this meant less illness – to asking riders to wear electrically heated over shorts to maintain ideal muscle temperature while riding and using biofeedback sensors to monitor how each athlete responded to a particular workout.&lt;/p&gt;

&lt;p&gt;Even the smallest things they spent considerable time on. They tried various types of massage gels to see which one led to the fastest muscle recovery. They determined the type of pillow and mattress that led to the best night’s sleep for each rider. They painted the inside of the team truck white, which helped them spot little bits of dust that would normally slip by unnoticed but could degrade the performance of the finely tuned bikes. And so on, constantly striving to improve performance, even by the slightest of margins. Small gains stack together to make a big difference.&lt;/p&gt;

&lt;p&gt;Whilst not entirely the same principle as continuous improvement (i.e. continuous improvement doesn’t necessarily delve into consultants teaching developers how to wash their hands), the overall theme is the same. Small incremental changes to create better results, instead of one giant effort to meet a goal (which was the previous/standard Olympic approach).&lt;/p&gt;

&lt;h2&gt;
  
  
  The Spaghetti Marshmallow Challenge
&lt;/h2&gt;

&lt;p&gt;Ever done this one? It’s great fun!&lt;/p&gt;

&lt;p&gt;The rules are easy; in 18 minutes, each team can use 20 sticks of spaghetti, one yard of sellotape, one yard of string, and one marshmallow – to build the tallest structure with the marshmallow on the top.&lt;/p&gt;

&lt;p&gt;If you’ve ever done this or witnessed it, you’ll soon learn that it requires essential skills primary students naturally have, and business school students have forgotten. It teaches valuable lessons on creativity and innovation.&lt;/p&gt;

&lt;p&gt;And more importantly (for this blog post at least), It highlights how you have to fail fast and make small continuous improvements in order to win. Those who write a plan, spend ages following that plan and go for the ‘tada’ moment will likely lose this task.&lt;/p&gt;

&lt;p&gt;Usually, continuous improvements, marginal gains or just the practice of failing and learning quickly trump ‘tada’ moments. And this is because you remove the element of surprise.&lt;/p&gt;

&lt;p&gt;Surprise in the software world is not normally a good thing. Quite the opposite, it means we don’t know how users will react to the product or use a feature, or how the platform will work (especially under pressure). When you build something in isolation over a long period of time, the risk that a bad decision has been made grows over time, and you don’t realise it (or can’t) until users or the data points it out to you.&lt;/p&gt;

&lt;p&gt;The red team will learn this and it means the risk factor for them is higher.&lt;/p&gt;

&lt;p&gt;Continuous improvement principles or CIP often include the following principles:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Improvements are based on many small changes rather than the radical changes that might arise from research and development&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Small improvements are less likely to require major capital investment than major process changes&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The ideas come from the talents of the existing workforce, as opposed to using research, consultants or equipment – any of which could be very expensive&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;All employees should continually be seeking ways to improve their own performance&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So for these reasons, I’d bet on the Blue team, and it’s why at Browser we are constantly looking at how we can make improvements, be it to our tooling, technology choices, implementation practices, or deployment methods. You name it, we know that whatever we are doing today can be improved, even if only by 1%.&lt;/p&gt;

&lt;p&gt;And yes btw, our devs do wash their hands.&lt;/p&gt;

&lt;p&gt;Have I convinced you?&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2023/02/10/continuous-improvement-beats-big-tada-releases/" rel="noopener noreferrer"&gt;Continuous improvement beats big ‘tada’ releases&lt;/a&gt; appeared first on &lt;a href="https://www.browserlondon.com" rel="noopener noreferrer"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>continuousdevelopmen</category>
      <category>continuousimprovement</category>
    </item>
    <item>
      <title>Five digital workplace themes for 2023</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Thu, 19 Jan 2023 14:48:31 +0000</pubDate>
      <link>https://dev.to/browserlondon/five-digital-workplace-themes-for-2023-3ipn</link>
      <guid>https://dev.to/browserlondon/five-digital-workplace-themes-for-2023-3ipn</guid>
      <description>&lt;p&gt;It’s that time of year when blogs like this one start to make predictions for the coming year. In fact, probably the safest prediction you can make is that lots of predictions posts are about to appear! But the end of the year is also a good time to think about the wider trends in play, especially as many teams are planning out their activities and considering their priorities for the coming months.&lt;/p&gt;

&lt;p&gt;Looking back, 2022 was a busy year. Many employees are still working remotely for the majority of their week, so the digital workplace is their main window into their team and the wider organisation. Companies are increasingly busy trying to support hybrid work and also craft a more coherent and consistent user experience. And 2023 is potentially going to be even busier.&lt;/p&gt;

&lt;p&gt;Let’s look at six themes that we expect to see shape the digital workplace space during 2023.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. The Power Platform continues to democratise automation
&lt;/h2&gt;

&lt;p&gt;Streamlining processes and driving efficiency is an objective for almost every business. Implementing automation at scale across the digital workplace to eliminate the wasted time and pain of repetitive tasks is a big step towards achieving this objective.&lt;/p&gt;

&lt;p&gt;Up to a couple of years ago, many organisations felt that automation was a goal on the distant horizon. However, Microsoft’s &lt;a href="https://www.browserlondon.com/blog/2022/09/29/microsoft-power-platform-automation-where-should-i-start/" rel="noopener noreferrer"&gt;Power Platform&lt;/a&gt; has shown the potential of making easy-to-use automation tools available throughout an organisation.&lt;/p&gt;

&lt;p&gt;Empowering users to drive this type of ‘&lt;a href="https://www.browserlondon.com/blog/2022/04/26/microsoft-power-platform-supports-digital-transformation/" rel="noopener noreferrer"&gt;organic digital transformation&lt;/a&gt;‘ themselves brings automation at scale to every corner of an enterprise, and during 2023 we expect Power Platform to continue to go from strength to strength. The low code / no code interfaces of Power Automate (the main workflow engine) mean it’s accessible who are not IT professionals, while the ever-growing libraries of connectors and workflow templates within Power Automate make it even easier to implement automation. It could even be said that 2023 could be the year the Power Platform democratises automation. &lt;/p&gt;

&lt;h2&gt;
  
  
  2. A focus on equitable experiences as hybrid work dominates
&lt;/h2&gt;

&lt;p&gt;One of the key digital workplace themes of 2022 has been the support for hybrid working and how teams can use solutions to meet the challenges around new ways of working. Hybrid working looks set to continue to be a dominant working pattern in 2023, with many of us both working remotely as well as in the office.&lt;/p&gt;

&lt;p&gt;As hybrid working starts to become embedded as the norm, we can expect there to be a focus on how we can make the experience of working remotely and inside the office equitable so employees can truly work from anywhere. For example, hybrid meetings have always been challenging in terms of providing the same experience for those in the room and those elsewhere. Subsequently, solutions are evolving for the better, for example with more sophisticated AV equipment and the evolution of features within collaboration platforms like Teams.  Other solutions are also appearing that will support hybrid work, for example with the launch of &lt;a href="https://www.microsoft.com/en-us/microsoft-365/blog/2022/10/12/introducing-microsoft-places-turn-your-spaces-into-places/" rel="noopener noreferrer"&gt;Microsoft Places&lt;/a&gt; that helps with a range of tasks such as hybrid scheduling. &lt;/p&gt;

&lt;p&gt;I think supporting equitable experiences across hybrid work will be on the agenda for many digital workplace teams in 2023 and will relate to a range of processes and activities, from employee onboarding to conducting meetings and even driving employee engagement.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.browserlondon.com%2Fwp-content%2Fuploads%2F2023%2F01%2F19144742%2FAI-generated-image-illustrating-a-digital-workspace.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.browserlondon.com%2Fwp-content%2Fuploads%2F2023%2F01%2F19144742%2FAI-generated-image-illustrating-a-digital-workspace.jpg" alt="Ai generated image of a digital workspace" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Digital workplace innovation outpaces organisational roadmaps and launch plans
&lt;/h2&gt;

&lt;p&gt;Over the past few years there has been a lot of innovation in digital workplace tools, with enhancements, new features, more connectors, the rise of low code / no code elements and more. This is great news for hybrid or remote teams, but at the same time, it can be exhausting; it feels like it is getting harder for those implementing tools and for users to keep up. &lt;/p&gt;

&lt;p&gt;2023 is going to be yet another year when digital workplace innovation and the evolution of tools and features continue to outpace technology roadmaps and launch plans. Employees and support functions are used to change as a constant, but there are only so many tools that can be launched in a given year.&lt;/p&gt;

&lt;p&gt;I think this app or platform overload is going to become more explicit during 2023 as teams struggle to keep on integrating new tools and users lose interest in yet another new app to get to grips with. I’m not sure there’s a straightforward answer to this trend, but it will be interesting to see the change and governance tactics that organisations adopt to cope with the sheer pace of digital workplace evolution.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Business intelligence and advanced analytics are back on the menu
&lt;/h2&gt;

&lt;p&gt;A consequence of the digital workplace is the generation of huge amounts of data about how we work, collaborate and consume information. There are exciting opportunities to use and analyse this data to generate insights that can help improve productivity, well-being and collaboration. However, in practice, few digital workplace teams are actually leveraging this data.&lt;/p&gt;

&lt;p&gt;In 2023 we expect business intelligence and advanced analytics to move up the corporate agenda, as more teams start to use the data that is produced by platforms like Microsoft 365 and Google Workspace. This will be helped by the evolution of services like &lt;a href="https://www.microsoft.com/en-gb/microsoft-viva/insights" rel="noopener noreferrer"&gt;Microsoft Viva Insights&lt;/a&gt; which surfaces productivity and wellbeing analytics from across Microsoft 365, as well as a data visualization platform like Power BI which allows for the development of rich dashboards. However, data protection and privacy are factors that must be considered when advancing analytics generated by employee activity.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Employee experience goes mainstream as a dynamic in the digital workplace
&lt;/h2&gt;

&lt;p&gt;Employee experience is a concept that has been around for a while, advocating a more holistic and joined-up approach to all the touchpoints an employee has with their employer. Starting with HR, but now increasingly used in the digital workplace and IT space too. We’re certainly seeing it being mentioned by clients and prospects when talking about the aims of their digital workplace, &lt;a href="https://www.browserlondon.com/case-study/twine/" rel="noopener noreferrer"&gt;intranet project&lt;/a&gt; or Microsoft 365 roll-out.&lt;/p&gt;

&lt;p&gt;While it’s easy to dismiss it as another buzzword, actually the concept of “employee experience” is fundamental to the digital workplace. The technology that employees experience every day makes a difference, especially now that more people are working remotely; in fact, good technology and platforms like Microsoft 365 &lt;a href="https://www.browserlondon.com/blog/2022/06/29/microsoft-office-365-can-help-keep-your-employees-happy/" rel="noopener noreferrer"&gt;can even help keep your employees happy&lt;/a&gt;.  Solutions have to be user-centric to succeed, and in 2023 we’re likely to see employee experience continue to grow as a dynamic in the digital workplace. And that’s a good thing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;2023 is going to be another important year for the digital workplace with a focus on supporting hybrid work and improving employee experience. Microsoft 365 and its constituent tools will play a major role, through some of the tools and areas that we’ve highlighted in these themes. Change management will also be important in ensuring employees get the best out of the tools at their fingertips.&lt;/p&gt;

&lt;p&gt;*Images in this article were generated by &lt;a href="https://midjourney.com/home/" rel="noopener noreferrer"&gt;Midjourney AI&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2023/01/19/five-digital-workplace-themes-2023/" rel="noopener noreferrer"&gt;Five digital workplace themes for 2023&lt;/a&gt; appeared first on &lt;a href="https://www.browserlondon.com/" rel="noopener noreferrer"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>business</category>
      <category>technology</category>
      <category>homeworking</category>
      <category>digitalworkplace</category>
    </item>
    <item>
      <title>Why does Twitter need so many developers?</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Tue, 22 Nov 2022 15:58:20 +0000</pubDate>
      <link>https://dev.to/browserlondon/why-does-twitter-need-so-many-developers-14b3</link>
      <guid>https://dev.to/browserlondon/why-does-twitter-need-so-many-developers-14b3</guid>
      <description>&lt;p&gt;Much has been made lately of the impact of Elon Musk firing vast swathes of staff after his takeover of Twitter. In particular one discussion that keeps presenting itself is the question of why Twitter has many thousands of engineers — and in particular, a comparison to WhatsApp is often made.&lt;/p&gt;

&lt;p&gt;First, some numbers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;On average, there are around &lt;a href="https://www.renolon.com/number-of-tweets-per-day/" rel="noopener noreferrer"&gt;800 million new Tweets per day&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;WhatsApp handles around &lt;a href="https://backlinko.com/whatsapp-users" rel="noopener noreferrer"&gt;100 billion messages per day&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Circa 2014, before being bought by Facebook, WhatsApp allegedly only had 55 employees. The repeated question is that If WhatsApp can scale with so few employees, why does Twitter need so many?&lt;/p&gt;

&lt;p&gt;To best explore this, let’s go on a journey. Your name is Elmo Mask, and you just bought WhatsApp for $44, how do we change WhatsApp so that it works like Twitter? We’ll build TwitsApp.&lt;/p&gt;

&lt;h2&gt;
  
  
  Busy chats
&lt;/h2&gt;

&lt;p&gt;First of all, WhatsApp sets a limit of 512 people in a single group. This won’t do, part of Twitter’s unique appeal is the reach and amplification that can be given to a message — so we need to change this. All users are now in one chat group. All 400 million of them.&lt;/p&gt;

&lt;p&gt;Now each of our users has to contend with a fire hose of content that’s constantly updated and can never be seen in its entirety. The only way you can use TwitsApp is to keep up with the flow, and the only way to do that is to be online 100% of the time.&lt;/p&gt;

&lt;p&gt;Can you imagine what that would be like as a user? Just a constant high-speed stream of messages, everybody seeing the same thing. There would be no way to amplify a single message it will flick past everybody’s screen in a nanosecond.&lt;/p&gt;

&lt;h2&gt;
  
  
  Now I’m drowning
&lt;/h2&gt;

&lt;p&gt;No, we need some way now to work out what each user gets to see, and the only way to make TwitsApp appealing is if each user sees what’s relevant to them and the people they’re interested in. We need to let users indicate who they are most interested in seeing content from, perhaps based on follows. That’s not just a case of bringing back groups, because we also need a way for TwitsApp to mix in new content based on the sort of content you’ve already shown interest in. How else are users going to find new people to follow!&lt;/p&gt;

&lt;p&gt;This needs to be computed for every single one of our 400 million users. That’s hard enough without even thinking about the 6,000 new messages per second that need evaluating, assigning to interested users and then mixing into their home screens.&lt;/p&gt;

&lt;p&gt;So let’s assume we have “messages from people you follow” and “messages on subjects similar to the ones you follow”, and we found a clever algorithm to efficiently compute what each of our 400 million users should see. What’s next? Do you want to see content based on who people you follow are replying to? Retweets?&lt;/p&gt;

&lt;p&gt;This all needs to happen in a few seconds for every message.&lt;/p&gt;

&lt;p&gt;Perhaps we need a service that will show a real-time list of trending subjects — so we need to identify those subjects and list the most popular ones… repeatedly. Perhaps we want to show the messages that are relevant in your region or areas of interest.&lt;/p&gt;

&lt;p&gt;What about storage? WhatsApp doesn’t store users’ messages, they only ever live on the recipient’s phone. TwitsApp will need to be able to show you the history of messages from any given user, quickly. We’ll need a &lt;strong&gt;lot&lt;/strong&gt; of storage.&lt;/p&gt;

&lt;p&gt;We’re going to need some help here.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who’s paying for this?
&lt;/h2&gt;

&lt;p&gt;Sir, I’ve had the bill from the hosting provider, we need a way to monetise all of this so that we can pay for all the sheer compute power, storage, and bandwidth we’ve used up so far, let alone all the smart people to built and run it. We’re going to do that using adverts, so we need to mix those into our timeline, but we have a few problems before we even get to that.&lt;/p&gt;

&lt;p&gt;The first step is that we need to get adverts into the system. We’ll need some tools to allow advertisers to create and manage their adverts. A few small-time advertisers probably won’t cut it though, we need the big ad brokers involved here — so we’re going to need a whole bunch of ad salespeople.&lt;/p&gt;

&lt;p&gt;Nobody is going to buy our ad space unless we can not only target specific demographics, but also prove that the adverts are effective. We need analytics tools to demonstrate this to our customers because remember, the advertiser is the customer, and the users are the product. Oh, and all these systems will need beautiful &lt;a href="https://www.browserlondon.com/blog/category/user-experience-design/" rel="noopener noreferrer"&gt;UX design&lt;/a&gt;, too.&lt;/p&gt;

&lt;h2&gt;
  
  
  Keeping the community happy
&lt;/h2&gt;

&lt;p&gt;TweetsApp is growing rapidly, but there’s a problem. Some of these new users are… disruptive!&lt;/p&gt;

&lt;p&gt;We need a way to deal with that so that our advertisers aren’t associated with “spam” and “fake news”. We need a team to moderate user-generated content — and that team needs tools.&lt;/p&gt;

&lt;p&gt;This team should probably also look into some of the targeted abuse and bullying we’re starting to see. Beyond simple compassion and ethics, we could get sued or lose ad revenue if we’re seen to condone or not take action on this.&lt;/p&gt;

&lt;p&gt;Do we want some system to confirm to users that the person claiming to be the politician really is the politician?&lt;/p&gt;

&lt;h2&gt;
  
  
  Tip of the iceberg
&lt;/h2&gt;

&lt;p&gt;All this is the tip of the iceberg though because we need to do this on a global scale, in different languages, different cultures, and for people with different accessibility needs. TwitsApp needs to grow in developing markets to find new users, so it needs to be just as reliable and enjoyable a user experience on a phone with a poor data signal as it is for somebody with gigabit broadband.&lt;/p&gt;

&lt;p&gt;We need to worry about data hoarding governments demanding access to our user data, and we need to ensure that data is secure to protect our users. Does our mobile app work well in all markets, where different networks and devices are commonly used?&lt;/p&gt;

&lt;p&gt;This is just the beginning of why Twitter needs a bigger team than an app like WhatsApp, despite handling far fewer messages and interactions per day. The reality is that each of these points has in turn its own smorgasbord of considerations, trade-offs, and issues.&lt;/p&gt;

&lt;p&gt;All these people will need HR, Payroll, and a team to onboard and train employees.&lt;/p&gt;

&lt;p&gt;And now my head hurts.&lt;/p&gt;




&lt;p&gt;James first posted this article to Medium under the title &lt;a href="https://medium.com/@JimBlizz/why-does-twitter-need-so-many-developers-c31383bf1437" rel="noopener noreferrer"&gt;Why does Twitter need so many developers?&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>business</category>
      <category>opinion</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Should we still be using ‘Agile’ as a selling point? Aren’t we all Agile now?</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Mon, 14 Nov 2022 10:20:46 +0000</pubDate>
      <link>https://dev.to/browserlondon/should-we-still-be-using-agile-as-a-selling-point-arent-we-all-agile-now-16mn</link>
      <guid>https://dev.to/browserlondon/should-we-still-be-using-agile-as-a-selling-point-arent-we-all-agile-now-16mn</guid>
      <description>&lt;p&gt;At Browser Group we use &lt;a href="https://www.browserlondon.com/blog/2015/05/28/the-agile-process-explained-for-non-technical-people/"&gt;Agile development methodologies&lt;/a&gt; in our projects. But you know that already, right? It’s not particularly unique as all our peer agencies are also Agile. In fact, Agile is &lt;a href="https://www.google.com/search?q=Agile+development+agency&amp;amp;sxsrf=ALiCzsbdFlGJopwWKCYzC9hBGZmxSpIIYg%3A1668182491094&amp;amp;ei=23FuY5qxBZLD8gL9hoWYBw&amp;amp;ved=0ahUKEwjairWGwKb7AhWSoVwKHX1DAXMQ4dUDCA8&amp;amp;uact=5&amp;amp;oq=Agile+development+agency&amp;amp;gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIGCAAQFhAeMgYIABAWEB4yBggAEBYQHjIGCAAQFhAeMgYIABAWEB4yBggAEBYQHjIGCAAQFhAeMgYIABAWEB4yBggAEBYQHjIGCAAQFhAeOgoIABBHENYEELADOgUIABCRAjoLCAAQsQMQgwEQkQI6CAgAEIAEELEDOgUIABCABDoICAAQgAQQyQM6BAgjECc6CwgAEIAEELEDEIMBOgoIABCABBCHAhAUOgUIABCGA0oECEEYAEoECEYYAFDXA1ilFGDZFWgBcAF4AIABkAGIAcsMkgEEMTUuM5gBAKABAcgBCMABAQ&amp;amp;sclient=gws-wiz-serp"&gt;so ubiquitous&lt;/a&gt; it’s hard to argue that it’s a selling point. I mean, aren’t we all Agile now?&lt;/p&gt;

&lt;p&gt;The answer to that last question is yes and no, or “yes, but”, or a yes with a pretty hefty list of caveats. Agile has become the dominant development paradigm and its influence has become widespread, but its application is certainly not as consistent as it should be. Outside software development projects, Agile is still embryonic, meaning it can still feel somewhat alien to our business stakeholders and user groups.&lt;/p&gt;

&lt;h2&gt;
  
  
  From methodology to mindset
&lt;/h2&gt;

&lt;p&gt;Over the past few years, Agile has become more than a methodology to deliver &lt;a href="https://www.browserlondon.com/case-study/"&gt;software development projects&lt;/a&gt;. It’s arguably now a culture and philosophy that has influenced wider organisational project management and even some team structures beyond IT. It’s a mindset, as much as it is a set of techniques.&lt;/p&gt;

&lt;p&gt;At the same time, there is also an increase in general business thinking about the power of more agile and iterative approaches to business, as a source of innovation, competitive advantage and greater responsiveness to customers. Agility and speed to market give you the edge, and a better ability to navigate the challenges of a pretty volatile world. McKinsey even wrote about &lt;a href="https://www.mckinsey.com/capabilities/people-and-organizational-performance/our-insights/enterprise-agility-buzz-or-business-impact"&gt;three main outcomes&lt;/a&gt; of “agile transformations” with more satisfied customers, happier employees and improved operational performance, resulting in tangible differences to the bottom line. &lt;/p&gt;

&lt;p&gt;When agility is valued by an organisation, Agile development offers a compelling and mature example of applying a methodology that results in greater agility. The Agile (with a capital A) has influenced the agile (with a little a). Techniques such as the daily stand-up and sprint planning are sometimes encountered in more general project management. It’s also possible that among business stakeholders who don’t fully understand Agile development, the distinction between Agile and agile has become blurred.&lt;/p&gt;

&lt;h2&gt;
  
  
  To what extent are we Agile?
&lt;/h2&gt;

&lt;p&gt;Back in 2015, our current Head of Product Robert McWhirter wrote a piece on this site called the “&lt;a href="https://www.browserlondon.com/blog/2015/05/28/the-agile-process-explained-for-non-technical-people/"&gt;Agile web development process explained for non-technical people&lt;/a&gt;” which did exactly that, giving the ins and outs on Agile methodology. Robert wrote that Agile development was for many “something new, exotic or unknown”. &lt;/p&gt;

&lt;p&gt;Seven years on and there’s certainly much more awareness of agile among non-IT folk; it’s been a methodology and influence that’s been put into practice in many more organisations, and many more marketers have been involved in an Agile or nominally Agile project. They’ve participated in stand-ups, think in sprints, and even adopted a Kanban board for their own use. Agile development is no longer exotic or unknown.&lt;/p&gt;

&lt;p&gt;But this knowledge is certainly not universal. Occasionally we still point people towards Rob’s blog and when we undertake client work, we do encounter many who have never really taken part in a project run on Agile lines.&lt;/p&gt;

&lt;p&gt;So how mature are Agile development practices? The &lt;a href="https://digital.ai/resource-center/analyst-reports/state-of-agile-report/"&gt;Annual State of Agile report from Digtial.AI&lt;/a&gt; provides potential answers, suggesting that we have some way to go. Although overall 94% of companies practice Agile, there are many who have practices that aren’t mature; 36% have been implementing Agile for two years or less or aren’t Agile at all. And outside software development, the influence of Agile starts to drop off: while 86% of software development teams have “adopted Agile principles and practices”, this falls to 63% for IT functions as a whole, 29% for operational teams, and only 17% of marketing departments.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fifty different shades of Agile
&lt;/h2&gt;

&lt;p&gt;One of the problems is there are differing interpretations of Agile. A project that is labelled Agile doesn’t always end up being so. Using a bit of imagination, we can label these different shades of Agile:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Agile in name only:&lt;/strong&gt; a project that is actually Waterfall with perhaps some stand-ups and a Kanban board&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;One way Agile:&lt;/strong&gt; a project where the development team are sticking to Agile principles and methods, but the other stakeholders aren’t playing ball&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Selectively Agile:&lt;/strong&gt; a project that cherry-picks some of the key techniques for Agile, but ends up not really delivering the benefits&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sprints-only Agile:&lt;/strong&gt; a project that is not Agile, but where there are sprints which are just periods of two weeks rather than being proper cycles&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Start Agile, end Waterfall:&lt;/strong&gt; a project that starts out Agile with good intentions but ends up being Waterfall because Agile is applied in a loose or half-hearted manner&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;More fragile than Agile:&lt;/strong&gt; a project that aims to be Agile, but inexperience or lack of commitment means Agile components are not rigorously applied and keep breaking down.&lt;/p&gt;

&lt;p&gt;Of course, there is nothing wrong with taking elements of Agile development and making them work for you. Some organisations do this successfully, recognising cultural or structural barriers to going fully Agile. But often not going fully Agile can mean you’re less able to enjoy the benefits. &lt;/p&gt;

&lt;h2&gt;
  
  
  Agile doesn’t guarantee success
&lt;/h2&gt;

&lt;p&gt;It’s also important to stress that, even applied in full, Agile methodologies do not guarantee successful outcomes. There are various estimates of the percentage of Agile projects that fail, but most seem to suggest that at least &lt;a href="http://edium.com/leadership-and-agility/agile-project-success-rates-are-2x-higher-than-traditional-projects-376a05e590d4"&gt;they have a greater chance of succeeding than Waterfall&lt;/a&gt;. (Personally, I find the black-and-white of success/fail is unhelpful when applied to projects, as outcomes and their consequences have to be taken into context.)&lt;/p&gt;

&lt;p&gt;Agile is also not universally popular. There’s a UK indie band called MJ Hibbett &amp;amp; The Validators whose most recent album contains &lt;a href="https://mjhibbett.bandcamp.com/track/agile"&gt;quite possibly&lt;/a&gt; the world’s first pop song about Agile methodologies. The lyrics are very funny and convey some of the valid criticisms when Agile is misapplied, including immortal lines such as &lt;em&gt;“Cos when we muck the whole things up, We can call it Minimum Viable Product, If you don’t like it – tough luck, it’s Agile”&lt;/em&gt; and &lt;em&gt;“The Project Team says that’ll do, We’ll not be here for BAU.”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The lyrics reflect a feeling that Agile can become a mantra that can legitimise any output, an overarching methodology where the process seems to be valued more than the actual product. It’s a sentiment that we do encounter among business stakeholders and product teams, and sometimes among IT staff outsides the development team. Perhaps unsurprisingly, it turns out MJ Hibbett has a day job as a database administrator.&lt;/p&gt;

&lt;h2&gt;
  
  
  What can we do to make Agile development better?
&lt;/h2&gt;

&lt;p&gt;The most pressing question in all of this is how teams who are wanting to make Agile methodologies work better in their organisation. I think this is both about demonstrating good practices, but also about spreading awareness:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Setting out the roles, rules and process details of the project before it starts, and walking through these in more detail for the entire team, even if it’s treading old ground for some team members.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Creating a climate where it’s acknowledged that not everybody is used to Agile so people feel OK to ask questions rather than feeling they should know and not asking.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Being explicit about Agile maturity and identifying where practices need to move.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Creating an Agile community within your company that can swap tips and tricks, and where teams can ask questions to more experienced practitioners.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Being disciplined and sticking to the processes and structures, applying persistence across each sprint even if not everyone is playing ball.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Never using Agile as the mantra to justify poor output or not addressing issues which need to be fixed.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Are we all Agile now? Well, we’re getting there, but the more truthful answer is no, not really. And should we use it as a marketing term? I’m not sure it’s really helpful, as it’s open to misinterpretation and not always understood. Instead, we need to focus on making Agile development work better, so it truly delivers projects built on human-centred design with fantastic output that makes a difference. As that happens and Agile delivers its true potential, then more people are going to truly embrace Agile methodologies.&lt;/p&gt;




&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2022/11/14/should-we-still-be-using-agile-as-a-selling-point-arent-we-all-agile-now/"&gt;Should we still be using ‘Agile’ as a selling point? Aren’t we all Agile now?&lt;/a&gt; appeared first on &lt;a href="https://www.browserlondon.com"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>agile</category>
      <category>agilemethodology</category>
      <category>digitalproject</category>
    </item>
    <item>
      <title>Why user stories belong in the garbage</title>
      <dc:creator>Browser</dc:creator>
      <pubDate>Tue, 30 Aug 2022 08:06:26 +0000</pubDate>
      <link>https://dev.to/browserlondon/why-user-stories-belong-in-the-garbage-29ap</link>
      <guid>https://dev.to/browserlondon/why-user-stories-belong-in-the-garbage-29ap</guid>
      <description>&lt;p&gt;User stories have become ubiquitous in software development. We write and phrase everything as user stories. But in reality, we don’t live our lives in stories; we tend to think in terms of carrying out tasks like sending an email or buying the weekly online shop. And while the information that user stories contain is useful, that disconnect between the story and the reality of the way users think has made me wary about our reliance on them.&lt;/p&gt;

&lt;p&gt;In fact, I’d go as far as arguing that user stories should eventually end up in the garbage. When I’ve read others propose this idea, I’ve found it strongly resonates. Like them, I’m not trashing user stories completely – they have a valuable role in enabling developers to have the right conversations – but they also have a lifecycle. User stories are of the moment, and they do not need to live forever.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are user stories?
&lt;/h2&gt;

&lt;p&gt;Defining a user story is not hard, though it may be difficult, even impossible, for everyone to come to a consensus. There are entire alliances of people who have got together to address this question in excruciating detail. Instead of giving a detailed answer of what a user story is and getting caught up in navel-gazing semantics, I’d like to offer a description of the lifecycle of a user story.&lt;/p&gt;

&lt;p&gt;To begin, I want you to understand what I think the purpose of a user story is, or at least what I believe its scope to be – when it is useful, and when it stops being so. The question of when a user story stops being useful is the most informative, but in order to understand the death of a user story, let’s understand its birth.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Di732NY1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://assets.browserlondon.com/wp-content/uploads/2022/08/26155419/A-user-story-is-born.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Di732NY1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://assets.browserlondon.com/wp-content/uploads/2022/08/26155419/A-user-story-is-born.jpg" alt="A stork delivers a new user story" width="880" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Change conception
&lt;/h2&gt;

&lt;p&gt;Let’s explore how we typically record a problem that a user has. And there is always a problem. In fact, there are a lot. The problems are multivariate — something isn’t working, or works unsatisfactorily, or doesn’t exist — and something needs to be done to solve those issues.&lt;/p&gt;

&lt;p&gt;We all know the solution to the problem is coding some software, but we also know that writing code is incomplete solution thinking. So, we need documentation! Let’s document the problem. But how? And where to start? Let’s begin with the person who has the problem. She can tell us what’s wrong.&lt;/p&gt;

&lt;p&gt;So, we ask the person with the problem for more detail. It turns out, as expected, there are many problems and they all differ in depth or complexity. We ask her to document her problems, and she creates a list. For some developers, this can make depressing reading which highlights the problems with the solution, and it can even feel like she’s demeaning the development team’s previous efforts! Most importantly, the list doesn’t describe motivations or reproducible behaviour. So, what do we do? We write user stories!&lt;/p&gt;

&lt;p&gt;‘As the person with the problem, I want to use some new or augmented thing to solve my problem.’&lt;/p&gt;

&lt;p&gt;Great! Well… pretty good. It’s a start. At least it’s not a depressing list of broken and missing features. Instead, stories are well-motivated and reasoned, and phrased proactively so we can feel good about our upcoming work.&lt;/p&gt;

&lt;p&gt;Further, we no longer need to talk to the person with the problem as we already know her desires and motivations. We can go away and code, and we’ll just tell her when everything is done. So, we should start writing the code, right? Well, not so fast…&lt;/p&gt;

&lt;h2&gt;
  
  
  Teamwork and distribution of responsibilities
&lt;/h2&gt;

&lt;p&gt;The problem is that we now have some information, but we’re missing an actual list of things to be done, which is crucial. But what kind of list do we need? Because we work in a team, it needs to be visible to everyone, clearly stating responsibilities belong to whom and when, and in what state each task is. So, we use a board. But what do we put on it? User stories?&lt;/p&gt;

&lt;p&gt;Of course not!&lt;/p&gt;

&lt;p&gt;User stories describe too much. In particular, they have ‘who’s and ‘what’s and ‘why’s and sometimes ‘how’s and ‘when’s too (that’s a lot of ‘and’s). None of those things describes what actually needs to be done by any given team member.&lt;/p&gt;

&lt;p&gt;So, we get together and chat. ‘What actually needs to be done to satisfy this story?’ This is where we get into creating tasks. Tasks are the individual units of work necessary to get larger units of progress completed. We take the user story and, as a team, have a conversation to break down each story into tasks. It’s the tasks that we put on the board, not the stories. Now we can get to work.&lt;/p&gt;

&lt;p&gt;It’s worth pointing out that dividing a user story into tasks isn’t purely a divvying up of the work at hand. It’s actually an important piece of analysis that translates the user story into action and involves insightful discussion and debate. It’s only by breaking the story into tasks that we can go through the &lt;a href="https://www.browserlondon.com/blog/2022/05/11/user-story-mapping-changed-how-we-deliver-projects/"&gt;user story mapping&lt;/a&gt; story mapping process, for example. In my experience, these task-based conversations have real value.&lt;/p&gt;

&lt;h2&gt;
  
  
  The end of a story
&lt;/h2&gt;

&lt;p&gt;But what about the user story? What happens to that? If you ask me, you destroy it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zwNSiT21--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://assets.browserlondon.com/wp-content/uploads/2022/08/26155420/A-user-story-dies.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zwNSiT21--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://assets.browserlondon.com/wp-content/uploads/2022/08/26155420/A-user-story-dies.jpg" alt="A user story is laid to rest in a grave" width="880" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you put the story in your icebox/backlog/cooler/hat, it’s time for it to go. It’s now duplicate documentation. That story was only there because you were yet to break it down into tasks. Now you have, so you delete it.&lt;/p&gt;

&lt;p&gt;I don’t mean tick it off as complete, I mean right-click on it and hit the ‘delete’ button. It may seem harsh — after all, that’s how the original issue was communicated, and it informed your task list. However, it is no longer informative.&lt;/p&gt;

&lt;p&gt;Why? Let’s be honest about the role of a user story – it’s just a placeholder for a future conversation while we’re collecting data about how a system needs to work, what it needs to output and for whom. Once we’ve had the conversation, the components of the story should have been documented. This renders the original user story irrelevant. Keeping it alive is meaningless, and often distracting. And no, it’s not particularly good for documentation.&lt;/p&gt;

&lt;p&gt;It’s important to remember that a user story is not documentation. It’s a bit of a tautology, but it’s worth noting that documentation of how the system works is documentation. The change log is documentation of what has changed. In this kind of thinking, user stories are documentation of change yet to come.&lt;/p&gt;

&lt;h2&gt;
  
  
  But what about retrospective value?
&lt;/h2&gt;

&lt;p&gt;One argument about retaining user stories is that they provide useful context for the next project team and future development. But apart from shining some light on the internal development process itself, perhaps promoting a flicker of interest, they don’t really offer anything of substance.&lt;/p&gt;

&lt;p&gt;User stories are projections of desire. They don’t offer retrospective value because they are written before anything happens. We may deliver a perfectly fine product, but still never achieve any given user story; requirements change over time, better solutions are found and users’ roles sometimes change before their stories are ever satisfied. Those only matter if we treat the history of user stories as a source of truth.&lt;/p&gt;

&lt;p&gt;Essentially, user stories are a record of what was intended to happen, not what actually happens in the development; using them as a starting point for further work only provides a distortion.&lt;/p&gt;

&lt;p&gt;Having said this, there are two places where user stories can live more indefinitely. One of these is in the &lt;a href="https://www.browserlondon.com/blog/2021/10/20/what-is-a-product-backlog-and-how-does-it-work/"&gt;backlog&lt;/a&gt; where they can create places for conversations that you’re not ready to have yet, and you can continue to update user stories with requirements, acceptance criteria and so on. User stories might also have an effective shelf life as a label for a release, although that will depend on the nature of the release.&lt;/p&gt;

&lt;p&gt;There’s also a place for user stories as epics. For example, &lt;a href="https://www.atlassian.com/agile/project-management/epics"&gt;JIRA epics&lt;/a&gt; are effectively user stories, albeit at a slightly higher level, which are intended as collections of other more granular user stories. Once you discard the latter, you can keep your epics around.&lt;/p&gt;

&lt;h2&gt;
  
  
  Towards user story lifecycle management
&lt;/h2&gt;

&lt;p&gt;The correct lifecycle of a user story is to collect data, write stories, gather as a team to discuss the stories and create tasks to satisfy them before deleting said stories and moving on to completing the tasks. User stories are simply documentation of a pending conversation.&lt;/p&gt;

&lt;p&gt;Once the conversation is had, we need to document the outcomes and progress into the next section of work. If you want to communicate back to the users what has changed, you have a change log. Document the new possibilities and behaviours there. Not ‘As a subscriber, I want to…,’ but ‘Now subscribers can…’&lt;/p&gt;

&lt;p&gt;Carrying out proper user story lifecycle management like this means you can start to improve development cycles; for example, when you get to the point of ditching the user stories, how do you feel about dumping them? Because if you sense that you’re going to lose important detail, it may be that you haven’t had the right conversations or derived the right tasks. Considering whether you’re ready to bin the user stories can be a useful checkpoint.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fetch the bin
&lt;/h2&gt;

&lt;p&gt;There is a tendency to treat user stories as the gospel source of truth, and the suggestion to delete them can raise some eyebrows. But we’ve grown to be over-reliant on them. If you look back to the &lt;a href="https://www.browserlondon.com/blog/2015/05/28/the-agile-process-explained-for-non-technical-people/"&gt;Agile&lt;/a&gt; manifesto or &lt;a href="https://www.browserlondon.com/blog/2014/10/09/if-youre-not-running-a-daily-scrum-with-your-client-then-youre-losing-out/"&gt;Scrum Alliance training&lt;/a&gt;, user stories are designed to document the desires of users, not actually document how a system works. If you handed somebody a list of user stories and said ‘here’s how our system works’, they wouldn’t understand it. Ultimately, our records and documentation are designed to aid in understanding.&lt;/p&gt;

&lt;p&gt;So, it’s okay. Bin the user stories.&lt;/p&gt;




&lt;p&gt;The post &lt;a href="https://www.browserlondon.com/blog/2022/08/30/why-user-stories-belong-in-the-garbage/"&gt;Why user stories belong in the garbage&lt;/a&gt; appeared first on &lt;a href="https://www.browserlondon.com"&gt;Browser London&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>agile</category>
      <category>userstories</category>
      <category>agilemethod</category>
    </item>
  </channel>
</rss>
