Design Thinking for Rubyists

by Louisa Barrett

In the video "Design Thinking for Rubyists," Louisa Barrett discusses the concept of design thinking and its importance for developers, emphasizing that creativity is accessible to everyone. At RubyConf 2015, Barrett clarifies that design goes beyond aesthetic elements like typography and color choices; it fundamentally involves solving problems and enhancing user engagement through thoughtful design practices.

Key points discussed include:
- Broader Definition of Design: Design is about understanding user needs and creating effective solutions within specific constraints.
- Importance of User-Centric Design: Barrett shares an anecdote about a project where technical complexity overshadowed user-friendly design, illustrating how crucial it is to consider how users will interact with the product.
- Value in Creativity and Problem Solving: Developers should recognize their capacity to be creative, which is essential for developing products that stand out in a competitive market.
- The Process of Design Thinking: Barrett explains the design thinking process, which includes empathy (understanding users), definition (clearly stating the problem), ideation (brainstorming ideas), prototyping (creating preliminary models), and testing (validating concepts with users).
- Overcoming Barriers to Embracing Design: Emphasizes that many developers think they lack creativity due to technical backgrounds or previous experiences. Changing this mindset is vital for effective design processes.
- Comparison with Development Practices: Barrett draws parallels between design thinking steps and common software development practices like writing tests and code reviews, reinforcing the importance of user feedback in both fields.

In conclusion, embracing design thinking is essential for developers. It empowers them to produce products that not only function well but also resonate with users, ultimately enhancing satisfaction and engagement. The video encourages developers to build creative confidence and prioritize user needs, leading to more effective and appealing software solutions.

00:00:14.980 Hello everyone, I'm Louisa, you can find me on Twitter at @weCD. I'm from Colorado, so of course, I have to use mountain pictures everywhere I can. I'm a developer and designer at Hot Code Works, a small consultancy based in Longmont, Colorado, and I'm also a chapter leader for Girl Develop It in Boulder. Before we get started, I want to quickly run through how to set up my slides. As you may know, we're in Texas right now, which is famous for its cows. Cows need cowboys, and cowboys ride horses, which are a lot like ponies. I included a lot of ponies in my slide deck. Now that that's taken care of, we can go ahead and get started talking about design.

00:00:39.590 Unlike the popular perception of what design means, it is actually much bigger than the elements that come together to form what we typically associate with visual design, such as typography, color palettes, and layout. Designers often get a bad rap for being overly sentimental about these details, and despite their slightly unhealthy fixation on letterforms, these elements really are just details of a designer's job, not the full breadth of what design truly is. At its core, design requires the ability to take a set of restrictions framing a problem and find the best solution within those limitations to maximize impact, usability, and engagement with users. Design is fundamentally about people and how the things they need actually work.

00:01:49.399 Has anyone here ever built something that was super cool but turned out to be quite challenging for the people you shared it with? I know I have. Maybe your app was so challenging to use that people simply didn’t use it because they didn’t understand something that made perfect sense to you. That’s a frustrating experience, right? It’s not fun to have something you’ve put a lot of effort into not truly appreciated or understood. But there’s a silver lining to that experience because it’s actually a great thing to have gone through. Seeing firsthand what happens when someone doesn't understand or relate to your thought process ultimately means you’ve taken the first step into the world of design.

00:02:36.200 Design is a glorious place where you get to build cool stuff by figuring out how to create things that are relevant and useful to others. It’s clear that the code you write is important when building software, but design is a critical component as well. This is because products offering unique and effective solutions to human problems that are intuitive for users to understand and relate to truly stand out from their competitors. How many times have you heard something described as 'it’s like Twitter for cats' or 'it’s Uber for dog walking'? This happens because coming up with original ideas is really hard, and it’s often easier to take established successful products, like Twitter and Uber, as a starting point and tweak them just enough to make them your own. While this is not always a bad approach, it does mean that if you can come up with something unexpected and better than those established models—solving users' problems in new ways—you’ll really get people's attention. Creative design solutions are a major deciding factor in those efforts.

00:03:50.269 Since design and creative thinking can significantly differentiate you and your work from the crowd, how many of you consider yourselves to be creative? Okay, that’s awesome! Now, how many of you think of yourselves as designers? That's good too. I really want to help everyone in this room feel they have the ability to be creative, to participate in the design process, and to make positive design contributions to their teams and projects. On that note, I think it’s a good time for a story. I went through one of Jeff Kazimer's early developer training programs before he started Touring Soft School, an early adopter of design. I have a distinct memory of him telling our class that we were not allowed to use Bootstrap to build out the front ends of our projects that we'd present at our demo night.

00:04:30.560 Why? Because, in his words, using Bootstrap would make it too easy to win. He told us this right before the demo, and it was met with a giant collective groan throughout the class. We hadn’t focused on front-end design. Bootstrap would have been a time-saving resource that could have made our projects look acceptable while we were focusing on functionality. All of a sudden, it was taken away because it made things too easy to win. Reflect on that for a moment; we spent months learning to code in Java or Ruby, building Greenfield Rails apps, and showing them to potential employers. What was Jeff worried about? A tool that gives you just a little help with basic visual design. We were building complex back-end systems which we wanted to show off, so why was getting help to polish the user-facing part of the app such a concern for him?

00:06:07.190 He was rightly concerned that teams might utilize a clean-looking user-facing product to compensate for poor back-end code. He feared that teams completing only minimum requirements would sway the crowd with a slick front-end, while those who went above and beyond with back-end functionalities but had a less usable front-end wouldn’t receive the community’s deserved attention. I love this story because it emphasizes something that developers, especially those who spend most of their time writing non-user-facing code, can easily overlook: users don’t care about how you built your product; they only care if it works. Their first impression counts for a lot. The saying 'don’t judge a book by its cover' will be ignored by your user; if your product looks good, they’re more likely to trust it, and they really don’t care about the underlying code.

00:07:34.199 Before these angry ponies run me out of San Antonio with pitchforks and fire for saying that code doesn’t matter, let me clarify: obviously, the technology stack you use is crucial for your product's success. It’s fortunate that we work in an industry with unlimited potential for what we can create, and we have the opportunity to build cool technology 24/7. However, this saturation of digital tools poses a double-edged sword. We live and work during a time of rapid technological advancement, leading users to develop high expectations. As developers, we continuously chase the next best tool for our projects. Today, technology is pervasive, and it's merely another aspect of how users navigate their lives. It has become so ubiquitous that users may take it for granted unless their experience is exceptional.

00:08:44.360 Thus, if you’ve done your job well enough, no one will notice your work. Consider how digital tools are everywhere, being used for everything. Users are expected to trust our products, sharing significant amounts of their information—email addresses, home addresses, social security numbers, and bank details—that’s a big ask! They should expect a lot from us in return. Users deserve digital products tailored to suit their needs, which they feel good about using. And again, they don’t care how you built it. What matters to them is whether the product solves their problems and provides enough value to justify their time and investment. They care about their feelings while using it. Do they feel inadequate, frustrated, or capable while utilizing the product?

00:09:55.690 This all boils down to the fact that prioritizing design and creative solutions focused on user needs is far beyond mere aesthetics. It is a business decision that can have a tangible impact on your bottom line, influencing whether or not people use your product. Think back to Jeff’s restrictions regarding Bootstrap and our student project for demo night. Good design focuses on and delivers what users truly need, and this does make it easier to win. When building software is your business, this is precisely what you want. The key takeaways here are that your users have high expectations, understanding those needs is critical, technology evolves rapidly, and the ability to generate new ideas will never lose its value.

00:11:04.899 Knowing how to leverage design as a tool to understand your users and shape your product can yield significant benefits for developers. However, I’ve encountered many developers who believe they can’t design or aren’t creative. This often stems from not enjoying crafty work or thinking design would take valuable time away from coding, leading to the attitude that design simply isn’t part of their job. This mindset always gives me pause because design is actually fascinating. Developers can be incredibly creative individuals. As developers, you hold a distinct advantage in learning about design due to your comprehension of the complex technical aspects involved. Gaining a deeper understanding of the human side of projects is well worth the effort. This unique combination of technical knowledge and creative thinking provides you with the power to develop amazing ideas and products, resulting in happy users and successful organizations.

00:12:17.330 I love design; I am a designer and a developer, but I identify as a designer first. A significant reason I love it is the depth of thought and process that goes into a design project. The broader concepts behind why and how a product came to be, whether it’s a business product or a piece of art, deeply interest me. In my personal design philosophy, I view this holistic thinking as concept-driven design. The implementation and details should grow from a core concept based on the user's needs, guiding the approach to the solutions we create.

00:13:37.749 This way of thinking originates from my undergraduate experience at art school. In our freshman program, every student went through a foundation program that exposed us to a wide range of techniques, materials, and processes from various departments. We learned sculpture, painting, drawing, and other fundamental skills. This foundation provided a solid starting point for our educational and professional journeys. Importantly, it taught us how to think about problems, assuming no one mastered that ability. My studio professors often told me that my work lacked depth or was not conceptual enough, but they struggled to clarify what that really meant, which drove me crazy. I could sense there was a frustrating, intangible gap preventing me from achieving the quality of work I expected of myself.

00:14:55.639 By the end of that year, I took a short workshop with a professor who broke down conceptual thinking into steps I could understand and apply. Suddenly, all the previous conversations made sense, and I grasped their meaning. It took practice before I could consistently produce concept-first work, but it was a major turning point for me; understanding this helped me refine my ideas and produce better quality work. That teacher taught me how to absorb and apply the feedback I had received from my other professors throughout the year. Fast forward many years to my current position as a developer. My official title may be developer, but recent project needs have allowed me to spend some time focusing on design again.

00:16:06.990 I had previously worked as a designer until I shifted my focus to coding in 2013. Now, I’m having fun getting back into design and discovering new resources and inspiration. During this exploration period at work, I learned about a design methodology that not only supports my design approach but also expands it into a repeatable human-centered technique that helps those in traditionally non-creative careers leverage the power of human-centered design in their work and organizations. This method teaches you how to consistently reach concepts—it's not new but highly relevant. It mirrors what my college professor did for me: teaching a way to think and tackle human-focused problems through actionable steps.

00:17:35.230 This process helps unlock the creative innovator in everyone. One foundational construct of design thinking is the idea of building what David Kelley, founder of the d.school and IDEO, calls creative confidence in individuals who may not see themselves as traditionally creative. These individuals often say, 'I’m not an artist, I can’t draw, I’m not a designer,' or similar statements that many developers express. This process helps those practitioners change how they perceive themselves and their creative abilities. The mindset shift regarding your capabilities is crucial when learning to embrace design thinking.

00:18:52.290 It aligns with Albert Bandura’s work, a renowned Stanford psychologist known for his research on self-efficacy—the belief in one’s capabilities to organize and execute the actions required to manage potential situations. This belief influences how individuals perceive themselves and their creativity. It contrasts with the notion that success is dictated by raw intelligence; instead, it emphasizes growth mindsets—the belief that challenging things are still learnable through efforts and perseverance.

00:20:18.770 Design thinking and developing creative confidence are about approaching problems with the understanding that solutions exist, and that you can find at least one (if not more). Rather than allowing setbacks to derail you, you can use them as evidence against non-creativity and view them as learning opportunities to fine-tune your work. I've witnessed both sides of the creative and technical divide, with people on both fronts using similar reasons to dismiss their suitability for roles traditionally associated with the other. I don’t believe that is inescapable.

00:21:29.700 Embracing design thinking while considering your user will strengthen your skills as a valuable asset to any team. This approach allows you to make smarter business decisions and reduce risk by deepening your understanding behind your product. If that understanding isn’t obtained, you’ll never know whether your product is relevant to the market and the people you want to reach. The crucial takeaways here are that building confidence in your creative abilities is important. Design is fun, and it adds immense value to your skillset as a developer.

00:22:36.290 The d.school and IDEO, through years of practice, have crafted a formulaic design thinking strategy that helps you utilize these methodologies in your work. These techniques will likely feel familiar to many of the practices you engage in as developers. For example: do you pair program frequently? Do you submit pull requests and participate in code reviews? Do you utilize TDD in the red-green-refactor cycle? This structure, with minor adjustments, can align with the user-facing side of your projects to understand the users who will interact with your products better and identify their needs.

00:23:47.370 The d.school outlines key steps in the process: empathy, define, ideate, prototype, and test. Let's explore each of these. Empathy is defined as the ability to understand and share the feelings of another. This is central to human-centered design, enabling you to comprehend your design challenge from the perspective of those using the product. This aspect is crucial because you're not solving problems for yourself. Just because something works for you doesn't mean it will resonate with others.

00:24:54.050 To achieve this empathy, begin with observation, gathering valuable insights by closely observing people’s actions. It’s vital to understand their perspectives, which often differ from your own preferences and experiences. Next, engage directly with users. Yes, you will need to engage with people—and this is indeed important. Meaningful conversations reveal their thoughts and values, especially if you're listening closely to what they say compared to their actions. Ask them to walk you through their processes, observe how they do things, and understand their reasoning.

00:26:17.340 After the empathy stage, the next step is define. This means to state or describe accurately the essence or context of the analysis carried out during the empathy phase. This stage aims to enhance clarity and focus on the collected information, zeroing in on the specific design problem at hand and forming a clearer perspective based on your findings. This step consolidates the diverse insights, laying the groundwork for your future exploration.

00:27:33.640 Now you’ll concentrate on idea generation. This involves combining your understanding of the issue at hand and the people you’re designing for with your imagination, aiming for a range of ideas, rather than just a single best solution. At this stage, don't worry about being right; the feedback you will gather from users in subsequent stages will help refine the best solution. This step is vital for moving beyond obvious solutions and allowing you to explore unexpected directions, especially if working in a group, where collaboration can enrich your process.

00:29:02.590 Now we arrive at prototyping, which is an enjoyable part of the process. Prototyping involves the iterative generation of ideas to drive you toward a final solution. Early in this phase, create simple prototypes and seek feedback consistently. Initial low-fidelity models generally yield better feedback, as people won't shy away from providing insights that could improve them. The main goal is to generate conversations that allow for quick and economical failures, so you can ascertain whether a concept is viable. Remember, while you should be excited about the prototypes you create, keep detail-oriented and adjust based on the feedback you receive.

00:30:22.920 Testing is the final step, where you put your prototype into the hands of users. Approach this stage open-mindedly, fully cognizant that the solution may not be successful or that the users might reveal flaws in its design. It’s essential to continuously ask 'why' as you test, enabling you to pivot and tweak your ideas based on the feedback received. Use this opportunity to reaffirm your design and see if assumptions made regarding the problem and its potential solutions stand.

00:31:36.220 Nobody’s too attached to any specific idea at this stage. Start with confidence but be ready to adjust your solutions—foster discussions with users, insist on feedback, and refine respectively, but don’t panic if a solution ends up not working. This process might seem overwhelming. It might feel like excessive interaction with users, but bear in mind that each step finds parallels with what you likely already practice as developers. Incorporate these user-focused methods into your workflow.

00:32:52.170 Reflecting on parallels: when it comes to empathy, before we write code, we must write tests—understanding what we want the code to accomplish and its role within the application is crucial. This entails refining questions around what our code needs to deliver. Next, during the define phase, once there's solid comprehension of test coverage, pseudocode helps clarify expectations. For prototyping, it’s analogous to writing clean code and adding usability refinements. Lastly, testing your product consists of submitting pull requests, engaging in code reviews, then refactoring as necessary.

00:34:20.390 In conclusion, just in case you’re thinking this is a load of hooey and feel your skills are sufficient or don’t have time to learn about design thinking, allow me to share: I have undergone this mindset shift twice. Initially, I learned to think conceptually, then years later, I transitioned into programming and adopting a developer mindset. Dismissing my ability to learn based on perceived obstacles proved to be poor reasoning. Today, I identify as both a designer and a developer, actively involved with organizations teaching code. My perception of my learning capability has entirely transformed.

00:35:38.730 There are no longer insurmountable obstacles or flimsy excuses to dodge challenges, and if I can do this, so can you. Thank you!