<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ design thinking - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ design thinking - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sat, 23 May 2026 19:41:40 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/design-thinking/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ The Design Thinking Process Explained ]]>
                </title>
                <description>
                    <![CDATA[ The Design Thinking Process can help you come up with creative, user-centric solutions to complex problems. But how does it work exactly? In this article, I will explain what the Design Thinking Process is and break down the five phases behind it. We... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/the-design-thinking-process-explained/</link>
                <guid isPermaLink="false">66b8da4bce55d3ba4d93599d</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ freeCodeCamp.org ]]>
                    </category>
                
                    <category>
                        <![CDATA[ user experience ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Jessica Wilkins ]]>
                </dc:creator>
                <pubDate>Mon, 22 Nov 2021 21:27:40 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/11/green-chameleon-s9CC2SKySJM-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>The Design Thinking Process can help you come up with creative, user-centric solutions to complex problems. But how does it work exactly?</p>
<p>In this article, I will explain what the Design Thinking Process is and break down the five phases behind it. We will explore how this process was applied to the <a target="_blank" href="https://www.freecodecamp.org/learn/">freeCodeCamp</a> organization.</p>
<h2 id="heading-what-is-the-design-thinking-process-and-why-is-it-important">What is the Design Thinking Process and why is it important?</h2>
<p>The Design Thinking Process was first mentioned in Herbert A. Simon's book <em>The Sciences of the Artificial.</em> As a cognitive scientist, Simon explored the decision making process humans go through.</p>
<p>As a result, Simon's ideas contributed a lot to the current model of the Design Thinking Process and provided companies with a different approach to understanding their users. </p>
<p>The Design Thinking Process focuses on studying the user's needs and coming up with solutions to develop better products and services for them. </p>
<p>This process encourages innovative thinking and creative problem solving which leads to better businesses and nonprofit organizations.  </p>
<p>The five phases of the Design Thinking Process are:</p>
<ol>
<li>Empathize</li>
<li>Define</li>
<li>Ideate</li>
<li>Prototype</li>
<li>Test</li>
</ol>
<p>Let's take a closer look at this process and how it works in a real world organization like <a target="_blank" href="https://www.freecodecamp.org/learn/">freeCodeCamp</a>. </p>
<h2 id="heading-empathize">Empathize</h2>
<p>When Quincy Larson started learning how to code, he bounced around from one free online source to another struggling to find a structured path. Even though he was able to land a developer job, the process of learning how to code was a lonely and frustrating one.</p>
<p>After speaking with many other self-taught developers, he realized he wasn't the only one with this story. So Quincy started researching and learning about those embarking on the self taught journey.</p>
<p>Quincy started to empathize with others struggling to learn how to code and sought to understand their needs, wants, and goals. Throughout this extensive research, he discovered a key problem. </p>
<h2 id="heading-define">Define</h2>
<p>When Quincy started freeCodeCamp in 2014, his goal was to address an important issue: a lack of access to high quality education by most people wanting to learn around the world.</p>
<p>At the time, if you wanted to study programming, you would either attend college or a bootcamp. But Quincy realized there were issues concerning access for both of those options.</p>
<p>College is a wonderful opportunity for students to learn and gain an education, but not everyone has the funds or time to go through a 3-4 year degree program.</p>
<p>Bootcamps were an alternative to gain the skills needed to start an entry level job. But through extensive research,  Quincy realized that most bootcamps were very expensive, and were attended by American white males in their mid 20's who had college degrees.</p>
<p>So the question became, "What about everyone else?"</p>
<p>What if someone wanted to learn how to code but there wasn't a high quality structured resource that was also free?</p>
<h2 id="heading-ideate">Ideate</h2>
<p>In this article detailing the <a target="_blank" href="https://www.freecodecamp.org/news/free-code-camp-s-first-month-9bed140da1f4/">first month of freeCodeCamp</a>, Quincy laid out the goals and mission for the organization.</p>
<blockquote>
<p>The world needed a coding bootcamp that helped everyone else.<br>That meant:  </p>
<p>It should be fully online so that busy people with families, and people outside of the US, could participate.  </p>
<p>It should be inclusive rather than “selective”, and open to everyone regardless age, sex, race, country of origin, or English proficiency.  </p>
<p>There was only one for sure way to remove socio-economic considerations: make it 100% free.</p>
</blockquote>
<p>Quincy Larson set out to create freeCodeCamp which provided a free structured learning environment that can be done in the browser and was completely self-paced.</p>
<p>This meant that anyone around the world could learn for free on any device available to them and not have to worry about downloading a whole bunch of software. </p>
<p>The idea was to create an online platform filled with dozens of interactive challenges and projects for the users to build and add to their portfolios. </p>
<p>He also wanted to create an online chat for developers to come together and discuss their learning and help each other along the way. This addressed the core issue that many self taught developers felt trying to code alone in isolation.  </p>
<h2 id="heading-prototype">Prototype</h2>
<p>Quincy Larson built the first prototype version of freeCodeCamp in a few days and starting publicizing it on his social media channels. This early version had a few challenges for users to go through and a chat room for learners to connect online. </p>
<p>The prototype phase was important because it led into the final phase of the Design Thinking process: user testing. </p>
<h2 id="heading-testing">Testing</h2>
<p>Within the first few months, people were starting to join the platform and go through the challenges. </p>
<p>Since the project is open source, it allowed people to provide feedback and make changes to the early version of the curriculum. </p>
<p>This initial phase allowed Quincy and his small team to identify usability issues and observe how users were interacting with the platform. From there, they were able to listen to feedback and start implementing those changes.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>The Design Thinking Process focuses on studying the user's needs and coming up with solutions to develop better products and services for them. </p>
<p>This process encourages innovative thinking and creative problem solving which leads to better businesses and nonprofit organizations.  </p>
<p>The five phases of the Design Thinking Process are:</p>
<ol>
<li>Empathize</li>
<li>Define</li>
<li>Ideate</li>
<li>Prototype</li>
<li>Test</li>
</ol>
<p>freeCodeCamp used this process to come up with a creative solution to teaching people all around the world how to code for free. </p>
<p>If you want to learn more about the Design Thinking process, you can look into taking this <a target="_blank" href="https://www.coursera.org/learn/uva-darden-design-thinking-innovation">Design Thinking for Innovation course</a>. </p>
<p>## </p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ What is Design Thinking? An Introduction to the Design Process for Entrepreneurs and Developers ]]>
                </title>
                <description>
                    <![CDATA[ By Adam Naor There are some wonderfully well-designed products out there: a Herman Miller chair, an Apple laptop computer, a Tesla Model S, a cup of Starbucks coffee.  These products embody experiences that are greater than the product themselves. Th... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/what-is-design-thinking-an-introduction-to-the-design-process-for-entrepreneurs-and-developers/</link>
                <guid isPermaLink="false">66d45d864bc8f441cb6df805</guid>
                
                    <category>
                        <![CDATA[ Design Process ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ user experience ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Fri, 21 Aug 2020 21:30:43 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/08/Annotation-2020-08-20-062815.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Adam Naor</p>
<p>There are some wonderfully well-designed products out there: a Herman Miller chair, an Apple laptop computer, a Tesla Model S, a cup of Starbucks coffee. </p>
<p>These products embody experiences that are greater than the product themselves.</p>
<p>These products have been designed to make our lives richer and in many respects better.</p>
<p>These products have something else in common: design is central to how they behave and feel. These products also have a wonderful user experience and are supported by profitable business models.</p>
<p>In short, these products are well known to represent the best of the design process.</p>
<p>This begs the questions: what is the Design Process? And how can entrepreneurs and developers start learning the Design Process?</p>
<p>Having built and launched products myself, I have a few relevant ideas.</p>
<p>I have also spoken with countless people about the topic, and these conversations have informed my thinking.</p>
<p>I now want to share these insights with you.</p>
<h2 id="heading-what-is-design-thinking">What is Design Thinking?</h2>
<p>Design thinking is a holistic way of applying critical thinking to solving design-related problems that matter to <em>people</em>. Specifically, Design Thinking is a way to learn about, gain insight into, and deeply understand human beings.</p>
<p>An introduction to Design Thinking starts by placing the human experience – what people want, need, and value – at the center of your design thinking.</p>
<p>As opposed to optimizing for other metrics or stakeholders, like product speed, financial profits, or aesthetics, the design thinking process starts by prioritizing the primal needs of the human users.</p>
<p>What do people want? What do they fear? What do they most care about and <em>why</em>? Design Thinking starts by attempting to frame answers to these questions.</p>
<h2 id="heading-how-can-you-place-humans-at-the-center-of-your-thinking">How can you place humans at the center of your thinking?</h2>
<p>I took a Design Thinking class in graduate school. The Professor asked us to “get out of the building,” leave the classroom, and go speak with people about issues they faced in their lives.</p>
<p>Specifically I was tasked with asking people about their relationship with the medical field.</p>
<p>Speaking to strangers can be challenging. But speaking with strangers about medicine – and when they last saw a doctor, for example – was downright anxiety-inducing.</p>
<p>Yet I knew if I wanted to improve my Design Thinking skills, I needed to go beyond my comfort zone.</p>
<p>You should embrace speaking with people. It will help you learn and improve your Design Thinking capabilities.</p>
<p>When you go and speak with people, pick a topic that you find interesting and worthwhile. Pay close attention to <em>who</em> they are. Ask yourself:</p>
<ol>
<li>How did you find this person?</li>
<li>Why did you talk to them?</li>
<li>Was this person similar to you or different?</li>
<li>In what ways did you originally guess that this person would be different from you? (class, gender, race, ethnicity, age, legal status, and so on)?</li>
</ol>
<p>Design Thinking starts with people. If you want to design for people you need to interact with people.</p>
<p>Ask probing questions and listen carefully. Listen for facts and listen for stories.</p>
<p>At the conclusion of your conversation, take time to reflect:</p>
<ol>
<li>What was the most surprising thing about this person's story?</li>
<li>In what ways is this person turn out to be different from you?</li>
<li>Does this person have values different from yours?</li>
<li>If they have similar values, do they express these values in surprising ways?</li>
<li>What questions did you ask that led to the most interesting insights?</li>
<li>Did you notice anything surprising about the immediate environment where you talked to the person?</li>
<li>Did the environment "prompt behavior" from you or from the person you talked with?</li>
</ol>
<p>In <em>Change by Design</em>, author Tim Brown writes at length about the importance of “empathy” in design thinking. Brown notes that empathy is a challenging word to define but a critical concept to building and designing products.</p>
<p>This is because empathy helps us understand others.</p>
<p>And if we are designing for people, we need to design for people that look, act, behave, and are fundamentally different from <em>ourselves</em>.</p>
<p>When learning more about the medical field, I spoke with a young man named Sam. At first I wanted to learn more about which online resources he used to find doctors.</p>
<p>But what he shared pivoted the conversation, and my subsequent understanding of his relationship to medical practitioners.</p>
<p>Sam talked about control and his lack of “control” when it came time to paying medical bills. He repeatedly mentioned that he had to pay more out of pocket than he initially thought he would have to. He felt “cheated.”</p>
<p>I didn’t realize this at the time, but this feeling of being “cheated” was an area worth exploring further.</p>
<p>Had I had a better rooting in Design Thinking I would have probed this domain further.</p>
<p>Specifically, I would have sought answers to the following: What about this “cheated” feeling made Sam so irate? Was it the feeling of powerlessness? Was it a sense of financial injustice? Or some combination of both? Did Sam’s loss of control make him feel threatened?</p>
<p>A software tool that enables more transparent pricing disclosures is likely something that Sam would have benefited from. I only uncovered this insight by listening to what Sam said.</p>
<p>Yet I also missed other topics to question further. These were my mistakes. You need not repeat them.</p>
<p>When you are learning Design Thinking don’t be afraid to ask probing questions as the conversation takes new and unexpected directions.</p>
<p>Go deep in the pursuit of truth.</p>
<p>The ability to learn through feeling – even if you don’t have precise first-hand exposure to that thing – is what empathy is rooted in.</p>
<p>Using this feeling to inform decisions (products, design, and outcomes) is how empathy inspires Design Thinking.</p>
<h2 id="heading-placing-design-thinking-at-the-center-of-your-worldview">Placing Design Thinking at the Center of Your Worldview</h2>
<p>Design Thinking is practiced and learned over time. An introduction to the Design Process can start in a physical classroom (as mine did), via <a target="_blank" href="https://www.tafecourses.com.au/courses/it/">informative online courses</a>, or in conversations with people in your life.</p>
<p>When I first used the empathy framework to connect with Sam and others I spoke with, it was very challenging.</p>
<p>While it was not hard to remember everything he said, it was challenging to recount his body language and tone throughout the conversation when I got home and wanted to type up notes.</p>
<p>It was hard to map patterns among the different parts of the conversation.</p>
<p>As you begin your Design Thinking journey, you will likely struggle with recount as well. It is okay to struggle. Keep engaging, keep listening, and keep reflecting.</p>
<p>These skills will help you better understand what people care about.</p>
<p>These insights, in turn, will help you develop and ultimately build better solutions. By demonstrating a deep interest in the development and understanding of people, you can create outcomes that best help these people.</p>
<p>I like to think of Design Thinking as an evolved skill. You can practice, improve, and grow Design Thinking skills over the course of your life.</p>
<h2 id="heading-final-thoughts-on-design-thinking">Final Thoughts on Design Thinking</h2>
<p>If you don’t feel fully comfortable with this approach, you can always outsource aspects of work to experts.</p>
<p>Through practice, however, you can improve.</p>
<p>And it also helps to establish a beneficial cycle. User-centric designs also help websites achieve their SEO goals too, after your product exists in the market. </p>
<p>Employing design thinking makes for web content that viewers will be inclined to share and that other sites will be happy to link to.</p>
<p>When visitors know they're at the heart of everything you do, search engines will notice and reward you accordingly.</p>
<p>By placing humans at the center of my inquiry, I discover new insights.</p>
<p>These insights helped me peel back assumptions and stale ways of thinking. By reframing patterns, I am able to incubate new ideas.</p>
<p>These benefits are readily available to you too.</p>
<p>You can stimulate creativity.</p>
<p>By thinking more creatively, you can ideate and generate new ideas and push the possibilities.</p>
<p>By pushing the boundaries, you can again discover new ways of thinking, and technologies like data visualization or VR can help you on your journey.</p>
<p>This makes it easier to build because you have a clearer North Star.</p>
<p>This clarity can help deliver new products and solutions.</p>
<p>Delivering products leads to a new foundation of learning and discovery. And that is a worthy end goal.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How is Visual and UX Design Important as a Developer and What Can You Do to Level Up? ]]>
                </title>
                <description>
                    <![CDATA[ Design is a part of the product process that often gets pushed off. This can come at a cost that your customers or other developers have to pay. How is design important for those of us who aren't just pushing pixels in Photoshop or Figma and what can... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-is-design-important-as-a-developer-and-what-can-you-do-to-level-up/</link>
                <guid isPermaLink="false">66b8e32b9232d58aac300b13</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design resources ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ learning ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Lifelong Learning ]]>
                    </category>
                
                    <category>
                        <![CDATA[ self-improvement  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ skills development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ UI Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ ux design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ visual design ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Colby Fayock ]]>
                </dc:creator>
                <pubDate>Thu, 28 May 2020 14:45:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/05/design.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Design is a part of the product process that often gets pushed off. This can come at a cost that your customers or other developers have to pay. How is design important for those of us who aren't just pushing pixels in Photoshop or Figma and what can we do to level up?</p>
<h2 id="heading-design-as-a-developer">Design as a developer</h2>
<p>Design is a term that can describe many parts of the process. Most often, it's probably thought of as the visual designers or UX designers who are actively working to make your product usable or beautiful.</p>
<p>A question that I commonly get asked or see online is where should one start to learn the basics of design?</p>
<p>This question makes me happy. It's an important part of the process that is constantly a secondary thought.  And when <a target="_blank" href="https://twitter.com/colbyfayock/status/1258456643274186753">I asked this on Twitter</a>, I received some thoughtful responses!</p>
<div class="embed-wrapper">
        <blockquote class="twitter-tweet">
          <a href="https://twitter.com/colbyfayock/status/1258456643274186753"></a>
        </blockquote>
        <script defer="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<p>We're living in an age where good UX is increasingly seen as important, but it's still nowhere near the top of the list for those who are learning their way through development. It's still an afterthought that's tossed over to the design team when you're at the 2nd half of your last sprint before launch.</p>
<p>So before I share with you some resources, I'm going to start by explaining why these things are important.</p>
<h2 id="heading-giving-something-for-your-visitors-to-use">Giving something for your visitors to use</h2>
<p>Starting from the top – you can have the best, most ingenious product that blows all competition away, but if no one knows how to use it, it realistically has no value.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/02/pied-piper-user-interface.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Fictional Pied Piper's app tanked because of a bad user experience</em></p>
<p>Our fictional friends at <a target="_blank" href="https://www.hbo.com/silicon-valley">Pied Piper</a> learned this the hard way when their product launch with a groundbreaking compression algorithm didn't go over too well because no one knew how to actually use it.</p>
<p>But this is a realistic scenario. We learned from <a target="_blank" href="https://craigslist.org/">Craigslist</a> that your website or app doesn't need to have a slick design, but it has to be usable.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/craigslist-2020-vs-2001.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Craigslist in 2001 vs 2020</em></p>
<p>For nearly 20 years, Craigslist really hasn't changed that much. A few tweaks to make things a little bit cleaner, but overall it's the same basic layout and experience.</p>
<p>Unfortunately, budget is a concern, and sometimes you can only stretch it so much which doesn't always include a designer. But try to at least get some outside perspective – it can even be a family member or a friend! You would be surprised how much insight you can gather by trying to get your family over the holiday to try to use your app.</p>
<p>The goal is ultimately to get your product in front of someone that hasn't been heads down in it for the past year to get a pair of fresh eyes and a new perspective.</p>
<h2 id="heading-becoming-more-productive">Becoming more productive</h2>
<p>Putting on my process hat – another overlooked aspect of prioritizing design time is the amount of overall time you can possibly save.</p>
<p>Designers don't always get it right the first time, let alone leaving developers to create the design. That's not even including the possibility that your customer or product owner doesn't like the direction you took.</p>
<p>Why spend a couple sprints building out a solution only to start from scratch when you have to throw it all away? Not only have you wasted your customer's time, you've wasted your whole team's time.</p>
<p>Get design feedback early. Work with the design resources you have to iterate and work in feedback as you go. It's important to solve the UI problems before you develop the solutions.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/design-prototyping.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Design sketches from <a target="_blank" href="https://unsplash.com/photos/MKDEMlPRoYU">Unsplash.com</a></em></p>
<p>And this can generally help your team flesh out ideas. Visually seeing an idea, even as a rough sketch on a piece of paper or a disposable prototype, can completely change the way you look at the solution.</p>
<p>All of this early feedback and brainstorming will help you achieve the end-goal of a better product and user experience.</p>
<h2 id="heading-developers-are-users">Developers are users</h2>
<p>Most of people reading this post probably have written code in one form or another. But have you ever thought about how your code impacts other developers?</p>
<p>There are many layers to how your code can provide a better experience for another developer. The basic being – is the documentation that you created readable and easy to understand?</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/strip-api-documentation.jpg" alt="Image" width="600" height="400" loading="lazy">
_<a target="_blank" href="https://stripe.com/docs/api/balance/balance_retrieve">Stripe's API documentation</a>_</p>
<p>While it's certainly important for your fellow teammates, they should typically be able to message you on Slack or hop on a call when they run into trouble. But how about those developers that only have your documentation?</p>
<p>Beautiful documentation isn't that which has a beautiful design, it's one that thoroughly walks through the code that you've created so that others can understand what it does and how they can use it. Just as a visitor to your app needs to know how to use the UI, a developer working with your services needs to know how to use the API.</p>
<h2 id="heading-a-little-extra-delight">A little extra delight</h2>
<p>But of course everyone wants something nice to look at. Not only can design treats make people happy and smile, it can also help avoid stress and tension.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/josh-w-comeau-website-heart-1.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Josh W. Comeau includes cute, happy graphics throughout his site</em></p>
<p>Having a page that's ugly or overly thick with data can be unsettling. Not only can it hurt the usability, but the clutter and color choices can make people feel uneasy, stressed, and full of anxiety.</p>
<p>While your team might not have the resources for full-time designers, taking a little time to learn the basics of design can help set you on your <a target="_blank" href="https://www.colbyfayock.com/2020/02/how-to-become-a-full-stack-web-developer-in-2020/">journey of becoming a well rounded developer</a>.</p>
<h2 id="heading-resources-for-learning-design-basics">Resources for learning design basics</h2>
<p>Like it or not – we're all "designers" in a way. We're all building tools and systems that ultimately will be used by another human being. We should do what we can to make our creations friendlier to use for everyone who comes next.</p>
<p>Since you're now inevitably inspired to spend some time and learn about design, there are luckily a lot of resources available for you to get started.</p>
<h3 id="heading-videos">Videos</h3>
<ul>
<li><a target="_blank" href="https://www.netflix.com/title/80057883">Abstract: The Art of Design</a> (Netflix)</li>
<li><a target="_blank" href="https://www.amazon.com/gp/video/detail/amzn1.dv.gti.fab0b754-6362-2da1-96a1-e3e538137141?tag=gmcs-fcc-20">Objectified</a> (Amazon)</li>
</ul>
<h3 id="heading-books">Books</h3>
<ul>
<li><a target="_blank" href="https://www.amazon.com/Design-Hackers-Reverse-Engineering-Beauty-ebook/dp/B005J578EW/?tag=gmcs-fcc-20">Design for Hackers</a> (Amazon)</li>
<li><a target="_blank" href="https://www.amazon.com/Non-Designers-Design-Book-Non-Designers-ebook/dp/B00PWDFWEE/?tag=gmcs-fcc-20">The Non-Designer's Design Book</a>  (Amazon)</li>
</ul>
<h3 id="heading-email-course">Email Course</h3>
<ul>
<li><a target="_blank" href="https://designforhackers.com/">Design for Hackers</a></li>
<li><a target="_blank" href="https://www.designacademy.io/free-course/">Design Academy</a></li>
<li><a target="_blank" href="https://hackdesign.org/">Hack Design</a></li>
</ul>
<h3 id="heading-misc">Misc</h3>
<ul>
<li><a target="_blank" href="https://twitter.com/i/events/994601867987619840">Design Tips from @steveschoger</a></li>
</ul>
<h2 id="heading-whats-your-take-on-design-as-a-developer">What's your take on design as a developer?</h2>
<p>Have any of these worked particularly well for you? Am I missing something that made design click for you? Please <a target="_blank" href="https://twitter.com/colbyfayock">share with me on Twitter</a>!</p>
<h2 id="heading-join-the-conversation">Join the conversation!</h2>
<div class="embed-wrapper">
        <blockquote class="twitter-tweet">
          <a href="https://twitter.com/colbyfayock/status/1265990400591966208"></a>
        </blockquote>
        <script defer="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<div id="colbyfayock-author-card">
  <p>
    <a href="https://twitter.com/colbyfayock">
      <img src="https://res.cloudinary.com/fay/image/upload/w_2000,h_400,c_fill,q_auto,f_auto/w_1020,c_fit,co_rgb:007079,g_north_west,x_635,y_70,l_text:Source%20Sans%20Pro_64_line_spacing_-10_bold:Colby%20Fayock/w_1020,c_fit,co_rgb:383f43,g_west,x_635,y_6,l_text:Source%20Sans%20Pro_44_line_spacing_0_normal:Follow%20me%20for%20more%20JavaScript%252c%20UX%252c%20and%20other%20interesting%20things!/w_1020,c_fit,co_rgb:007079,g_south_west,x_635,y_70,l_text:Source%20Sans%20Pro_40_line_spacing_-10_semibold:colbyfayock.com/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_68,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_145,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_222,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_295,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/v1/social-footer-card" alt="Follow me for more Javascript, UX, and other interesting things!" width="2000" height="400" loading="lazy">
    </a>
  </p>
  <ul>
    <li>
      <a href="https://twitter.com/colbyfayock">? Follow Me On Twitter</a>
    </li>
    <li>
      <a href="https://youtube.com/colbyfayock">?️ Subscribe To My Youtube</a>
    </li>
    <li>
      <a href="https://www.colbyfayock.com/newsletter/">✉️ Sign Up For My Newsletter</a>
    </li>
  </ul>
</div>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to run a successful Design Sprint ]]>
                </title>
                <description>
                    <![CDATA[ By George Krasadakis Design Sprints can generate remarkable output for your company — such as a backlog of impactful ideas, functional prototypes, learning and key insights from customers along with real business opportunities. Consider this situatio... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-run-a-successful-design-sprint-1702e0f79797/</link>
                <guid isPermaLink="false">66c3542db3da455a9c10dc2b</guid>
                
                    <category>
                        <![CDATA[ agile ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ innovation ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Product Management ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 25 Sep 2018 21:39:32 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*skwXX6qCMVvs_aN3pQwxaw.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By George Krasadakis</p>
<p><strong>Design Sprints</strong> can generate remarkable output for your company — such as a backlog of impactful ideas, functional prototypes, learning and key insights from customers along with real business opportunities.</p>
<p><strong>Consider this situation</strong>: your company needs to solve a major real-world problem — you need a novel solution, better than any other offering available in the market. You could be aiming for a <em>product</em>, <em>a component</em>, <em>a system</em>, <em>a service</em> or a <em>process</em>.</p>
<p>In an ideal scenario, before making any investments, you would need the set of candidate solutions, prototyped and exposed to <strong>a controlled set of real users</strong>. This would enable enough <em>signals</em> and <em>insights</em> to make informed decisions and setup a better product development strategy.</p>
<p>To get there — from a <em>problem</em> to <em>functional prototypes</em> enriched with <em>customer feedback</em> — you can follow standard paths. For example you can consult the experts in your organization, assign work-streams to different teams, coordinate the work, schedule brainstorming meetings, and wait in the queue to get UI designs and then to develop prototypes — a lengthy process with several drawbacks, dependencies, issues and risks.</p>
<p><strong>Or, you can setup a <em>powerful multidisciplinary team</em> and ‘lock’ it in a room for a few days</strong>, with a clear goal: <em>a shortlist of inexpensive, realistic prototypes of selected high-potential concepts</em>, each enriched with feedback from real users.</p>
<blockquote>
<p><em>A</em> rapid innovation process outputting potential solutions to your problem <em>and</em> evidence <em>from real users on how</em> effective <em>they are.</em></p>
</blockquote>
<p>This intense <em>ideation and prototyping process</em> comes in several forms and variations — a popular one being the ‘Design Sprint’, which promises ‘Solutions to big problems in just five days’. It uses ‘design thinking’ principles and introduces several techniques, tools and rules.</p>
<h3 id="heading-the-success-factors"><strong>The success factors</strong></h3>
<p>To get real value from a Design Sprint, you must emphasize on <em>the right setup</em>, <em>preparation</em> and <em>readiness</em> — or you may end up hosting an expensive multi-day brainstorming session outputting just <em>noise</em>.</p>
<p>Having joined a large number of ‘ideation and prototyping’ sessions along with 10’s of formal ‘Design Sprints’, I would summarize the critical aspects and success factors in the following way.</p>
<h4 id="heading-1-define-the-problem-statement">1. Define the problem statement</h4>
<p><strong>Don’t let the problem statement become your real problem</strong>! Most of the <em>unsuccessful</em> Design Sprints and prototyping sessions I have experienced so far, share this specific single point of failure: a poorly defined problem statement, which triggers time-consuming discussions, iterations and unnecessary regression — setting the entire process at risk.</p>
<p>In contrast, the Design Sprints that started with clarity on the problem to be solved, moved on rapidly towards impressive solutions and prototypes.</p>
<blockquote>
<p><em>The Design Sprints that started with clarity on the problem to be solved moved on rapidly towards impressive solutions and prototypes.</em></p>
</blockquote>
<p>Although the first day of the Design Sprint is usually about framing and re-framing the problem statement, I am convinced that having a good <em>problem definition</em> <em>upfront</em> is key for a successful outcome. You can always revise it and reset it as necessary during the first day, but a solid basis can make the difference. In any case, the team needs to be <em>open</em> to understand the problem and <em>ready</em> to consider different angles and unconventional approaches.</p>
<p>There are several templates and methods to help you construct <em>a valid</em> problem statement — in general you need to describe the <em>current situation</em> vs the <em>ideal state</em> and the <em>related implications</em> for the <em>involved users</em>.</p>
<h4 id="heading-2-set-up-the-right-team">2. Set up the right team</h4>
<p>The synthesis of the team sets the foundation for the entire Design Sprint — you need <em>diversity of thought,</em> <em>skills</em> and <em>perspectives</em> along with <em>expertise</em> and <em>creativeness</em> — all combined in a small multidisciplinary team with <em>the right culture</em>: a team willing to <em>share</em>, <em>collaborate</em>, <em>challenge</em> assumptions, <em>think big</em> but also be <em>pragmatic</em> and purpose-driven.</p>
<p>A few factors can introduce serious risks to the process:</p>
<ul>
<li>The <strong>wrong dynamics</strong> in the team (for instance, members do not express their ideas for fear of getting criticized by more senior members in the team)</li>
<li>a <strong>large team</strong> (add more than 6–7 people and you’ll get additional problems to solve)</li>
<li>or the <strong>wrong mindset</strong> (people tend to protect ideas versus sharing, or believe that they know the right solution, upfront).</li>
</ul>
<p>The members of the team must ‘forget’ about <em>seniority</em>, <em>hierarchy</em> and <em>authority.</em> They need to be <em>open to new ideas</em>, new perspectives and different views. They also need to be ready to <em>influence</em> and <em>get influenced,</em> and to minimize the impact of bias and work together towards a shared mission — <em>a great solution to a challenging problem</em>.</p>
<p>Physical space is also very important to allow the team to focus, express random thoughts and ideas, collaborate and quickly visualize concepts. You need a room with enough space, the right equipment and office supplies– such as writable walls, whiteboards and well, plenty of sticky notes.</p>
<h4 id="heading-3-make-sure-the-team-is-well-prepared">3. Make sure the team is well-prepared</h4>
<p><strong>Design Sprints are demanding — fast and intense</strong>. The key to success is to have a well-prepared team. Even if your dream team consists of domain experts and senior business leaders, they all have to put some extra effort to get prepared — so they fully understand the problem and its wider context, the technology, the competition and the relevant global trends. Make sure that you clearly communicate to the team not only the context and the problem to be solved, but also the <em>rules</em> and the <em>need to get prepared</em>.</p>
<h4 id="heading-4-focus-on-ideation">4. Focus on ideation</h4>
<p>Assuming that a solid problem statement and the right preparation is there, the next most important element is <em>ideation</em>. While the Design Sprint process provides some tools to empower ideation, I would strongly recommend that you:</p>
<ul>
<li><strong>increase the <em>time allocated to idea generation, sketching and pitching</em></strong> and</li>
<li><strong><em>capture the ideas in digital format</em></strong> — with more detailed descriptions.</li>
</ul>
<p><a target="_blank" href="https://medium.com/innovation-machine/a-stream-of-ideas-the-foundation-of-an-innovation-machine-2ebcfe4e0653"><strong>A backlog of ideas</strong></a> <strong>is a great asset</strong> — one of the most important outputs of the sprint and the key input to the prototyping phase. Ideas should not be left on sticky notes — even the non-selected ones could prove to be relevant and valuable in the future.</p>
<p>This is why you need to feed the ideas generated in the Sprint into <a target="_blank" href="https://medium.com/innovation-machine/principles-of-a-great-ideation-channel-539cf91dbbf2">a centralized ideation system</a> and make them <em>discoverable</em> by the right audience.</p>
<h4 id="heading-5-get-ready-for-rapid-prototyping">5. Get ready for ‘rapid prototyping’</h4>
<p>Delivering realistic prototypes is a critical part of this process — since they will be used to capture user/ customer feedback. You don’t want your great concept to receive negative feedback due to a poor prototype implementation — that could mislead related decisions and undermine the overall value of the Design Sprint. Your team must be capable of <em>real</em> <a target="_blank" href="https://medium.freecodecamp.org/is-it-a-prototype-or-an-mvp-well-its-a-proof-of-concept-f8df5bb8940a">rapid prototyping</a> — able to build realistic user experiences in just a couple of days or less.</p>
<p>Rapid Prototyping requires the right resources in the team along with <strong>a general technological readiness</strong>. For instance, to speed up the process you need to leverage any <em>reusable software components</em> you have, <em>standardized datasets</em>, <em>artificial</em>/ <em>static data</em>, <em>UI elements, APIs, models</em> and services. You will also need systems, tools and processes — for instance <em>wireframing, software development environments</em> and DevOps capabilities.</p>
<p>Availability of special equipment might be important. For example, if <em>physical prototyping</em> is involved, a 3D printer might be of real value. Or if you expect Augmented Reality prototypes, you will need access to related devices — along with any templates, APIs and documentation.</p>
<h4 id="heading-6-find-a-great-facilitator">6. Find a great Facilitator</h4>
<p>This is a key role — in fact, I see the facilitator as the real <strong>protagonist of the Design Sprint</strong>. The facilitator must maintain the right <em>pace</em>, <em>direction</em>, <em>energy levels</em> and <em>interaction patterns,</em> to lead the team towards a clear, shared goal: define and prototype a great, <em>novel concept</em> solving the problem for <em>real users</em>.</p>
<p>It is a difficult profile to find — you need somebody mastering the process itself, but also having deep understanding of the problem and the particular business context. The facilitator must be capable of ‘reading’ the characters in the room and take necessary action to make sure that all voices are heard and considered.</p>
<h4 id="heading-7-capture-everything">7. Capture everything</h4>
<p>Design Sprints are typically very ‘noisy’ with tons of sticky notes, ideas and stories on the walls — all these, in-between discussions, arguments, decisions and random thoughts. And yes, this ‘controlled chaos’ is exciting, but unless you have a dedicated person responsible for taking (digital) notes, you will end up frustrated, trying to decode colorful sticky notes and ‘reverse-engineer’ random drawings.</p>
<p>To make the most of the thoughts and ideas, you need to capture them in a modern way — so they are discoverable and potentially usable.</p>
<h4 id="heading-8-find-a-leader-not-just-a-decider">8. Find a Leader, not just a ‘decider’</h4>
<p>I find the proposed decision-making process — with the super voting concept and the sticky votes on the sketches — oversimplified and very sensitive to team dynamics and the overall state of the team. Moreover, given the extra power, the decider must demonstrate deep understanding of the concepts, the ability to <em>think</em> <em>strategically</em> and <em>communicate with clarity.</em> You need a real leader there, not an ‘authority’ or ‘political’ person.</p>
<blockquote>
<p><em>The facilitator and the team should feel free to challenge whatever decisions made by the decider, by asking for justification — the business or technical reasoning.</em></p>
</blockquote>
<h4 id="heading-9-measure-success">9. Measure Success</h4>
<p><strong>A design sprint is an expensive process</strong> — consider the associated direct and indirect costs of having x members full-time for z days. Thus, measuring the success of the Design Sprint itself is important. In the case of an ‘isolated’ sprint, success can be measured by processing direct feedback, outputs and mid-term outcomes — for example business opportunities and success stories linked with the deliverables of the Sprint.</p>
<p>If you are running <strong>successive Design Sprints</strong>, you need a framework to capture and quantify Sprint outputs and impact — a flow towards a centralized ideas and knowledge repository. This data store should enable full tracking of the real business opportunities and financial gains associated with each of your Design Sprints — while specialized KPIs allow tracking the success of the overall <em>innovation programme</em>.</p>
<p>The key question in this case is regarding <em>the baseline to compare this ‘quantified innovation output’ against</em> — to be covered in a forthcoming article.</p>
<p><strong>D<em>esign Sprints</em></strong> can generate remarkable output for your company — such as a backlog of impactful ideas (also with IP opportunities), functional prototypes, learnings and key insights from customers along with real business opportunities. At the same time, assuming proper and frequent execution, Design Sprints can lead to significant <a target="_blank" href="https://medium.com/innovation-machine/innovation-culture-ecf2c1be3102">cultural improvements towards the ‘innovation mode’</a>.</p>
<p><a target="_blank" href="https://medium.com/innovation-machine/innovation-at-pace-rapid-prototyping-practices-for-software-engineering-teams-442929fdd5ea"><strong>How to build Software Prototypes in rapid mode</strong></a><br><a target="_blank" href="https://medium.com/innovation-machine/innovation-at-pace-rapid-prototyping-practices-for-software-engineering-teams-442929fdd5ea">_Best practices and guidance on how to rapidly build software prototypes and test your ideas to real users_medium.com</a></p>
<p><strong>References</strong></p>
<ul>
<li><strong>Problem statement</strong> — <a target="_blank" href="https://en.wikipedia.org/wiki/Problem_statement">https://en.wikipedia.org/wiki/Problem_statement</a></li>
<li><strong>Design Sprint book</strong> — <a target="_blank" href="http://www.gv.com/sprint/">http://www.gv.com/sprint/</a></li>
<li><strong>Design Thinking</strong> — <a target="_blank" href="https://en.wikipedia.org/wiki/Design_thinking">https://en.wikipedia.org/wiki/Design_thinking</a></li>
<li>Photo by Will H McMahan on Unsplash</li>
<li><strong>Related:</strong> <a target="_blank" href="https://medium.freecodecamp.org/leading-innovation-in-engineering-teams-ca9890bcad7c">How to lead innovation and drive change in engineering teams</a></li>
</ul>
<p><strong>Related articles</strong></p>
<ul>
<li><a target="_blank" href="https://hackernoon.com/why-a-good-mvp-is-critical-for-a-startup-5192f5d79215"><strong>Startups and the Importance of Agile Product Development</strong></a></li>
<li><a target="_blank" href="https://medium.com/innovation-machine/innovation-at-pace-rapid-prototyping-practices-for-software-engineering-teams-442929fdd5ea">Rapid Prototyping practices for Software Engineering teams</a></li>
<li><a target="_blank" href="https://medium.freecodecamp.org/leading-innovation-in-engineering-teams-ca9890bcad7c">How to lead innovation and drive change in engineering teams</a></li>
<li><a target="_blank" href="https://medium.freecodecamp.org/how-and-why-to-write-great-user-stories-f5a110668246"><strong>How (and Why) to Write Great User Stories</strong></a></li>
<li><a target="_blank" href="https://medium.com/innovation-machine/the-successful-product-manager-5f3cb3aacb51">How to become a great Product Manager</a></li>
<li><a target="_blank" href="https://medium.com/innovation-machine/is-it-a-prototype-or-an-mvp-well-its-a-proof-of-concept-f8df5bb8940a">Is this a prototype or an MVP? Well actually, it’s a proof of concept.</a></li>
<li><a target="_blank" href="https://medium.freecodecamp.org/how-to-setup-and-lead-a-great-product-development-team-ebded92ba192">How to setup and lead a great product development team</a></li>
<li><a target="_blank" href="https://medium.freecodecamp.org/2018-innovation-trends-and-opportunities-8a5d642fd661">Technology Innovation — Trends and Opportunities in 2018</a></li>
</ul>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Design tips all developers should keep in mind ]]>
                </title>
                <description>
                    <![CDATA[ By Wiki Chaves In an ideal world, consumer-facing product development teams should have one designer for every four to six engineers. In reality this rarely happens. So I wrote some tips any engineer can follow when there’s a design shortage on their... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/design-tips-for-developers-84239ca00bfe/</link>
                <guid isPermaLink="false">66c3490b1718310854c7aac2</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ engineering ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Mon, 30 Jul 2018 18:07:48 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*wF2dNCBrzY0kvqWJPgtl2A.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Wiki Chaves</p>
<h4 id="heading-in-an-ideal-world-consumer-facing-product-development-teams-should-have-one-designer-for-every-four-to-six-engineers-in-reality-this-rarely-happens-so-i-wrote-some-tips-any-engineer-can-follow-when-theres-a-design-shortage-on-their-team">In an ideal world, consumer-facing product development teams should have one designer for every four to six engineers. In reality this rarely happens. So I wrote some tips any engineer can follow when there’s a design shortage on their team.</h4>
<p><img src="https://cdn-media-1.freecodecamp.org/images/g5NVfF3Jrz8otBKGOkgZYjhckRW7LEbBzlNj" alt="Image" width="800" height="500" loading="lazy">
<em>Brainstorming at Airbnb</em></p>
<h3 id="heading-context"><strong>Context</strong></h3>
<p>I’m a product designer with a <a target="_blank" href="https://www.linkedin.com/in/wikichaves">diverse background</a>. I have worked in different industries from education and advertising to retail and technology.</p>
<p>I always thought of roles as a strict boundary between what my responsibilities are and what they’re not. As a designer, I would be in charge of design, and engineers would be in charge of coding. That helped me define my role and also have certain control over my responsibilities.</p>
<p>Last year, while I was working at <a target="_blank" href="https://dribbble.com/shots/4123075-Airbnb-PDP">Airbnb</a> <em>—</em> a tech company renowned for its design culture <em>—</em> I faced a big challenge. After my on-boarding week, I landed on a team with 12 engineers, one PM, one data scientist, one researcher, and just me as a designer. I freaked out a little bit. How was I going to satisfy the needs of my team?</p>
<p>I thought about three possible solutions.</p>
<ol>
<li><strong>Working more hours</strong>. That was my first instinct. If I had to deliver design for more than twice the ideal number of engineers, I would have to work many more hours. That would seriously affect my life/work balance and eventually burn me out.</li>
<li><strong>Slowing down</strong>. If I wanted to keep working at my usual pace, I would end up being a human bottleneck. Design requests would start accumulating and I would never have the time to catch up (which would have a serious negative impact on our team goals).</li>
<li><strong>Letting go</strong>. As a designer, it’s hard to let go. We are proud to be the experts with the experience. Letting the whole team design felt like I was not doing my job properly, and of course, it had an impact on my ego. But with time, this proved to be the best approach.</li>
</ol>
<h3 id="heading-everyone-is-a-designer"><strong>Everyone is a designer</strong></h3>
<p>I’ve thought a lot about this subject, and I found <a target="_blank" href="https://library.gv.com/everyone-is-a-designer-get-over-it-501cc9a2f434">a great article by Daniel Burka</a> that ended up convincing me that this was the right approach. Everyone can be a designer.</p>
<p>Letting go didn’t mean that I stopped caring about our design. But I had to enable and encourage the rest of the team to use their design mindset and propose solutions to user problems or business goals. In the end, the user who uses your product doesn’t care if one particular screen or flow was designed by a designer or not. They care about the experience they are having, and that’s not a one-person responsibility.</p>
<p>In order to do this properly, I gave a few design tips and tools to our team and scheduled design office hours once a week. This provided a fixed spot where everyone could come with their design ideas to discuss it and share feedback.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/0rXhrb5apSdF2GUZf5qWvLZERteie6hbzQqC" alt="Image" width="800" height="545" loading="lazy">
_Photo by [rawpixel](https://unsplash.com/photos/3BK_DyRVf90" rel="noopener" target="<em>blank" title=")</em></p>
<p>This process ended up having amazing results. In just a few weeks, we witnessed how some of those ideas got shipped to production with positive results. We were moving way faster than before and the team was super excited to see their design ideas out there in production!</p>
<h3 id="heading-possible-scenarios"><strong>Possible scenarios</strong></h3>
<p>Before jumping to the design tips for developers, I want to start by mentioning the possible scenarios you might face. This will depend a lot on what stage of the project you are in.</p>
<h4 id="heading-scenario-1-theres-no-designer"><strong>Scenario 1 - There’s no designer.</strong></h4>
<p>Probably the most common scenario among early stage startups or student projects. Having no designer on your team means you are the designer! Do not freak out, and use this opportunity to learn. I’m sure that if you follow some simple rules you can deliver a cohesive <a target="_blank" href="https://en.wikipedia.org/wiki/Minimum_viable_product">MVP</a>.</p>
<p>At this stage, you are probably a very small team. Don’t spend a lot of time trying to build something beautiful, trendy, or eye-catching. Focus on building a great experience with a decent UI. You will have time to improve it later.</p>
<h4 id="heading-scenario-2-theres-only-one-designer-for-roughly-10-developers"><strong>Scenario 2 - There’s only one designer for roughly 10 developers.</strong></h4>
<p>This happened to me last year, and your designer will certainly need help. How can you help? Propose ideas — don’t expect that everything will come resolved. Sit down with your designer and show them your ideas. They will definitely appreciate it. Join them in brainstorming sessions and give feedback. If designs don’t come fully spec’ed out, ask your designer for the source file and look at it yourself to save them some time.</p>
<h4 id="heading-scenario-3-theres-one-designer-every-4-to-6-developers"><strong>Scenario 3 - There’s one designer every 4 to 6 developers.</strong></h4>
<p>You are lucky, as this is an ideal scenario! It doesn’t mean you can fully forget about design, but it is no longer of primary concern. I would still recommend that you join the brainstorming sessions to propose ideas and to give early feedback from your engineer perspective.</p>
<h3 id="heading-design-tips-for-developers"><strong>Design tips for developers</strong></h3>
<p>Here’s a list of design tips that will help you if you find yourself in the no-designer scenario. But they can also be applicable in any other circumstance.</p>
<h4 id="heading-designer-mindset"><strong>Designer mindset</strong></h4>
<p>If you are going to design, it’s very important that you think as a designer. When you are designing, don’t think about engineering problems, but think about how to solve user problems.</p>
<p><strong>The user comes first.</strong></p>
<p>Let’s say you have to build a photo uploader feature. During your designer time you shouldn’t think about performance, code optimization, or platform limitations. Think about what is the most effective and intuitive way a user can upload a photo. Think about the user’s motivation to upload a picture. How can this process be straightforward and maybe even enjoyable?</p>
<p>Then, when you finish your design, wear your engineer hat and review what you just did, with your engineer perspective. Is this technically doable? How long does it take to build this feature as you’ve designed it? Do you have the time to build it? If not, can you reduce the scope a bit so you can reach your deadlines?</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/lSXMZN4hcPkloa4AOU2wcV24wbih2a3mDibL" alt="Image" width="800" height="531" loading="lazy">
_Photo by [William Iven](https://unsplash.com/photos/gcsNOsPEXfs?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener" target="<em>blank" title=")</em></p>
<p>It’s very important that you don’t cross the line between roles, or you will end up limiting your design because of engineering constraints or vice-versa. If it helps, you can try dedicating mornings for design time and afternoons for engineering time. Or you can use an area in your working space to do all the design work, and then move to a different area to do your engineer work.</p>
<h4 id="heading-build-a-plan"><strong>Build a plan</strong></h4>
<p>If you have an idea, before jumping straight to the code, build a plan. You can do wireframes, use sticky notes, a whiteboard, or sketch on a notepad — that’s up to you. Don’t skip this step even if you think you have all the details in your head. When you finalize your wireframes, review it and you will probably notice you are missing something.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/9RaKOdw0XHsbx5BZ0nT9exFmNX90f4wuH89a" alt="Image" width="800" height="561" loading="lazy">
_Photo by [rawpixel](https://unsplash.com/photos/u5XiXcOq2Tw" rel="noopener" target="<em>blank" title=")</em></p>
<p><a target="_blank" href="https://balsamiq.com/">Balsamic</a> is a good tool for rapid wireframing. You can also use <a target="_blank" href="https://www.sketchapp.com/">Sketch</a> or <a target="_blank" href="https://www.figma.com/">Figma</a> for your whole design process from wireframes to production.</p>
<h4 id="heading-start-with-a-framework"><strong>Start with a framework</strong></h4>
<p>Not having a designer on your team doesn’t mean you have to design everything from scratch. There’s a lot of already built frameworks that you can use as a starting point and customize them your way. <a target="_blank" href="https://getbootstrap.com/">Bootstrap</a> and <a target="_blank" href="https://foundation.zurb.com/">Foundation</a> are my favorite ones, but there are plenty of them depending on the type of application you want to build.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/i2MhQGoQbZdIhWEsGEdRxHbTgV4Jw815fIDI" alt="Image" width="800" height="500" loading="lazy">
_[Foundation](https://foundation.zurb.com/" rel="noopener" target="<em>blank" title=") documentation</em></p>
<p>If you are building a native app, I strongly recommend that you follow <a target="_blank" href="https://material.io/design/">Material Design’s guidelines</a> for Android and <a target="_blank" href="https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/">Human Interface’s guidelines</a> for iOS. Start with following the native patterns as closely as possible, unless you explicitly want to build a unique UI, like Snapchat, or a game. Only after you dominate the default patterns and components can you start customizing.</p>
<h4 id="heading-design-systems"><strong>Design systems</strong></h4>
<p>If you are lucky to have at least one designer on your team, you can think about building your own design system.</p>
<p>Watch out!</p>
<p>This can be time-consuming and is only worth it when you are scaling fast and you have to maintain multiple applications with the same visual language. A great tool for building a design system is <a target="_blank" href="http://patternlab.io/">Pattern Lab</a>.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/rUXKmH1pT-WoVyUztB4jRXRiynyH-6sDTaWV" alt="Image" width="800" height="500" loading="lazy">
_Airbnb’s [Design Language System](https://airbnb.design/building-a-visual-language/" rel="noopener" target="<em>blank" title=")</em></p>
<h4 id="heading-branding"><strong>Branding</strong></h4>
<p>As you build your framework you will probably start making decisions that will define your brand. Don’t feel intimidated by this! Branding is a fun exercise that you can definitely do. The brand you end up creating won’t get set in stone and you will probably hire a designer if your MVP is successful or if you get more resources. My friend <a target="_blank" href="https://twitter.com/hemeon">Marc</a> wrote a fun article about <a target="_blank" href="https://journal.designinc.com/how-to-make-a-logo-for-free-in-about-5-minutes-a4f409176a8e">how to make a logo in about 5 minutes</a>.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/HviIeqrski6djtQGwQ6SPzzT6arNgP-4ewMu" alt="Image" width="800" height="587" loading="lazy">
_[5-minute logo by Marc Hemeon](https://journal.designinc.com/how-to-make-a-logo-for-free-in-about-5-minutes-a4f409176a8e" rel="noopener" target="<em>blank" title=")</em></p>
<h4 id="heading-typography"><strong>Typography</strong></h4>
<p>After building your logo, you may want to choose a font family for the rest of the app. Google has a good <a target="_blank" href="https://design.google/library/choosing-web-fonts-beginners-guide/">beginner’s guide for choosing web fonts</a>.</p>
<p>You can certainly use the same font you used for your logo, but make sure your font has good readability, especially if your product has large amounts of text. I recommend that you keep it simple and limit the number of font families to one or two max. <a target="_blank" href="https://www.myfonts.com/topwebfonts/">Here’s a list of popular fonts</a>.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/4DZtSOh7ijnFRtaMqq1L4dRuVkQmfspOYqz3" alt="Image" width="800" height="500" loading="lazy">
_[Futura PT](https://www.myfonts.com/fonts/paratype/futura-book/" rel="noopener" target="<em>blank" title=") my often weapon of choice for branding</em></p>
<p>A common technique is to use a distinctive font for headings and a more readable font for larger blocks of text. You can get inspired by <a target="_blank" href="https://fontpair.co/">these examples</a>. A handy tool I use a lot to identify fonts on web pages is the <a target="_blank" href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en">WhatFont chrome extension</a>.</p>
<p>When building your framework, be conscious about the number of different font sizes you use. Again, keep it simple. If possible, use the minimum amount of variations. Try to avoid going under 16pt for large amounts of text. Many people, like me, will have trouble reading under that size!</p>
<p>If your product needs it, use a proper font that supports many languages. <a target="_blank" href="https://www.google.com/get/noto/">Noto</a>, for example, is a font developed by Google that aims to support all languages.</p>
<h4 id="heading-color"><strong>Color</strong></h4>
<p>Similar to typography, keep it simple. A common technique is to choose a primary color displayed most frequently across your app and a secondary color that provides more ways to accent and distinguish your product. For inspiration, you can use this <a target="_blank" href="http://www.vanschneider.com/colors">color combinations page</a> made by <a target="_blank" href="https://medium.com/@vanschneider">Tobias van Schneider</a>, or use <a target="_blank" href="https://material.io/tools/color/#!/?view.left=0&amp;view.right=0">Material Design’s color tool</a> to play around with color combinations. For more complex combinations you can use the <a target="_blank" href="https://color.adobe.com/create/color-wheel/">Adobe color wheel</a>.</p>
<p>When choosing two colors, avoid having <strong>vibrating</strong> color combinations. This happens when adjacent colors appear to merge, blur, and glow, giving the illusion of motion. Learn more <a target="_blank" href="https://webdesign.tutsplus.com/articles/why-you-should-avoid-vibrating-color-combinations--cms-25621">in this article</a>. Be careful with this undesirable effect if you create gradients.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/tBlFlCwKhY-jX-vN49U5CtEbKQ4ty9lnSDgF" alt="Image" width="800" height="500" loading="lazy">
_Unpleasant [color vibration](https://webdesign.tutsplus.com/articles/why-you-should-avoid-vibrating-color-combinations--cms-25621" rel="noopener" target="<em>blank" title=")</em></p>
<p>Last, think about color contrast and accessibility. For an MVP, you don’t have to be fully compliant with <a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG</a>. But with a little attention, you can reach some minimum degree of compliance. There are many tools to check your color contrast ratio <a target="_blank" href="https://webaim.org/resources/contrastchecker/">like this one</a>.</p>
<h4 id="heading-iconography"><strong>Iconography</strong></h4>
<p>Icons can definitely give some character to your UI and will help you in moments you need to synthesize complex concepts. They also take up less space and avoid long strings and internationalization problems. However, if you end up using an unclear icon to convey an important action, you will have a serious issue. If there’s doubt about the icon, use text only or an icon with a label close to it.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/D7G7v-YRCCUXKlmJ6PLnja-58bmSat0-PLyN" alt="Image" width="800" height="500" loading="lazy">
_[Noun Project](https://thenounproject.com/" rel="noopener" target="<em>blank" title="), with over a million icons</em></p>
<p>Good sources for icons are <a target="_blank" href="https://thenounproject.com/">Noun Project</a>, <a target="_blank" href="https://material.io/tools/icons/?style=baseline">Material Design icons</a>, and <a target="_blank" href="http://www.streamlineicons.com/">Streamline icons</a>.</p>
<h4 id="heading-illustrations"><strong>Illustrations</strong></h4>
<p>Illustrations can help you support important messages that you don’t want to get lost. On average, <a target="_blank" href="https://www.nngroup.com/articles/how-little-do-users-read/">users read at most 28% of the text</a>. Having an illustration and reducing the amount of text can help the user digest that information. A small animation can make that moment even more delightful.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/Gpr7Rp7NiFOGvbE1wS1X7mbNwNYLsLRaUXjm" alt="Image" width="735" height="390" loading="lazy">
_High Five delightful moment by [MailChimp](https://blog.mailchimp.com/designing-the-freddie-high-five-animation-for-facebook-ads/" rel="noopener" target="<em>blank" title=")</em></p>
<p>It’s hard to find the right illustration that fits your needs, so my recommendation would be to hire an illustrator to do it on demand.<br>Otherwise, if you don’t have the resources for that, you can always <a target="_blank" href="https://dribbble.com/search?q=free+illustration">look for free illustrations</a> and may find what you need. Just remember to give credit.</p>
<h4 id="heading-photography"><strong>Photography</strong></h4>
<p>When I build a new product, I always like to create a set of photos that I call <strong>product in use</strong>. These show different scenarios of users using your product or enjoying the benefit that comes after using your product.</p>
<p>For example, if you are creating an app that helps you reduce the time spent on your phone, maybe you want to have a set of photos of people participating in outdoor activities, or spending time with their families.</p>
<p>Once you have this set of photos, you can use it to build the story and merchandise around your product. Use the photos on your onboarding tour, landing page, social media pages, or press release. Be consistent with the images you use, the style, the tone, and the age group. This will influence how people perceive your brand.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/dFZNRTlEUg3EhhDNEMBPBKIf4oufHHKkZLLw" alt="Image" width="800" height="500" loading="lazy">
<em>Usage of photography in onboarding tours can help convey value</em></p>
<p>An amazing source for free images is <a target="_blank" href="https://unsplash.com/">Unsplash</a>. If you want to place your product in context, an affordable option is <a target="_blank" href="https://placeit.net/">Placeit</a>.</p>
<h4 id="heading-prototyping"><strong>Prototyping</strong></h4>
<p>At some point you may want to build a prototype for testing an idea or a flow. You can test a prototype even at the wireframing stage!</p>
<p>A very simple tool for building prototypes is <a target="_blank" href="https://www.invisionapp.com/">InVision</a>, as it allows you to link a series of static images and build a flow with transitions that make it look like a finished product. <a target="_blank" href="https://framer.com/">Framer</a> is another great prototyping tool, and it’s expanding its capabilities beyond prototyping every day.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/9tKsNg-PzyUPMO3Rxnva226EEN0kxYOAqY5b" alt="Image" width="800" height="450" loading="lazy">
_Prototyping with [Craft](https://www.invisionapp.com/craft" rel="noopener" target="<em>blank" title="), a Sketch to InVision integration</em></p>
<p>Don’t get too attached to these tools that are constantly changing. Anything that works for you to test your idea (even <a target="_blank" href="https://www.nngroup.com/reports/paper-prototyping-training-video/">paper prototyping</a>) is fine.</p>
<h4 id="heading-user-testing"><strong>User testing</strong></h4>
<p>By now you probably have a product or prototype that you are excited to test. Testing your product with <a target="_blank" href="https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/">only 5 users</a> will give you early insights into what is working and what is not.</p>
<p>If you have the budget, you can use a tool like <a target="_blank" href="https://www.usertesting.com/">UserTesting</a>. But if you don’t, you can <a target="_blank" href="https://medium.com/swlh/how-to-do-user-testing-on-a-budget-bc4000d4387">do your own user testing</a> recruiting family or friends as long as you keep it objective. Before starting your test, take some time to identify what questions you are trying to answer through user testing.</p>
<p>One easy and cheap way to test is the <a target="_blank" href="https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/">thinking aloud test</a>. This consists of letting testers simply verbalize their thoughts as they move through the user interface after you give them a task. It is important that you keep quiet and don’t help the testers accomplish their tasks.</p>
<p>For example, if they ask you “What happens if I press this button” you can reply “What would you expect to happen?” Otherwise, if you give them the answer, you won’t learn from their experience.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/WbgfxIiLjZR-RXab1KQw2qSmfg1LjHGwA-Gn" alt="Image" width="700" height="425" loading="lazy">
_User testing with recording device. Photo credit [StartUX](http://www.startux.co.uk/services/snapshot-user-testing/" rel="noopener" target="<em>blank" title=")</em></p>
<p>It could help to have a third person to document the session. It’s hard to be the moderator and take notes at the same time. If you can not find a third person to help, you can video-record your session.</p>
<h4 id="heading-iterate"><strong>Iterate</strong></h4>
<p>After launching your product, remember: Design is never done!</p>
<p>You will probably learn a lot after launching version one of your MVP. Take that knowledge and go back to the wireframing → prototyping → user testing cycle.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/0IpchSu1gnGwa5i4UABpshQId4UGntChOon9" alt="Image" width="800" height="600" loading="lazy">
_Design is Never Done by [Kari Neuberger](https://dribbble.com/shots/2900760-Design-Is-Never-Done" rel="noopener" target="<em>blank" title=")</em></p>
<h3 id="heading-open-conversation"><strong>Open conversation</strong></h3>
<p>I hope you find these tips useful and applicable to your every day work.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/FBymClf5pHdar49kxfqIOeHCy33cs8IRFVav" alt="Image" width="800" height="500" loading="lazy">
_Photo by [Agustina Perretta](http://agustinaperretta.com/" rel="noopener" target="<em>blank" title=")</em></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ I redesigned Tinder. Here’s what I learned in the process. ]]>
                </title>
                <description>
                    <![CDATA[ By Daniel Lopes The challenge I set out to see how far I could push myself creatively as a designer by rebuilding an App I frequently use. I chose Tinder because I’ve used it a few times, and realized a few modifications to the design would be helpfu... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/the-day-i-redesigned-tinder-3ee6445b9a06/</link>
                <guid isPermaLink="false">66c36120e4cb1ff6521c8278</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Product Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ UI ]]>
                    </category>
                
                    <category>
                        <![CDATA[ UX ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Wed, 27 Dec 2017 22:56:43 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*SGoCQhxcIQhk8uqtvTHB7A.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Daniel Lopes</p>
<h3 id="heading-the-challenge"><strong>The challenge</strong></h3>
<p>I set out to see how far I could push myself creatively as a designer by rebuilding an App I frequently use.</p>
<p>I chose Tinder because I’ve used it a few times, and realized a few modifications to the design would be helpful. Of course I’m not suggesting that my design should be used instead of the current Tinder design. It’s just a different point of view from the current design of the App.</p>
<p>My Goals:</p>
<ul>
<li>Create a better user experience</li>
<li>Facilitate the use of the application</li>
<li>As a personal goal, to complete my first design project</li>
</ul>
<h3 id="heading-understanding-the-app">Understanding the App</h3>
<p>Tinder is a location-based social App that is most commonly used as a dating App with a target audience from 18 to 34. Since its debut in 2012, Tinder has undergone rapid growth thanks to its extremely simple way of use and amazing organic strategy.</p>
<h3 id="heading-the-home-page">The Home Page</h3>
<p><img src="https://cdn-media-1.freecodecamp.org/images/Hlm4H50oYkWS4fgNVADR84qy7YyPl-3tT8fb" alt="Image" width="800" height="643" loading="lazy">
<em>Old screen and my redesign of it</em></p>
<h4 id="heading-problem-1-bottom-buttons-and-card-swiping"><strong>Problem 1: Bottom buttons and Card swiping</strong></h4>
<p>As soon as a user opens the App, Tinder users have two prime features to indicate whether they like a profile or not:</p>
<ul>
<li>the bottom buttons</li>
<li>the card swiping</li>
</ul>
<p>So which of these should they use?</p>
<p>Both options are very good, but the card swiping provides a much smoother experience. If you compare it to other Apps that are increasingly implementing the card swiping feature, Tinder is far ahead. We should take 100% advantage of it.</p>
<p>After analysing the existing design, the “super like”, “like” and “nope” buttons were removed, with the card swiping gestures for these actions.</p>
<p>The following <strong>new</strong> buttons were added.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/KdEPMH3mZ-wNdtEyRJcRLKFgx3LnfRY1B-2O" alt="Image" width="47" height="47" loading="lazy">
<em>Dismiss Profile Button</em></p>
<h4 id="heading-dismiss-profile"><strong>Dismiss Profile</strong></h4>
<p>Let’s say you come across a profile that interests you and at the same time does not, you can dismiss it and go to the next one.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/NjUJEUGGPxkqVaylt8hPsspd8WLvGhVf7Lyx" alt="Image" width="55" height="53" loading="lazy">
<em>Message Button</em></p>
<h4 id="heading-message"><strong>Message</strong></h4>
<p>Feature for Tinder gold that would allow you to send a message to any profile, even if they have not yet liked you.</p>
<h4 id="heading-new-swiping-card-friends"><strong>New swiping card - Friends</strong></h4>
<p><img src="https://cdn-media-1.freecodecamp.org/images/7HlXjOqILUz2V7ZVJ4-WPrPnpKqZOR0gIP5k" alt="Image" width="800" height="332" loading="lazy"></p>
<p>Tinder is listed under “Lifestyle” in the App store. Although Tinder isn’t marketed as a dating App, most people see it as one. Browsing through the profiles, I saw plenty of bios with something like “Just looking for friends!”.</p>
<p>So swiping down on the new swiping cards allows you to be friend of someone.</p>
<h3 id="heading-problem-2-changing-pages-to-see-a-profile"><strong>Problem 2: Changing pages to see a profile</strong></h3>
<p>This modification was something more personal. I didn’t like the way a user would navigate to a person’s profile. I did not consider the process fluid in the eyes of the user as we are constantly changing pages and it does not become very intuitive or practical if we want to go back after seeing the profile.</p>
<p>So I decided to implement the function of being able to see the profile of the user without leaving the main page. Swiping <strong>up</strong> would display the user’s profile and swiping <strong>down</strong> would return the user to the main page.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/X4KR8o6KUdpj5Z6cy2yPbwBeTS3WBoS1xRgl" alt="Image" width="800" height="575" loading="lazy"></p>
<h3 id="heading-redesigning-the-tinder-feed"><strong>Redesigning the Tinder Feed</strong></h3>
<p>Tinder introduced the Feed feature that shows you real-time updates of your matches all in one place. Is a very good idea that will take you beyond “It’s a Match!” and help you make a real connection.</p>
<p>But to access this new feature you need to go to the messages. As I think we should take advantage of this I decided to remove it from the messages and put it on the main screen.</p>
<p>A user would just need to click on the feed button on the main screen to access all the news from their matches.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/53CoOUKDc8o6XVFIMi-wou32Qy963zUDPKXD" alt="Image" width="320" height="568" loading="lazy"></p>
<p>To navigate within the feed, I decided to implement two buttons:</p>
<ul>
<li><strong>New</strong> - Clicking on “New” at the bottom of the screen on the right side would create a new post.</li>
<li><strong>Old</strong> - Clicking on “Old” at the bottom of the screen on the left side would navigate to the oldest post until we reach the last one.</li>
</ul>
<p>The buttons:</p>
<ul>
<li><strong>Message</strong> - Instant message to the connection without leaving the feed.</li>
<li><strong>Share</strong> - Sharing on social media.</li>
</ul>
<h3 id="heading-new-feature-tinder-experiences"><strong>New Feature: Tinder Experiences</strong></h3>
<p>Most people see Tinder as a dating App. But it’s much more, the experience can be more powerful. I implemented a new feature called “Tinder Experiences”, a way to take dates and meetings with friends to another level.</p>
<p>Discover places of the city where you are, meet people who share your passions, open up to new experiences.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/ncJhBnZYUrfBLS93oErDtCaFJoFkxDejApOv" alt="Image" width="320" height="568" loading="lazy"></p>
<h3 id="heading-status"><strong>Status</strong></h3>
<p><img src="https://cdn-media-1.freecodecamp.org/images/ZjRZ8tTmS3yAnUrY-uobMUgHz5nnEQcyekke" alt="Image" width="517" height="211" loading="lazy"></p>
<p>There are a few other things that can be implemented to improve the user experience a lot. One of them is to know the status of the user. So in a simple and minimalistic way I inserted the staus of users within the messages. This improvement allows us to know if a user is online, offline or inactive.</p>
<p>Another possible feature is to Filter users by when they were last active. This would allow a user to set a range in your “Discovery Preferences”, For example, display users that have been active within the last 30 minutes.</p>
<h3 id="heading-conclusion"><strong>Conclusion</strong></h3>
<p>Going into this project, I knew that this would be the perfect opportunity for me to improve my design skills and push myself creatively. I’m studying computer engineering and at the same time studying design alone at home as I want to pursue a career in product design. I figured out that the best way for me to learn would be to just throw myself into a project.</p>
<p>So for me this is not the end of redesigning a mobile App and only the beginning.</p>
<p>Thanks for reading. I hope you liked it. ?</p>
<p>I would appreciate your feedback.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to define a Minimum Viable Product ]]>
                </title>
                <description>
                    <![CDATA[ By George Krasadakis Moving from a concept to a properly defined MVP The Minimum Viable Product, although a properly defined term, means different things to different people. In fact, it is one of the most misused terms in the technology domain. It ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/is-it-an-mvp-really-6657db743544/</link>
                <guid isPermaLink="false">66c3588b39357f94469765b6</guid>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ innovation ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Product Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ product development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Sat, 10 Jun 2017 00:04:30 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*c7D3AVflWXNTNe-u_5Yfwg.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By George Krasadakis</p>
<h4 id="heading-moving-from-a-concept-to-a-properly-defined-mvp">Moving from a concept to a properly defined MVP</h4>
<p><img src="https://cdn-media-1.freecodecamp.org/images/7nI2PEezl4vyuLb38mH8pQPiHpPfDFd0cmpb" alt="Image" width="800" height="533" loading="lazy"></p>
<p>The <strong>Minimum Viable Product</strong>, although a properly defined term, means different things to different people. In fact, it is one of the most misused terms in the technology domain. It is often poorly referenced to describe a <strong>prototype</strong>, a <strong>demo</strong> or even <strong>the first deliverable</strong> of a project.</p>
<blockquote>
<p>“In product development, the minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future development” — <a target="_blank" href="https://en.wikipedia.org/wiki/Minimum_viable_product">Minimum_viable_product</a></p>
</blockquote>
<h3 id="heading-defining-the-mvp">Defining the MVP</h3>
<p>Assuming you have this great idea, you need a method to start defining the <strong>product</strong><em>.</em> More specifically, the subset of the product features that can serve your objectives with the <strong>minimum cost</strong> and <strong>risk</strong>. The following explains how to get from an idea to an MVP.</p>
<h3 id="heading-identify-your-users"><strong>Identify your users</strong></h3>
<p><strong>Set the context</strong> — think of the problem, the situation and the opportunity<em>.</em> Think of what is already available in the market dealing with the same problem. Identify and name the types of users involved and how they interact. Document your <strong>users</strong>, their <strong>needs</strong>, the <strong>problems</strong> they are experiencing, their <strong>expectations</strong>, and the <strong>best-possible experience</strong> they could have in your context.</p>
<p>The <strong>Minimum</strong> in the <strong>MVP</strong> implies that you already have the big picture, you have <strong>the product vision!</strong> A common mistake is when the team ‘easily’ identifies a set of ‘obvious’ use cases as the MVP — without a clear product vision and the big picture.</p>
<blockquote>
<p><strong>Check also: <a target="_blank" href="https://uxdesign.cc/how-and-why-to-write-great-user-stories-f5a110668246">How (and why) to write great User Stories</a></strong></p>
</blockquote>
<h3 id="heading-think-as-a-user">Think as a user</h3>
<p>Having the big picture you need to apply a process to identify the smallest subset of functionality that serves a very specific goal. The goal is <strong>to satisfy your users.</strong> You also want to enable critical user insights and feedback. This feedback can improve the next iteration in your product development plan.</p>
<p>The big picture is the super-set of user stories across all the classes of users identified. It’s a good idea to create a large set of <strong>epic stories.</strong> Then iterate across all identified users and try to define user stories covering their needs and expected benefit/ gains.</p>
<p>Use a compact format as the one proposed in Scrum: <strong>as a  I want to  so that &lt;des</strong>cribe the gain&gt;. You don’t have to worry about priorities at this stage. A good idea would be to name each story/ assign a compact title for easier classification and organization.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/aMQWj9seF26AOzCuL4xNmHMEyejUUgcVSiou" alt="Image" width="800" height="779" loading="lazy"></p>
<p>As soon as you have your product feature super-set, you need to review it to ensure that it defines a product (the <strong>P</strong> of the <strong>MVP</strong>). Search for <strong>continuity</strong>, <strong>homogeneity</strong> and <strong>complementarity</strong> among your user stories.</p>
<p>As a result of this process, you may realize that more than one of the related products are referenced in your backlog and need to be separated. Or you may realize that there are significant gaps that need to be filled.</p>
<p>Again, <strong>think as a user.</strong> Use empathy to identify interactions, scenarios and stories that need to be included.</p>
<p>You need to also <strong>gather feedback</strong> so you can try to <strong>validate your stories</strong> and the product. You can gather feedback through expert advice, user interviews, formal or informal surveys or public domain references (for instance any reliable public domain statistics that can help you test your assumptions).</p>
<h3 id="heading-think-as-an-entrepreneur">Think as an entrepreneur</h3>
<p>Thinking as a user is great. You can be creative and forget, for a moment, about real-world challenges such as technical and financial constraints. Your objective is to compile the product super-set of user stories to satisfy — or to even to excite — all the different types of your users.</p>
<p>Now it’s time to think as an entrepreneur. You need to start considering and documenting implementation costs, priorities, strategic advantages and differentiators against competition.</p>
<p>You need to estimate the development cost of each user story. You also have to quantify the <strong>expected value for the user</strong> along with the expected impact on the business: <strong>your business</strong>.</p>
<p>The logic to identify the <strong>right minimum subset</strong> can be complex — requiring estimates of all the above at the user-story level. For each user story (or Epic) you need to have at least the following:</p>
<ol>
<li><p><strong>The complexity / cost associated / feasibility</strong></p>
</li>
<li><p><strong>The expected value for the user</strong></p>
</li>
</ol>
<p>Estimates of the above dimensions could be on a numerical or ordinal scale. As soon as you have those estimations you can then rank your stories. Also plot them in a simple chart against <strong>complexity</strong> and <strong>expected value for the user</strong>.</p>
<blockquote>
<p><strong>Check also: <a target="_blank" href="https://medium.com/@gkrasadakis/the-successful-product-manager-5f3cb3aacb51">How to become a great Product Manager</a></strong></p>
</blockquote>
<h3 id="heading-prioritize-rank-set-the-focus">Prioritize, Rank, Set the focus</h3>
<p>At this point you can start prioritizing <strong>high-value, low-cost stories</strong> over lower value<em>,</em> costly ones. Be aware, though, of those natural, strong dependencies between product features.</p>
<p>In many cases there are technical or procedural dependencies requiring certain features to be implemented first, although their cost is high and the expected user value low. These dependencies need to be identified and possibly visualized in the user stories mapping.</p>
<p>Having the above for each of the features (user stories) of your product allows you to <strong>define your MVP</strong> as:</p>
<blockquote>
<p>“… the minimum set of features (stories) ensuring a good-enough product experience driving increased user engagement that can secure the next product development cycle”</p>
</blockquote>
<p>You can sort your entire product backlog by <strong>dependency sequence</strong> (start with foundation). Then by the <strong>value for the user</strong> in descending order. Then by <strong>complexity</strong> and <strong>feasibility</strong> in ascending.</p>
<p>You can also combine budget constraints, team’s velocity and go-to-market strategy makes it ‘easy’ to identify the red-line of your to-be-proved Viable MP.</p>
<h3 id="heading-reality-check">Reality check</h3>
<p>In reality though, this will be just <strong>a draft definition of an MVP</strong>. What is needed in an ideal scenario is feedback and validation of the features by real users via prototyping, focus groups, market research, competition analysis and related methods.</p>
<p>The more input from real users, the more confident you can be that your product concept has all it takes to become <strong>Viable</strong> (which also assumes a great execution/ implementation/ launch).</p>
<p>Check out <a target="_blank" href="https://medium.freecodecamp.org/is-it-a-prototype-or-an-mvp-well-its-a-proof-of-concept-f8df5bb8940a">this other article</a> on how to define an MVP (among other things).</p>
<p>Thanks for reading!</p>
<p><em>Images: pixabay</em></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Your Best Work Will Be Invisible ]]>
                </title>
                <description>
                    <![CDATA[ By Tanner Christensen As a designer, your best work is going to always be invisible. It’ll be invisible because the best part of what you do will be everything that takes place behind the scenes, where nobody will ever see it. Knowing this is importa... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/your-best-work-will-be-invisible-a7896c28d3eb/</link>
                <guid isPermaLink="false">66c367e40cede4e9b1329d79</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Life lessons ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Product Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ UX ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Mon, 14 Nov 2016 21:52:11 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*aV7cdUbRozTk_81CQd6ogg.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Tanner Christensen</p>
<p>As a designer, your best work is going to always be invisible. It’ll be invisible because the best part of what you do will be everything that takes place behind the scenes, where nobody will ever see it.</p>
<p>Knowing this is important, as it can help to unlock your full potential and help you focus on what matters most when it comes to product design.</p>
<p>When first moving into a product design role, the novice tends to conflate the work of product design with that of a more traditional design role. They want to be recognized for what’s on the face of what they build, so they focus on making it attractive or flashy. Or they want to make something beautiful without dedicating much time to building empathy, or deeply understanding the problems, or developing or identifying a clear design system.</p>
<p>Of course beautiful designs, and well-crafted experiences, matter quite a lot in product design. But <strong>the actual pixels behind a design are only as good as the reasoning behind them.</strong></p>
<p>Consider the fact that almost anyone today can download tools to design and create products. All it takes is a laptop and an internet connection. And once you have the tools, you can use online tutorials to recreate what you find inspirational out in the wild.</p>
<p>Having access to complex tools is no longer a separator between the amateurs and the pros. A formal education is no longer a requirement to do quality design work. What matters now isn’t your ability to even use design tools well, or to know the lingo of the trade, or even to have a flashy portfolio. <strong>The most important thing is everything that takes place behind the scenes.</strong></p>
<p>Your approach to research and having access to resources for conducting it. Iteration, testing, and gaining perspective. The exploration of edge cases, and the decision making around each of them. The ability to <a target="_blank" href="https://medium.freecodecamp.com/the-big-problem-with-design-inspiration-cf98dd2886ce#.tvjx24owp">deeply understand what problems are being solved</a> and the trade-offs that must be made to build a usable, and beautifully designed, end result.</p>
<p>In other words: <a target="_blank" href="https://medium.com/facebook-design/peek-inside-a-facebook-design-critique-c4833efda26e#.kuq6h4o9k">designing with intentionality</a>.</p>
<p>Nobody will ever see the research or the deliberate decisions made around trade-offs. Nobody will see the entire system you design, laid out bare on your computer or in your notebook. Nobody will ever see your ideas for personas, or the results from the research you do, or the hours you’ve invested in iterating on a single attribute of your design. Nobody will go through past conversations you’ve had with peers, co-workers, and potential users about your design. But <strong>these things will absolutely be reflected in whatever it is you create.</strong></p>
<p>If we look at some of the most famous paintings in history we can see a very real interpretation of what I’m describing here. Using X-ray techniques we can see layer upon layer of old paint hidden beneath masterpieces like Picasso’s <a target="_blank" href="http://www.bbc.com/news/entertainment-arts-27884323">The Blue Room</a>, Van Gogh’s <a target="_blank" href="https://www.theguardian.com/artanddesign/2008/jul/31/2">Patch of Grass</a>, and even (highly debated) da Vinci’s <a target="_blank" href="http://www.bbc.com/news/entertainment-arts-35031997">the Mona Lisa</a>.</p>
<p>Beneath each work of art lies another, often rougher or incomplete work of art, the product the artist slaved away on before smothering it in even more paint, to get the details right. Often we can see not just one, but several paintings buried beneath the final work.</p>
<p>We can see this intentionality in modern design guidelines too. Like Apple’s <a target="_blank" href="https://developer.apple.com/ios/human-interface-guidelines/">Human Interface Guidelines</a> or Google’s <a target="_blank" href="https://material.google.com/">Material Design</a>. Each design system contains a vast library of design principles and recommendations, some of which are so nuanced it will make any non-designer’s head spin. Just look at <a target="_blank" href="https://material.google.com/style/color.html#color-color-palette">Material Design’s color page</a> for an example of the thinking that has gone into color alone; the page is massive and rich with detail.</p>
<p>To put this another way: <strong>in anything we do, the gift we give others is investing our own limited time into the work.</strong></p>
<p>Trying to find shortcuts to get to a final design, or focusing on only one attribute of the work, or tabling research or iteration just to get something out the door — these things never help the end result of the work you’ll do. They’ll merely hinder it.</p>
<p><strong>What can often make a product experience so impactful is the work those who created put into it. To build something in such a thoughtful way that makes anyone oblivious to the fact.</strong></p>
<p>To quote the famous entertainer Teller, of Penn and Teller:</p>
<blockquote>
<p><em>“Sometimes magic is just someone spending more time on something than anyone else might reasonably expect.”</em></p>
</blockquote>
<p><em>— — — — — —</em><br><em><a target="_blank" href="http://tannerc.com"><strong>Tanner Christensen</strong></a></em> is a self-taught product designer at Facebook, author of <a target="_blank" href="http://creativitychallengebook.com/"><strong>The Creativity Challenge</strong></a><em>, founder of</em> <a target="_blank" href="http://creativesomething.net/"><strong>Creative Something</strong></a><em>, developer of some of the</em> <a target="_blank" href="https://itunes.apple.com/us/developer/tanner-christensen/id421646590"><strong>top creativity apps</strong></a><em>, blogger on</em> <a target="_blank" href="https://medium.com/@tannerc"><strong>Medium</strong></a><em>, former writer for Adobe’s</em> <a target="_blank" href="http://99u.com/"><strong>99u</strong></a> <em>and contributing author for</em> <a target="_blank" href="http://www.inc.com/author/tanner-christensen"><strong>Inc</strong></a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Identity Crisis: Am I a Developer or Designer? ]]>
                </title>
                <description>
                    <![CDATA[ By James Y Rauhut I used to be confused about whether I should introduce myself as a front-end developer or as a designer. I would switch back and forth based on the situation and whom I was talking to. Applying to a design studio? I better call myse... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/identity-crisis-am-i-a-developer-or-designer-ee513443e914/</link>
                <guid isPermaLink="false">66d460fa9208fb118cc6d01b</guid>
                
                    <category>
                        <![CDATA[ careers ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Fri, 02 Sep 2016 13:53:04 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*4aHLiemTXkvAQXBj0exXxw.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By James Y Rauhut</p>
<p>I used to be confused about whether I should introduce myself as a front-end developer or as a designer. I would switch back and forth based on the situation and whom I was talking to.</p>
<p>Applying to a design studio? I better call myself a web designer. Being interviewed by a software architect? “Hi, I am a web developer!”</p>
<p>Then I found my dream job at a large design studio:</p>
<blockquote>
<p>Me: “So would I be a front end developer or a designer?”</p>
<p>Recruiter: “Both! Everyone here is a designer, but your discipline would be front-end development.”</p>
<p>Me: “Crap. I’d better take a design class then.”</p>
<p>Semi-Pro Tip #1: Do not mention that you have never taken a design class to a design studio recruiter.</p>
</blockquote>
<h3 id="heading-feeling-intimidated-by-designers">Feeling intimidated by designers</h3>
<p>So I immediately registered for my first design class to take during my final semester of college. The class helped me grasp some basic user experience concepts, but I still ended up reporting to my new job at IBM with a major inferiority complex.</p>
<p>I entered the role surrounded by research, visual, and UX extraordinaries. They were all focused on user pain points.</p>
<p>Contrast this with me. As a developer, I was conditioned to just ask which features I needed to implement, then decide how best to do that.</p>
<p>Anxiety started to overtake me. I started to think that maybe I had made the wrong career choice.</p>
<p>Maybe I should have joined a department of strictly developers.</p>
<p>Maybe I should have joined a studio that hands off designs to developers without expecting their feedback in return.</p>
<p>Or maybe I should have just given freelancing a shot for a year before joining a large multidisciplinary team.</p>
<p>On the job, this anxiety resulted in shyness.</p>
<blockquote>
<p>Semi-Pro Tip #2: The f-word in design is “feature.” There is no product correlation between the amount of features and the quality of the user’s experience.</p>
</blockquote>
<h3 id="heading-learning-to-walk-both-worlds">Learning to walk both worlds</h3>
<p>Luckily, IBM Design had a three month entry-level design bootcamp, which taught me that I could be both a developer and designer. So I soaked up skills from my peers and absorbed as much of their expertise as possible.</p>
<p>The program forced me to take part in activities that helped me understand our users. That’s when I fell in love with the process of writing user stories to document their struggles, then trying to solve them using my development skills.</p>
<p>One key takeaway was that our team became more successful the more time we spent together. There was always a temptation to split up to work alone, then come back together. But we had to fight that.</p>
<p>Pair programming with a visual designer helped me greatly. It taught me more visual principles than reading any intro to UI patterns book I could find. At the same time, the visual designer — who had previous worked in print — could learn principles of responsive design quickly from me.</p>
<p>Throughout the camp, I learned the true power of multidisciplinary teams. We taught each other about research, user experience, visual design, and front-end development — all in a natural, conversational way.</p>
<h3 id="heading-teaching-developers-how-to-think-like-designers">Teaching developers how to think like designers</h3>
<p>A couple of months after graduating from the design bootcamp, I was given the opportunity to attend a college hackathon as a sponsor.</p>
<p>The event was filled with developers who wanted to make epic solutions for various problems. I thought I was there to help participants debug their web apps, but I ended up helping a lot more with design.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/KswoDa-jgca1c2M8SOlQmIutQF01WR6oVD6U" alt="Image" width="800" height="475" loading="lazy">
_Check out how simple — but crazy — a hill can be at the [Hill Generator](http://seejamescode.github.io/hill-generator/" rel="noopener" target="<em>blank" title=").</em></p>
<p>First, a guy came over to show off how he had already used an API to visualize some data. After congratulating him on this technical feat, I asked him what his user goal was. He admitted that he had no idea. So we started writing hills based on <a target="_blank" href="http://www.ibm.com/design/thinking/keys/hills/">IBM’s Design Thinking docs</a>.</p>
<p>Next, another developer wanted help with their color choices. A year ago, I would have been the absolute worst person to ask for help with this. But I didn’t flinch. I asked him what he wanted the web app colors to communicate.</p>
<blockquote>
<p>Dev: “What do you mean? I just know that our color choices are ugly.”</p>
<p>Me: “Ah, you are talking about styling. Your colors can do more than just make things look pretty. Why would a user not want to use your app?”</p>
<p>Dev: “Well it is a money management app. I don’t know if people will trust us to handle their money.”</p>
<p>Me: “So let’s see if any research has been conducted about colors that resonate with trust and money!”</p>
</blockquote>
<p>With the right question in hand, we were well on our way to researching and selecting the right colors.</p>
<p>The second day of the hackathon, I talked with a team was killing it and getting better with every iteration. The team already had a complete “cupcake” (full experience, but minimal version) of an app. They knew it was time to gather feedback, but did not know how to go about doing this.</p>
<p>This turned into the perfect chance for me to walk them thru their first user testing session. The team learned to provide simple goals to the user, one at a time, then ask the user speak out loud their thoughts during every interaction and every screen.</p>
<blockquote>
<p>Semi-Pro Tip #3: If your user is not vocalizing their thoughts to you, how will you know what they’re thinking?</p>
</blockquote>
<h3 id="heading-so-what-am-i-then">So what am I, then?</h3>
<p><img src="https://cdn-media-1.freecodecamp.org/images/jH9mVblAXhksDVHmTarA0n8nUsShfEtBCA6S" alt="Image" width="800" height="529" loading="lazy">
<em>Our multidisciplinary team at the design bootcamp may have sucked at hi-fives. But we learned a lot of other stuff from each other.</em></p>
<p>Of course, I was still able to stretch my front-end developer muscles at the hackathon. There were always plenty of JavaScript and CSS bugs to help out with. I love doing that work. After all, web development is what got me started down my career path. (Actually it was project management, but let’s not go there.)</p>
<p>So who am I? Thanks to my studio’s design training , I now feel qualified to say I’m a designer. But doing this does not marginalize my role as a developer. Instead, I am now able to touch a product’s growth from the first research interview all the way to the production code we ultimately release.</p>
<p>So what are you? Are you a designer with a background in data analysis and/or visualization? Are you a designer who understands product strategy?</p>
<p>I encourage you to engage with full-time designers in your organization. Offer to share your strengths with them. Then stand back and learn from theirs.</p>
<p><em>For further information: Feel free to contact me by the comments, <a target="_blank" href="mailto:james@seejamescode.com">email</a>, or <a target="_blank" href="https://twitter.com/seejamescode">@seejamescode</a>. I work in ATX for IBM Design and always love conversation with the web design community. Also be sure to share your own career identity crisis in the comments!</em></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How Product Design Decisions are Made ]]>
                </title>
                <description>
                    <![CDATA[ By Tanner Christensen Recently in a Facebook group dedicated to designers, known as Designers Guild, a young design student named Marina Candela asked why many modern designs tend to feel so terrible or “backwards” looking, like digressions. Specific... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-design-decisions-are-made-c18201c052d1/</link>
                <guid isPermaLink="false">66c34cf8a1d481faeda49b72</guid>
                
                    <category>
                        <![CDATA[ business ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ design thinking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ user experience ]]>
                    </category>
                
                    <category>
                        <![CDATA[ UX ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Thu, 28 Apr 2016 14:05:43 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*UWZtnL4kaYctsuL9N9Dkxw.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Tanner Christensen</p>
<p>Recently in a Facebook group dedicated to designers, known as <a target="_blank" href="https://www.facebook.com/groups/designguild/permalink/570148766495733/?comment_id=570162419827701&amp;reply_comment_id=570973443079932&amp;ref=notif&amp;notif_t=group_comment&amp;notif_id=1461980120073616">Designers Guild</a>, a young design student named Marina Candela asked why many modern designs tend to feel so terrible or “backwards” looking, like digressions. Specifically designs from large tech companies like Uber, Apple, or Facebook.</p>
<p>You don’t have to <a target="_blank" href="http://fortune.com/2016/02/11/uber-new-logo-jpmorgan/">read all the latest headlines</a> or browse the countless <a target="_blank" href="https://dribbble.com/search?q=facebook+redesign">unsolicited redesigns on Dribbble</a> to understand what this question entails. For many people, both designers and not, the gut reaction to seeing a new design is typically: that is <em>stupid</em>.</p>
<p>The problem with this is that design is not a process of beautifying things. Designers don’t get paid to make things necessarily look nice. Yes craft is certainly part of the job, but it’s not <em>the</em> job.</p>
<p>There’s a lot of work going on behind the scenes when design decisions are made. More than you might imagine.</p>
<p>This is particularly true for companies like Uber and Facebook, or really any large company today. Design at these companies entails everything from research, experimentation, iteration, lab or small group testing, and real-world testing. Each of these steps can take anywhere from a few weeks to months, with the time invested in researching, conceptualizing, and testing, reflecting the potential impact of the design decision. The larger the design task, the longer it takes to move on it.</p>
<p>It’s common for amateur designers and the average Jane or Joe to look at design projects like Uber’s logo or a new design for Instagram or Facebook, and respond solely with their gut. “This looks worse than before! How can anyone understand this?! What were they thinking? This is terribly designed.”</p>
<p>In reality, these are vastly more surface level responses then what design intends to deal with.</p>
<p>The purpose of the design isn’t always to make something look good, or even better than before. What these design processes are about is <em>solving a problem</em>.</p>
<p><strong>Good design solves problems.</strong></p>
<p>Sometimes the problem is that customers view your brand as a lower-scale version than what they are paying for, which dilutes the value of the company. Other times the problem is that the platform you’ve created is itself outweighing the content it produces or hosts. Or that a primary feature has become hidden, or an influx of new features has crowded the interface, or what you and your team thought made reasonable sense is immensely confusing for people who use the product out in the real world.</p>
<p>Other times still there are issues the common designer may never be aware of: scaling a website to suit the needs of almost everyone on the earth, for example. That’s a <em>really</em> hard problem to solve, and an equally hard problem for most people to wrap their heads around.</p>
<p>My own experience at Facebook is a good example of this. Most designers will say that Facebook is extremely ugly (and as a designer myself, I tend to agree). Yet Facebook doesn’t have to look phenomenal to <em>work</em> well. And this is what I’m most proud of being a Facebook product designer: the problem of scaling a product for the entire world to use is really, really hard, and yet Facebook is doing it fairly well.</p>
<p>Consider a few of the problems a designer working on Facebook may encounter: Every word, every button, needs to be translated to hundreds of languages, which creates issues with layout spacing among other major hurdles. Content reverses sides of the screen depending on which part of the world you’re in (left-to-right text VS right-to-left text). In some parts of the world certain types of content are simply outlawed, and placeholder or legalese must be put in its place dynamically. Some people use Facebook on their $700 iPhone with unlimited data plans while others use it on a $5 flip phone and only 1mb of data to spare each month. Some people have an internet connection that is 1,000 times slower than others, which means things like images and app size really matter</p>
<p>The best designers consider not only the objective of a project (like <a target="_blank" href="http://newsroom.fb.com/news/2016/04/introducing-new-ways-to-create-share-and-discover-live-video-on-facebook/">the ability to live stream</a> from the app) but also the constraints they must work within and the issues they must work around. Not only that, but much of the design process we encounter day-to-day should be about determining whether or not the problem being solved is the <em>right problem to solve to begin with.</em> And if it’s not: how do we go about identifying the real problems?</p>
<p>So while it’s easy to look at a design and think it’s ugly, or lame, or a digression, the reality is that there are many, many, many, many decisions being made and considerations taking place behind the scenes which have led to the latest design.</p>
<p>And if the team behind the design has done their work well, they’ve tested and experimented and <em>validated</em> their work enough to push it to the place where people like you or other designers can finally get a look at it.</p>
<p>That doesn’t mean the design is done, but it does mean that it’s “done enough” to satisfy any major concerns.</p>
<p>One thing you can do to better equip yourself to evaluate design work is to step back and think of all the scenarios the person(s) responsible are attempting to address. I outlined a few we encounter at Facebook above, but I’m sure you can come up with many more of your own.</p>
<p>Before judging a design you should ask questions like:</p>
<ul>
<li>What problem is this attempting to solve?</li>
<li>Who is it solving it for? If not me, then who?</li>
<li>What problems or scenarios might <em>those</em> people encounter that this design is considering?</li>
<li>What are the limitations being designed for?</li>
<li>What about constraints?</li>
</ul>
<p>Lastly, as additional food for thought, consider the fact that people simply don’t like change. Change presents challenges we mostly want to do without. But change is inevitable, and while new designs can feel strange or unfriendly at first, we inevitably grow into them because… well, time works that way.</p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
