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

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2oFGMjV">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div><img src="http://ift.tt/2og5uL6" alt="1*q0xMOMYWU8YOsVOAEgXKcg.png"></div>
</div>
<div>
<h2>A UX Case Study on VSCO’s iOS App</h2>
<p>It all started when I noticed my friend jumping between different apps making edits and applying filters, until finally switching to Instagram to post the final photo of our dinner. It seemed he really like the filters from an app called VSCO, but could not be bothered to use the app’s other features that would’ve saved him from having to switch to different apps. This got me thinking: <strong>Why is he bringing the photo to another app when he can do all the same edits on the VSCO app?</strong></p>
<h3><strong>Identifying the Problem</strong></h3>
<div><img src="http://ift.tt/2oFOwCF" alt="1*9vuyYcAOiFKDmF4MVUsVxQ.png"></div>
<p>There are even more icons in the edit menu in addition to the ones above</p>
<p>After browsing through the app, I could start to see why my friend was hesitant to use the app’s full features. A pain point I discovered was the lack of labels for icons especially during the photo taking and editing process. There are some icons that are recognizable without a label, however, most of the icons that VSCO decided to use were confusing and required a lot of guesswork that left me quitting out of the app before getting to any meaningful results. <strong>Multiple icons without labels lead to confusion, frustration, and ultimately poor user experience.</strong> It turns out that I’m not the only user out there suffering from this problem.</p>
<p>Here are some reviews from the app store:</p>
<blockquote><p><strong>“This app is stressful to use.” — Alovesd</strong></p></blockquote>
<blockquote><p><strong>“Unmatched film presets plagued by poor UI/UX…Everything is so minimal to the point where it isn’t intuitive, and it ruins the experience.” — David_Burns_Red</strong></p></blockquote>
<blockquote><p><strong>“Tremendous potential, but continuously lacks usability.” — rik.venture</strong></p></blockquote>
<div><img src="http://ift.tt/2ogrZzA" alt="1*fhxEFF9c4_85jZYgc3ELtA.png"></div>
<p><strong>What are those?!</strong></p>
<h4>Persona and Task Flow</h4>
<p>In order to help me find problems with the app, I created a persona named Charles based off my assumptions of what a typical user of VSCO looks like. Charles is 19 years old, a casual photographer, and is currently a student in college. He wants to take a photo, add some cool edits and filters, then share it with his friends. Below is the ideal scenario for Charles:</p>
</div>
<div>
<div><img src="http://ift.tt/2oFOvi5" alt="1*k3Xsuhf7UcMnTKqgagnlgw.png"></div>
</div>
<div>
<p>Using the ideal scenario above which encompasses the journey of a user wanting to apply cool edits to his photo before sharing with friends, <strong>I created a task flow to help me see how a user gets to a positive outcome with his or her initial goal/motivation.</strong></p>
<div><img src="http://ift.tt/2ogdSuc" alt="1*JiYFW2TzZAq7NjR8M6P7Dw.png"></div>
<p>Using the task flow, it was clear to me that I needed to emphasize making the core features; taking a photo, editing, and sharing it as smooth as possible by fixing any pain points in that process. As the core features, they should be delivering an optimal user experience in order for the app to succeed and increase user engagement.</p>
<h4>Guerilla Usability Testing</h4>
<p>I had an assumption of what some of the pain points were, but it wasn’t enough. I went out to a local park with beautiful scenery in hopes to find photographers similar to the persona I created. Using the task flow I was able to set up some tests for these users in order to find specific pain points in the app. Each user was provided a scenario that closely represented the task flow above. Here is an example scenario:</p>
<ul>
<li>Open the camera and lower the exposure before you take a photo of anything interesting around you, then apply a filter you like.</li>
<li>After applying the filter, I want you to make some edit changes like adjusting the contrast or temperature of the photo.</li>
<li>If you are satisfied with your changes, save the photo and share it on social media.</li>
</ul>
<h4>Affinity Map</h4>
<p>After reviewing the videos of each testing session, I took down notes that included observations on user actions, comments, and thoughts. Then using affinity mapping, I grouped each pain-point into its respective category which helped me get an overall picture of the problem.</p>
<div><img src="http://ift.tt/2oG020F" alt="1*AV7HW0s8g7zA1AJNHx25Ug.jpeg"></div>
<p>Notes from Usability Testing</p>
<h3>VSCO Pain Points</h3>
<p>Using the results of the affinity map and usability tests, I identified specific pain points in the following areas:</p>
<h4><strong>Camera</strong></h4>
<p>Some users were unable to find the camera quickly at first, especially if they were pointing to a dark spot. Camera also has a lot of features with no labels leading to confusion. Users were unaware of additional options available if they swiped on the menu.</p>
<div><img src="http://ift.tt/2og7Rxs" alt="1*gqIV5qX3_XPafTdmh9UVdw.png"></div>
<h4><strong>Edit photo tools and workflow</strong></h4>
<p>Too many icons in the photo edit menu without a label, leads to a lot of guesswork and frustration. Lack of a redo button led to some frustration in users, while other features like undo and save were hidden away in a subtle navigation menu.</p>
<div><img src="http://ift.tt/2oG4z3h" alt="1*KYj_e1MMa6VqXh1IfadZLA.png"></div>
<h4><strong>Social Sharing</strong></h4>
<p>When asked to share the final photo on social media, every user ended up clicking the same wrong button that led to an unexpected result. The share button was tucked away in another menu and users had a difficult time getting to it.</p>
<div><img src="http://ift.tt/2ogkvwK" alt="1*4oewrUJ5gJ4llwTOs06IUg.png"></div>
<h3>Crafting the Solution</h3>
<h4>Lo-Fi Sketches</h4>
<p>After identifying the problems and pain-points, I set out to create some basic lo-fi sketches for some quick creative ideation. After multiple sketches, I was able to get a rough idea of what I assumed to work.</p>
</div>
<div>
<div><img src="http://ift.tt/2oG00G5" alt="1*56wormZYfeVwB5cMOcjd7A.jpeg"></div>
<p>Lo-Fi Sketches</p></div>
<div>
<h4>Hi-Fi Mockups</h4>
<p><strong>Home Screen</strong></p>
<p>Some users had difficulty finding the camera during the usability test and also expressed confusion at the bottom nav icons.</p>
<p>Below is my proposed solution for the <strong>home screen:</strong></p>
</div>
<div>
<div><img src="http://ift.tt/2og55Ix" alt="1*BF8_eASOjU7bXFTRM9qVpg.png"></div>
</div>
<div>
<p><strong>Proposed solution changes:</strong></p>
<ol>
<li>Enlarged the camera area to make it more noticeable.</li>
<li>Changed from “studio” to “all images” to make less ambiguous for dropdown menu and also more close to what the user was seeing.</li>
<li>Made the global feed and profile icon less abstract and more recognizable.</li>
</ol>
<p><strong>Camera</strong></p>
<p>In its current state, casual photographers and newcomers to the app find it difficult to use the camera to its fullest function. One unique aspect of VSCO’s camera was the sheer amount of control you have over the camera settings, but it means very little if most users find it difficult to use.</p>
<p>Let’s look at the <strong>camera:</strong></p>
</div>
<div>
<div><img src="http://ift.tt/2oFQBym" alt="1*KLrVk1S8hmBIXYFcrTeQ5w.png"></div>
<div><img src="http://ift.tt/2og8G9D" alt="1*18xtXJhK12wfP1i-PWofhA.png"></div>
</div>
<div>
<p><strong>Proposed solution changes:</strong></p>
<ol>
<li>I got rid of the quickbar and moved all of its settings inside a separate section that can be accessed with the <strong>edit button</strong> on the left.</li>
<li>Upon accessing the new section, the edit icons are presented clearly with labels.</li>
</ol>
<p><strong>Photo Editing</strong></p>
<p>Abstract icons with no labels and unclear or poor navigation, two major problems with the app, could be found in the photo editing process. My goal for this screen was to make editing a fun and enjoyable process that could be done quickly and efficiently by users of all levels.</p>
<p>Let’s look at the <strong>photo editing screens:</strong></p>
</div>
<div>
<div><img src="http://ift.tt/2oFMmmy" alt="1*kbeP2teMFAKMwLXmmaCCxA.png"></div>
<div><img src="http://ift.tt/2oge5xB" alt="1*JLbwDPCJS6Ki9RZJJ2GQ6g.png"></div>
</div>
<div>
<p><strong>Proposed solution changes:</strong></p>
<ol>
<li>I got rid of the hidden menu altogether and replaced it with easy-access/quick buttons. Users could now also save/exit or undo/redo easily with the quick access buttons.</li>
<li>I made the two main screens of the editing process accessible by clicking on their respective tabs.</li>
<li>The edit menu now has larger and properly labelled icons which should make the process of making changes much easier.</li>
</ol>
<p><strong>Social Sharing</strong></p>
<p>For the problem with social sharing, no heavy UI changes were needed. It turned out that all the users during the usability tests mistook the “Publish to VSCO” button as the share button. I took out the share option that was hidden away in a different menu and brought its options to a new menu that included a shortcut for publishing to VSCO.</p>
<p>Here is my proposed solution for <strong>social sharing:</strong></p>
</div>
<div>
<div><img src="http://ift.tt/2oFKF8E" alt="1*keVRBVtV8uJa4HMdOjW41Q.png"></div>
</div>
<div>
<h3>Results</h3>
<p>After completing the prototype, I found another group of six different users for my final usability test.</p>
<p>The tasks were similar to the ones I assigned before my redesigns, but the results were immensely different. <strong>Frustrating and confusing moments that were dominant before were suddenly replaced with confidence and AHA moments.</strong></p>
<p>Here are the test results:</p>
<h4>Camera</h4>
<div><img src="http://ift.tt/2ogrZQ6" alt="1*rziauSiQ7YPfGln2QCVnrQ.png"></div>
<h4>Photo Edit</h4>
<div><img src="http://ift.tt/2oFOKtg" alt="1*TotdMZHVR9VDA41c6l_Lkw.png"></div>
<h4><strong>Social Sharing</strong></h4>
<div><img src="http://ift.tt/2ogp3mJ" alt="1*xL68eI6TOX1WwSSdUjCCgg.png"></div>
<h4>Overall</h4>
<p>Users were able to complete all the tasks under a minute, which is a significant decrease in time from the previous test where users took on average 3 minutes to complete the task. All testers expressed confidence during the tasks and did not express any frustration.</p>
<h3>Conclusion</h3>
<p>Before the redesigns, the process to take a photo, edit it, and share it on social networks took longer and was harder than it should’ve been due to a lot of guess work. Hopefully with my proposed solutions, users will no longer use VSCO just for the filters, but feel empowered to use the app for all their photography needs.</p>
<h3>Prototype</h3>
<p>To see how this all comes together in a working fashion, please check the prototype out:</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p><strong>Thank you for reading! If you have any questions or just want to chat, feel free to send me a message via email, kkwon@tradecrafted.com or </strong><a href="http://ift.tt/2oFN4jM"><strong>Linked-In</strong></a><strong>. I would love feedback!</strong></p>
</div>
</div>
</div>
</div>
<div><a href="http://ift.tt/2oFGMjV">http://ift.tt/2oFGMjV</a></div>


VSCO, More Than Just Filters

VSCO, More Than Just Filters

A UX Case Study on VSCO’s iOS App

Top Stories