<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Stories by Supriya Agnihotri Jagani on Medium]]></title>
        <description><![CDATA[Stories by Supriya Agnihotri Jagani on Medium]]></description>
        <link>https://medium.com/@supriyagnihotri?source=rss-70ceb9ee5bd1------2</link>
        <image>
            <url>https://cdn-images-1.medium.com/fit/c/150/150/1*yKkEm6KT_n-dWKge8-m9PA.png</url>
            <title>Stories by Supriya Agnihotri Jagani on Medium</title>
            <link>https://medium.com/@supriyagnihotri?source=rss-70ceb9ee5bd1------2</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Sun, 15 Nov 2026 23:24:31 GMT</lastBuildDate>
        <atom:link href="https://medium.com/@supriyagnihotri/feed" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com/" rel="hub"/>
        <item>
            <title><![CDATA[Design for Habits to Hook your Users]]></title>
            <link>https://medium.com/@supriyagnihotri/design-for-habits-to-hook-your-users-f4a263275014?source=rss-70ceb9ee5bd1------2</link>
            <guid isPermaLink="false">https://medium.com/p/f4a263275014</guid>
            <category><![CDATA[design-to-hook-your-users]]></category>
            <category><![CDATA[design-patterns]]></category>
            <category><![CDATA[design-for-habits]]></category>
            <category><![CDATA[hooked]]></category>
            <dc:creator><![CDATA[Supriya Agnihotri Jagani]]></dc:creator>
            <pubDate>Thu, 01 Mar 2018 11:53:22 GMT</pubDate>
            <atom:updated>2018-04-12T12:28:56.977Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zc_OQizEAOtlxow1aJ2WdQ.jpeg" /><figcaption>Photo by <a href="https://unsplash.com/photos/HbyYFFokvm0?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Paul</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption></figure><blockquote><em>Do you check Facebook (or any other app), before you go to bed? Why do you do it?</em></blockquote><blockquote><em>Do you hit the “pin it” button whenever you see a cool design or a gadget or something, which is visually stunning? Why do you do it?</em></blockquote><blockquote><em>Why do you use some apps more and some less?</em></blockquote><p>Well, the one word answer is <strong>HABIT</strong> — “the small things that we do without really thinking about it”.</p><p>Products like Facebook, Whatsapp, Twitter, Pinterest, Snapchat are purposefully <strong><em>designed for habits</em></strong>. They are so compelling, that many of us struggle to imagine life before they existed.</p><p>But creating habits is easier said than done, says Nir Eyal, author of <strong>“</strong><a href="https://www.nirandfar.com/hooked"><em>Hooked: How to Build Habit-Forming Products</em></a><strong>”</strong></p><p>His <strong>Hook Model</strong> shows how we can build <strong>habit-forming products</strong>.</p><h3>Something to ponder over…</h3><p><em>How can we as UX Designers or Startup Founders use the </em><strong><em>Hook Model</em></strong><em> to create compelling products?</em></p><p><em>How to design products that not only </em><strong><em>engages users</em></strong><em> but also make </em><strong><em>them come back regularly</em></strong><em>?</em></p><p>Well, as Nir says, not all businesses/products needs to form a habit, but every product that needs a <strong>habit </strong>needs a <strong>hook</strong>.</p><h3>The Hook Model</h3><p><a href="http://www.hookmodel.com/">Hook Model</a> is a four-step process of <em>trigger, action, reward and investment</em> that keeps people come back and use various products and services.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/598/0*pCKHoa23yXJugyko." /></figure><h3>The Trigger</h3><p>Every hook starts with a Trigger. Trigger prompts the habit. There are 2 types of triggers, <strong>internal </strong>and <strong>external</strong>.</p><p><strong>External triggers</strong> are things in our environment that tells us to do something. Like <strong><em>click here, buy now, a friend telling you about a great new app through word of mouth, </em></strong>are all examples of an external trigger.</p><p><strong>Internal triggers</strong> could be emotions. Negative emotions like<strong><em> feeling lonely (I have to check Facebook) or feeling uncertain (I need to Google that) </em></strong>or they could be Positive emotions, <strong><em>like Pinterest users feeling the urge to “pin” things whenever they see something cool on the web.</em></strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/700/0*-voBrs8UREElWB6l." /></figure><h3>The Action</h3><p>For the hook to work, the trigger needs to spark some kind of <strong>action </strong><em>by the user</em>.</p><p>User has to have a <strong>motivation </strong>for doing it, and the <strong><em>action should be as simple as possible to do</em></strong>.</p><p>Open an app, scroll through the pinterest, search on google, push the play button on youtube, these are the actions that we do with little or no conscious thought.</p><p><strong><em>This is an important part of the model because it draws upon usability (UI) design to drive users to take action.</em></strong></p><h3>The (Variable) Reward</h3><p>The action should result in an<strong><em> immediate reward</em></strong>, and this reward <strong><em>should be variable for each cycle in the hook</em></strong>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/400/1*jf4TUrRJplS-wNZzw6l9Eg.gif" /><figcaption>Scrolling through the newsfeed</figcaption></figure><p><em>Reward is a craving</em>, this is the stage where the user’s itch is scratched, where they get what they had come for and yet there is mystery of what they might find next time when they come back to engage with the product.</p><p>It not just the reward, that excites the user but a variable reward that hits the user.</p><p>Searching and scrolling through the newsfeed is one great example of a variable reward. The <strong><em>uncertainty makes the user stick</em></strong>.</p><h3>The Investment</h3><p>A key point in the model is <strong><em>making people invest something in the product, in anticipation of a future reward</em></strong>.</p><p>Following other users on Twitter, setting up preferences or adding to your resume on LinkedIn are some examples.</p><p>Generally, the investment phase is the most neglected part of the model, according to Eyal. It is more about building a reputation</p><p>Most apps and sites give you what you want and then send you out of there. But what we want is to make people invest in the platform, to do something that makes it better for them the next time.</p><h3>Build a Reputation</h3><p>The successful cycle of the first hook (initial cycle of user interacting with your product), activates the internal trigger which motivates the user to revisit your product.</p><p>So over time with successive cycles through these hooks, we get used to the product. After a while, we don’t do it because of external triggers but with a <em>need</em>, we internally trigger ourselves. We have notions like — I’m lonely! let me check facebook; I’m not certain about something!, let me google; I’m bored! let me check that shopping app or watch a video on youtube. And we do these things instantaneously because of the successive cycles of these hooks.</p><h3>The Hook Canvas and Few Examples</h3><p>Here are few examples of how some famous products are building reputation with their users.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*UJNKzIKGW1f8ni-F." /></figure><p><strong>The Pinterest Hook</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*lEuND-5iHNoWsHWr." /></figure><p><strong>The Facebook Hook</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*vcoQKZ3zMJc8TToR." /></figure><p><strong>The Pokemon Go Hook</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*TSKt-0H1mBLCXXf-." /></figure><h3>The Ethics</h3><p>As Eyal says, Idea here is to use the <strong>psychology </strong>of <strong>what makes products engaging</strong> to help people <em>live happier</em>, <em>healthier</em>, <em>more productive</em>, <em>more connected</em> lives by using habits for good. The key here is to use habits for good to make positive change around us!</p><p>Habits are both, good and bad. <br>App and smartphone technology, like other tools, are not inherently bad or harmful. But the way we use them can be problematic. The question is not, whether we should design for habits or not, the right question is “Are we designing for good habits?”.</p><h3>Conclusion</h3><p>The Hook Model is a great way to start considering <strong>how you bring users into a system</strong>, <strong>hook them</strong> and <strong>keep them there through variable rewards</strong> and <strong>internal triggers</strong>.</p><p>In the end, you’ll be able to build habits among your users that will have them coming back for more.</p><p>Are you working on/are using a product that needs to form habits? Would love to know your experience.</p><p><em>Originally published at </em><a href="https://www.digi-corp.com/blog/design-for-habits-to-hook-your-users/"><em>www.digi-corp.com</em></a><em> on February 28th, 2018.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=f4a263275014" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[BUSINESS BENEFITS OF GOOGLE ANALYTICS]]></title>
            <link>https://medium.com/code-to-craft/business-benefits-of-google-analytics-637e5fa2f42b?source=rss-70ceb9ee5bd1------2</link>
            <guid isPermaLink="false">https://medium.com/p/637e5fa2f42b</guid>
            <category><![CDATA[google-analytics]]></category>
            <category><![CDATA[marketing]]></category>
            <category><![CDATA[website-performance]]></category>
            <dc:creator><![CDATA[Supriya Agnihotri Jagani]]></dc:creator>
            <pubDate>Fri, 09 Feb 2018 10:52:17 GMT</pubDate>
            <atom:updated>2018-02-09T11:54:53.375Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*X8dGXeVCoX7OzNeqyhQHfg.jpeg" /><figcaption>Photo by <a href="https://unsplash.com/photos/uCMKx2H1Y38?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">G. Crescoli</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption></figure><blockquote>“In God we trust. All others must bring data.” — <a href="https://www.deming.org/theman/overview">W. Edwards Deming</a>, Statistician, Professor, Author, Lecturer, and Consultant.</blockquote><p>Collecting data and further analyzing it has become a crucial or should I say inevitable element in today’s business world. It is nothing but performance measurement which is done for every aspect of business.</p><p>Google Analytics is a web-based service, which allows you to collect data about your website visitors and much more. It allows you to collect and analyse information about everything from how the user arrived at your website, what did they do while on your website, whether or not they bought something, as well as offering lots of additional information around the user demographics.</p><p>Simply put, Google Analytics helps you measure your website’s performance based on different KPI’s (Key Performance Indicators) and in turn allows you to make informed decisions.</p><blockquote><em>“If you can’t measure it, you can’t improve it.”</em></blockquote><blockquote><em>- P</em>eter Drucker</blockquote><p>Here are few important benefits of Google Analytics:</p><h3>Track the Traffic</h3><p>Visitors to your website may come from various places — a search engine, an advertisement, an email link, etc. Knowing the main sources of your traffic gives you insights about your website’s searchability, your ad campaigns and other incoming links. If, for example, you are running an ad campaign, you can track how much traffic has been generated through these ads, as well as other specifics such as keyword usage and peak time of the day, all of which can be analysed for optimization purposes.</p><h3>Know what visitors are searching for to find your website — Identify the Keywords</h3><p>If your website consists of several pages and multiple products/services, you will certainly want to know <a href="https://blog.kissmetrics.com/keyword-data-video-queries/"><strong>what users are searching</strong></a> and what terms they are using. By having accurate information on what your visitors are searching to find your site, you will be in a position to add more targeted content and useful information to improve the user engagement or sell your products.</p><p>One of the most important reports in Google Analytics is the keywords report. Keywords are vital to figuring out how your search traffic is finding your site. It is possible to see what words / terms, used in searches, have resulted in the most traffic. This info can be used to modify the content on the site for SEO purposes and can help you decide as to which keywords you should be targeting for ad campaigns.</p><h3>Identify your Audience</h3><p>Knowing the profiles and behaviours of visitors to your website is extremely useful. With Google Analytics you can find out geographically where the traffic is coming from, age and gender information, and visitor behaviours such as what devices they are using (desktop, mobile, tablet etc.) and whether they are new or returning visitors. This data can help you adapt your website and shape your marketing activity to best meet the needs of your visitors.</p><h3>Page Popularity &amp; Bounce Rate</h3><p>Google Analytics allows you to track average time spent on pages and bounce rates, giving you insight to which parts of the site are most popular and where there are bottlenecks. A high bounce rate (when a user leaves your website after visiting just one page) indicates that the visitors are not finding the information they want or are struggling to navigate through the site (this differs for a single page site though.). Understanding as to where this is happening allows you to modify the content and structure the site to help reduce these rates and therefore increase engagement.</p><h3>Setting Goals &amp; Monitoring</h3><p>Google Analytics allows you to <a href="https://searchengineland.com/a-beginner%E2%80%99s-guide-to-setting-goals-in-google-analytics-101826"><strong>create specific goals</strong></a> depending on your business requirements. You can either choose to create your own custom goals. An example of these types of goals would be tracking ebook downloads or trial sign-ups. Or you can choose from a template revenue, engagement, acquisition, or inquiry. Using the tool, you can monitor how these goals are performing and then take the necessary action to complete the goals based on this feedback.</p><h3>It’s Free</h3><p>Google Analytics is completely free of charge and offers just as many, if not even more, functionalities than most of the other paid tools in market.</p><h3>Concluding Lines</h3><p>Google Analytics is a great tool for increasing the effectiveness of your online presence, no matter what the size or nature of your business is.</p><p>I’m Supriya Agnihotri Jagani, Founder at <a href="https://propeller.in/">Propeller.in</a>. Outlined above are just some of the main things that you can do with Google Analytics. There are many other features, including social and email reporting, sub domain management and revenue tracking, that Google Analytics offers, making it a seriously powerful marketing tool that should not be overlooked. We at <a href="https://propeller.in/themes/">Propeller Themes</a> have not overlooked it either. All our themes are Google Analytics compatible and allows a seamless integration of the tracking code and more.</p><p>Are you new to Google Analytics? Team Propeller can assist you with the initial setup of Google Analytics, as part of our theme support offering. Do <a href="/service/mailto:themesupport@propeller.in">get in touch</a> if you would like to find out more.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=637e5fa2f42b" width="1" height="1" alt=""><hr><p><a href="https://medium.com/code-to-craft/business-benefits-of-google-analytics-637e5fa2f42b">BUSINESS BENEFITS OF GOOGLE ANALYTICS</a> was originally published in <a href="https://medium.com/code-to-craft">CODE TO CRAFT</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Evolution of Design — Then and Now]]></title>
            <link>https://medium.com/code-to-craft/evolution-of-design-then-and-now-8b9c8b303b93?source=rss-70ceb9ee5bd1------2</link>
            <guid isPermaLink="false">https://medium.com/p/8b9c8b303b93</guid>
            <category><![CDATA[ux]]></category>
            <category><![CDATA[ui-ux-design]]></category>
            <category><![CDATA[design]]></category>
            <dc:creator><![CDATA[Supriya Agnihotri Jagani]]></dc:creator>
            <pubDate>Fri, 22 Sep 2017 09:03:12 GMT</pubDate>
            <atom:updated>2018-01-29T11:12:26.808Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oXnXuPwA91hoc56hM24TQg.jpeg" /></figure><p>Is design (software product design to be specific) progressive?</p><p>When I look back at the designs created 11 years back and those created today, I see a paradigm shift. What has changed? According to me the way we look at the design now has evolved. Expectations from “design” has evolved.</p><p>I’m into Design since past 12 years, currently working as a Principal Designer at <a href="http://www.digi-corp.com/">Digicorp</a>. In this article I’m sharing my experiences with “Design” (mostly Web Design).</p><h4>Web Design — Back in 2006</h4><p>I started my career as a Jr. Web Designer 12 years back. The design process we followed then was very straightforward or I would say more like a pre-defined mechanical process. Client was in control of most part of the design decisions. Starting from color palette to layout structure, everything was defined by client. I remember most of my clients sharing reference websites. The designer who created a near replica of the reference provided, was considered as a good designer(at least at the company I worked then). A person good at Photoshop was considered a good designer.</p><p>I was not given an open hand for selecting a color palette, font-face or the images, but I had pretty much mastered the art of photoshopping. I used to create 3 to 4 design options of a single website. The design options were shared in form of jpg or png files. More the options, happier the client (and my Boss too)! Sometimes clients would even ask to combine parts from these multiple options or even for a few more options!</p><p>A look-back at couple of the designs created then.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/600/0*U0uc_fnKS5Hrv6oc.jpg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/600/0*OsXzeR-vRBa7IuXL.jpg" /></figure><h4>Web 2.0 Designs</h4><p>Then came this phase when <strong>“Web 2.0 designs”</strong> got popular and talked of. Just like all other designers in the community, I too learned the tactics and tried to apply the styles in designs I created. Web 2.0 designs, also known as minimal designs, were all about gradients, bright and cheerful colors, more use of icons (and less use of stock photos with smiling faces), drop shadows and text in bigger fonts. In fact everything about Web 2.0 looked big, and every element rounded. A good use of white space with a focus on legibility and ease of use.</p><p>It was also a phase where we tried to achieve most part of the design integration with CSS rather than using image slices. I also started thinking about site load speed and keeping a lot of elements dynamic. The tableless coding trend also started during the same time.</p><p>Web 2.0 designs created at Digicorp.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/600/0*FbraSv_RCuvXmtc-.jpg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/600/0*EHmfDWLAQ5oSfihQ.jpg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/600/0*FT895_6SRWucTlzV.png" /></figure><h4>The UI/UX way of Designing</h4><p>When I was first introduced to terms UI/UX, I found them fancy and high profile. I also thought they were too serious and deep. No sooner I started reading articles to understand what these terms meant. And yes, I realized two things quickly:</p><ul><li>These were <strong>not </strong>just the slang terms used by Designers to sound cool.</li><li>Both, <em>UI Design</em> and <em>UX Design </em><strong>were different</strong> and referred to different parts of the design process.</li></ul><p>UI &amp; UX Design was a huge change for us. And a good one! It involved a lot of learning, thinking, empathizing, questioning, understanding and reasoning. Design process no longer started with Photoshop for us (a team of web and graphic designers). With introduction to UI and UX design, our design process evolved. We started doing user and domain research, brainstorming and discussion sessions, creating information architecture, wireframes and prototypes. Designers started working as a team and every member added value.</p><p>This was by far the most interesting approach towards design. Design just not meant creating beautiful graphics (looks), there was much more to it. How users felt after interacting with the design interface also mattered now. Designer’s interactions with Project Managers and Developers increased. Helping the developers build the right experience (passing the design vision) and reviewing the designs implemented became a part of designer’s role.</p><p>We got exposed to a lot of reading, be it books, blogs or articles. Few of which we read, re-read and bookmarked:</p><ul><li><a href="https://www.goodui.org/">goodui.org</a> — A list of Good UI Practices. A list we refer till date.</li><li><a href="http://practicaltypography.com/">practicaltypography.com</a> — Clear, concise, full of practical and illuminating examples about how to use typography to communicate and enhance your message.</li><li><a href="https://abookapart.com/products/designing-for-emotion">A Book Apart, Designing for Emotion</a> — A must read for any designer. This book taught us how to design for humans and not for machines.</li><li><a href="https://www.sensible.com/dmmt.html">Don’t Make Me Think — A Common Sense Approach To Web Usability</a> by Krug, Steve — A very good book that explains what everyone should on usability and having common sense approach towards it.</li><li><a href="https://www.smashingmagazine.com/">smashingmagazine.com</a> — A blog that got popular amongst web design and development community which offered good source of information on latest trends and best practices in web development.</li><li><a href="https://medium.com/">medium.com</a> — A very good platform to read, write and interact. A pool of interesting articles from people all over world that has given us different perspective and helped us evolve at what we do.</li></ul><p>Learning new tools and platforms like <a href="https://balsamiq.com/">Balsamiq mockups</a>, <a href="https://www.invisionapp.com/">Invision</a>, Javascript libraries and UI Frameworks have helped us present our designs and thoughts in a better and professional way.</p><p>A look at few of the designs created with UI/UX approach.</p><figure><a href="https://itunes.apple.com/us/app/exercisebuddy-professional/id1091153205?mt=8"><img alt="" src="https://cdn-images-1.medium.com/max/600/0*olj9bRLqXkTVQzug.jpg" /></a></figure><figure><a href="https://www.readboard.io/"><img alt="" src="https://cdn-images-1.medium.com/max/600/0*foB7nLD7HjiFlf-y.jpg" /></a></figure><h4>Way towards Product Design</h4><p>We’ve moved into the era where <strong>Product Design</strong> dominates — <em>it’s</em> what sets companies apart and gives a real edge over competitors. Design today is seen more as an innovation, and its principles and skills can be applied to almost anything. Having said this, UI and UX design still remains at the core. Product Designer is generally involved in the creation of the <strong>look </strong>and <strong>feel </strong>of a whole product. She is the one, who gives real insights to UX and UI designers when it comes to how certain features should work, or how a certain UI control should look.</p><p>Emphasis is now placed on agility and iteration as key methods in the design process. In the Product way of thinking, <strong>User comes first</strong>. Questions like <em>“What problem am I solving?”</em> and <em>“Who am I solving it for”</em> are at the root. Every design decision is based on the answers to these questions. As a Product Designer I can no longer walk away after designing a product. Designer’s role is more flexible and emergent throughout the product development phases, where solutions continually evolve.</p><p>Once the Product is fully designed or after its first launch with active customers, it’s more about refining what’s there. The design changes are evolutionary and not revolutionary. As a Product Designer, I don’t get to stare at a blank canvas anymore, instead I get to tweak and (attempt to) perfect an existing product based on metrics, customer feedback and my intuition as a Product Designer.</p><p>Few of our recent designs, created with this approach:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/600/0*ieDSwydJNN7Aemrz.jpg" /></figure><figure><a href="https://www.projectaliveandkicking.org/"><img alt="" src="https://cdn-images-1.medium.com/max/600/0*XiyN3465XIMNGike.jpg" /></a></figure><figure><a href="https://cricheroes.in/"><img alt="" src="https://cdn-images-1.medium.com/max/600/0*rX_n_Epj7L36XOT5.jpg" /></a></figure><p>From what I understand and have learned, evolution is nature’s way of optimization. My experiences with design just keep on getting deeper and new questions continue to arise.</p><p>Coming back to the question I started with, <em>Is design progressive? </em>What are your experiences with design?</p><p><em>Originally published at </em><a href="https://www.digi-corp.com/blog/evolution-of-design-then-and-now/"><em>www.digi-corp.com</em></a><em> on </em>May 25th, 2017<em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=8b9c8b303b93" width="1" height="1" alt=""><hr><p><a href="https://medium.com/code-to-craft/evolution-of-design-then-and-now-8b9c8b303b93">Evolution of Design — Then and Now</a> was originally published in <a href="https://medium.com/code-to-craft">CODE TO CRAFT</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[The story of yet another framework — Propeller]]></title>
            <link>https://medium.com/code-to-craft/the-story-of-yet-another-framework-propeller-941f250316c7?source=rss-70ceb9ee5bd1------2</link>
            <guid isPermaLink="false">https://medium.com/p/941f250316c7</guid>
            <category><![CDATA[bootstrap]]></category>
            <category><![CDATA[framework]]></category>
            <category><![CDATA[product]]></category>
            <category><![CDATA[material-design]]></category>
            <category><![CDATA[ui]]></category>
            <dc:creator><![CDATA[Supriya Agnihotri Jagani]]></dc:creator>
            <pubDate>Thu, 27 Apr 2017 08:29:28 GMT</pubDate>
            <atom:updated>2017-05-02T09:13:09.925Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/700/1*qy2Wj06J0MX3EXIE-lzWKg.jpeg" /></figure><p>Not a day goes by when you don’t hear about a new framework to accomplish something faster in a simpler, better way. It seems we need framework to manage all these frameworks! Still we spent an entire year building one more framework — <a href="http://www.propeller.in/">Propeller</a>.</p><p>Obviously it deserves an explanation. So what is Propeller?</p><blockquote><a href="http://www.propeller.in/">Propeller</a> is a front-end responsive framework, based on <a href="https://material.io/guidelines/">Google’s Material Design Standards</a> &amp; <a href="http://getbootstrap.com/">Bootstrap</a>.</blockquote><p>In simple words, it helps Front-end developers and designers build websites and web-based apps faster, better and beautiful.</p><h4>And why did we create Propeller?</h4><p>Propeller is crafted by the creative minds at Digicorp. Designers and developers face some common obstacles while developing web-based apps and websites. They are mostly related to :</p><ol><li><strong>Re-usability.</strong> <em>For instance, writing the same lines of code from scratch for every project instead of reusing it</em>.</li><li><strong>Maintaining code standards.</strong><em> For instance, each developer uses her own coding style unless a standard practice is laid down for her to use. Things become worse when multiple developers are placed on a single project or developer has to make changes to someone else’s code</em>.</li><li><strong>Turnaround time.</strong> <em>This is affected in absence of reusability and dependency on developers.</em></li></ol><p>We thought that if we can figure out a solution around these obstacles, it would help us maintain the quality of products we build for ourselves and our clients (mostly startups) and ship them faster too.</p><h4>D’Material — The predecessor</h4><p>This is when we started building D’Material — a library of most frequently used html-based components. We developed basic components like dropdown, date picker and a few advanced components to begin with. We did not build everything from scratch. We did a conscious effort to reuse most of the components we had created in past.</p><p>We selected <a href="https://material.io/guidelines/">Google’s Material Design</a> as library’s <em>design language</em> as we were confident about its design principles. <a href="http://getbootstrap.com/">Bootstrap</a> being a stable and a very popular framework in design and developer community was again a clear choice for <em>coding</em> it.</p><p>In about a year’s time, as a side project, we built a library of <strong>19 components</strong> and <strong>a</strong> <strong>template</strong>. We also used that template as a back-end theme in many of our products. We, the design team, were using D’Material everywhere and were confident about its effectiveness (It saved us a lot of time and made us deliver mock-ups faster than ever. We also noticed that code was no longer developer-dependent, but followed a general standard).</p><h4>Roadblocks ahead!</h4><p>Well, while we (the designers) were happy building and using the library, it took us time to convince our in-house development team to use it. They were probably uncomfortable switching to a library that was not globally tested or accepted (compared to the ones they were currently using).</p><h4>Birth of Propeller</h4><p>For quite some time, we tried pushing it internally but it didn’t work. So instead of convincing (or forcing!) our in-house developers to use D’Material, we decided to tread the more difficult path — <strong>make D’Material global and acceptable across the world </strong>(perhaps it will work as a <a href="https://en.wikipedia.org/wiki/Reverse_psychology">reverse psychology</a> for our developers!). It should also give us a lot more confidence in our capabilities as designers.</p><p>Founders of Digicorp were equally confident about this approach. To take it even further, <a href="https://twitter.com/abhishekdesai">Abhishek Desai</a>, one of the co-founders, came up with the name <strong>Propeller</strong>. It was an apt name as it reflected the purpose of D’Material very well — <strong>“Propel the development”.</strong></p><p>So, to propel development all over the world, we launched Propeller on Wed, Oct 26, 2016. The philosophy remains the same, to put our components library together and keep evolving it till the world (and our in-house team) starts using it.</p><p>To be honest, we know we can’t do this alone, so we have made Propeller open source under MIT License. That does not mean that we have abandoned the project and now expect others to take care of it (as it happens in many open source initiatives, especially started by companies). Every single day, we are contributing to the framework and look for your support and feedback. We have a small but vibrant community on Github right now, and expect it to grow bigger from here on.</p><p>If you have made it so far, thank you so much. Please do check the library on <a href="http://www.propeller.in/">Propeller Website</a> or on <a href="https://github.com/digicorp/propeller/">Github</a>. We are looking forward to have you on-board, either as a user or as a contributor!</p><p><em>Originally published at </em><a href="https://www.digi-corp.com/blog/the-story-of-yet-another-framework-propeller/"><em>www.digi-corp.com</em></a><em> on April 17th, 2017.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=941f250316c7" width="1" height="1" alt=""><hr><p><a href="https://medium.com/code-to-craft/the-story-of-yet-another-framework-propeller-941f250316c7">The story of yet another framework — Propeller</a> was originally published in <a href="https://medium.com/code-to-craft">CODE TO CRAFT</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How we applied progressive disclosure technique to improve usability!]]></title>
            <link>https://medium.com/code-to-craft/how-we-applied-progressive-disclosure-technique-to-improve-usability-a625d87628c8?source=rss-70ceb9ee5bd1------2</link>
            <guid isPermaLink="false">https://medium.com/p/a625d87628c8</guid>
            <category><![CDATA[design-patterns]]></category>
            <category><![CDATA[design]]></category>
            <category><![CDATA[progressive-disclosure]]></category>
            <category><![CDATA[ux]]></category>
            <dc:creator><![CDATA[Supriya Agnihotri Jagani]]></dc:creator>
            <pubDate>Fri, 24 Mar 2017 10:57:08 GMT</pubDate>
            <atom:updated>2017-03-27T10:11:38.233Z</atom:updated>
            <content:encoded><![CDATA[<blockquote>Different design patterns help us provide solutions to most common problems that we as designers face in our work. In this case, we explored <strong>progressive disclosure</strong> technique and applied it while redesigning one of the features of <a href="https://play.google.com/store/apps/details?id=com.cricheroes.cricheroes.alpha&amp;hl=en">CricHeroes app</a>.</blockquote><figure><img alt="" src="https://cdn-images-1.medium.com/max/800/1*kSh9_o-Fi-Nvk_miVC4cmA.jpeg" /></figure><p>At <a href="https://www.digi-corp.com/">Digicorp</a>, we have one product review every week. Last week we reviewed <a href="http://cricheroes.in/">CricHeroes</a>.</p><blockquote><em>CricHeroes App helps cricket players create a professional-grade scorecard for any match they play, anywhere, with any rules, as far as it is Cricket. Starting from batting and bowling statistics in a match to a wagon wheel for the batsman and auto-generated commentary, everything can be created on top of the scores collected by the app. ”</em></blockquote><p>Cannot relate with the game of Cricket? Well, you can still continue reading. The article has more to do with redesigning an app feature than the game of cricket :)</p><p>So, like I mentioned earlier, we had this Product review meeting. The basis of the review was mainly the usability testing and user feedback that the product team had received since CricHeroes’ beta launch in October 2016. The review was focused on revisiting the <strong>“Start a Match”</strong> feature — one of the core features of the app.</p><p>The participants of the meeting included the product owner, product manager, principal designer &amp; the product designer.</p><h4>“Start a Match” User Story</h4><p>This is how the user story of Start a Match feature was defined.</p><p>To Start a Match, user:</p><ul><li>needs to select two teams,</li><li>has to select a captain and playing squad for each team,</li><li>enter number of overs for the match,</li><li>city/town should be auto-filled based on user’s current location, (if user hasn’t given location permission to the app, they remain empty and optional)</li><li>needs to select a Ground in the city / town selected above,</li><li>date and time should be auto-filled as per current date and time.</li><li>“Next” button gets enabled only after user has selected both the teams and overs per match.</li><li>“Save for later” buttons saves the match in database and takes user back to the MATCHES screen. It gets added as the “Upcoming” match.</li></ul><h4>Existing User Interface</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/300/1*hcySGIC6knwU0iRM4pGQSw.gif" /></figure><h4>Identifying the Problem:</h4><p>We discussed over and identified the usability issues in the flow, one at a time. We also included few of the feedback that we received from our actual users.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/440/1*lp_l27TRD7FcFGToLPtk_w.png" /></figure><p>This is the main screen to Start a Match.Everything that user had to do, to start a match, was there on this one screen.</p><p>Well, then what was missing? The first problem was — too much information on the screen, which meant, too much for the user to do.<br>There was a defined flow in which the app wanted user to feed in the information (refer the user story above), but the interface was not guiding the user enough with what information to feed in first and what next.<br>Users were entering the information as per their understanding and missing certain fields. This was resulting into many validation messages being popped up/prompting the user to feed missing details.</p><h4>Making the feature more usable</h4><p>Well, different design patterns help us provide solutions to most common problems that we as designers face in our work. In this case, we explored progressive disclosure technique and applied it to make the entire flow more simple, minus any distractions.</p><p><strong><em>What is Progressive Disclosure?</em></strong></p><p><em>Progressive disclosure is a technique for managing information complexity. When you use progressive disclosure, you show only the information necessary at that point in the interaction. And you display more advanced functionalities of the app interface, as the user interacts with it.</em></p><p><em>It is a simple, yet powerful design pattern where the designer,</em></p><ul><li><em>Initially, show users only a few of the most important options and</em></li><li><em>Discloses a larger set of specialized options only if a user asks for them.</em></li></ul><p><em>To design a good progressive disclosure, you need to learn about your users, involve them in the design process, and interact with them.</em></p><h4>The Solution</h4><p>All we had to do now was, <strong>sequence the information and actions across multiple (but not too many) screens in order to reduce the feeling of overwhelm for the user. </strong>And we exactly tried to do that. We broke down each line item of the earlier defined user story and arranged it sequentially and in logical order.</p><h4>Revised User Interface</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/360/1*Le11wPCu_K4bw59UuDihEw.gif" /></figure><p>The jury’s still out on the usability of this feature redesign. We have taken a first round of feedback from a few users we are closely working with, and so far we have received a positive feedback from them. New challenges would arise as we continue to build the product and keep seeking feedback from our users. One thing we would like to continue doing is revisiting the product already built and make it usable.</p><p>Have you applied progressive disclosure technique in any of your designs? Curious to see them!</p><p><em>Originally published at </em><a href="https://www.digi-corp.com/blog/progressive-disclosure-technique-to-improve-usability?utm_campaign=progressivedisclosure&amp;utm_medium=social&amp;utm_source=medium"><em>www.digi-corp.com</em></a><em> on March 22nd, 2017.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=a625d87628c8" width="1" height="1" alt=""><hr><p><a href="https://medium.com/code-to-craft/how-we-applied-progressive-disclosure-technique-to-improve-usability-a625d87628c8">How we applied progressive disclosure technique to improve usability!</a> was originally published in <a href="https://medium.com/code-to-craft">CODE TO CRAFT</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Designing Software Interfaces]]></title>
            <link>https://medium.com/code-to-craft/designing-software-interfaces-8c2882340254?source=rss-70ceb9ee5bd1------2</link>
            <guid isPermaLink="false">https://medium.com/p/8c2882340254</guid>
            <dc:creator><![CDATA[Supriya Agnihotri Jagani]]></dc:creator>
            <pubDate>Thu, 12 Feb 2015 10:14:02 GMT</pubDate>
            <atom:updated>2015-02-12T10:14:02.121Z</atom:updated>
            <content:encoded><![CDATA[<p>Before we get into the details of how part, let us first try to know what actually does the word <em>interface </em>mean.</p><p>As stated in Thesaurus,<br><em>Interface: connect, combine, integrate, merge, mingle, unite, join together and few more…</em></p><p>In computer science,<br><em>Interface is a program that controls a display for the user (usually on a computer monitor) and that allows the user to interact with the system.</em></p><p>If we further extend the meaning in context of design interface,</p><p><em>Designing interface is a process where you logically structure the program so that the resulted display is easily understood and easily usable by the user.</em></p><blockquote>An interface design is good if it is clear, user is able to recognize what it is all about, she cares to use it or knows why to use it, it is easy to understand and interact with and, predictable too.</blockquote><p>As a designer, there are few unbreakable rules or laws that I follow or keep in mind while designing any interface. These rules are very much logical in nature and no rocket science. I strongly believe that any designer who aims at creating usable interfaces can or must be following these.</p><p><strong>Identify your user and try to know them better</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/493/0*ZbpyieaP-N0rSba3.jpg" /></figure><p>This is first question that I ask whenever I’m starting with a new design assignment. <em>Knowing whom you are creating the interface for is very important. </em>This rule falls true for anything new that is being created. We do it in our day to day lives too, let us take an example.</p><p>If I’m about to cook a recipe, first thing I need to know is — Who is going to consume it? A child, an adult? If its a child how old is she, does she like her food to be sweet or blend or tasty? If I dig in more, Is this going to be consumed as a breakfast or lunch or dinner?</p><p>The chances of my recipe being consumed &amp; liked after considering few of the above points are much higher than just cooking out of the blue as per my taste. Agree?</p><p><strong>Clear &amp; Simple Interface </strong>To be effectively using an interface you’ve designed, user must be able to recognize/identify what it is, care about why they would use it, understand what the interface is helping her interact with, predict what will happen when she uses it, and then successfully interact with it. But remember, clear and simple interface does not mean you exclude elements that would actually have been of use to the user. For example If Sign up or Sign In is a primary action for a user to enter your web application interface try not to keep it hidden behind an icon or in a drop down just to make your screen look clean and minimalistic!</p><p><strong>Consistency to enable easy interaction</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/493/0*2PW50l81NBzyCxU4.jpg" /></figure><p>Consistency in an interface can be achieved by <em>using common elements throughout. </em>This way user will feel more comfortable and would be able to get things done more quickly. It can be achieved by following a similar pattern, theme, color, font etc throughout the interface. The example of this too can be found around us.</p><p>In your house, there must be switch boards in every room. They must be same in look and feel, in size, and the way they function too right! Imagine there were different switch boards(in shape, the way they function etc) in every room of your house, it would have been trouble to get used to them for sure.</p><p>The focus should be that <em>user learns how to do something from first instance</em>, and she <em>should be able to relate it with other parts of the interface.</em></p><p><strong>Context </strong>User will always expect to see interface elements in the context of object (close to the object) she wants to control. Taking the same example of switchboard, the switch to turn on/off your living room fan can be found in the living room area and not in a kitchen or anyplace in your bed room.</p><p>Remember to <em>keep things handy for users — </em>if something can be edited, changed or controlled, place the controls right next/near to the element itself.</p><p><strong>Layout structure</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/493/0*UNeVIKwkxwh9DWaO.jpg" /></figure><p>It is very important and wise to consider the <em>spatial relationships between items </em>on the page and <em>logically structure the page based on importance. </em>Careful placement of items can help you draw users attention to the most important pieces of information and can aid scanning and readability. This is more like guiding your user or taking her through your interface the way you want. Few ways to achieve this on a webpage interface would be <em>usage of Heading tags, separators, boxes, sections, etc.</em></p><p><strong>Guide the user to keep her in control</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/493/0*QIVoosqa97k8hmSd.jpg" /></figure><p>I call it <em>progressive disclosure. </em>Show only what is necessary on each screen. If user is making a choice, show enough information to allow her the choice, then dive into details on a subsequent screen.Avoid the tendency to over-explain or show everything all at once. This can be one of the ways to keep your interfaces simple &amp; clear.</p><p>Relate this with how a typical 5 course meal is served, the items are served one at a time from soup, to starters to salads to main course and finally the desserts!</p><p><strong>Creating call to actions and differentiate clearly between primary &amp; secondary actions </strong>We can also term this as a <em>guided action. </em>The user will probably do something only if she is asked to do it. There is a huge difference between expecting users to do something on their own, and asking them specifically to do it. <em>Don’t assume actions. </em>Few things would be logical for you only because you have designed it or are working on it since long!For example if your shopping cart interface demands a login before the user gets to purchase an item, show her the Log in screen and ask her to do so. Taking the user back to the home screen or not allowing her to add the item in her cart won’t help her at all!</p><p>You also need to give proper attention on and differentiate visually the primary &amp; secondary action elements on your interface. For example in after filling any given form, the general actions can be to Submit/Save, Cancel or Reset it. Here the Primary action would be to Submit/Save and secondary actions would be Cancel or Reset. Design/Differentiate them accordingly.</p><p><strong>Play with Typography, Color palette is not an only option available! </strong>As a designer I always explore ways to represent the elements on the interface I design. You can direct attention to or redirect attention away from items using color, light, contrast, and texture to your advantage. But note that colors are not the only way to highlight elements on your interface. Try typography instead.</p><p>You can very well use typography to bring hierarchy and clarity in your interface. Idea is to carefully consider how you use typeface. Use of different sizes, fonts, and arrangement of the text will help you increase scan-ability, legibility and readability in your interface.</p><p>And then there are rules which are important to make your interface a good interface, but are often overlooked by designers, couple of them include</p><p><strong>Considering the blank state </strong>This is all about — What will your user see when she first time logs in the interface that practically has no data? Or in any given shopping cart interface what will she see if there are no items in a particular category. Do you remember how did your Facebook page look when you had no feeds, friends or information on to it? It guided you to create your profile, invite your friends and get started with your first post! It wouldn’t have been easy for you to set up your profile &amp; get going if Facebook team had not considered the blank state or interface with no data view!</p><p>Thank you “<a href="https://gettingreal.37signals.com/">getting real</a>” for teaching me this.</p><p><strong>Preparing for unexpected actions </strong>Don’t forget to consider those unexpected actions which your user is likely to perform under unexpected scenarios. One example of unexpected action would be typing a wrong page URL while navigating a site. Now if this page does not exist on your site, what should a good interface show? Well, it should show a “404 error — Page not found” with proper navigation links for user to move ahead and get going!</p><p>If understood well, the above rules are much simpler and logical in nature. They can easily be applied while creating any interface.</p><blockquote>As a designer I always take it as my duty and responsibility to design interfaces that are usable. I don’t consider my job as done once I complete designing an interface, I consider it done when the users actually are able to use it! Why? Simply because Interfaces exist to be used. Just like you expect a chef to come up with a recipe which not only looks tempting enough to the eyes but tastes great too, an interface design can be as much about creating an environment for use and worth using.</blockquote><p><em>A note: The rules and points I listed above are true not only for designing screen based interfaces but also for few tangible designs we come up with for our customers.</em></p><p><em>A disclaimer: The article you just read is based on my experience of designing interfaces in past 8 years, many designers I’ve worked with or even interviewed, and many blog articles, sites (</em><a href="https://goodui.org/"><em>Good UI</em></a><em>, </em><a href="http://www.smashingmagazine.com/"><em>Smashing Magazine</em></a><em>) and books I read and refer to (Don’t Make Me Think by Steve Krug, Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell ) in my learning phase.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=8c2882340254" width="1" height="1" alt=""><hr><p><a href="https://medium.com/code-to-craft/designing-software-interfaces-8c2882340254">Designing Software Interfaces</a> was originally published in <a href="https://medium.com/code-to-craft">CODE TO CRAFT</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
    </channel>
</rss>