<p>Published on <a href="https://blog.prototypr.io/uxdi-etsy-feature-integration-1cf3bb4cacf1?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Jaclyn </p>
<p>Etsy remains top of mind for many consumers looking for unique products. One of the main differentiating features of Etsy is the direct connection of buyers with local designers and craftsman. When talking to users of Etsy, one of the problems often mentioned is that the communication between buyers and sellers is not always clear and consistent when purchasing customized goods. This led myself and my team to look into how Etsy could improve the way its users sell and buy custom items.</p>
<blockquote><p>Original Proposed Problem: While there are currently ways for customers to communicate their customizations with sellers via messaging, Etsy would like to create features that easily identify sellers who take requests for customizations and also allow those same sellers to easily take requests.</p></blockquote>
<h3>Project Introduction</h3>
<p>Moving into the beginning of the second week of <a href="https://generalassemb.ly/">General Assembly’s User Experience Design Immersive (UXDI)</a>, a second project was proposed in which we were each assigned a company’s mobile app that needed new features to improve their user’s experience, as well as a team that we would be working with. My team included classmates Amy Spengler and Erika Shields, and we were paired with Etsy to find a way for its sellers to sell custom items more easily.</p>
<p>After the successful completion of the first week of the course, Amy, Erika, and I continued to discover and build on our UX knowledge and skills. We would spend the following two weeks learning and growing more within the field by adding feature prioritization, mid-fidelity prototyping, and working with a UX team to our toolboxes.</p>
<h3>Research — Exploration</h3>
<p>To begin the process of improving on Etsy’s current mobile app, my team explored the current mobile app as well as the current user and seller demographics. We found that typical Etsy users tend to be young, female, and educated with 67% of the buyers and 86% of sellers being female.</p>
<p>In order to find potential participants for our user interviews, we created and sent out a screener to find people who were familiar with the Etsy desktop and/or mobile platform, use Etsy at least monthly or more, and have bought a customizable on Etsy at least once. A total of 76 people responded to the screener and the results provided us with 45 individuals, all of which were female, that fit the above criteria for us to reach out to for further information. In the end, we received interest and interviewed 6 women total — 3 buyers, 2 sellers, and one that was both a buyer and a seller.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/906/1*fhgfptUU3sXSf_Vr_ZDGbA.png"></p>
<blockquote><p>Instead of waiting for messages from sellers, it would be awesome to fill-out the customizable options when you are checking out. <strong><em>–Courtney B.</em></strong></p></blockquote>
<p>My team would perform some of these interviews together as a group and some of them individually, so we created an interview script. This was broken down into general questions, buyer specific questions, and seller specific questions. We would ask both the buyer specific and seller specific questions to the individual that both bought and sold on Etsy. We received a lot of data and positive data about the Etsy experience overall, but a few of the interviewees did note that buying customized items on Etsy was not always the most intuitive.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/906/1*OUYHoMeLTXgADd6ziWeb6w.png"></p>
<h3>Synthesis — Compilation</h3>
<p>To continue, my team combined and began synthesizing the data collected from the six user research interviews. We sorted through the interview notes and began organizing elements into four categories — behaviors, likes, dislikes, and quotes. After sorting, we wrote each item onto their own sticky note to cultivate into an infinity map. Using the themes that emerged within the groupings, my team created statements that would represent the users. during the remainder of the project.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KQ_r5gLlwKKi1pDugrXAWA.jpeg"></p>
<p>We kept the notes for both buyer and separated, but noticed many of the statements from both buyers and sellers related or even overlapped. We decided these were the aspects that we should focus on most since they would cater to both the buyer and the seller. The overlapping statements were:</p>
<ul>
<li>I enjoy connecting directly with the creators (or buyers).</li>
<li>I wish the purchasing process was more standardized.</li>
<li>I want to be able to find an item quickly (or a buyer to find my items quickly).</li>
<li>I expect a prompt response and clear notifications.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/906/1*uVndxg3TtcTfiOSfhW-9Yw.png"></p>
<p>By combining the original proposed problem with the synthesis of our user interview data and user statements, my team created the following problem statement for Etsy’s current platform.</p>
<blockquote><p>Problem Statement: When shopping for customizable products, buyers on Etsy don’t always know how to identify these items and what to expect when purchasing them. How might we bridge the gap of what customizable options the seller is offering and the buyer expects?</p></blockquote>
<p>Using all of the user interview synthesis, user statements, and additional research we did on Etsy, we created two personas that we would design for. These personas included one for the buyer — Alexis, the “thoughtful gift giver with a large social circle” — and one for the seller — Lyndsey the “busy creative looking for extra income.” We continued to bring up and these personas throughout the design stages to keep our users top of mind.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/906/1*4M7A6jO2ssjDBklseZJ-zw.png"><img alt="" src="https://cdn-images-1.medium.com/max/906/1*2P5f_rg5_tzDi8p6ZL1aQw.png"></p>
<h3>Ideate + Design — Conception</h3>
<p>After defining the problem statement, our team began moving to the next step toward integrating features to solve Etsy’s problem. From the data synthesis, it was clear that current Etsy both buyers and sellers were focused on two things — a more standardized purchasing process when buying customizable items and more prompt responses and clear notifications when messaging other buyers or sellers.</p>
<p>To begin the design process, we started by defining product goals that would help solve the problem statement, as well as the features that could be incorporated to achieve these goals.</p>
<h4>Goals:</h4>
<ol>
<li>Find customizable products and options quickly</li>
<li>Make the inputs for customized details clear and concise</li>
<li>Turnaround time communicated clearly</li>
<li>Streamlined and transparent communication between buyer and seller</li>
</ol>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xzskEvHFjZ4lDMsySQxvbw.jpeg">Sketch Results after the Design Studio Process</p>
<p>With these goals defined, we then performed a <a href="https://vimeo.com/37861987">design studio</a>. This is a brainstorming exercise used to organize and ideas, as well as feedback, from every team member. As a group we developed hundreds of ideas using this methodology, and as we continued the process, we continued to combine ideas and narrow down the exact features we should focus on. After our ideas were collected, we began hand-drawing the wireframes of new screens that would need to be created. The new screens included our idea for a “Custom Corner” where users could go to browse and find custom items and to add custom text fields directly into the item page and cart. We also created two user flows or “happy paths” — one for the buyer, Alexis, and one for the seller, Lyndsey.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/906/1*9NOGRLnE-kUu8GKXHnkuQw.png"><img alt="" src="https://cdn-images-1.medium.com/max/907/1*sQylu7Sl6JgSciMfaVWpYQ.png"></p>
<p>Our team then worked on feature prioritization by creating a MoSCoW prioritization map as well as a feature rollout plan. The MoSCoW helped us measure which features would be more useful, as well as which ones would be most cost and time efficient. Using the MoSCoW prioritization, we made the decision it was best to focus our efforts on the top portion. Then, a feature rollout plan was created and included three phases consisting of multiple weeks each and ten weeks total. For the following usability tests and design iterations, we focused solely on phase one.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/906/1*LHrDURySsA4xX5D6UvN4Nw.png"><img alt="" src="https://cdn-images-1.medium.com/max/907/1*dBCtGjaF6jrgQtDwgWPr_g.png"></p>
<p>Next, we moved our sketches into <a href="https://www.sketchapp.com/">Sketch</a> to create the first round of digital mid-fidelity wireframes. We split the responsibility of creating these wireframes throughout all three members of the teams so we could all gain more experience using Sketch. When creating these wireframes, we kept our user statements from the research stage in mind and applied them directly to our wireframe designs. Then, we moved these wireframes into the prototyping tool, <a href="https://www.invisionapp.com/">Invision</a>. After importing the paper wireframes into Invision, the result was a functioning product that was similar to Etsy’s current platform but with our new features integrated.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/906/1*WLWyM0Qcl-UKbnkXdkx2_Q.png"><img alt="" src="https://cdn-images-1.medium.com/max/904/1*NopzP-SICUOGVVDbSJmmMg.png"><img alt="" src="https://cdn-images-1.medium.com/max/906/1*kSUNz-ofo2l3mIwfjAxrxw.png"><img alt="" src="https://cdn-images-1.medium.com/max/906/1*RVZwwkZUZ4tgHwQnYQrIXw.png"></p>
<h3>Usability + Usefulness</h3>
<p>The process of two rounds of usability tests, familiarity with purchasing customizable gifts online as well as familiarity with Etsy, scenario/tasks, additional questions</p>
<p>Next, we used the prototype to conduct two separate rounds of four usability tests. Using a script with set scenarios and tasks as a guideline, we split up the four usability tests of the first round between the three of us to prompt users through the prototype. We recorded the phone screen for each usability test while taking detailed notes of exactly what the user is clicking and what they are thinking as they are making these clicks.</p>
<p>After each user completed all of the scenario and tasks, we would conclude by asking them a few open ended questions about the process they went through. This is where I believe some of the most valuable information to be found as they would give extra thoughts that we as the testers may not have thought about asking.</p>
<h3>Findings + Iteration</h3>
<p>After each round of four usability tests, we as a group synthesized the notes from each of the users. With these notes, we found common themes or pain points throughout all. We then broke these into two categories: usability and usefulness. This was repeated a second time for the following four usability tests.</p>
<h4>Usability, Round One:</h4>
<ul>
<li>Once someone finds “Custom Corner,” they got “stuck” and want to stay in that section</li>
<li>All users clicked on the “monogram &amp; names” section in the jewelry search section instead of using filter</li>
<li>The process of finding conversations was not easy for most users</li>
</ul>
<h4>Usefulness, Round One:</h4>
<ul>
<li>It is difficult for all users to find where to add a listing as it feels buried and they expect it to live within the homepage</li>
<li>Users were able to quickly customize an item and add it <br />into cart</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/906/1*bP3S0XoZ-ijRG490Pbkxag.png"></p>
<p>While keeping these three goals in mind, we added, recreated, and edited the current mid-fidelity wireframes within Sketch and updated the prototype. This is the point we conducted the second round of four usability tests using the new prototype, synthesized the notes from the usability tests once again, and reiterated on the design for the second time, as follows. We noticed that there were not nearly as many issues thanks to our first iterations, but there were still a few improvements to be made.</p>
<h4>Usability, Round Two:</h4>
<ul>
<li>All users assume they can find all custom items using the “Personalize” and “Monogram” pages in “Custom Corner”</li>
</ul>
<h4>Usefulness, Round Two:</h4>
<ul>
<li>The manage button does not resonate with all users when in the seller section — they don’t notice it or understand what it does</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/906/1*uF0oxBu2-a9Gu01VTdT6Fg.png"></p>
<p><strong>To view the final prototype after two rounds of usability tests and two rounds of design iteration, click </strong><a href="https://invis.io/3SDCF61EC"><strong>here</strong></a><strong>.</strong></p>
<h3>Conclusion + Next Steps</h3>
<p>I found this project challenging, yet I gained valuable insight on what it would be like to work on a product for a continuous amount of time. As I enjoy collaborating with others, I also highly enjoyed working with a team for the first time within the UX field. If our team would be chosen to continue with this project for Etsy, we would add photos and more text and then conduct additional usability tests to see if a higher fidelity product would help users work their way through the scenarios and tasks more efficiently.</p>
<p>Then, we would interview more sellers to gain more robust data and work to create more transparency between sellers and the buyer. We would also research and test ways to facilitate better conversation and better inbox location for the users. We would also like to market the “Custom Corner” on the “For you” home screen tab to make users aware of the new feature. We would also like to test and iterate on the Android usability and integrate “Custom Corner” into Android as well.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1cf3bb4cacf1" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/uxdi-etsy-feature-integration-1cf3bb4cacf1">UX Case Study — Etsy Feature Integration</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


UX Case Study — Etsy Feature Integration

Top Stories