<?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" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Etsy Design - Medium]]></title>
        <description><![CDATA[Stories about people-centric design from the people behind Etsy - Medium]]></description>
        <link>https://medium.com/etsy-design?source=rss----849beca6867e---4</link>
        <image>
            <url>https://cdn-images-1.medium.com/proxy/1*TGH72Nnw24QL3iV9IOm4VA.png</url>
            <title>Etsy Design - Medium</title>
            <link>https://medium.com/etsy-design?source=rss----849beca6867e---4</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Sat, 14 Nov 2026 03:07:53 GMT</lastBuildDate>
        <atom:link href="https://medium.com/feed/etsy-design" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com/" rel="hub"/>
        <item>
            <title><![CDATA[Make design history]]></title>
            <link>https://medium.com/etsy-design/make-design-history-620000a7cbe?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/620000a7cbe</guid>
            <category><![CDATA[design]]></category>
            <category><![CDATA[ux-design]]></category>
            <category><![CDATA[tech]]></category>
            <category><![CDATA[product-design]]></category>
            <category><![CDATA[documentation]]></category>
            <dc:creator><![CDATA[Catt Small]]></dc:creator>
            <pubDate>Wed, 13 Dec 2017 19:02:24 GMT</pubDate>
            <atom:updated>2017-12-14T01:18:35.680Z</atom:updated>
            <content:encoded><![CDATA[<h4>How to be a better designer by documenting your work quickly and effectively</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XpVDZakpoCGTtDeiYaVG6Q.jpeg" /></figure><p>When you’re in the midst of a new design project, it can feel like everything is on fire. There isn’t enough time in the day to get the bare minimum done, let alone write stuff down. You spend all your time meeting with stakeholders and churning out designs. Occasionally, there is confusion. Maybe someone new joins the team, or someone wasn’t in the right meeting. But you hash it out in a ridiculous number of meetings. You feel frustrated, but you make it happen.</p><p>Then, when everyone is finally on the same page, you help build the functional version of the product. People ask you the same questions over and over again. You continuously answer them. The project goes live, barely on time, and everything feels wonderful for the minute before you are pummeled with bugs.</p><p>After launch, you find yourself in a position where you need to reference the work you did on that project. Perhaps it’s to provide mockups for a bug fixes, or it’s to iterate on the project more. But hardly anything was written down — not even in emails –and your hours worth of chat messages are impossible to search through. After several hours, you’re back exactly where you began your search.</p><p>Design documentation can make or break your design process. It can provide context, direction, and quick access to decision-making rationale that saves you time now and in the future. So why’s it often the last thing to get done?</p><p>Many people think documentation is too time-intensive to focus on during a project. Working at a digital product company can mean little downtime between projects, and creating documentation at the end of a project can take hours or days. Documentation can also be time-intensive if you create it as the project progresses but aren’t using a flexible format. Luckily, I’ve learned a few principles that make design documentation easier and faster. These principles could be used for other types of documentation as well — but I’ve only used them for design work, so your mileage may vary.</p><h3>Principle 1: Make it early</h3><p>At the beginning of your project, create a design document using a word processing application. This document should outline the problem you aim to solve, business and user goals, and a list of people involved with the project. Ideally, it will also link to other helpful information such as a summary of competitors’ solutions and relevant research insights.</p><p>Contrary to what you might believe based on their name, design documents aren’t just useful for designers. They also help align the entire project team by giving them a space to document basic assumptions. Very often, people think all members of their team are on the same page because they’ve sat in a room and talked about a plan. However, people often forget to step back and properly center solutions around the problem they intend to solve. Documenting and sharing information in a format that lets people comment and discuss asynchronously can create room for people to ask and answer open questions, no matter how simple or complex those questions may be.</p><h3>Principle 2: Make it accessible</h3><p>Documentation can live almost anywhere: Google Drive, InVision, LucidChart, Figma, Basecamp, Dropbox, and GitHub are just a few services that enable you to share design documentation with others. However, people generally gravitate toward a few select tools. When creating documentation, make sure it lives on services your core audience access regularly. You can also compromise; if the majority of your team uses Basecamp but you prefer InVision, creating a Basecamp post that links to InVision updates is a simple way to keep everyone in the loop.</p><p>As an example, designers at Etsy create design documents in Google Drive. This makes it easy to share documentation with product managers, engineers, and other designers. We also create user flow diagrams, prototypes, and mockups that get organized in boards on InVision, a suite of tools created for designers. The combination of written and visual updates enable us to ideate, get feedback, and make decisions swiftly.</p><p>Most documentation stops being modified at some point in time. This can happen after a project is launched, when someone leaves a team, or when a feature is no longer being supported. Documentation should be as easy to locate five years from now as it is today. At Etsy, designers will occasionally look back at years-old documentation to understand the history behind certain decisions. You may not always be there to explain your thought process, so make sure your work can speak for you.</p><h3>Principle 3: Make it easy</h3><p>Making design documentation sustainable is key to long-term success. If your documentation requires hours of updates every time a new decision is made, you will find it tedious. For example, at a previous company I was asked to create functionality documentation. At the time, there was no way to easily share design updates without using email. Sketch did not exist yet, which meant I couldn’t create symbols. Any time my team agreed to make changes, I had to update a multiple-state clickable prototype — as well as pages of documentation. This required me to copy and paste the same modules across multiple areas.</p><p>Luckily, we now live in different a time with better design tools. Design work can generally be documented in less than an hour. Sketch has symbols, easy-to-use bulk export tools, as well as many plugins that make documentation seamless by syncing artboards to online services. Additionally, tools like InVision make sharing visual documentation much easier than static files in emails. This means designers can send a single link instead of emailing static files every time a change is made.</p><p>You now understand why design documentation is awesome and how it can be incorporated into your work. Documentation saves time, reduces friction, and promotes clarity during project development. It also serves as an historical record that can be referenced when you aren’t available to explain your ideas.</p><p>Looking to make documentation even easier? Start by clearly defining your design process. Every team has a process, even if it may be unwritten. If you aren’t sure what yours is yet, outline actions the team usually takes while building projects at your company. This can include types of meetings you regularly have (like kickoffs and reviews) as well as how people in different roles are expected to work together. If you’re new to the company, interview others to capture unspoken expectations.</p><p>In addition to setting expectations, consider how files are organized as well as ways to simplify the process of creating designs and documentation. Etsy has documentation templates and a design system with unified design patterns, and although these things require a fair amount of effort to create, they reduce friction overall — and that naturally makes documentation simpler and easier.</p><p>Are you a big fan of documentation, or do you hate it? What has worked well for you? What failed? Let us know in the comments!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=620000a7cbe" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/make-design-history-620000a7cbe">Make design history</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Ready When You Are]]></title>
            <link>https://medium.com/etsy-design/ready-when-you-are-3f6d3bfa1ee8?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/3f6d3bfa1ee8</guid>
            <category><![CDATA[design]]></category>
            <category><![CDATA[ux]]></category>
            <category><![CDATA[design-thinking]]></category>
            <dc:creator><![CDATA[Kate Matsumoto]]></dc:creator>
            <pubDate>Wed, 23 Aug 2017 18:06:18 GMT</pubDate>
            <atom:updated>2017-08-23T18:13:13.926Z</atom:updated>
            <content:encoded><![CDATA[<p>How to share your work fearlessly</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yMGTCSDtvTXzkn4uN9s69Q.jpeg" /><figcaption>Illustration by <a href="http://yoko.is/">Yoko Sakao Ohama</a></figcaption></figure><p>Knowing the right time to show your work is kind of like knowing when to slice into an avocado:</p><p><em>Not ready.<br>Not ready.<br>Not ready.<br>Too late.</em></p><p>I’ve definitely been very guilty of waiting too long to get a second pair of eyes on my work. I suppose I wait because I’m afraid of being perceived as sloppy or unprofessional when I show unfinished work or work in progress.</p><p>Showing your work exposes all of your vulnerabilities as a designer. It surfaces problems you haven’t thought about, inconsistencies you might be introducing for no good reason, and possibly a lack of visual polish or attention to detail.</p><p>When I first joined Etsy, surrounded by its amazing and talented design team, I thought the best thing to do before showing my work was to try to solve as many of these problems myself without looping in others to demonstrate that it was thought out, considered, ready for feedback, and more importantly, that I was a designer worthy of being here.</p><p>It took a very public and embarrassing delay of showing my work to surface how incredibly wrong I was — and how showing work early, leaning on my teammates, and shifting my mindset about negative feedback is ultimately what creates the best experience for our users.</p><h4><strong>Ways to share</strong></h4><p>At Etsy we use several tools to share work. We have a #product-design channel on Slack for questions and gut-checks, weekly buyer and seller-facing design team critiques, and my personal team has an internal design demo every week where all the designers present ideas to the brilliant engineers, PMs, and stakeholders we work with.</p><p>In our new weekly presentation (called Design Lightning™), all 40 product designers at Etsy have two minutes to get up and talk about what we’re working on and where we are in our process. Defining the stage of the work we’re in helps us create a shared context and awareness of what we’re all working on and helps guide our fellow designers to give us more holistic solutions.</p><h4><strong>Our design process</strong></h4><p>At Etsy, we practice iterative human-centered design, which looks a little like this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/520/1*2srgKewQVAbTSOs4vB3xlA@2x.png" /></figure><p>What human-centered iterative design stage we’re in greatly influences the type of feedback we receive. When we observe and empathize, we’re conducting user interviews, running analysis, and working with our research team to gather qualitative data. After evaluating what we’ve learned, we can define the problem we’re trying to solve, assess what the opportunity is for our users, and determine the success we’d like to achieve.</p><p>Then we ideate: we brainstorm, wireframe, and prototype interfaces or interactions using Sketch, Principle, or HTML/CSS on our <a href="https://medium.com/etsy-design/sandboxes-at-etsy-8bb88fa7da92">internal sandbox</a>. Once this is completed, it’s time to user test, A/B test, and gather quantitative data — then the process starts all over again based on what we learn from launching our product.</p><p>It’s way too often that designers like myself jump straight into ideation without properly defining a problem. Working on a large team of talented people and regularly sharing and articulating your thought process and ideas is a great way to kick that habit.</p><h4><strong>Learning the hard way</strong></h4><p>Before Design Lightning™, our weekly product design status presentation, it was really easy to let myself fade into the background during a critique. Since my work wasn’t “ready”, I thought it wasn’t worth showing.</p><p>When we were in the midst of finalizing <a href="https://www.etsy.com/seller-handbook/article/introducing-guest-checkout-and-buy-it/130423997197">Guest Checkout</a>, I thought I could iterate quickly and put a new idea in front of my own team, but when it came time to show it to the greater buyer design team, I froze. I didn’t have confidence that idea was great and the way I had executed it was sloppy and unfinished, “It’s just an idea, not fully fleshed out, and everyone will think I’m an idiot if I show this,” I thought.</p><p>So I didn’t present in critique the first week I worked on changing Guest Checkout. I worked up the courage around the second or third week after iterating a bit and was given a lot of really helpful and honest feedback by the designers on the buyer-facing design team who told me I needed to make sure I was still solving the right problem for the right people and not creating new ones.</p><p>But during the time I had waited to show my work, my team had already started building on my half-baked solution. I quickly decided to post a draft of our new direction I had been putting off for 2 weeks on Basecamp and proceeded to get a stampede of paragraphs of questions and feedback from every design manager at Etsy right before a demo to our executive team. Literally anyone at Etsy with access to Basecamp could see how badly I had failed to document this decision-making.</p><p>Looking back on this now, I am extremely thankful for all the feedback I received. It stopped an inferior product from launching to our buyers, extended our launch time, and clarified a lot of questions about stakeholders, product ownership, and how we can experiment more thoughtfully. But at the time it was happening, I was humiliated and ashamed of myself — mostly because I knew this all could have been avoided if I had just shared my work earlier.</p><p>Since that experience, I’ve tried to become a lot more vocal and transparent about what I’m working on, and I try to ensure that everyone I work with sees all my super-early, semi-formed ideas and Sketch artboards. I present at every buyer critique, I ask stakeholders and other designers directly for feedback, and have ad-hoc critiques when those people don’t respond or are too busy.</p><h4><strong>Showing work and receiving feedback</strong></h4><p>When I think really honestly about what prevents me from showing my work, it’s the fear of receiving negative feedback, which I used to definitively interpret as “I’m a terrible and incompetent designer.” In a lot of ways I’m really thankful that the way I overcame this fear was by receiving a ton of it. It was like being thrown into deep water and discovering that I still remembered how to swim.</p><p>Another thing that helped me was approaching feedback with a growth mindset instead of a fixed mindset, as outlined in <a href="https://medium.com/the-year-of-the-looking-glass/taking-feedback-impersonally-7c0f3a8199d9">this article</a> by Julie Zhou where she cites Carol Dwyer’s book, <em>Mindset</em>.</p><blockquote>“A fixed mindset presumes that what you are capable of today is how capable you really are, which means every time you get critical feedback, you read it as a judgement on your person. Hey, this thing you did isn’t great gets translated to <strong>*</strong>I’m<strong>*</strong> not great. A growth mindset presumes that no matter where you are now, you can improve.”</blockquote><p>After reading this article, I realized that receiving feedback is the best and most effective way to improve as a designer, and that showing work early and often is the best way to get it.</p><p>Some things to remember when receiving feedback:</p><ul><li>Sharing ideas early helps people follow along with your thinking throughout your process.</li><li>Your early ideas are not a reflection of you as a person or your full capabilities as a designer, and you can always improve and iterate.</li><li>Documenting your ideas is a valuable way to help you and other members of your team affirm and reassess your decisions.</li><li>Your team members are willing and able to help you — asking for their help is not a sign of weakness, but strength and humility.</li><li>It’s safe to assume that all feedback is given with the best intentions, and that we’re all working towards the same goal.</li><li>Forget your ego, remember the user, and always ensure you are solving the right problem for them.</li></ul><p>It’s super easy to work heads down on something without coming up for air or asking for feedback before you’re ready, but there’s no excuse for doing that when you’re part of a team as supportive, friendly, and talented as the one we have at Etsy.</p><h4><strong>So: when is your work “ready”?</strong></h4><p>Never. But, if you shift your mindset, <em>you</em> can be.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=3f6d3bfa1ee8" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/ready-when-you-are-3f6d3bfa1ee8">Ready When You Are</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Crafting an Effective Working Group]]></title>
            <link>https://medium.com/etsy-design/crafting-an-effective-working-group-da77bded3aaf?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/da77bded3aaf</guid>
            <category><![CDATA[design]]></category>
            <category><![CDATA[product-design]]></category>
            <category><![CDATA[collaboration]]></category>
            <category><![CDATA[productivity]]></category>
            <category><![CDATA[process]]></category>
            <dc:creator><![CDATA[Jessica Harllee]]></dc:creator>
            <pubDate>Tue, 20 Jun 2017 18:07:03 GMT</pubDate>
            <atom:updated>2017-06-20T18:09:45.456Z</atom:updated>
            <content:encoded><![CDATA[<h4>Working together to solve complex, cross-functional problems</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1020/1*yDHPbBFDOTsDsnj7EYhhLw.jpeg" /><figcaption>Illustration by <a href="https://www.etsy.com/shop/KarolinSchnoor">Karolin Schnoor</a></figcaption></figure><p>At Etsy, some of the most interesting (and most difficult!) challenges we face as a design team don’t always have a clear or obvious owner. Our initiatives can span multiple product teams or even multiple disciplines. Without a dedicated team of people solving these problems, they’re easy to ignore.</p><p>One way that we try and tackle cross-team challenges at Etsy is by using working groups. A working group is a defined set of people, usually coming from multiple teams or disciplines, with a clear problem to overcome. Some have very specific goals and disband after a few months, others have existed over multiple years and evolved over time.</p><p>I’ve been involved in a number of design-focused working groups at Etsy, both in a leadership role and as a participant. I’ve seen things that work really well, and I’ve also seen them struggle to align and hit their goals. To help you set your working group up for success, I’ve put together some guidelines for organizing an effective one.</p><h3><strong>1. Establish a goal</strong></h3><p>First and foremost, working groups are created to solve a specific problem facing an organization. When the group is created, spend some time defining the goal. Since the problems you’re tackling can be broad and fuzzy, having an explicit goal can also help you decide what is and isn’t the responsibility of the group. Creating alignment on what the goal is will help you evaluate whether the group is successful down the line.</p><p>When the Design Team leads communicated our team-wide strategy of achieving “design excellence”, a lot of questions came up around what exactly “excellence” meant. To help answer those questions, the Design Principles working group was formed with the clear goal of creating design principles to define design excellence.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qh199hbi4KotZw2JCBap1A.jpeg" /><figcaption><em>We reviewed the goals of the Design Principles working group at every meeting</em></figcaption></figure><p>Once you have a goal, make sure everyone understands it. Review the goal at the beginning of every meeting to remind group members of what they’re trying to achieve. Communicate the goal of the group broadly as a way to establish yourselves as the people dedicated to, and invested in, finding a solution.</p><h3><strong>2. Designate a facilitator</strong></h3><p>When the group is formed, the executive sponsor (or whichever leader establishes the group) should designate a facilitator. The facilitator runs meetings and keeps the group moving forward. Without a clear facilitator, meetings can become ineffective and group members won’t be held accountable for the work.</p><p>A facilitator’s job <em>isn’t</em> to say yes or no; sometimes the facilitator isn’t also the “decider”. Facilitation is more about making sure that progress toward goals is being made.</p><p>Facilitators are responsible for things like:</p><ul><li>Setting up meetings</li><li>Making sure the meetings are effective</li><li>Running on-time and inclusive meetings</li><li>Setting the agenda for each meeting in advance</li><li>Holding the group accountable to the executive sponsor</li></ul><p>Oh, and the facilitator doesn’t have to be a manager; facilitation can be a great leadership opportunity for individual contributors. It gives ICs an opportunity to flex some organization and communication muscles in a different capacity than they might be used to in their day-to-day design work.</p><h3><strong>3. Define operations</strong></h3><p>Even though the work might not be a typical project with a typical team, it’s important to draw from the rituals of your other projects to make sure everything runs smoothly.</p><p>Working groups should have regularly scheduled meetings or collaborative work sessions to check in on progress, answer questions, and plan for future work. Meeting regularly will help remind group members of this work and give everyone face time with one another. If there’s any urgency to the work or a lot of smaller pieces to keep track of, it might even be helpful to add a weekly standup for status check-ins.</p><p>In addition to regular meetings, there should be ways for group members to communicate with one another in between meetings. At Etsy, we usually have a Google group and a Slack channel for informal, broad communication. These are also helpful channels for anyone outside of the group with a question to get in touch with working group members.</p><p>There may be other project rituals that your company uses, like Jira boards or wiki pages, that will help establish a smooth process. Use whatever communication and process tools you have at your disposal to set your group up for success.</p><h3><strong>4. Set milestones</strong></h3><p>Okay, so now you have the mission of the group, the facilitator, and some guidelines for operating. Time to start getting to work, right? Hold your horses.</p><p>One of the reasons I’ve seen working groups struggle to move forward and make progress is a lack of milestones.</p><p>Without clear milestones, it’s impossible to judge the pace at which you must work. This is especially true when the work is done on top of your regular workload. The worst thing that could happen to your working group would be that everyone chips away at the problem but never actually ships anything. In order to be effective, the group has to ship; in order to ship, milestones should be established from the beginning.</p><p>The Style Guide working group operated on a quarterly basis. At the beginning of each quarter, we kicked off a round of projects with the expectation that you’d be able to finish the work by the end of the quarter. Having a timeline helped designers scope their work; group members would only commit to doing projects they knew they could ship within a quarter.</p><p>The Design Principles working group set our sights on presenting the principles at the quarterly Design All Hands, since it would be a great time to reach every member of the design team. We ended up missing the deadline; we shared our progress and set a new deadline. And that’s okay. That milestone enabled us to work at a healthy pace; without it, we could easily have gone in circles without any incentive to move forward. Milestones can (and should!) change based on how progress is being made.</p><h3><strong>5. Operate transparently</strong></h3><p>Since the problems you’re solving can span your whole organization, chances are that other people outside of the group will be very invested in the work that the group does. To ensure the group isn’t working in a bubble or duplicating work, find ways to broadly share progress, get feedback, and operate transparently.</p><p>Some methods that we’ve used for creating transparency include:</p><ul><li>Creating a Slack channel</li><li>Creating a Google Group</li><li>Sending weekly update emails</li><li>Creating open meetings</li><li>Sending surveys</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/700/1*BXvY4bBTnFOmM7mYmeABtA.jpeg" /><figcaption><em>We frequently emailed relevant teams when there were important updates to the web toolkit</em></figcaption></figure><p>We maintained Etsy’s web toolkit through a working group in the early days. The web toolkit was rapidly being adopted by every product team, so there were a lot of people invested in our progress. Whenever we had new patterns, bug fixes, or major updates to functionality, we sent announcement emails across the company to make it easy for everyone to keep up with our progress.</p><p>Another way to operate transparently is to open up some or all of your meetings to everyone. The Style Guide group meetings were mandatory for anyone working on a quarterly project, but we wanted to give everyone a way to keep up with the work. We added teams invested in the work to our bi-weekly meeting invitation so they could pop in whenever they wanted.</p><p>Lastly, there might be ways to include people outside the working group. The feedback of the larger design team was critical to the success of the design principles. We sent surveys, conducted interviews, and ran critiques to get feedback from our target audience and stakeholders throughout the process. (<a href="https://medium.com/etsy-design/creating-etsys-design-principles-4faf31914be3">Read more about our process here!</a>) By the time we shared the final principles, everyone was well-informed and our stakeholders weren’t surprised.</p><p>It might feel counter-intuitive or spammy to send this info out widely, but sharing too much information is much better than leaving people who care about the work in the dark.</p><h3><strong>6. Evaluate your process</strong></h3><p>It’s important to evaluate and iterate on how you’re working together, especially since the work can be more ad-hoc than regular projects. Your time is precious; every little process improvement that you can make will have a big impact on the effectiveness of the group.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*u3mieXlDJ2CQfSfnpsqhiA.png" /><figcaption><em>The Style Guide working group ran remote-friendly retrospectives to understand what was working well and what was challenging</em></figcaption></figure><p>One way that we evaluate our process at Etsy is to run retrospectives. The Style Guide working group was able to make huge improvements by running retrospectives regularly. One insight we uncovered was designers were rarely able to devote as much time to the work as they thought. This helped us encourage participants to keep projects small. Another insight was that participants didn’t realize until late in the quarter that they needed engineering help. The following quarter, we recruited engineers at the very beginning of projects.</p><p>Surveys are another way to get external feedback about your effectiveness. The web toolkit working group sent a few surveys to designers and engineers to ask about their use of the web toolkit, documentation, and pain points. This helped us get feedback on a larger scale and prioritize certain features.</p><h3><strong>7. Discuss the necessity of the group</strong></h3><p>The odds are high that you’re involved with the working group in addition to your day-to-day work. This extra work can really add up and occupy a lot of your time. You should feel comfortable having frank conversations about the group’s future.</p><p>Use your goal as a way to evaluate whether the group is still needed.</p><ul><li>Have you fixed the problem you set out to solve?</li><li>Has the problem been solved another way?</li><li>Has the company changed? Has its needs changed?</li><li>Is the group still the most effective way to solve this problem?</li></ul><p>Your group’s regular evaluations and retrospectives are the perfect opportunities to bring these questions up.</p><p>Since the Design Principles working group’s goal was to create a set of design principles, the group disbanded when the principles were written. The group may end up reforming in an entirely new shape, but the group as we knew it wasn’t necessary anymore.</p><p>The dissolution of a working group can be the result of processes and teams changing for the better. Our design leadership team made the case for having a team dedicated full-time to design systems by pointing to the success of the Style Guide working group. When the working group began to wind down, it was because we had a team of designers solving these hard problems full-time, and our existing process no longer made sense. In this case, the working group disbanding was a huge success!</p><h3><strong>8. Celebrate your victories</strong></h3><p>The best part of the Style Guide working group was the demo day at the end of the quarter. We invited multiple teams across Etsy, shared snacks and beverages, and watched as everyone demoed their hard work from the past few months. Seeing all of the work back-to-back felt so good; we really felt like we were making a huge impact on Etsy.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rbh_KMOjF2YeiPSMz-Jsiw.jpeg" /><figcaption><em>Style Guide demo days were a great way to celebrate our hard work</em></figcaption></figure><p>Demo days are just one way to celebrate work. Team-wide emails are a low-investment way to share progress and to give shoutouts to working group members. Regular team meetings like an All Hands can be an opportunity to give a quick plug for the working group and an overview of your progress. We’ve also used <a href="https://medium.com/etsy-design">this very blog</a> as a way to celebrate our work and share learnings outside of Etsy.</p><p>Whatever your company’s practices for recognition, make sure that your group takes the time to celebrate accomplishments. You’ve earned it!</p><p>So, in summary:</p><ol><li><strong>Establish a goal</strong></li><li><strong>Designate a facilitator</strong></li><li><strong>Define operations</strong></li><li><strong>Set milestones</strong></li><li><strong>Operate transparently</strong></li><li><strong>Evaluate your process</strong></li><li><strong>Discuss the necessity of the group</strong></li><li><strong>Celebrate your victories</strong></li></ol><p>Working groups can help your team solve complex, cross-functional problems. The nature of side projects means it’s crucial to design a structure that will set you up for success. Hopefully you can apply the lessons that we’ve learned along the way to solve some challenging problems in your own organization!</p><p><em>Thanks to </em><a href="https://medium.com/u/96fd8cc159ed"><em>Jason Huff</em></a><em> and </em><a href="https://medium.com/u/60245a9071a7"><em>Jedediah Baker</em></a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=da77bded3aaf" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/crafting-an-effective-working-group-da77bded3aaf">Crafting an Effective Working Group</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Creating Etsy’s Design Principles]]></title>
            <link>https://medium.com/etsy-design/creating-etsys-design-principles-4faf31914be3?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/4faf31914be3</guid>
            <category><![CDATA[design-principles]]></category>
            <category><![CDATA[design]]></category>
            <category><![CDATA[etsy]]></category>
            <category><![CDATA[design-process]]></category>
            <dc:creator><![CDATA[Magera Moon]]></dc:creator>
            <pubDate>Tue, 23 May 2017 18:15:20 GMT</pubDate>
            <atom:updated>2017-05-23T19:00:36.922Z</atom:updated>
            <content:encoded><![CDATA[<h4>Aligning on a shared definition of design excellence</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yBPpNPHEMFNIhvil_-vwcA.jpeg" /><figcaption><strong>Illustration by </strong><a href="https://www.etsy.com/shop/printshopLU"><strong>Lucy Sherston</strong></a></figcaption></figure><p>During my time at Etsy, I had the pleasure of watching the design team grow and evolve. When I joined over six years ago, there was just a handful of designers working collectively to support business and customer needs. Today, it is a multi-disciplinary group of Product Designers, Brand Designers, Art Directors, CX Strategists, Information Architects, Copywriters, and Researchers.</p><p>With so much growth, it became critical for us to have a shared vision to guide the execution and output of our work. Last year Randy Hunt, VP of Design, introduced the Design team’s vision of Etsy being synonymous with design excellence. We had our North Star, but what did design excellence mean in practice for Etsy? What did that look like as a customer experience? How would we know if we’d achieved it or not?</p><p>To help answer these questions, I created a working group with the goal of creating a set of design principles. We believed that everyone in the company participates in creating the best possible customer experience for our community, and this belief was reflected in the makeup of the team, which represented multiple functions; Research, Brand, Engineering, Product, Design, Security, Members and Community, and Values Aligned Business.</p><p>After six months of workshops, Google Docs, surveys, spreadsheets, stakeholder interviews, and group discussions, we had our principles of design excellence:</p><ul><li><strong>Be effective</strong></li><li><strong>Create unity</strong></li><li><strong>Always be thorough</strong></li><li><strong>Express Etsy</strong></li></ul><p>I’ll get into details on them later, but first let’s go through how we got there.</p><h3><strong>A bottoms-up approach</strong></h3><p>When researching other companies’ principles and how they went about creating them, there wasn’t a lot of material that discussed process, especially for large companies. Although the end goal was the creation of these principles, we took a lot of care in making sure the process was thoughtful and inclusive of the individuals that we hoped would use them to inform their work on a daily basis. We believed that these principles were already inherent in the decisions and processes that guide everyone in their work, and that these principles should clearly be “Etsy” in their voice, tone, and values.</p><p>To help us determine how best to involve individuals in our process, we defined three concentric circles, clarifying the types of roles and level of involvement we’d ask people to contribute to the creation of the principles.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5fUWwejsc_9fDG94mJeSCQ.png" /></figure><h4><strong>Principles Working Group</strong></h4><p>The core group responsible for the creation and implementation of the principles. Also responsible for involving key influencers and admin throughout the process.</p><h4><strong>Influencers</strong></h4><p>Key leaders who are responsible for providing feedback throughout the process, and are seen as advocates for the use of the principles.</p><h4><strong>Admin</strong></h4><p>The largest group of contributors from across the company who are responsible for providing feedback on what design excellence looked like in practice and in our work.</p><h3><strong>Aligning on our goals</strong></h3><p>The first thing we needed to do was discuss and align on some core questions about the goals and intended scope of the principles. Michael Yap, a User Experience Strategist at Etsy, quickly identified what he called <em>The 5W’s</em>:</p><ol><li><em>What motivates this work?</em></li><li><em>What are the goals of these principles?</em></li><li><em>What is our definition of design?</em></li><li><em>What characteristics should these principles exhibit?</em></li><li><em>Who should benefit from these principles?</em></li></ol><p>Michael facilitated a series of workshops, giving the group space to unpack our desires for these principles, and align on a definition for the questions above. We then created our “one-sheeter”, capturing these questions on a single sheet of paper that could be printed, shared, and referenced going forward. At the beginning of every meeting, we’d review the 5W’s, asking ourselves if they still felt accurate, and update the sheet when needed. The document evolved over time, and expanded to include more questions that helped guide the creation of the principles:</p><p><em>6. What informs these principles?</em></p><p><em>7. When and where would these principles be used?</em></p><p><em>8. What format should these principles take?</em></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ETU0YLAbf48Rt7XOgopy7w.jpeg" /><figcaption>One of the final iterations of our “one-sheeter” that we reviewed at the beginning of every meeting.</figcaption></figure><h3><strong>Uncovering the “raw material”</strong></h3><p>In order to involve a wide array of individuals across the company, we created a short survey to better understand our definition of excellence in our work. We sent the survey to individuals across Product and Brand Design, Product Management, Marketing, Engineering, Research, and Values Aligned Business.</p><p>We then identified recurring themes from the responses, consolidating them down to 21 distinct statements. Using these core statements, we workshopped our first version of the principles.</p><h3><strong>Gut-checking with key influencers</strong></h3><p>Once we had our first rough draft of the principles, we wanted a gut-check from individuals we had identified as influencers. We did this through 1-on-1 stakeholder interviews, and used this time to ask questions about what value principles would bring to their work, how these principles would apply or impact their work, what would make these principles successful, and what was resonating (or not) with the first draft of principles. Earning buy-in and engagement from those that would later advocate for the use of these principles in existing processes would be a key to their success.</p><h3><strong>First we took an axe to them. Then a scalpel.</strong></h3><p>Armed with the insight and feedback from the stakeholder interviews, we stripped the principles down to five core concepts. We began a process of iterating on these core concepts, each iteration focusing on tweaking, removing, and adding to them with a specific focus in mind. As we tweaked and reviewed, the principles slowly came into focus. We learned that they needed to be bold, feel actionable, and that their value was in adding clarity to what the output and execution of design excellence meant for us. After two months, multiple discussions with key influencers, and nine iterations, we had created a set of four principles that we believed achieved our goals set forth in our 5W’s:</p><h4>Be effective</h4><p>Excellent design means satisfying customer’s needs. It’s asking, ‘are we solving the right problems, in the best way, for the right people?’ Learn from feedback. Listen to your peers, team members, and customers. Open your mind, and have an empathetic heart.</p><h4>Create unity</h4><p>Excellent design means unity. It’s asking, ‘does everything we do feel essential, and work together to create a holistic experience?’ Be consistent. Champion our systems. Align our brand. Make sure nothing is arbitrary.</p><h4>Always be thorough</h4><p>Excellent design means thoughtful design. It’s asking, ‘have we been deliberate and intentional down to the last detail?’ Apply all your passion and skill to crafting experiences that make people feel emotionally connected and respected.</p><h4>Express Etsy</h4><p>Excellent design means boldly being ourselves. It’s asking, ‘are we bravely expressing who we are in what we make?’ Be masters of our convictions and values. Bring their meaning and purpose to our work, and make it uniquely Etsy.</p><h3><strong>Putting our principles into practice</strong></h3><p>When thinking about the best way to unveil the principles, we kept on thinking about what we continually heard from influencers and our peers; in order for them to be successful, they should be central to the way we talk about and evaluate our work and processes used to make it. We had a hunch that what we needed to answer the question of <em>how can we form habits around using these principles in everyone’s daily work?</em></p><p>After sharing the principles at our design all hands, we held a workshop with the entire design team to help facilitate a conversation and way of thinking about how these principles apply to our work. Central to the workshop was having everyone explore various Etsy environments for examples of each principle “in the wild”. Everyone explored our space and found examples of our principles everywhere around them. The result was an exercise in making the process come full circle: These principles were not novel concepts, but rather a shared lens for us to discuss, inform, and help us make better design decisions, together.</p><h3><strong>Learnings and advice</strong></h3><p>When I started this working group, I had no idea how we should create these principles, and how long it was going to end up taking us. Once we had finally shared and celebrated the creation of these principles, we took time to reflect and identify what we liked, learned, and longed for from the past six months. These were the key learnings that we identified as a group about our process:</p><h4><strong>Set a hard deadline, and hold yourself to it.</strong></h4><p>We were a large group working on these principles in addition to our daily responsibilities. It was easy for check-ins or milestones to slip, but when we had a hard deadline that was impossible to move, it helped to keep us on track.</p><h4><strong>Invest in aligning on your goals as a team at the very beginning.</strong></h4><p>Setting time aside early on to make sure everyone was aligned on the specific goals for the work was critical. Also creating a ritual around reviewing our 5Ws at the beginning of every meeting helped make sure we were on the same page when discussing specific next steps or decisions.</p><h4><strong>Be clear about what’s expected of everyone and what role they play.</strong></h4><p>Having a large and diverse working group was incredibly helpful in making sure our principles would truly be relevant and actionable to anyone within the company, but there were moments where it was unclear how best to contribute. Identifying what specific decisions or tasks each person could uniquely be responsible for would have been more impactful, sped up the process, and made everyone engaged throughout the six months.</p><h4>Thank you</h4><p>None of this would have been possible without the dedication and support from these fine folks who helped to lovingly craft these principles as a team: <a href="https://medium.com/@michaelryap">Michael Yap</a>, <a href="https://medium.com/@MarcoSuarez">Marco Suarez</a>, <a href="https://medium.com/@harllee">Jessica Harllee</a>, Sam Sherman, <a href="https://medium.com/@maddyberd">Maddy Berd</a>, Netty Devonshire, <a href="https://medium.com/@kpotochney">Katie Potochney</a>, <a href="https://medium.com/@amitsnyderman">Amit Snyderman</a>, Daniel Espeset, <a href="https://medium.com/@Dymaxion">Eleanor Saitta</a>, Julia van Grieken, Nikki Summer, Madeleine Di Gangi, <a href="https://medium.com/@randyjhunt">Randy Hunt</a>, <a href="https://medium.com/@awright249">Alex Wright</a>, <a href="https://medium.com/@jsnhff">Jason Huff</a>, <a href="https://medium.com/@floriz">Floris Dekker</a>, <a href="https://medium.com/@itschesley">Chesley Andrews</a>, <a href="https://medium.com/@kristinapyton">Kristina Pyton</a>, <a href="https://medium.com/@paperkary">Karyn Campbell</a>, Jim Thomas, <a href="https://medium.com/@kyleturman">Kyle Turman</a>, Jung Park, Anda Corrie, Kate Carmody, Russ Poslusny, Amy Dyer, <a href="https://medium.com/@jaymbergesen">Jay Bergesen</a>, Andre Rickerby, <a href="https://medium.com/@nickeyskarstad">Nickey Skarstad</a>, <a href="https://medium.com/@podduturi">Arpan Podduturi</a>, Aaron Pass, Lynnea Midland, <a href="https://medium.com/@jedediahbaker">Jedediah Baker</a>, and the entire design team at Etsy. Thank you.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=4faf31914be3" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/creating-etsys-design-principles-4faf31914be3">Creating Etsy’s Design Principles</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Etsy + Tent London]]></title>
            <link>https://medium.com/etsy-design/etsy-tent-london-fe6d90198048?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/fe6d90198048</guid>
            <category><![CDATA[etsy]]></category>
            <category><![CDATA[design]]></category>
            <category><![CDATA[brands]]></category>
            <dc:creator><![CDATA[Jenny Kutnow]]></dc:creator>
            <pubDate>Wed, 29 Mar 2017 17:55:14 GMT</pubDate>
            <atom:updated>2017-05-19T17:43:48.737Z</atom:updated>
            <content:encoded><![CDATA[<h4><strong>Bringing an online experience into the real world</strong></h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VX0SbKop07g35ea35EARnw.jpeg" /><figcaption>Illustration by <a href="https://www.etsy.com/shop/MathildeAubier">Mathilde Aubier</a></figcaption></figure><p>If you’ve never been to an Etsy office, you might imagine us as swaths of engineers, coders, and product designers — teams of people working exclusively in a digital context. Or perhaps you envision a giant office of crocheters, knitters, screen-printers and makers of all kinds. For a decent portion of the company, both of these perceptions hold relatively true. But a few of us devote a large percentage of our time to thinking about and designing for Etsy in the real world — the physical, tangible, and inhabitable manifestation of a global online marketplace made of creative people expressing themselves.</p><p>I work on the Brand Design team — we champion Etsy by creating hard-working, memorable ideas and making beautiful things that also further Etsy’s vision. We develop a huge array of visual and written content, including websites, film, printed materials, tote bags, product names, and beyond. A big part of my role is designing in-person projects — or, as we like to call it: “Etsy In Real Life” (IRL). This encompasses a vast range of project types, including partnerships with retailers, <a href="https://www.etsy.com/ca/wholesale/browse">Etsy Wholesale</a> events, self-initiated pop-up marketplaces, small-scale exhibits, and physical projects we haven’t even dreamed of yet.</p><p>Last September we had the opportunity to bring our marketplace to life at Tent London, a 4-day event during the London Design Fair where local makers and designers exhibit their work. We took over a 40 square meter (430 square foot) space within a repurposed former brewery in East London, and set up an exhibit to showcase the UK and Irish winners of the Etsy Awards, a juried competition which celebrates the best of creativity on Etsy.com.</p><p>The project team was very small: a program manager, a project manager / curator, an art director, and a designer. Together, we worked towards a focused goal: to highlight the winners of the awards while promoting Etsy’s brand message.</p><p>We began our process by familiarizing ourselves with the featured Etsy sellers and quickly resolved to design a showcase that respected and elevated the high quality of craftsmanship, originality, attention to detail, and creativity of each item. While the items themselves varied greatly in both intended audience and aesthetic, the quality of their making connected them as a group.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pWnlXLCtSbRzYfD9ndbTMg.jpeg" /><figcaption><em>Some of the featured seller products</em></figcaption></figure><p>Not wanting to design in a vacuum, it also seemed logical to conceive of a design that would respond to the surrounding context: not only current design and maker culture in London, but also the physical characteristics of the Old Truman Brewery. And, as with every project, we deliberately kept Etsy’s values at the forefront of our approach, aiming for a high level of craftsmanship, authenticity, sustainability, and delight.</p><p>We brainstormed different conceptual approaches, eventually gravitating towards an emphasis on the diversity of Etsy’s sellers and their products. The items ranged from entirely handmade to manufactured, and employed a huge array of fabrication types, including hand-knitting, 3D-printing, woodworking, sewing, ceramics, and more. We loved the idea that an exhibition could feature such a disparate variety of objects and styles, with Etsy as the connecting thread that ties them all together. It began to feel like a microcosm of the universe of Etsy, which brings millions of different makers together under one umbrella — makers doing different things in different ways, with different materials, in different locations.</p><p>Most of our in-person projects include on-site commerce of some type, such as a craft market where visitors can shop from Etsy sellers in person, or an Etsy pop-up in a department store. But at Tent London none of the items would be available for purchase on site. With that in mind, we headed in an exhibition design direction, and worked towards creating an experience that felt like an Etsy gallery — clean, sparse, and focused, and putting the seller items at the forefront.</p><p>We also familiarized ourselves with the Tent London space as best as possible. The floor plans indicated the presence of two columns in our designated area — and while we were able to confirm the size of our footprint and the distance between the columns, we were told from the beginning that the final, exact placement of our booth would not be determined until the day of setup. We would have to design our display around two columns in an unknown location. While this was a large and (admittedly) difficult impediment, there was nothing we could do about it but embrace this as part of the design problem. We decided to use it to our advantage, and conceptualized a modifiable framework that could be reconfigured on site to accommodate for this gap in information. We created a loose model of the space, established a modular panel system, and tested out multiple layouts that could change depending on the potential placement of the columns.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/800/1*PPSwhOazNvWvHInVISK4og.gif" /><figcaption><em>Early spatial exploration</em></figcaption></figure><p>After narrowing down the product assortment to a final collection, we sketched out rough elevations of each display panel to determine the placement and layout combinations of the seller items.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BwIBkksQ50YLlC6ehvO4AA.jpeg" /><figcaption><em>Panel / layout sketches</em></figcaption></figure><p>Susi Vetter, the designer on the project, is based in Berlin, and I’m based in Brooklyn. So we adopted a back-and-forth collaborative process, adding to and modifying each other’s drawings after-hours and sending updated sketches and notes across time zones (thank you, technology) until we felt like the design was in a good place. This process allowed us to settle on a final quantity of panels (that, again, could be rearranged as needed during set up), so our contractor could pre-fabricate as many of the components ahead of time.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*o4SN1JTxsscL9KiDz0J6gQ.jpeg" /><figcaption><em>Panel / layout sketches</em></figcaption></figure><p>When we arrived on-site the first morning of the installation, the columns were (as expected) in a location we hadn’t planned for. Our fabricator built a low floor to act as both a structural and visual anchor to the space, and as we set up the panels we worked off a rough base plan. We improvisationally rearranged the configuration to maximize spatial flow and circulation, while maintaining wide and welcoming entrances at either end. For designers who prefer to plan everything to the smallest detail, this was a very unorthodox process. It made our set-up much more time-consuming than usual, but because we had planned it this way stress was kept to a minimum and the final design of the structure looked and felt intentional.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_SkNIoReW1v1pk-Xmx6z3A.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qJVt-n76fgHkEbOqgGYLJA.jpeg" /><figcaption>Installation in-progress</figcaption></figure><p>As our design was intended to be a sort of elevated scaffolding, it made sense for us to use functional building materials that were largely unaltered. Essentially, the booth framework itself came to serve as a kind of physical metaphor for Etsy.com: a utilitarian structure that honored and amplified sellers, highlighted their products in the best light possible, and welcomed visitors to interact with the items up close.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ciQvtz5tebMT7gfmXCcikw.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7TRGXMULw6qNqEbBhBr5Yw.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xidQpE3oBGHmjA3YmmjBWw.jpeg" /></figure><p>Throughout the design process, we kept coming back to the concept of interior vs. exterior as the theoretical foundation of our booth. With the interior as a simple, product-focused gallery space, the exterior became our opportunity to celebrate Etsy. We wanted to highlight the brand, but not overpower the interior display. So we kept orange to a minimum, only using it on panels that also featured signage, and in small focused moments, such as the visible shelving hardware and orange neon tape on each item label.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*a7mf14BkN3Hwb3ASDQwbkA.jpeg" /></figure><p>Since we didn’t know the panel positions until we actually set them up, we produced a variety of Etsy-branded decals in orange and white, and waited until the booth construction and gallery layout were completed before application. We took a light touch to the printed graphic design components, sticking with clean and organized layouts and a minimum of signage and handouts.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xbZezJCxFHpWJxjmY7as5w.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N53d-ZLqW8oxuov18csaWQ.jpeg" /></figure><p>Whenever we design an in-person project, there’s always a question about what to do with the physical components once it’s over. Historically, we’ve saved every part and attempted to reuse them in future projects, but the cost of storage quickly multiplies and there’s no guarantee that repurposing will be possible. So from the beginning of this project we decided to donate everything to a shared woodworking space in London, thereby giving back to the local maker community. Like most of our IRL projects, we employed the use of humble, everyday, off-the-shelf materials like plywood, pine 2x2s, falconboard, and standard hardware. Since these materials were left mostly raw, and cut to a few set lengths, they would be relatively easy for other fabricators to repurpose and integrate into their own projects.</p><p>One of the things I love most about working on this kind of project is that we’re able give the Etsy community a context to connect in the physical world. As we work on more and more IRL projects, we will continue to explore and discover new ways of creating analog experiences that feel authentic and consistent with Etsy.com — transforming our online marketplace into an in-person experience that you can touch, photograph, and inhabit.</p><p><strong>Project Team<br></strong>Emma Long, Program Manager<br>Kate Carmody, Project Manager + Curator<br>Jenny Kutnow, Creative Lead<br>Susi Vetter, Designer<br>Barny Rockford, Fabricator<br>Rachel Hudson and Luke Wolagiewicz, Photographers</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=fe6d90198048" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/etsy-tent-london-fe6d90198048">Etsy + Tent London</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Etsy’s Evolving Icon System]]></title>
            <link>https://medium.com/etsy-design/etsys-evolving-icon-system-41c55a639be2?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/41c55a639be2</guid>
            <category><![CDATA[icons]]></category>
            <category><![CDATA[design]]></category>
            <category><![CDATA[systems-thinking]]></category>
            <category><![CDATA[design-systems]]></category>
            <dc:creator><![CDATA[MarcoSuarez]]></dc:creator>
            <pubDate>Tue, 03 Jan 2017 18:22:04 GMT</pubDate>
            <atom:updated>2017-01-06T20:45:07.933Z</atom:updated>
            <content:encoded><![CDATA[<h4>How we systematized and customized our ever-present icons</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZNIPzfl_Ly3DmOWvOl3O-g.jpeg" /><figcaption>Illustration by <a href="https://www.etsy.com/shop/ErikRiley">Erik Riley</a></figcaption></figure><p>When an interface is made entirely of text, the amount of time and effort it takes to read and evaluate every word increases to the point of cognitive overload. Icons offer a form of “<a href="https://medium.com/@pdtv/a-brief-history-of-iconography-c20d8a0cc2c4#.aargvrbra">visual shorthand</a>”, lowering cognitive load and better utilizing space. Icons use familiar shapes and metaphors to communicate concepts in simple graphic forms.</p><p>For the past several years, Etsy has used an icon font to serve our icons on web and mobile. It’s a forked version of Oak’s <a href="https://symbolset.com/">Symbol Set</a> Standard icon set that includes Etsy specific icons. Anytime we needed a new icon added, Oak would draw it for us and serve us an updated font.</p><p>But as we examined how we’re communicating our brand through our interface we saw a lost opportunity in our icons. Though Symbol Set is a well-crafted set of icons, it wasn’t crafted with the intention of expressing Etsy. We had a desire to create icons that communicated their concepts in a way that also expressed our personality.</p><p>Along with this, the current process and communication channels for working with an outside partner was complex and took too much time. We had internal bottlenecks that caused teams to come up with stopgap solutions that eventually became permanent. This resulted in a lack of consistency and various forked versions of our forked version. It just didn’t — and couldn’t — scale.</p><h3>Our new icon system</h3><p>Along with designing a new Etsy icon set, Etsicons, we needed a system that empowered our entire design team to create, maintain, and implement icons.</p><p>The system we developed contains three parts:</p><ol><li><strong>Guidelines</strong> to instruct designers on how to design icons in a way that ensured consistency and usability.</li><li><strong>An</strong> <strong>icon font builder</strong> that doesn’t depend on an individual building the font. Even though we were moving to SVGs, we still needed an icon font for designers to use for mockups.</li><li><strong>An easy process</strong> for adding new icons to production and using them in code.</li></ol><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oBoNSerEUiPEHN8Q9_65bw.png" /><figcaption>The new Etsy icons, Etsicons</figcaption></figure><h3>Guidelines</h3><h4>Grid</h4><p>The first task was establishing a grid. Apple’s iOS7 icon grid served as a starting point and I tried to create something similar. This direction was quickly abandoned because it was completely unnecessary for our needs. To create an appropriate grid, I first needed to evaluate and understand how we use our icons.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gPqdahLW_JiPK2EuUOhz0w.jpeg" /><figcaption>Apple’s iOS7 grid on the left, my initial grid on the right</figcaption></figure><p>It was important to me that the icons sat on the pixel so they always appeared crisp and sharp. This meant that the grid had to translate to pixels and the icons needed to be designed at the intended size of use. Our navigational icons are the largest icons we use at 20px, so I used this size to start my grid. I added a bleed area to provide a little room to visually center an icon. This gave me a max size of 24px. I added internal boxes at 2px increments to serve as guidelines, and this became our grid.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nLY5-wUkJokJCBYgW_dE2g.png" /></figure><h4>Principles</h4><p>Icon design ain’t easy. Developing a symbol that represents a concept clearly, void of ambiguity, is a challenge. After doing a good amount of research into iconography, I developed a set of principles to ensure our icons communicate well. The book <a href="https://www.amazon.com/Understanding-Comics-Invisible-Scott-McCloud/dp/006097625X/ref=sr_1_1?ie=UTF8&amp;qid=1476900027&amp;sr=8-1&amp;keywords=understanding+comics"><em>Understanding Comics</em></a> was one of the most informative sources I found for iconography. Here are the principles I came up with:</p><ol><li><strong>Simple concepts:</strong> Don’t over-communicate. Limit concepts to one per icon. It should be instantly understandable.</li><li><strong>Minimal detail:</strong> Excessive detail increases the risk of misinterpretation.</li><li><strong>Legible:</strong> At small sizes, shapes can lose definition or blend together making them illegible. Simple shapes with ample spacing maximums legibility.</li><li><strong>Analog:</strong> Consider how the Etsy brand is expressed through the metaphors you choose in your icons. Often, analog metaphors feel more Etsy than digital.</li></ol><h4>Patterns</h4><p>To achieve visual consistency, I developed seven patterns to follow while designing Etsicon icons.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pBeOJs_cmw4ySmFOCtJw-g.jpeg" /></figure><p>The goal of the principles and the patterns is to ensure clear communication and create visual consistency. But sometimes, rules need to be broken to better communicate the concept. For example, the rule of a 2px counter area is broken on icons like the printer. The space between the paper and the printer is only 1px, because the relationship between the paper and the printer started to get lost when the space was increased to 2px.</p><p>Also, icons that represent real-life objects looked less like those objects when corners were sharp. This was true of the printer icon.</p><p>These exceptions may sound like a slippery slope, but we make every attempt to follow convention before configuring.</p><h3>Icon Font Builder</h3><p>Because neither I nor anyone else wanted to become an expert at the font making <a href="https://glyphsapp.com/">Glyphs</a> program, we had to create an icon builder that was completely automated. <a href="http://danielespeset.com/">Daniel Espeset</a>, Staff Engineer at Etsy, and I worked to create this process. Daniel created a program that builds an icon font from a shared SVG folder. Anytime a file is updated or added, the program runs and generates a new version of the font. The font is then shared across the design team via a program called <a href="https://www.jamf.com/products/jamf-pro/self-service/">Self Service</a>. We’re still testing this process, but hope to fully implement it soon.</p><h3>SVG Implementation</h3><p>Our web toolkit allows designers and developers the luxury of building interfaces without touching CSS. This is also true of our icons. We had to get clever to create reusable and accessible inline SVGs that could be sized and colored with utility classes.</p><p>To do this, we started with adding our custom &lt;etsy-icon&gt; tag into our templates. We automatically replace that tag with the &lt;svg&gt; markup for the correct icon when it renders the html serverside and clientside. To specify the icon, we add its name to the attribute, “type”. By default, the icon is hidden from screen readers since most of our use cases include an icon accompanied with text. We can also add color, sizing, and spacing utility classes. In the end, the markup looks something like this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/700/1*y9IX6JQRXAg_0xx3rrKgmw.png" /></figure><h3>Improved usability</h3><p>We’re currently in the process of converting all our icons to the new Etsicons. This will take some time as there are a lot of icons across all our apps. But we’ve already seen usability improvements where they have been updated. The icons in our Buy on Etsy app is one of the first places we implemented Etsicons. We were pleasantly surprised to see it positively impact metrics like add-to-cart and conversion.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aEZfOrrWO_G4ZxAavPUDSg.jpeg" /><figcaption>iOS Buy on Etsy app with new icons. <a href="https://www.etsy.com/shop/YieldDesignCo">Yield Design Co</a></figcaption></figure><h3>Improved process</h3><p>In Massimo Vignelli’s <a href="http://www.vignelli.com/canon.pdf"><em>Canon</em></a><em>,</em> he eloquently writes that rules are imperative for using and understanding a language.</p><blockquote>…syntax: the discipline that controls the proper use of grammar in the construction of phrases and the articulation of a language, Design.</blockquote><p>In order to move quickly we need to move independently. And in order to move independently, the work of improving our icon system must be distributed across our entire design team. Our icon system gives us the syntactic understanding necessary to do this without misunderstandings or sacrificing quality.</p><h3>Resources</h3><p>None of this could’ve been done without the help of many other people outside of Etsy. The amount of knowledge freely shared on the internet empowers all of us to do better work. Thank you to the following sites and articles, which I’d urge you to check out if you’re interested in working on your own set of icons.</p><p><a href="https://www.amazon.com/Understanding-Comics-Invisible-Scott-McCloud/dp/006097625X/ref=sr_1_1?ie=UTF8&amp;qid=1476900027&amp;sr=8-1&amp;keywords=understanding+comics">Understanding Comics</a></p><p><a href="https://medium.com/@pdtv/a-brief-history-of-iconography-c20d8a0cc2c4#.aargvrbra">A Brief History of Iconography</a></p><p><a href="https://www.nngroup.com/articles/icon-usability/">Icon Usability</a></p><p><a href="https://www.nngroup.com/articles/icon-testing/">Usability Testing of Icons</a></p><p><a href="https://material.google.com/style/icons.html#icons-system-icons">Material Design Icons</a></p><p><a href="https://css-tricks.com/icon-fonts-vs-svg/">Inline SVG vs Icon Font</a></p><p><a href="https://sarasoueidan.com/blog/svgo-tools/">Useful SVGO[ptimization] Tools</a></p><p><a href="https://sarasoueidan.com/blog/icon-fonts-to-svg/">Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG</a></p><p><a href="https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/">Seriously, Don’t Use Icon Fonts</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=41c55a639be2" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/etsys-evolving-icon-system-41c55a639be2">Etsy’s Evolving Icon System</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Sandboxes at Etsy]]></title>
            <link>https://medium.com/etsy-design/sandboxes-at-etsy-8bb88fa7da92?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/8bb88fa7da92</guid>
            <category><![CDATA[design]]></category>
            <category><![CDATA[user-experience]]></category>
            <category><![CDATA[prototyping]]></category>
            <category><![CDATA[product-design]]></category>
            <dc:creator><![CDATA[Henry Bayuzick]]></dc:creator>
            <pubDate>Thu, 17 Nov 2016 19:13:18 GMT</pubDate>
            <atom:updated>2016-12-08T15:20:49.894Z</atom:updated>
            <content:encoded><![CDATA[<h4>A Better Experience for Everyone</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*O03uxgLupw9PkZxCcLq65g.jpeg" /><figcaption>Illustration by <a href="https://www.etsy.com/shop/naomiwilkinson">Naomi Wilkinson</a></figcaption></figure><p>Here at Etsy, sandboxes are places where designers working on digital experiences can build whatever they want without blowing things up. At their core, sandboxes are really simple: just folders with some template files, hidden from the public. But their technical capabilities, simple setup, and minimal learning curve make them an extremely powerful tool to sharpen our coding skills, work closer with engineers, and, ultimately, improve the user experience of our site. Over time, they’ve evolved to be a valuable tool for designers. But only a few years ago… they didn’t even exist.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ymTHQzyaH_97C876Lp4Kkg.png" /><figcaption>My sandbox</figcaption></figure><p>Back when I was a design intern, the Shop Management team was <a href="https://codeascraft.com/2015/02/05/rebuilding-the-foundation-of-etsy-seller-tools/">rebuilding the tools that sellers use every day to manage their shops</a> and were getting close to finishing the first version of our new web toolkit, a set of centralized CSS components used for building features on Etsy. Teams were eager to try out the shiny and new styles, but there just wasn’t an easy way to play with them and test them on the product. At the same time, user research at Etsy was starting to take off. Each team was doing its own thing to get prototypes working for usability testing: some were creating clickable prototypes with Sketch, while others were writing HTML prototypes completely from scratch, occasionally requiring help from engineering just to test their idea. Great stuff, but it was taking too long to produce.</p><p>On my team, we were improving an existing tool and wanted to use the new components from the web toolkit. At the same time, we wanted to experiment with different ways to prototype quicker. Our goal was to do two days of usability testing each week and make small changes in between sessions. The first few rounds were rough. Things didn’t work. The user researcher wasn’t able to connect because of permission errors. We continued to iterate on our process to find better ways to test our designs.</p><p>When I left at the end of the summer, we were getting close. With the help of some engineers, we had a place that user researchers could access and that designers could push changes to between sessions, but we were still copying pieces of the web toolkit over and writing our own CSS to make things work. It worked, but it wasn’t good enough.</p><p>When I returned to Etsy as a full-time product designer, <a href="https://medium.com/@broccolini">Diana Mounter</a> was excited to tell me that we finally set up an area of everyone’s VMs (virtual machines) <em>specifically</em> for sandboxes. This meant each designer had their own sandbox that by default included the web toolkit on every page and every template. It was incredibly easy for designers to experiment with and required very little setup. It was unbelievable how fast you could prototype a flow just by writing some HTML and hooking together templates. The best part was that how they worked was consistent from team to team, which meant research didn’t have to relearn a new method every time they did usability testing.</p><p>Sandboxes automatically include the styles and patterns found in the web toolkit by default, which means we can design, build, and test multiple versions of designs directly in the browser. They allow us to focus on more than just visual design, as we now have more time to consider user interactions, states, and responsiveness.<strong> </strong>For designers familiar with the all of the classes and comfortable writing HTML, designing in the browser can be <strong>faster</strong> than designing in Sketch. For new designers, creating your own sandbox is part of onboarding (remember, it’s just a folder!), where new designers go through a number of tutorials to familiarize themselves with the web toolkit and then continue to use the space to practice or prototype.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Q_m2Axk6pjDPRUmztebVeA.png" /><figcaption>The sandbox toolbar</figcaption></figure><p>Another huge win is the ability to make changes and iterate quickly between usability sessions. Making changes is fast (gone are the days of exporting 50 new JPGs for a copy change), and being able to quickly test multiple prototypes on the fly has greatly improved our usability testing. Though, arguably, the best part is that when we test, users are able to interact with things like inputs, buttons, and dropdowns. They can actually type in them. The native keyboard works. Interactive components like overlays work the same way they do on our site (taking only seconds of work to set up). All of these small details make the experience our usability testing participants have much more real, which means that the feedback we’re getting is focused and accurate. And while we’re on the topic of real, we recently added the ability to build prototypes using real data. With just a short snippet of code, things like names, avatars, and listings are pulled directly from production, making prototypes even more real.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*r3Nbp7lpOA1z_NWLtgZWtg.png" /><figcaption>A listing card with real data created in my sandbox</figcaption></figure><p>In most cases, working with other prototyping tools takes a lot of effort, but the finished product can’t be used by engineers. It’s unfortunate that we as designers spend so much time mocking things up just to have to start over in code, or worse, spend even more time getting it ready for an engineer. The code we write in our sandboxes is almost always production-ready, which makes handoff and implementation faster and easier for the engineers. As a bonus, when a designer needs to make tweaks in production, they’ll be much more comfortable doing so. The markup is the same.</p><p>Sandboxes provide our new designers with spaces to learn about our web toolkit, practice their coding skills, and understand our design systems. They’re spaces to play, iterate on design quickly, and prototype. We use them not only to understand the front end architecture better and to build better relationships with our engineers, but to learn more about our users and to make usability testing as close as possible to the actual experience. At the end of the day, sandboxes are just another tool in our toolbox for creating better user experiences. But they just might be our most powerful one.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=8bb88fa7da92" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/sandboxes-at-etsy-8bb88fa7da92">Sandboxes at Etsy</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Welcome to Etsy Design]]></title>
            <link>https://medium.com/etsy-design/welcome-to-etsy-design-cd89ba6f3e5d?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/cd89ba6f3e5d</guid>
            <category><![CDATA[design]]></category>
            <category><![CDATA[etsy]]></category>
            <dc:creator><![CDATA[Randy J. Hunt]]></dc:creator>
            <pubDate>Tue, 18 Oct 2016 19:06:09 GMT</pubDate>
            <atom:updated>2016-10-18T22:55:25.089Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3qn5jxSVUe6vjI7SEq0cTQ.png" /><figcaption>Illustration by <a href="http://www.jingweistudio.com/">Jing Wei</a></figcaption></figure><p>Allow us the privilege of introducing ourselves.</p><p>“Hi! We’re Etsy Design.”</p><p><em>“Hello, there. Wait…what’s Etsy?”</em></p><p>“Oh, Etsy? It’s this special thing, and we’d love for you to be a part of it. Etsy is reimagining commerce and putting creative entrepreneurs at the center of the world. We’re building markets, tools, and services that empower creative people and help them connect with people who hunger for something new and different, something worthwhile and unique. And we believe we can do it in ways that use the power of business to create beautiful and better outcomes.”</p><p>“<em>Wow. Sounds ambitious! So…what is Etsy design?</em>”</p><p>“Great question.”</p><p>That’s what this Publication is all about: What <em>is</em> design and — more specifically — what is <em>Etsy</em> Design?</p><p>We believe Design, at its best, is many things. I’ve always loved this illustration from Ellen Lupton about those many things:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/926/1*Hg23urL1M-Zvu5FkydgLcw.jpeg" /><figcaption>Image by Ellen Lupton / Cooper Hewitt, Smithsonian Design Museum</figcaption></figure><p>At Etsy, we’re aspiring to design excellence in every facet. Daunting, but exciting… and exceedingly important. You see, we believe that design at its best is people-centric. We’re on a mission to create holistic experiences that put people first.</p><p>That mission demands that we ask ourselves some hard questions. How do we learn about people’s experiences and use those research insights as inspiration and motivation? How do we reflect the joy of our community and realize the potential in Etsy’s mission to reimagine commerce through design? How do we design a culture that designs excellent work?</p><p>We’re just getting started. And we’re excited to share what we discover along the way.</p><p>Etsy Design is cross-disciplinary — researching, analysing, designing, writing, capturing, illustrating, moving and directing — across software, communications, and in-person experiences — all working together to create an ever-evolving, ever-improving Etsy. It’s our ambition to examine from every angle and execute every detail.</p><p>This Publication will serve as a place for us to tell our stories. Each month, various members of our team will share accounts of challenges and learnings, thinking and communicating, tools and processes. We’ll look back, we’ll look forward, and we’ll look to you for feedback.</p><p>So follow us here on Medium, and, while you’re at it, follow us on Twitter at <a href="http://twitter.com/etsydesign">@etsydesign</a>.</p><p>We’re looking forward to this. We hope you are too.</p><p>Enjoy!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=cd89ba6f3e5d" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/welcome-to-etsy-design-cd89ba6f3e5d">Welcome to Etsy Design</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How Etsy Gets Made]]></title>
            <link>https://medium.com/etsy-design/how-etsy-gets-made-276bd136618b?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/276bd136618b</guid>
            <category><![CDATA[ux]]></category>
            <category><![CDATA[etsy]]></category>
            <dc:creator><![CDATA[Alex Wright]]></dc:creator>
            <pubDate>Tue, 18 Oct 2016 17:48:31 GMT</pubDate>
            <atom:updated>2016-10-19T15:48:30.740Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BJa_NqAx0gux8VEt3cO4nA.png" /><figcaption>Illustration by <a href="https://www.etsy.com/shop/watersounds">Sarah Abbott</a></figcaption></figure><p>Like many of you, we enjoy making things: trying out new ideas, building prototypes, and fine-tuning our work as we go. Etsy is constantly looking for opportunities to improve our products and services, and exploring new ways to make things work better for everyone.</p><p>Etsy has a big mission: to reimagine commerce in ways that build a more fulfilling and lasting world. That mission is accomplished in small steps; each change we make to the website or apps helps us build toward that goal. But how do we know if we’re building in the right direction?</p><p>To help answer that question, we run ongoing studies and experiments to help us understand how people use Etsy. Members play a critical role in this process, by providing feedback through one-on-one interviews, online surveys, experiments, forums, and prototype groups (where members opt-in to try out new features and provide feedback), to name a few.</p><p>Those insights help us look for opportunities to improve members’ experiences. In some cases that might mean enhancing an existing feature, building an entirely new product, or even removing certain things that aren’t working well.</p><p>We’d like to give you a better sense of how we use these insights to improve the Etsy experience, and invite you to get involved.</p><p><strong>From Big Data to Thick Data</strong></p><p>For the past few years, Etsy has placed a big emphasis on <a href="http://codeascraft.com/2012/06/21/building-websites-with-science/">“building with science,”</a> designing experiments that help us figure out how to improve certain key features on our site by measuring their performance. By analyzing behavioral patterns over time, we have been able to make several major improvements to the marketplace, such as our revamped listing pages and search results pages.</p><p>With over 26 million buyers, 1.7 million sellers, and $2.39 billion worth of annual transactions, Etsy generates a lot of data. Programmers sometimes use the term “big data” to describe this kind of large-scale computational environment. We employ a team of professional data analysts who constantly mine this data for insights about how we can make the marketplace work more effectively for all our members.</p><p>In much the same way scientists use experiments to understand whether a new treatment or medicine is having the intended effects on an individual’s health, we use experiments to understand whether a new feature, design, or marketing campaign is having the intended effect on users’ behavior.</p><p>What do we mean by the “intended effect”? Our goal is to help buyers discover items they love, and thereby make sellers more successful. So, we might test out a new feature intended to keep buyers on the site for longer periods, or to increase the likelihood that they’ll add items to the cart, or to increase the number of items per purchase.</p><p>By introducing a new feature to a random subset of visitors, we can measure how that feature is affecting those metrics using the remaining visitors as a “control” group. We can calculate the difference between those who used the new experience versus existing experience, and that data point becomes one input among others into our decisions on how to proceed. We run these experiments intermittently throughout the year, though we try to avoid running experiments during especially busy times, such as the holiday shopping season.</p><p>Experiments help us validate our own assumptions and intuition. They also allow us to identify “dead ends” sooner; rather than spending three months building a new feature only to find it doesn’t have the impact we expect, we can run an experiment early in the process to understand whether we’re on the right path. We consider experiments a way to reduce risk and be more confident that the changes we launch will have the desired effect.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*sUyahG5whqtywa_A." /><figcaption><em>Catapult, our internal dashboard which helps us monitor experiment results</em></figcaption></figure><p>While data helps shape these decisions, it’s only one piece of the puzzle. Recently, we’ve been building on our experience with data-driven experimentation to look for deeper insights about people’s goals, attitudes, and levels of satisfaction with Etsy — things that are difficult to glean from looking at usage patterns alone. We like to call this information “Thick Data” (a term coined by <a href="http://www.redassociates.com/">ReD Associates</a> partners Christian Madsbjerg and Mikkel Rasmussen) — deep, rich insights that can help us develop a more well-rounded understanding of our members.</p><p>While Big Data gives us a window into what our members are doing, Thick Data helps us get at the elusive “why?” Thick Data comes not from computers but from ongoing real-world conversations with our members. This year, we’ve conducted more than 200 one-on-one interviews with Etsy members — both buyers and sellers — in our on-site usability lab. These sessions help us test our assumptions about why and how members use Etsy, to identify “trouble spots” in the design, and to identify missing features and opportunities for future innovation.</p><p><strong>Connecting with the Community</strong></p><p>We also regularly send teams out to visit Etsy sellers. Our Seller Visits program provides an opportunity for people from all over the company to get out and visit our sellers, to help us understand the problems they’re facing and develop alternate solutions. Members of the Research Team will also plan ethnographic visits to Etsy sellers in order to observe them in their natural environment. This research has been influential in understanding seller workflows around inventory management and order fulfillment.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/570/0*E_1oNKAKWAN68JXo." /><figcaption><em>Etsy admin visit </em><a href="https://www.etsy.com/shop/earthseawarrior"><em>EarthSeaWarrior</em></a><em> in Brooklyn, NY</em></figcaption></figure><p><strong>Bridging the Data Gap</strong></p><p>We also run regular surveys with current and prospective buyers and sellers to track their feelings about Etsy over time, and to understand their opinions about new features or particular parts of our site. For example, in July 2016, we launched a survey about Pattern features by Etsy, a new service that helps Etsy sellers easily create their own e-commerce websites. The survey helped us understand what Pattern features users like best, and which potential new features would be most valuable to sellers who use it.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*1zSfrcUditA_HaHy." /></figure><p>Surveys help us bridge the gap between Thick Data and Big Data, as they allow us to learn about people’s feelings on a quantitative scale. Surveys often stem from hypotheses and questions derived from in-depth interviews, but the reverse is also true : survey results can help us develop questions that we can best answer through deeper one-on-one conversations.</p><p><strong>What next?</strong></p><p>“Design is as much a matter of finding problems as it is solving them,” wrote Bryan Lawson in <a href="https://books.google.com/books/about/How_Designers_Think.html?id=lPvqZJNAdG8C">How Designers Think</a>. Those processes often go hand-in-hand, as teams refine their understanding of a particular customer need through ongoing exploration, analysis and experimentation in hopes of minimizing the friction people experience in using a product or service.</p><p>Etsy is still a work in progress, and likely will be for a long time to come. As we continue to learn more about our global community of creative entrepreneurs and shoppers, we’ll keep trying out new approaches to understanding their needs. For now, we hope this article provides a useful snapshot of some of the approaches we’ve tried over the past few years.</p><p>If you’d like to learn more about our team and the work we do, check out the recent <a href="https://drive.google.com/file/d/0B9L4JM8vD_oibjVPbzdwV3FKVHM/view?usp=sharing">Forrester Research case study on Etsy’s Research team</a>. And if you’re interested in participating in ongoing conversations about the future creative entrepreneurship on Etsy, we encourage you to <a href="https://www.etsy.com/community">join the community.</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=276bd136618b" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/how-etsy-gets-made-276bd136618b">How Etsy Gets Made</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[My Journey at Etsy as a Product Design Intern]]></title>
            <link>https://medium.com/etsy-design/my-journey-at-etsy-as-a-product-design-intern-35b557c44158?source=rss----849beca6867e---4</link>
            <guid isPermaLink="false">https://medium.com/p/35b557c44158</guid>
            <category><![CDATA[tech]]></category>
            <category><![CDATA[ux]]></category>
            <category><![CDATA[product-design]]></category>
            <category><![CDATA[design]]></category>
            <category><![CDATA[design-process]]></category>
            <dc:creator><![CDATA[Victoria Bian]]></dc:creator>
            <pubDate>Tue, 18 Oct 2016 17:28:09 GMT</pubDate>
            <atom:updated>2016-10-13T17:42:42.282Z</atom:updated>
            <content:encoded><![CDATA[<h4><strong>Thoughts, lessons, and tips</strong></h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1020/1*NdzQCdyQxe2GJwdAZWKFvA.jpeg" /><figcaption>Illustration by <a href="https://www.etsy.com/shop/laurageorge">Laura Berger</a></figcaption></figure><p>This June, I flew from San Francisco, California to Brooklyn, New York — far from my family, friends, and everything I’m familiar with. I felt curious and nervous, wondering what my Etsy internship would bring. “Will I feel comfortable working there? What if I mess things up?” I kept thinking to myself.</p><p>As it turned out, my 11 weeks spent at Etsy as a Product Design intern was one of the best experiences of my life.</p><h3>What I’ve learned</h3><p>Before the opportunity to contribute at Etsy, I interned at a 10-person startup. Although I learned to test and validate frequently and iterate designs quickly, I found myself in need of deeper user research and guidance from other designers. I felt limited sometimes. That’s why I decided to intern at Etsy this summer: a company with an established and world-class design team, large user-base, and resources to help me grow as a designer. I want to share a couple of things I learned.</p><h4>Know your users first</h4><p>What surprised me during my first few weeks was how deeply Etsy’s employees understand the audience they’re building for. My one and only task when I first arrived was to read emails embedded with user research reports specific to my project. I was told to “soak it all in.”</p><p>Understanding your audience and their needs first sounds easy to do, but often, designers (including me) just want to jump right into design because we find it fun or love the feeling of producing work. And so the cycle of a bad design process begins: We don’t know much about the users, yet we still want to solve a “problem,” so we look at other designs and see how other people have solved similar issues instead of identifying the unique problem we’re facing from the very beginning. We might design something similar to an existing solution, but then realize it doesn’t feel quite right. So, we look at more designs and try to plug them in s. Maybe we make something cool along the way, but it’s not useful. This process can happen over and over again, but it will often result in a mediocre experience that doesn’t solve the core problem.</p><p>Before diving straight into a solution, we need to first ask ourselves questions such as:</p><ul><li>Who is my audience?</li><li>What stories do they have and what problems do they face?</li><li>If we solved these problems before, how did we solve them, and how well did we solve them?</li><li>If this is something we currently don’t have a solution for, what is our goal by solving the problem?</li></ul><p>The answers to these questions can only get more interesting or clear as we run user research, brainstorm ideas with our partners across product, marketing, and customer support, and come up with design solutions to test with users and iterate, etc.</p><h4>Bring designs to (real) life</h4><p>One of the first things I had to do as part of the onboarding process was to learn how to push code to our website. To be honest, I was surprised to learn that many 0f Etsy’s product designers also bring their work to life through front-end development. Coding takes a lot of time that could otherwise be spent designing, so why is it important? Because it allows you to:</p><ol><li><strong>Discover problems in your design</strong>: A lot of people think that coding is just like duplicating your design in the format of html/css. What I learned at Etsy is that coding actually helps you think about the information hierarchy and revisit some of the visual details. When we design in Sketch, we usually design on a zoomed-in canvas so things such as text and spacing look right in size generally look much bigger or wider on a real screen. Coding can also help make decisions to optimize for different screen sizes. Things look right on web may need some tweaks on hierarchy to make sure the most important content stands out on mobile or tablet. Bringing the interface to life by coding it can make visual problems more obvious and make sure the information hierarchy is optimal across different platforms.</li><li><strong>Create a smooth interaction</strong>: As designers, many of us love animations and delightful interactions. We enjoy talking about how things will feel before we start thinking about how to make things work. We are past the age of static pages. Motion and animation captivate and engage people in moments of delight and enhance the natural experience of using the product. However, it’s hard to visualize the feel of an interaction and to know whether it will work on a static canvas unless we can see it in action. When coding, we get to tweak the interaction to make it feel natural and optimize it for performance.</li><li><strong>Save time for engineers</strong>: I believe as designers, we need to take care of our product from beginning to end. Not only do we have to make sure everything’s good on Sketch but also we have to guarantee that it looks just as amazing on screens. Coding sometimes involves making changes to design, so taking care of coding by ourselves can help engineers save a lot of time going back and forth between design and code.</li></ol><h4>Make the best use of design critique</h4><p>Sometimes designers struggle to come up with ideas and make things look, work, or feel right. While working on my project, this happened to me. A piece of advice I got from my manager <a href="http://www.karyncampbell.com/">Kary</a> was that when you feel stuck, try not to tackle the problem all by yourself. It’s more productive to talk through the problem with others and reach solutions together.</p><p>By working through issues together, I learned a few key ways to give and receive constructive feedback:</p><ol><li><strong>Be positive</strong>: Start the conversation with a trusting tone (we kick off our design critique with icebreakers to get people comfortable before we start critiquing). Recognition or empathy for the effort that went into a project can encourage designers to talk more confidently and openly about what they’re struggling with. If we trust each other and share a common language for design decision-making, critiques become more practical rather than emotional. When evaluating others’ work, instead of saying something like, “This doesn’t work,” consider saying something like, “I want to know how it will work when…” Leave your questions open for more creative responses.</li><li><strong>Back up your statement with reason</strong>: It’s our instinct to speak up right away when we see something that doesn’t look right. Although it’s good to keep these senses sharp, we need to take a moment to think through why we feel a certain way and share our reasoning behind those feelings. . In design crit, constructive feedback can inspire a healthy dialogue that produces more ideas, whereas judgements with no context or rationale tend to lead nowhere.</li><li><strong>Focus on the broader problem</strong>: Personally, visual design is my strongest skill. When I look at something, it’s like it’s in my blood to be extra picky on the visual details. I used to spend more time polishing pixels than thinking about the broader problem. If we focus too much on tiny details, then we won’t get a chance to talk about deeper UX design choices. Design crit is a great time to talk about the broader problem and get everyone’s thoughts on that instead.</li><li><strong>Ask questions</strong>: One effective result of a design crit is to provide open-ended, human-centered ideas for designers to think about. Instead of providing a fixed solution during a design crit, asking some thought-provoking questions can keep the conversation flowing, tie back to the problem, and inspire creativity.</li></ol><h4>Keep the experience consistent</h4><p>Before, I used to prioritize designing things that looked cool and pretty. I would look through Dribbble for beautiful UI elements for fun. However, I realized that adding flourishes to my design may reduce the quality of communication. This comes from inconsistency or decoration without purpose. When certain elements of the interface don’t fit together holistically or serve the user, it’s time to clean up the design.</p><p>As a product experience gets more complicated, keeping the interface elements consistent throughout flows can be tricky. That’s why Etsy has made huge strides in documenting and updating a detailed web toolkit for all new product development on its website, emails and apps. In addition, styleguide training sessions and workshops helped me understand our brand and reflect consistent and rhythmic styles in my designs.</p><p>Although styleguide trainings provide principles for things like typography and colors, it is by no means constraining for the many solutions you might design. It’s more like a tool to help us move faster and consistently across the team.</p><h4>Finally: Be confident &amp; be humble</h4><p>Confidence in yourself, your team and your work helps you better communicate and receive feedback. My internship at Etsy helped me think more positively about design and life in general. It’s hard to feel frustrated about your work when you’re surrounded by friendly, encouraging and supportive people. As a result of my time here, I’ve gained greater confidence and learned to openly share my work to critique.</p><p>Keep learning. Design is a creative career. As long as you are willing to learn and adapt, there’s always opportunity. No matter how perfect you may consider your output, you can always get feedback from user research, analysis, or your team that will help push your design thinking and output further.</p><h3><strong>Many thanks</strong></h3><p>It seems like only yesterday that I took a bunch of quirky selfies in the Etsy photo booth on my first day. Sadly, my internship has come to an end. Throughout those eleven weeks, I experienced what it’s like to work with kind, supportive colleagues and for a company that has a wonderful vision and strong values. I am so blessed to have this opportunity to build for creative entrepreneurs and thoughtful shoppers.</p><p>Thanks to my team for having me, and helping me in every possible way, my manager Kary for always encouraging me, and all the designers at Etsy who offered me genuine feedback and critiques. Because of you, I’m a better designer.</p><p>If you enjoyed reading this article and would love to learn more about what it’s like to design at Etsy, feel free to reach out. And of course, <a href="https://www.etsy.com/careers">Etsy is hiring designers in New York City and San Francisco…</a></p><p>Also, check out my <a href="http://victoriabian.com/">portfolio</a> for more projects =)</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=35b557c44158" width="1" height="1" alt=""><hr><p><a href="https://medium.com/etsy-design/my-journey-at-etsy-as-a-product-design-intern-35b557c44158">My Journey at Etsy as a Product Design Intern</a> was originally published in <a href="https://medium.com/etsy-design">Etsy Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
    </channel>
</rss>