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.

<a href="https://uxdesign.cc/7-steps-to-achieving-flow-in-ux-design-7ef28adb0de2?source=rss----138adf9c44c---4">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | Elaine Tran 
I checked the time about 3 times today. First at 12:31pm to see how long the Monday meeting would last, the second time around 4:43pm (realizing that I normally take my break a lot earlier but I wanted to keep working), and the end of the day at 5:20pm. By then I compiled a bunch of sketches, got valuable feedback, completed both the low and high fidelity design, all of which was ready to be tested.
Ironically, I was told at the end of the day that the task got deprioritized and there it goes again — to the Backlog. I’ve learned early in my career as a User Experience Designer that not all of your designs live on and that’s okay (I have even created a folder for ‘failed’ designs during my first week!). Fail fast, fail early -right?
The process of diving deeper to really understand a user’s pain, thinking of solutions for what would make actions easier for our users and why -was ultimately very rewarding to me. Today, I caught myself in a state of Flow.
<h3>Flow Theory</h3>
<blockquote>Mihaly Csíkszentmihályi’s concept of Flow in the Learning Theory is described as a “mental state of complete absorption in the current experience.”</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/362/1*ShU0zwZKC1ti_Oc2f86nPA.png">
Flow occurs when there is a balance between how challenging a task is (Difficulty) and a person’s level of skill at the given task (Player Ability). A task that’s too difficult would lead to heighten anxiety/frustration while a task that’s too easy would lead to boredom.
<h4>The Feeling of Flow</h4>
<ol>
<li>Complete focus on what you’re working on</li>
<li>A sense of ecstasy — an out of the world feeling</li>
<li>Inner Clarity — knowing exactly what your goals are and the process to achieve it</li>
<li>Having the skills required to successfully complete the task</li>
<li>Sense of Serenity — where you don’t feel anxious or worried</li>
<li>Timelessness — speaks for itself</li>
<li>Deep intrinsic motivation — personally rewarding</li>
</ol>
<h3>7 Steps to Achieving Flow</h3>
<blockquote>Example Task: Redesign ‘Page Settings’ modal to make it easier for users to change the page size of their design.</blockquote>
<h3>1. Find a Challenge — Let your users tell you the problems you need to solve</h3>
Make use of the people on your team who have direct contact with your users on a day-to-day basis. The sooner you do this the quicker you’ll realize how valuable this interaction is when it comes to understanding the people you are designing for.
I used HelpScout, a help desk software to filter transcripts that users have had with our customer success team. We tagged these chat conversations by specific categories such as “page size ease of use”, “editor ease of use”, “feature requests” etc…
Before I jump into any design work, I want to first learn how users currently go about changing page size and if they are successful in doing so. I did my detective work and went through 4 pages of chats (over 100 transcripts) under the “page size ease of use” tag to understand a user’s pain through their perspective.
From these transcripts, I noticed trends which helped to categorize the issues on a spreadsheet. It was clear from here what the main issues were.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SMaj8OEFzYFqZpel3SZanQ.png">Google Spreadsheet
Issues (related to the first iteration):
<ul>
<li>WHERE to change page size (users were often confused by design terminology- some would ask “How do I crop a template?”, “I want the infographic to not be as long”, “Is there a way I could get more space at the bottom?”).</li>
<li>Pixels are not typically used for printing (users would want a certain size but the only way to do that in our tool currently is to set a size in pixels before editing a template and then manually resize their content to fit.)</li>
</ul>
Takeaways:
<ul>
<li>Users think about resizing after completion, when they need to use it.</li>
<li>Describe the canvas in terms of “space”.</li>
<li>Pixels are not intuitive, standard page size dropdown should have dimensions in inches.</li>
<li>Customer support team directs users to external sites to convert Inches into Pixels (Hacks).</li>
</ul>
<h3>2. Set Clear Goals — Know exactly what you are getting into</h3>
From these findings, I came up with 3 end goals that I would target for the first iteration.
End Goals:
<ol>
<li>Make it easier to find ‘Page Settings’.</li>
<li>Use ‘inches’ instead of ‘pixels’ as the default unit of measurement.</li>
<li>Standard page sizes should include measurements in inches.</li>
</ol>
<h3>3. Forget the Fancy UI , Start Sketching</h3>
What would actually help your users get what they need done? Now that you have specific goals backed by user data, it’s time to think from your users’ perspective in order to derive possible solutions.
<blockquote>“If you want to put yourself in their shoes, you need to write a story from their side” (Nir Eyal, 2013).</blockquote>
At what point do your users interact with this feature? Why do they need to do this? What are they trying to get done? What’s stopping them — what are their pain points? (Hint: You should already know these from your user research in Step 1!)
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*D4AcYQlsDEp4yzZfKOT0yA.jpeg">Page Setting Sketches
<h3>4. Get Feedback — Stop for a Sanity check</h3>
What are some things you missed out on? How can you account for these?
Several points came up when I went to coworkers for design feedback. I was asked about the option to change ‘inches’ to ‘pixels’ for current users who may be used to our pixel format. This may come up later as an issue with backwards compatibility since templates created prior to these changes are in pixels.
<h3>5. Iterate again — Your Sketches should tell you the Solutions</h3>
After the research component, sketching is where your solutions come to life. Your sketches are your blueprint, your essay outline, your user flow. If you make mistakes, make them here. It needs to make sense on paper and to other people on your team before any styling happens.
I used Sketch app for Mac, and the Craft to Invision plugin to create my Hi-Fi prototype. It was ready to be tested by real users.
<h3>6. Test your Hi-Fi from a Beginner’s eye</h3>
I used usertesting.co, a usability test platform where users can test your designs from around the world. Use whichever platform works for you, I’ve used Usability Hub in the past.
My rule of thumb is to have a minimum of 5 users testing your design, if you can get in-person focus groups — that’s even better. It only takes a few people to poke holes in your design and for you to know if it’s a viable solution.
<img alt="" src="https://cdn-images-1.medium.com/max/848/1*cXWSmSy97y2u_Mw1Ku2nEw.png">Usertesting Summary<img alt="" src="https://cdn-images-1.medium.com/max/958/1*osN70lhvOY55IR_JVz7fnA.png">Current Design<img alt="" src="https://cdn-images-1.medium.com/max/964/1*QtQNP9SXvHcgAaJF_22kLQ.png">Proposed Design Solution
<h3>7. Iterate on your Learnings</h3>
User testing is how you can fast track your designs rather than waiting to see after production if it worked.
Takeaways:
<ul>
<li>Hard to find where to change Page Size (“It was a little hard to find the place to change the page size. It would not have been my first guess to go to settings”, “There are 2 menu locations, I felt like I needed to look for it on the left”)</li>
<li>Once told to look for Settings, the button itself was easy to find (“Once I found settings everything was intuitive”, “Once you got there it was very easy to change page size, it was just a little hard to find [where you needed to go]”)</li>
<li>Need MORE feedback that the page is changing (“I can’t see the actual picture so it makes changes harder to see”, “I was focusing more on the dropdown”)</li>
<li>Tooltip for Portrait vs. Landscape (users understand page orientation when they click on it, tooltips would help to guide their expectations)</li>
<li>Option to change Unit of Measure (“A bit too simple”, it could be more robust)</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fUoIPzGUIRSCdcreYT5qgQ.png">Changes made after running it on Usertesting
Design Iterations:
<ul>
<li>Shifted ‘Settings’ modal to the right to allow more view of the template</li>
<li>Added Tool tip for page orientation</li>
<li>Added option to change unit of measurement to adapt to both print and web needs</li>
</ul>
<h3>Conclusion</h3>
The key to achieving Flow in UX is to challenge yourself to solve real problems, set clear goals and allow yourself to become fully immersed into the process of design.
Thanks for reading! If you are interested in chatting, drop me a message at elaine@venngage.com or connect with me on <a href="https://ca.linkedin.com/in/elaine-tran">LinkedIn</a>.
[This article is brought to you by Elaine’s subway outlines.]
References:
<ul>
<li><a href="https://daringtolivefully.com/how-to-enter-the-flow-state">How To Enter the Flow State</a></li>
<li><a href="https://books.google.ca/books/about/Hooked.html?id=YNZZoAEACAAJ&amp;redir_esc=y">Hooked</a></li>
</ul>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F50d69a%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2F50d69a%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252F50d69a%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href">https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7ef28adb0de2" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://uxdesign.cc/7-steps-to-achieving-flow-in-ux-design-7ef28adb0de2">7 steps to achieving flow in UX design</a> was originally published in <a href="https://uxdesign.cc">UX Collective</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

7 steps to achieving flow in UX design

7 steps to achieving flow in UX design

Top Stories