<p>Published on <a href="https://blog.prototypr.io/ux-case-study-design-process-face9756426f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Mahesh Kumar </p>
<p><em>Rather than thinking in screens, we are now thinking in stories.</em></p>
<p>So, I wanted to tell a brief story of my design process which I did for a B2B web application product at my current company.</p>
<blockquote><p>To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of my company.</p></blockquote>
<p><em>There are no stupid users. Just stupid products.</em></p>
<p>We need to build a product which will <strong>solve the user problems</strong> along with making it easily <strong>usable</strong>. We must know what, why, for whom of the product to make it <strong>successful and meaningful</strong>.</p>
<h4><strong>Product Objectives:</strong></h4>
<p><strong>What</strong>— Product is related to desktop applications statistics.</p>
<p><strong>Why</strong> — To know about the applications in one’s company and managing them, in turn, saving a huge pile of money to enterprise every year.</p>
<p><strong>Who</strong> — Administrators of the enterprise companies.</p>
<p><em>We, at our company, are building this product for a concealed person (let’s call him, John) where it not only solve his problems but also the people playing similar roles in other companies as it has a great market potential.</em></p>
<h3>Research</h3>
<h4>Stakeholder Interviews</h4>
<p>I had a small discussion with John along with my management regarding what they wanted to solve and achieve through this product. I made it be clear on their <strong>Business goals</strong> and <strong>Revenue stream specific requirements</strong> of the project. Later on, I discussed the <strong>Technical requirements</strong> with the product development team.</p>
<h4>User Interviews</h4>
<p>I need to <strong>focus on what users want</strong>. The user interviews will reveal which design ideas will work, which won’t and may even inspire new ones to me. I had a conversation with John along with the administrator of my company about the results and tasks specifically their goals which they expect from this type of product. We had a good <strong>exchange of ideas</strong> to be noted.</p>
<p>I will be doing <strong>User surveys</strong> using TypeForm or Google Forms if I am short on time or the users are not in reach.</p>
<h4>Competitive Analysis</h4>
<p><strong>Understanding the competition</strong> is crucial as it can provide a way to <strong>better understand the users</strong><em>.</em> Moreover, if every other competitor product has a certain feature, users will obviously expect that on our product too. Sometimes, this can provide material for me to ask in user interviews and surveys, such as how they felt about this aspect or is it needed at all. I made a list of <strong>good features </strong>and<strong> task flows </strong>from<strong> analyzing </strong>those<strong> products</strong>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/797/1*1hOfTaIzWJIV2l11lTg2mg.png">Credits : <a href="https://www.linkedin.com/pulse/competitor-analysis-simple-how-to-guide-get-started-hariprasad/">https://www.linkedin.com/pulse/competitor-analysis-simple-how-to-guide-get-started-hariprasad/</a></p>
<h4>Assumptions and Features</h4>
<p><em>People don’t know what they want until you show it to them.</em></p>
<p>So, apart from research, I will be thinking on <strong>my own to improve the product </strong>for the user. I thought of what will be the <strong>most effective area to break into the market</strong> and <strong>differentiate our product</strong> from the rest. I also made a list of features which will be best to use and needed to the product.</p>
<h3>Empathize</h3>
<p><em>People aren’t trying to use computers–they’re trying to get their jobs done.</em></p>
<p>We need to know what our user goals will be in different scenarios to get their jobs done. We are not doing it right, if either the product didn’t meet the user goals or the user is facing problems in their jobs to be done.</p>
<h4>User Personas</h4>
<p>Personas will be the go-to thing we will refer to when <strong>making key design decisions</strong> related to the product. The psychology, behaviors, and demographics of target users feed into these personas.</p>
<p>I have <strong>created</strong> the user personas <strong>in view of the target audience</strong>. I’m not a fan of writing location, about family and hobbies etc. in the personas. I will be giving importance to the persona behaviors, technical level, frustrations, needs, and goals.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dLorS3Y_tjuTCI0lsy8Yrw.png">Credits : <a href="http://www.keepitusable.com/blog/?p=3428">http://www.keepitusable.com/blog/?p=3428</a></p>
<h4>User Stories</h4>
<p>I phrased a few simple sentences visualizing the user in mind to meet their goals. These stories will detail the user’s motivations and needs. The sentence format will be:</p>
<p><strong><em>As a [type of user], I want [a feature] so that I can [complete a goal]</em>.</strong></p>
<h4>User Scenarios</h4>
<p>Scenarios tell us in what <strong>situations</strong> a specific <strong>user story might occur</strong>. We need to explore different contexts so that we will understand which pages they go to, where will they click and for what they’ll be looking to accomplish. I had visualized certain scenarios of the user using the product to get better features.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/959/1*7oT0Mgt61wBrP2TqWWQTjQ.jpeg">Credits : <a href="https://spin.atomicobject.com/2012/11/26/content-without-context-is-dead/">https://spin.atomicobject.com/2012/11/26/content-without-context-is-dead/</a></p>
<h4>Customer Journey Maps</h4>
<p><em>People do not launch an app to spend time learning how to use the interface, all they want is to complete a task in a short amount of time as possible.</em></p>
<p>The user needs to have the <strong>best experience while using the product </strong>i.e while performing the required tasks. So I prepared specific user goals and what they will be expecting from it, how the process is happening to achieve that task, how will be the user <strong>feel emotionally inside while doing</strong> it, is anything there, which we can <strong>improvise in this particular stage</strong> of task accomplishment.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/753/1*M5jGgC9_KhZvUUSiHPmJ8w.jpeg">Credits : <a href="https://cloudsmallbusinessservice.com/small-business/best-customer-experience-software.html">https://cloudsmallbusinessservice.com/small-business/best-customer-experience-software.html</a></p>
<h4>Red Routes</h4>
<p><em>Humans are strange. We like to say we want as many options as possible. When we get them…we get confused and can’t take a decision. Hick’s Law predicts that the time and the effort it takes to make a decision, increases with the number of options.</em></p>
<p>I’ll prefer doing Red Routes instead of Prioritization Matrix as they both serve the similar purpose. This is where I <strong>prioritize the features by sorting,</strong> considering the factors like all, most, some of the time used features by all, most, some of the users.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*o82KSzpS8MTnDYG5i8lvLg.png">Credits : <a href="https://vvmahesh.dunked.com/coming-soon-app">https://vvmahesh.dunked.com/coming-soon-app</a></p>
<h3><strong>Information Architecture</strong></h3>
<h4>User Flows</h4>
<p>I made a chart for User flow regarding different goals and tasks the user will perform. The flows focus on <strong>how the user will go through the design for the required outcome</strong>. Occasionally for the same task, a user might either come from the direct traffic or from an organic search result.</p>
<h4>Site Maps</h4>
<p>Though site maps and user flows seem similar, they cannot replace each other. Sitemaps <strong>represent the product contextual structure</strong>, whereas user flows reveal different ways of navigation to accomplish various tasks.</p>
<p>As the product is immense, the complexity to structure the pages for navigation is also high. Based on user flows, I went step-by-step by creating the primary navigation and by adding sub-pages to them in a visual hierarchy.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8NNLzwDGdGQsPWEpaAe8vg.png">Credits : <a href="https://dribbble.com/shots/1214553-Mindlab-Sitemap/attachments/162479">https://dribbble.com/shots/1214553-Mindlab-Sitemap/attachments/162479</a></p>
<h4>Page Tables</h4>
<p>As I had decided on the pages in the sitemap, I listed out what content should be there and what and all are needed in each of the pages.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RnjVRPpvc3dRfN-yi4dqjw.png">Credits : <a href="https://vvmahesh.dunked.com/coming-soon-app">https://vvmahesh.dunked.com/coming-soon-app</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bdGX5Tn9Mj0262UMcykj4Q.jpeg">Feature in detail process</p>
<h3>Conceptual Design</h3>
<h4>Sketches</h4>
<p>This is the quick and easy, simplistic way to represent our ideas in the form of rough hand-drawn sketches. I will be using <a href="http://sneakpeekit.com/">Sneakpeekit</a> to outline my most of the project sketches. Then I’ll be creating paper prototypes to explain the navigation flow.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*HEsC2AO4rmdkkJg7I0oIPw.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bp1-2kv8iLbHQ7a98KVq6A.jpeg"></p>
<h4>Iteration</h4>
<h4>Wireframing</h4>
<p>Good wireframing makes the transition to hi-fi design smoother, saving valuable time and effort. The wireframed pages will be like the <strong>bare-bones structure for the content</strong>. After the iterations of paper prototypes, I built the wireframes using <a href="https://balsamiq.com/">Balsamiq</a> tool and created a clickable prototype using <a href="https://marvelapp.com/">Marvel</a> app.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YH1JMkL95zqER-rctN55oQ.png">Wireframe for a page</p>
<h4>Iteration</h4>
<h3>Detailed Design</h3>
<h4>Style Guide</h4>
<p>During the design phase style guides encourage <strong>consistency in the visual identity</strong> and help <strong>keep the interface system as logical</strong> as possible, which makes for a better UX. The user need not have to think and understand about the page when he comes across a new one existing in the product if the language followed is consistent. That’s why we have Google’s Material design, Microsoft’s Fluent design, and human interface guidelines.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8Bbt_L3cKaSUiNSSo70m6A.jpeg">Components list for style guide</p>
<p>Lastly, less is more. The more colors there are, the less impact each individual color will have. I had created a style guide with all the components existed in the wireframe pages of the product.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*2qw9AUTkh7aYVt5SNJaChw.png"><a href="https://dribbble.com/shots/3952323-Style-guide">Style Guide</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3YKiNLuE3J5xedO0GtWr6Q.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OXwpSCEZop1Pw1B7T-KwCQ.jpeg">Calendar Sketches<img alt="" src="https://cdn-images-1.medium.com/max/800/1*D9b02eixwf4vBl1MNVJkYQ.gif"><a href="https://dribbble.com/shots/3969594-Calendar-with-selection-of-date-and-time">Time and Date selection in calendar</a></p>
<p>Interact with the Marvel prototype of style guide:</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fmarvelapp.com%2F24d68he%3Femb%3D1&amp;url=https%3A%2F%2Fmarvelapp.com%2F24d68he&#038;image=https%3A%2F%2Fmarvelapp-live.storage.googleapis.com%2Fserve%2F2017%2F6%2Fc10463964bca4f0a90dd9685cea30e87.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=marvelapp" width="1671" height="1215" frameborder="0"><a href="https://medium.com/media/15b7c93838f4cea33952307cf5807b96/href">https://medium.com/media/15b7c93838f4cea33952307cf5807b96/href</a></iframe></p>
<h4>Visual design</h4>
<p><em>Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.</em></p>
<p>Based on collected feedback from wireframing, I redesigned some features and screens. I had <strong>visually designed the pages over wireframes</strong> with the help of style guide and made a visual prototype to present and share.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VYYmMgBO14BK707nuXzX4g.png">Visual design based on wireframe<img alt="" src="https://cdn-images-1.medium.com/max/800/1*PwkISLuzxX4fSyGpeoH1pQ.png"><a href="https://dribbble.com/shots/3963915-Dashboard">Dashboard view of the application</a></p>
<h4>Iteration</h4>
<h3>Validations</h3>
<h4>User Testing</h4>
<p><em>There is a big difference between how people answer questions and how they really do things.</em></p>
<p>We performed the testing by sharing the prototypes with John and a few admins for feedback. We had observed how the user is performing tasks and how many steps, the time it is taking for him to accomplish them. I feel that natural way of testing is more effective than listing someone to perform those specified user tasks on your product.</p>
<h4>Iteration</h4>
<h3>Takeaway</h3>
<p>New users don’t sign up for your product because they are excited about learning how your UI works. They signed up because they were interested in the value that you promised to deliver.</p>
<blockquote><p>Available for Full-time design role.</p></blockquote>
<p>Thanks for reading. For more UI/UX design<strong> </strong>that I’ve worked, visit my <a href="http://www.vvmahesh.design"><strong>portfolio</strong></a><strong> </strong>or<strong> </strong><a href="https://dribbble.com/vvmahesh"><strong>Dribbble</strong></a>. You can even message to my<strong> </strong><a href="https://www.messenger.com/t/designervvmahesh/"><strong>Chatbot</strong></a><strong>,</strong> I made for Facebook Messenger. If you want to contact me, visit my <a href="http://linkedin.com/in/vvmahesh"><strong>LinkedIn</strong></a> or just say hi at <a href="mailto:designer@vvmahesh.in"><strong>designer@vvmahesh.in</strong></a>. Hope you enjoyed..!</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=face9756426f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/ux-case-study-design-process-face9756426f">Bringing UX design beyond screens</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>


Bringing UX design beyond screens

Top Stories