small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="http://ift.tt/2qsw5BK">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div><a href="http://ift.tt/2s6Ke8V"><img src="http://ift.tt/2r8upl0" alt="Go to the profile of Aya Khalifa"></a></div>
<div><a href="http://ift.tt/2s6Ke8V">Aya Khalifa</a></p>
<p>Product Designer @Tradecraft, User Advocate and a former Architect.</p>
<p>May 25</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="http://ift.tt/2s6KfcZ" alt="1*p8wclx2TCzrF8EH_q_V6Kg.jpeg"></div>
</div>
</div>
<div>
<h2>How changing “Houzz” can inspire you to change your home style</h2>
<p>We are all looking for self-expression and inspiration. We express ourselves through fashion, music, art, and through furniture. Houzz is an interior design app that has thousands of furniture inspirations for users to express their styles.</p>
<p>After talking to friends and interviewing users I found that out of the people I talked to there were 3 main categories:</p>
<ol>
<li><em>New-movers furnishing a new house and looking for a wide variety of ideas and services.</em></li>
<li><em>Casual-Renewers who upgrade a piece of furniture every once and a while.</em></li>
<li><em>Style-lovers, They are always on the lookout for new ideas and like to shop frequently for smaller furniture pieces or decorations.</em></li>
</ol>
<p>I personally fall into the last category, I use Houzz because I am passionate about interior design and I love creating spaces and matching furniture, Houzz is my very own Pinterest. However, I noticed some usability issues in the app that hinders inspiration, so I decided to track them down.</p>
<h4><strong>Hypothesis</strong></h4>
<ul>
<li>Houzz has “<strong><em>Ideabooks” </em></strong>which is a feature that allows users to<strong><em> </em></strong>save photos and ideas in boards to access them and make edits.“Ideabooks” does not have an easy access, my hypothesis is by making navigation to it easier more users will be able to find their saved ideas without frustration.</li>
<li>I discovered recently <strong><em>“View in my room”</em></strong> which is an AR visualization tool allowing you to place items in your surroundings, I had no idea it existed, its indication right now is subtle and almost invisible to new users, my hypothesis is that by making this feature visible more users will be able to see this feature and use it.</li>
</ul>
<h4>The objectives of this case study:</h4>
<ol>
<li>Back up my hypothesis with data.</li>
<li>Conduct testing to uncover issues.</li>
<li>Discover confusion around saving and navigation.</li>
<li>Understand the discoverability issues in “view in my room ”.</li>
<li>Propose design solutions and validate them.</li>
</ol>
<h3>The process:</h3>
<h4>Research</h4>
<p>Following the IDEO model for the human-centered design, I started the process with usability testing and ended with validation. This process provided me with a roadmap and a solid foundation to base my design solutions on users findings.</p>
</div>
<div>
<div>
<div><img src="http://ift.tt/2r8uqWf" alt="1*vNBXfOT3sRIcG6KNDV_i2Q.png"></div>
</div>
</div>
<div>
<h3>Persona</h3>
<p>First I created a provisional persona for a typical user for Houzz based on online research and the base of users within my friends and family. <em>(If this was a bigger project I would want to validate with more user interviews.)</em></p>
<div>
<div><img src="http://ift.tt/2s6KCnZ" alt="1*_o5TefPkD7iZcGvM36i-xQ.jpeg"></div>
</div>
<p>Anna is a stylish young professional</p>
<p>Then I created a storyboard, where our hero (Anna) is facing a problem in getting inspired and expressing her style, she can’t find the right couch for her living room, but using Houzz helped her overcome this problem. Imagining the scenario helped me empathize with the users, and I could better address the frustrations they would face.</p>
<h4>Storyboard</h4>
</div>
<div>
<div>
<div><img src="http://ift.tt/2r8qVz0" alt="1*A10Pe6-ebthJpd7QXnw8kg.jpeg"></div>
</div>
<p>Storyboard showing our hero struggling with finding the right furniture.</p></div>
<div>
<h4>Job stories</h4>
<blockquote><p>Based on <a href="http://ift.tt/16t5pPT">Alan Klement</a> concept of creating job stories, focusing on Motivations, situations, and outcomes, I created job stories to back up my hypothesis.</p></blockquote>
</div>
<div>
<div>
<div><img src="http://ift.tt/2s6HIzp" alt="1*Z6yrSbkHO6Yfhp3sfsV6Rw.png"></div>
</div>
</div>
<div>
<h3>Guerilla Testing</h3>
<blockquote><p>Imagine you just moved to a new place, and you are bored with your old couch, now you are looking for a new one, your friend just told you about “Houzz” an app that can help you get ideas and choose furniture. How can you use Houzz to find the couch that you want?</p></blockquote>
<p>For the next phase, I went out to the streets and conducted 5 <a href="http://ift.tt/1G52xLw">guerilla</a> usability tests using a scenario inspired by my storyboard. I tested on users riding the Caltrain on my trip from Redwood City to SF in the morning. I was able to meet users that validated some of my persona hypotheses and I could spot some pain points that emerged through using the app.</p>
</div>
<div>
<div>
<div><img src="http://ift.tt/2r8nyYz" alt="1*onE1PemBNKvzbOWBP9XueQ.jpeg"></div>
</div>
<div>
<div><img src="http://ift.tt/2s6QRIA" alt="1*VkVr3H4QxjD2WfpltIjq2w.png"></div>
</div>
<div>
<div><img src="http://ift.tt/2r86eTF" alt="1*l4EFLdNOC4dXScuPz55vLQ.jpeg"></div>
</div>
<p>Testing People in Caltrain station</p></div>
<div>
<h4>Affinity mapping:</h4>
<p>From my notes on user testing, patterns started to appear and I started categorizing these issues by similar pains through affinity mapping.</p>
<div>
<div><img src="http://ift.tt/2s6xDT6" alt="1*uc1KJmVN2nMKTg-cxYOkAg.png"></div>
</div>
<p>Affinity Map to discover where the users are having the most issues.</p>
<p>Then, I created a 2*2 to prioritize these categories by most important, to figure out what is the biggest cause for frustration.</p>
<div>
<div><img src="http://ift.tt/2r8iraS" alt="1*MxEPLTjKBsTFxWtsbK3EcQ.png"></div>
</div>
<p>2*2 to prioritize issues by importance.</p>
<h3><strong>Define the problem</strong></h3>
<p><strong><em>Pain point 1: “Ideabooks” navigation. </em></strong>Users were not able to find photos that they saved, they would save the photo and go back to the previous screen to look for where the photo might be, and get confused. It took users a while and multiple tries before finding “Ideabooks”..</p>
<div>
<div><img src="http://ift.tt/2s6PVUk" alt="1*45SGN45W3yACtqAKvWbEdw.png"></div>
</div>
<p>Flow problem in saving a photo</p>
<p><strong><em>Pain point2</em>: “<em>View in my room” discoverability.</em> </strong>Users did not know that “view in my room” feature exists, they were not tempted to click on the icon, and so they did not know what it does.</p>
<div>
<div><img src="http://ift.tt/2r8kXhs" alt="1*yc8tHejBASHk7eD5iUgtug.png"></div>
</div>
<p>The current screen in the app.</p>
<p><em>** Now I will go through each pain point from ideation to validation separately to simplify things.</em></p>
<h3>Pain point 1: “Ideabooks” navigation</h3>
<h4>Existing Task flows</h4>
<p>I analyzed the existing Task flow of getting to Ideabooks to understand where the problem is. In the tested scenario, I asked users to <strong><em>find a photo that they like, and save it</em> <em>to access it later for ideas.</em></strong></p>
</div>
<div>
<div>
<div><img src="http://ift.tt/2s6Btfc" alt="1*cteD-bkJx9egnK10NNlgzA.png"></div>
</div>
<p>Users were confused on where the photos were saved</p></div>
<div>
<h3>Ideation</h3>
<div>
<div><img src="http://ift.tt/2r8yeGV" alt="1*NVvchYORTBjgQAeKdBwSvg.jpeg"></div>
</div>
<p>Me love coffee….</p>
<p>I started sketching out solutions on paper to give freedom to my flow of thought and not be constrained by details. My main objective was to create an easy flow and a clearer way to navigate to “Ideabooks”.</p>
</div>
<div>
<div>
<div><img src="http://ift.tt/2s6EXhP" alt="1*Z81IOoP9_CaF9jEvxn32xg.jpeg"></div>
</div>
<p>The proposed flow to create a clear navigation to Ideabooks</p></div>
<div>
<h4>Design solutions</h4>
<p>1- <strong><em>Make navigation easier</em></strong> I proposed to add the “Ideabooks” to the navigation bar at the bottom, and remove it from the tool menu at the top which only appears in the home screen. My reasoning was that <em>Ideabooks is more of </em><strong><em>a place to go to</em></strong><em> than </em><strong><em>a tool to use</em></strong><em>,</em> by making it available in the navigation bar users can access it from any screen.</p>
<div>
<div><img src="http://ift.tt/2r8vV6q" alt="1*82L5dG3Mw7upqbM3WhB_aw.png"></div>
</div>
<p><strong><em>2- Giving feedback after saving. </em></strong>proposing<strong><em> </em></strong>a<strong><em> </em></strong>pop-up to show “Saved to Ideabooks” instead of just “Saved”, so it is clear where the item is saved, and where the user should go next to find it.</p>
<div>
<div><img src="http://ift.tt/2s71GKm" alt="1*YIxOPnTa7ewU--I2-53Zkw.png"></div>
</div>
<p><strong><em>3-Moving “Latest” section to the home screen</em></strong>, I have noticed through running comprehension testing that “Latest” in the navigation, was either misunderstood or not used at all so I moved it to the home screen, as a section of the updates.</p>
<div>
<div><img src="http://ift.tt/2r8uqFA" alt="1*ouIrAoJ6qwZwYJYHzGk9FA.png"></div>
</div>
<h4>Prototyping</h4>
<p>After sketching on paper I turned my ideas into high fidelity screens using Sketch, then used Marvel to create a clickable prototype to validate my solutions.</p>
</div>
<div>
<div>
<div><img src="http://ift.tt/2s6IM6u" alt="1*8GlX6DVB93_lj1wg2Bc-dA.png"></div>
</div>
<div>
<div><img src="http://ift.tt/2r8uZyY" alt="1*CAzlMzJQEL8Lgmi6a-r22w.png"></div>
</div>
</div>
<h4>Proposed Flow</h4>
<div>
<div>
<div><img src="http://ift.tt/2s6KB3p" alt="1*3RohnBlM3haXaHN2zI4gqw.png"></div>
</div>
<p>The proposed Flow to find Ideabooks</p></div>
<div>
<h4>Validation</h4>
<p>I tested the prototype with 5 new users using the same scenario used for guerilla testing to validate if the problem has been solved.</p>
<p>I also conducted comprehension tests on the home screen, to see if placing the “Latest” there made sense to users. Most users had no problem identifying it.</p>
<div>
<div><img src="http://ift.tt/2r8FRwR" alt="1*bMC9aPZ7kpbkptTGZ7OTiw.png"></div>
</div>
<h3>Pain point 2: Discovering “View in my room”</h3>
<div>
<div><img src="http://ift.tt/2s6GwMC" alt="1*4_REcL8g85W9dOqpEoaQhA.gif"></div>
</div>
<p>Using “View in my room” to place a couch in my own living room….</p>
<p>people didn’t know that <em>“view in my room” </em>feature exists in the app, my reasoning is :</p>
<ul>
<li>Having “View in my room” placed with the images carousel implies that it performs the same function which confuses users on what it does.</li>
<li>Using text does not prompt the user to be interested or curious to click it, so they might skip the screen without even knowing this feature exists.</li>
</ul>
<div>
<div><img src="http://ift.tt/2r8ybKZ" alt="1*XiN0xHsrOlU2s6wpomrB3g.gif"></div>
</div>
<p>Users were surprised to see what this button does.</p>
<h4>Word cloud:</h4>
<p>So I started thinking about ways to increase discoverability…I conducted comprehension tests on <a href="http://ift.tt/1NgCqum">Usability Hub</a> , My question was <strong><em>what do you think (View in my room) does? </em></strong>to understand why people are not clicking on it.</p>
<p>The results showed that there was no clear understanding of what this feature does.</p>
<div>
<div><img src="http://ift.tt/2s6uUJu" alt="1*wYqSF82vWQMHmDLhOYR3JQ.png"></div>
</div>
<p>A sample of the answers I got from the comprehension test</p>
<h3>Ideation</h3>
<h4>Thinking about discoverability:</h4>
<p>I searched around on how to increase discoverability and came across this article at <a href="http://ift.tt/2qsEntt"><em>Studio</em> by UXPin</a>, which summarized discoverability strategies into 5 main strategies:</p>
<ul>
<li>Action bars</li>
<li>Huge buttons</li>
<li>Notifications</li>
<li>Discoverable controls</li>
<li>Social media log-ins</li>
</ul>
<p>To apply what I learned in the article, I initially thought about creating an icon to replace the text in <em>“view in my room”,</em> I thought about changing its position on the screen, or having a tutorial to show what happens when clicked on it.</p>
<div>
<div><img src="http://ift.tt/2r8usgP" alt="1*6ILs_SyFXWFV_TpkAKm_6Q.jpeg"></div>
</div>
<p>Iterations to increase discoverability for view in my room.</p>
<h4><strong>Prototyping</strong></h4>
<p>For my first high fidelity iteration, I created different Icons to represent “view in my room”, It was challenging to create a familiar icon for an AR feature.</p>
<div>
<div><img src="http://ift.tt/2s6LZTM" alt="1*TqFku_-Y5bIExrCN8Wm7KA.png"></div>
</div>
<p>After conducting comprehension test to validate my solutions, users found the icons to be vague and confusing and the tip was not doing much good..</p>
<div>
<div><img src="http://ift.tt/2r8upBw" alt="1*IHIdN5ChhQc-aTiIj2Bteg.png"></div>
</div>
<h4>How do you create an Augmented Reality Icon?</h4>
<div>
<div><img src="http://ift.tt/2s6Dism" alt="1*QT0QzyEfk-WiIWHCtQRRhA.png"></div>
</div>
<p>For this iteration I thought about using the icons already existing in Houzz to ensure some level of familiarity with users, I used the “Shop” icon combined with the Camera square to create a clean simple Icon that would be visible enough to catch users eyes.</p>
<h4>Design solutions:</h4>
<ol>
<li><strong><em>Adding an Icon</em> </strong>to make the feature more visible and clickable.</li>
<li><strong><em>Separate different features:</em></strong></li>
</ol>
<ul>
<li><em>Placing “view in my room” in the center below the item image.</em></li>
<li><em>Placing the carousel of images at the top right(I would have chosen to reove it and use a dot slider, but the app already has the slider function to view different Items)</em></li>
</ul>
</div>
<div>
<div>
<div><img src="http://ift.tt/2r8urcL" alt="1*ui1W-N7GYy5bnHEjpdsjrQ.png"></div>
</div>
</div>
<div>
<p><strong><em>3-Tool tip screen:</em></strong> Highlighting the Icon using a tip screen that shows simple copy to explain that the camera will open to view the item in the room.</p>
</div>
<div>
<div>
<div><img src="http://ift.tt/2s6OXri" alt="1*_BknfnisL3kJYxPasf5n9A.png"></div>
</div>
</div>
<h4>The proposed flow</h4>
<div>
<div>
<div><img src="http://ift.tt/2r8dK0Q" alt="1*10lee7oaD69AHJmQPlLBJw.png"></div>
</div>
<p>The proposed flow after adding the design edits.</p></div>
<div>
<h4>Validation:</h4>
<div>
<div><img src="http://ift.tt/2s6I5u1" alt="1*qbAz-NII9P2Z-_F9RMy6VA.png"></div>
</div>
<p>After conducting validation tests:</p>
<ul>
<li>Users had no difficulty using the carousel after changing its position.</li>
<li>Users were able to catch words like “<em>camera”</em> and “<em>furniture” </em>without reading the whole text and were able to understand the feature, and curious to click on the icon.</li>
</ul>
<p>Generally the results were better and more people clicked on “view in my room”</p>
<p><strong><em>I used Marvel to create a clickable prototype for validation, you can find it </em></strong><a href="http://ift.tt/2qXXKOD"><strong><em>here.</em></strong></a></p>
<div>
<div><img src="http://ift.tt/2r8dIGg" alt="1*AmI9wRbXrfIWGESx6eEiTw.gif"></div>
</div>
<p>yeay, now you can get inspired!</p>
<h4><strong>TL;DR</strong></h4>
<p>Houzz provides home lovers with a space to express themselves through features like, saving ideas on boards and viewing furniture through the camera. “Ideabooks” is the user’s personal space on Houzz, so it made more sense to relocate it to the navigation bar to have easy access to it from any screen.</p>
<p>Visual users like myself love features like“view in my room”. The way it is represented in the app is subtle and almost invisible for new users, making it visible will give a chance to more people to use it and get inspired.</p>
<blockquote><p>I hope you enjoyed the read and learned something new!</p></blockquote>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p><em>Note: I do not work for, nor am I affiliated with Houzz. This UX study was done as an educational experience to help make me a better designer.</em></p>
<p><strong>Thanks for reading! If you want to collaborate, talk about product design, or just say hello, please shoot me an email </strong><a href="http://ift.tt/qpSDGY"><strong>ayaa.fayez@gmail.com</strong></a><strong> or connect via </strong><a href="http://ift.tt/2qY07AT"><strong>Linkedin</strong></a></p>
<p><em>I give props to </em><a href="http://ift.tt/2s6HKav"><em>Zac Halbert</em></a><em>, </em><a href="http://ift.tt/2r86fab"><em>Mel Smith</em></a><em>, </em><a href="http://ift.tt/2s6A9sz"><em>Kevin Kwon</em></a><em>, </em><a href="http://ift.tt/2r8BHFd"><em>Marjan Soleimanieh</em></a><em>, </em><a href="http://ift.tt/2np2ebS"><em>Jon Ganey</em></a><em>, </em><a href="http://ift.tt/2r8ygi1"><em>Stacey Wang</em></a><em>, </em><a href="http://ift.tt/2s6HIPV"><em>Michael Tea</em></a><em>, </em><a href="http://ift.tt/2nUDJr0"><em>William Ng</em></a><em>, </em><a href="http://ift.tt/2s6xE9C"><em>Agnes Kim</em></a><em>, </em><a href="http://ift.tt/2r8ygyx"><em>Nausheen Ali</em></a><em> and the great </em><a href="http://ift.tt/2s6PWaQ"><em>Wael Mahmoud</em></a><em> for helping me out with this.</em></p>
</div>
<div>
<div></div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<p>Write a response…</p>
<p>prototypr.io</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div><a href="http://ift.tt/2qsw5BK">http://ift.tt/2qsw5BK</a></div>


Houzz: a UX case study

Houzz: a UX case study

Top Stories