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>\n
Hypothesis<\/h2>\n\n- Houzz has \u201cIdeabooks\u201d <\/em><\/strong>which is a feature that allows users to save photos and ideas in boards to access them and make edits.\u201cIdeabooks\u201d 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>\n
- I discovered recently \u201cView in my room\u201d<\/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>\n<\/ul>\n
The objectives of this case\u00a0study:<\/h2>\n\n- Back up my hypothesis with data.<\/li>\n
- Conduct testing to uncover issues.<\/li>\n
- Discover confusion around saving and navigation.<\/li>\n
- Understand the discoverability issues in \u201cview in my room \u201d.<\/li>\n
- Propose design solutions and validate them.<\/li>\n<\/ol>\n
The process:<\/h1>\nResearch<\/h2>\n
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>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/1vNBXfOT3sRIcG6KNDV_i2Q.png\" "\\"\\"")
<\/a><\/p>\n<\/p>\n
Persona<\/h2>\n
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. (If this was a bigger project I would want to validate with more user interviews.)<\/em><\/p>\n\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1_o5TefPkD7iZcGvM36i-xQ.jpeg\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tAnna is a stylish young professional\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nThen I created a storyboard, where our hero (Anna) is facing a problem in getting inspired and expressing her style, she can\u2019t 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>\n
Storyboard<\/h2>\n\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1A10Pe6-ebthJpd7QXnw8kg.jpeg\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tStoryboard showing our hero struggling with finding the right furniture.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nJob stories<\/h2>\n
Based on Alan Klement<\/a> concept of creating job stories, focusing on motivations, situations, and outcomes, I created job stories to back up my hypothesis.<\/span><\/p>\n\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1Z6yrSbkHO6Yfhp3sfsV6Rw.png\")
<\/a>\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nGuerilla Testing<\/h2>\n
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 \u201cHouzz\u201d an app that can help you get ideas and choose furniture. How can you use Houzz to find the couch that you\u00a0want?<\/span><\/p>\nFor the next phase, I went out to the streets and conducted 5 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>\n\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1onE1PemBNKvzbOWBP9XueQ-300x300.jpeg\")
<\/a>\n\t\t\t<\/dt><\/dl>\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1l4EFLdNOC4dXScuPz55vLQ-300x300.jpeg\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tTesting People in Caltrain station\n\t\t\t\t<\/dd><\/dl>
\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1VkVr3H4QxjD2WfpltIjq2w-300x300.png\")
<\/a>\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nAffinity Mapping<\/h2>\n
From my notes on user testing, patterns started to appear and I started categorizing these issues by similar pains through affinity mapping.<\/p>\n
\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1uc1KJmVN2nMKTg-cxYOkAg.png\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tAffinity Map to discover where the users are having the most issues.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nThen, I created a 2*2 to prioritize these categories by most important, to figure out what is the biggest cause for frustration.<\/p>\n
\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1MxEPLTjKBsTFxWtsbK3EcQ.png\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\t2*2 to prioritize issues by importance.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nDefine the\u00a0problem<\/h2>\n
Pain point 1: \u201cIdeabooks\u201d navigation.<\/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 \u201cIdeabooks\u201d..<\/p>\n![\"Flow](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/145SGN45W3yACtqAKvWbEdw.png\")
<\/a>Flow problem in saving a photo<\/p><\/div>\n
Pain point 2: \"View in my room\u201d discoverability.<\/strong> Users did not know that \u201cview in my room\u201d feature exists, they were not tempted to click on the icon, and so they did not know what it does.<\/p>\n\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1yc8tHejBASHk7eD5iUgtug.png\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tThe current screen in the app.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\n** Now I will go through each pain point from ideation to validation separately to simplify things.<\/em><\/p>\nPain point 1: \u201cIdeabooks\u201d navigation<\/h1>\nExisting Task\u00a0flows<\/h2>\n
I analyzed the existing Task flow of getting to Ideabooks to understand where the problem is. In the tested scenario, I asked users to find a photo that they like, and save it<\/em> to access it later for ideas.<\/em><\/strong><\/p>\n\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1cteD-bkJx9egnK10NNlgzA.png\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tUsers were confused on where the photos were saved\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nIdeation<\/h2>\n\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1NVvchYORTBjgQAeKdBwSvg.jpeg\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tMe love coffee\u2026.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nI 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 \u201cIdeabooks\u201d.<\/p>\n
\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/1Z81IOoP9_CaF9jEvxn32xg.jpeg\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tThe proposed flow to create a clear navigation to Ideabooks\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nDesign solutions<\/h2>\n\n- Make navigation easier:<\/strong> I proposed to add the \u201cIdeabooks\u201d 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 Ideabooks is more of <\/em>a place to go to<\/em><\/strong> than <\/em>a tool to use<\/em><\/strong>,<\/em> by making it available in the navigation bar users can access it from any screen.<\/li>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/182L5dG3Mw7upqbM3WhB_aw.png\" "\\"\\"")
<\/a><\/p>\n- Giving feedback after saving: <\/strong>proposing a pop-up to show \u201cSaved to Ideabooks\u201d instead of just \u201cSaved\u201d, so it is clear where the item is saved, and where the user should go next to find it.<\/li>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/1YIxOPnTa7ewU-I2-53Zkw.png\" "\\"\\"")
<\/a><\/p>\n- Moving \u201cLatest\u201d section to the home screen<\/strong>, I have noticed through running comprehension testing that \u201cLatest\u201d 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.<\/li>\n
![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/1ouIrAoJ6qwZwYJYHzGk9FA.png\" "\\"\\"")
<\/a>\n<\/ol>\n<\/p>\n
Prototyping<\/h2>\n
After sketching on paper I turned my ideas into high fidelity screens using Sketch<\/a>, then used Marvel<\/a> to create a clickable prototype to validate my solutions.<\/p>\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/18GlX6DVB93_lj1wg2Bc-dA.png\" "\\"\\"")
<\/a><\/p>\n![\"\"](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/1CAzlMzJQEL8Lgmi6a-r22w.png\" "\\"\\"")
<\/a><\/p>\nProposed Flow<\/h2>\n\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/13RohnBlM3haXaHN2zI4gqw.png\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tThe proposed Flow to find Ideabooks\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nValidation<\/h2>\n
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>\n
I also conducted comprehension tests on the home screen, to see if placing the \u201cLatest\u201d there made sense to users. Most users had no problem identifying it.<\/p>\n
![](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/1bMC9aPZ7kpbkptTGZ7OTiw.png\")
<\/a><\/p>\nPain point 2: Discovering \u201cView in my\u00a0room\u201d<\/h1>\n
![\"Using](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/14_REcL8g85W9dOqpEoaQhA.gif\")
<\/a>Using \u201cView in my room\u201d to place a couch in my own living room\u2026.<\/p><\/div><\/center><\/p>\n
People didn\u2019t know that \u201cview in my room\u201d <\/em>feature exists in the app, my reasoning is:<\/p>\n\n- Having \u201cView in my room\u201d placed with the images carousel implies that it performs the same function which confuses users on what it does.<\/li>\n
- 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>\n<\/ul>\n
![\"Users](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/1XiN0xHsrOlU2s6wpomrB3g.gif\")
<\/a>Users were surprised to see what this button does.<\/p><\/div><\/center><\/p>\n
Word cloud:<\/h2>\n
So I started thinking about ways to increase discoverability\u2026I conducted comprehension tests on Usability Hub<\/a>\u00a0, My question was what do you think (View in my room) does? <\/em><\/strong>to understand why people are not clicking on it.<\/p>\nThe results showed that there was no clear understanding of what this feature does.<\/p>\n
![\"A](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/1wYqSF82vWQMHmDLhOYR3JQ.png\")
<\/a>A sample of the answers I got from the comprehension test<\/p><\/div>\n
Ideation<\/h2>\n
Thinking about discoverability:<\/strong>
\nI searched around on how to increase discoverability and came across this article at Studio<\/em> by UXPin<\/a>, which summarized discoverability strategies into 5 main strategies:<\/p>\n\n- Action bars<\/li>\n
- Huge buttons<\/li>\n
- Notifications<\/li>\n
- Discoverable controls<\/li>\n
- Social media log-ins<\/li>\n<\/ul>\n
To apply what I learned in the article, I initially thought about creating an icon to replace the text in \u201cview in my room\u201d,<\/em> I thought about changing its position on the screen, or having a tutorial to show what happens when clicked on it.<\/p>\n\n\t\t\t- \n\t\t\t\t
![\"\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/06\/16ILs_SyFXWFV_TpkAKm_6Q.jpeg\")
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t- \n\t\t\t\tIterations to increase discoverability for view in my room.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nPrototyping<\/h2>\n
For my first high fidelity iteration, I created different Icons to represent \u201cview in my room\u201d, It was challenging to create a familiar icon for an AR feature.<\/p>\n
![](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/1TqFku_-Y5bIExrCN8Wm7KA.png\")
<\/a><\/p>\nAfter 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>\n
![](\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/1IHIdN5ChhQc-aTiIj2Bteg.png\")
<\/a><\/p>\nHow do you create an Augmented Reality\u00a0Icon?<\/h2>\n
The objectives of this case\u00a0study:<\/h2>\n\n- Back up my hypothesis with data.<\/li>\n
- Conduct testing to uncover issues.<\/li>\n
- Discover confusion around saving and navigation.<\/li>\n
- Understand the discoverability issues in \u201cview in my room \u201d.<\/li>\n
- Propose design solutions and validate them.<\/li>\n<\/ol>\n
The process:<\/h1>\nResearch<\/h2>\n
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>\n
<\/a><\/p>\n<\/p>\n
Persona<\/h2>\n
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. (If this was a bigger project I would want to validate with more user interviews.)<\/em><\/p>\n\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tAnna is a stylish young professional\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nThen I created a storyboard, where our hero (Anna) is facing a problem in getting inspired and expressing her style, she can\u2019t 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>\n
Storyboard<\/h2>\n\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tStoryboard showing our hero struggling with finding the right furniture.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nJob stories<\/h2>\n
Based on Alan Klement<\/a> concept of creating job stories, focusing on motivations, situations, and outcomes, I created job stories to back up my hypothesis.<\/span><\/p>\n\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nGuerilla Testing<\/h2>\n
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 \u201cHouzz\u201d an app that can help you get ideas and choose furniture. How can you use Houzz to find the couch that you\u00a0want?<\/span><\/p>\nFor the next phase, I went out to the streets and conducted 5 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>\n\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt><\/dl>
\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tTesting People in Caltrain station\n\t\t\t\t<\/dd><\/dl>
\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nAffinity Mapping<\/h2>\n
From my notes on user testing, patterns started to appear and I started categorizing these issues by similar pains through affinity mapping.<\/p>\n
\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tAffinity Map to discover where the users are having the most issues.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nThen, I created a 2*2 to prioritize these categories by most important, to figure out what is the biggest cause for frustration.<\/p>\n
\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\t2*2 to prioritize issues by importance.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nDefine the\u00a0problem<\/h2>\n
Pain point 1: \u201cIdeabooks\u201d navigation.<\/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 \u201cIdeabooks\u201d..<\/p>\n<\/a>Flow problem in saving a photo<\/p><\/div>\n
Pain point 2: \"View in my room\u201d discoverability.<\/strong> Users did not know that \u201cview in my room\u201d feature exists, they were not tempted to click on the icon, and so they did not know what it does.<\/p>\n\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tThe current screen in the app.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\n** Now I will go through each pain point from ideation to validation separately to simplify things.<\/em><\/p>\nPain point 1: \u201cIdeabooks\u201d navigation<\/h1>\nExisting Task\u00a0flows<\/h2>\n
I analyzed the existing Task flow of getting to Ideabooks to understand where the problem is. In the tested scenario, I asked users to find a photo that they like, and save it<\/em> to access it later for ideas.<\/em><\/strong><\/p>\n\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tUsers were confused on where the photos were saved\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nIdeation<\/h2>\n\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tMe love coffee\u2026.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nI 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 \u201cIdeabooks\u201d.<\/p>\n
\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tThe proposed flow to create a clear navigation to Ideabooks\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nDesign solutions<\/h2>\n\n- Make navigation easier:<\/strong> I proposed to add the \u201cIdeabooks\u201d 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 Ideabooks is more of <\/em>a place to go to<\/em><\/strong> than <\/em>a tool to use<\/em><\/strong>,<\/em> by making it available in the navigation bar users can access it from any screen.<\/li>\n
<\/a><\/p>\n- Giving feedback after saving: <\/strong>proposing a pop-up to show \u201cSaved to Ideabooks\u201d instead of just \u201cSaved\u201d, so it is clear where the item is saved, and where the user should go next to find it.<\/li>\n
<\/a><\/p>\n- Moving \u201cLatest\u201d section to the home screen<\/strong>, I have noticed through running comprehension testing that \u201cLatest\u201d 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.<\/li>\n
<\/a>\n<\/ol>\n<\/p>\n
Prototyping<\/h2>\n
After sketching on paper I turned my ideas into high fidelity screens using Sketch<\/a>, then used Marvel<\/a> to create a clickable prototype to validate my solutions.<\/p>\n<\/a><\/p>\n<\/a><\/p>\nProposed Flow<\/h2>\n\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tThe proposed Flow to find Ideabooks\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nValidation<\/h2>\n
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>\n
I also conducted comprehension tests on the home screen, to see if placing the \u201cLatest\u201d there made sense to users. Most users had no problem identifying it.<\/p>\n
<\/a><\/p>\nPain point 2: Discovering \u201cView in my\u00a0room\u201d<\/h1>\n
<\/a>Using \u201cView in my room\u201d to place a couch in my own living room\u2026.<\/p><\/div><\/center><\/p>\n
People didn\u2019t know that \u201cview in my room\u201d <\/em>feature exists in the app, my reasoning is:<\/p>\n\n- Having \u201cView in my room\u201d placed with the images carousel implies that it performs the same function which confuses users on what it does.<\/li>\n
- 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>\n<\/ul>\n
<\/a>Users were surprised to see what this button does.<\/p><\/div><\/center><\/p>\n
Word cloud:<\/h2>\n
So I started thinking about ways to increase discoverability\u2026I conducted comprehension tests on Usability Hub<\/a>\u00a0, My question was what do you think (View in my room) does? <\/em><\/strong>to understand why people are not clicking on it.<\/p>\nThe results showed that there was no clear understanding of what this feature does.<\/p>\n
<\/a>A sample of the answers I got from the comprehension test<\/p><\/div>\n
Ideation<\/h2>\n
Thinking about discoverability:<\/strong>
\nI searched around on how to increase discoverability and came across this article at Studio<\/em> by UXPin<\/a>, which summarized discoverability strategies into 5 main strategies:<\/p>\n\n- Action bars<\/li>\n
- Huge buttons<\/li>\n
- Notifications<\/li>\n
- Discoverable controls<\/li>\n
- Social media log-ins<\/li>\n<\/ul>\n
To apply what I learned in the article, I initially thought about creating an icon to replace the text in \u201cview in my room\u201d,<\/em> I thought about changing its position on the screen, or having a tutorial to show what happens when clicked on it.<\/p>\n\n\t\t\t- \n\t\t\t\t<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
- \n\t\t\t\tIterations to increase discoverability for view in my room.\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nPrototyping<\/h2>\n
For my first high fidelity iteration, I created different Icons to represent \u201cview in my room\u201d, It was challenging to create a familiar icon for an AR feature.<\/p>\n
<\/a><\/p>\nAfter 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>\n
<\/a><\/p>\nHow do you create an Augmented Reality\u00a0Icon?<\/h2>\n
The process:<\/h1>\nResearch<\/h2>\n
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>\n
<\/p>\n 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. (If this was a bigger project I would want to validate with more user interviews.)<\/em><\/p>\n Then I created a storyboard, where our hero (Anna) is facing a problem in getting inspired and expressing her style, she can\u2019t 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>\n Based on Alan Klement<\/a> concept of creating job stories, focusing on motivations, situations, and outcomes, I created job stories to back up my hypothesis.<\/span><\/p>\n 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 \u201cHouzz\u201d an app that can help you get ideas and choose furniture. How can you use Houzz to find the couch that you\u00a0want?<\/span><\/p>\n For the next phase, I went out to the streets and conducted 5 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>\n From my notes on user testing, patterns started to appear and I started categorizing these issues by similar pains through affinity mapping.<\/p>\n Then, I created a 2*2 to prioritize these categories by most important, to figure out what is the biggest cause for frustration.<\/p>\n Pain point 1: \u201cIdeabooks\u201d navigation.<\/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 \u201cIdeabooks\u201d..<\/p>\n Flow problem in saving a photo<\/p><\/div>\n Pain point 2: \"View in my room\u201d discoverability.<\/strong> Users did not know that \u201cview in my room\u201d feature exists, they were not tempted to click on the icon, and so they did not know what it does.<\/p>\n ** Now I will go through each pain point from ideation to validation separately to simplify things.<\/em><\/p>\n I analyzed the existing Task flow of getting to Ideabooks to understand where the problem is. In the tested scenario, I asked users to find a photo that they like, and save it<\/em> to access it later for ideas.<\/em><\/strong><\/p>\n 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 \u201cIdeabooks\u201d.<\/p>\n <\/p>\n After sketching on paper I turned my ideas into high fidelity screens using Sketch<\/a>, then used Marvel<\/a> to create a clickable prototype to validate my solutions.<\/p>\n 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>\n I also conducted comprehension tests on the home screen, to see if placing the \u201cLatest\u201d there made sense to users. Most users had no problem identifying it.<\/p>\n Using \u201cView in my room\u201d to place a couch in my own living room\u2026.<\/p><\/div><\/center><\/p>\n People didn\u2019t know that \u201cview in my room\u201d <\/em>feature exists in the app, my reasoning is:<\/p>\n Users were surprised to see what this button does.<\/p><\/div><\/center><\/p>\n So I started thinking about ways to increase discoverability\u2026I conducted comprehension tests on Usability Hub<\/a>\u00a0, My question was what do you think (View in my room) does? <\/em><\/strong>to understand why people are not clicking on it.<\/p>\n The results showed that there was no clear understanding of what this feature does.<\/p>\n A sample of the answers I got from the comprehension test<\/p><\/div>\n Thinking about discoverability:<\/strong> To apply what I learned in the article, I initially thought about creating an icon to replace the text in \u201cview in my room\u201d,<\/em> I thought about changing its position on the screen, or having a tutorial to show what happens when clicked on it.<\/p>\n For my first high fidelity iteration, I created different Icons to represent \u201cview in my room\u201d, It was challenging to create a familiar icon for an AR feature.<\/p>\n 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>\n<\/a><\/p>\nPersona<\/h2>\n
\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\nStoryboard<\/h2>\n
\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\nJob stories<\/h2>\n
\n\t\t\t
<\/a>\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nGuerilla Testing<\/h2>\n
\n\t\t\t
<\/a>\n\t\t\t<\/dt><\/dl>\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t\n\t\t\t
<\/a>\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nAffinity Mapping<\/h2>\n
\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\n\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\nDefine the\u00a0problem<\/h2>\n
<\/a>\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\nPain point 1: \u201cIdeabooks\u201d navigation<\/h1>\n
Existing Task\u00a0flows<\/h2>\n
\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\nIdeation<\/h2>\n
\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\n\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\nDesign solutions<\/h2>\n
\n
<\/a><\/p>\n<\/a><\/p>\n<\/a>\n<\/ol>\nPrototyping<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\nProposed Flow<\/h2>\n
\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\nValidation<\/h2>\n
<\/a><\/p>\nPain point 2: Discovering \u201cView in my\u00a0room\u201d<\/h1>\n
<\/a>\n
<\/a>Word cloud:<\/h2>\n
<\/a>Ideation<\/h2>\n
\nI searched around on how to increase discoverability and came across this article at Studio<\/em> by UXPin<\/a>, which summarized discoverability strategies into 5 main strategies:<\/p>\n\n
\n\t\t\t
<\/a>\n\t\t\t<\/dt>\n\t\t\t\t
\n\t\t<\/div>\n\nPrototyping<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\nHow do you create an Augmented Reality\u00a0Icon?<\/h2>\n