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>Published on <a href="http://ift.tt/2tdarYx">| Prototyping: From UX to Front End &mdash; Medium</a> Tejas Bhatt </p>
<h4>Case-study for WebEngage’s marketing automation product design</h4>
<p><img alt="" src="http://ift.tt/2tcA63L"></p>
<p>WebEngage is a marketing automation platform that operates out of Mumbai and US. They service over 38,000 happy customers engage 180+ million users monthly. Their growth demanded they expand to markets in US and Europe.</p>
<p>WebEngage came to us with a clear road ahead charted out. Their use-cases were elaborate and the product offered extensive features. They were taking a different approach to analytics. While other similar products focus on reducing the information, WebEngage wanted to offer lot more insights. That made our job of designing the product both easy and challenging at the same time.</p>
<h3>Anti-minimalism</h3>
<p>There is a strong trend of reducing complexities in design. That works in consumer apps with single and simpler goals. But when you are designing for enterprise products, you cannot reduce the number of features or simply do away with complex use cases. Will an aeroplane be better with only one lever for take-off and landing (obviously with a <em>stories</em> feature thrown in 😛)? I am guessing not.</p>
<p><img alt="" src="http://ift.tt/2tVQbYr">Stories? D’oh! From <a href="http://ift.tt/2tdah3g">Giphy</a></p>
<p>We did not want to reduce features to make WebEngage like other apps. This was the opportunity to improve the information architecture and prioritize features while also keeping the competitive edge.</p>
<p>Having said that, the visual language of the app is still very light and <em>minimal</em>. The goal was to let users focus on the information, not chrome.</p>
<h3>Process</h3>
<p>The amazing team at WebEngage gave us detailed product specs and wireframes. That gave us an easy access to their vision of the product. After understanding the core features, we delved into creating a visual language.</p>
<p>We started with working on only a few screens at first. This was to establish a design system. Each element we designed, instantly became part of a living style-guide. This helped us create a modular component library in Sketch. <a href="http://ift.tt/29vGHYz">This wonderful article</a> by <a href="http://ift.tt/2twlF6Q">Emin Inanc Unlu</a> on using Sketch resize to streamline components helped a lot while creating the library.</p>
<h3>Design System</h3>
<p>For the constantly growing product, we considered how the design could be extended for future use. We needed to think about enabling the client to continue scaling the design on their own.</p>
<p>Our approach to the design system was more like that of Google’s documentation their Material design guidelines. Since the stake-holders of this design are going to be designers <em>and</em> developers, we went with a verbose documentation.</p>
<p><img alt="" src="http://ift.tt/2tVmFSO">The Design System is elaborate to explain rational behind decisions and the dimensions. Totally un-Dribbble-worthy. 😉</p>
<h4>Grid, sans grid</h4>
<p>Dashboard designs have a dense information structure. Using a strict grid is often not the best approach. Instead we created rules for margins between elements and how elements should stack.</p>
<h4>Content Out</h4>
<p>The design uses content-out principle, as opposed to box-in. As mentioned before, instead of sticking to a grid, we are using content as our measurement. After defining a certain amount of white-space around elements, the rest of the design took shape organically around the charts, tables and rest of the content.</p>
<h4>Colour Theory</h4>
<p>When you are displaying a variety of content on a screen, you have to be careful in selecting the colour scheme. WebEngage had tons of charts and graphs to show different stats. We researched best practices for data-viz colour scheme and found <a href="http://ift.tt/2td4YRw">some</a> <a href="http://ift.tt/2pLBKXP">amazing</a> <a href="http://ift.tt/1IhUFxp">resources</a>.</p>
<p><img alt="" src="http://ift.tt/2tVILEI">That’s more likely to get some Dribbble ❤️.</p>
<h4>Typography</h4>
<p>Typography is one of the most fundamental component of design. For apps with a very wide user-base, it often meant that you had to resign to native font-stack (Arial 😔, Helvetica 😏). Good for us, now the operating system typeface game is up, up, up. We went for a font-stack that would render like a native app in most browsers/operating systems.</p>
<pre>font-family: -apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; </pre>
<p>The method to implement this font-stack has been well-documented by Booking.com’s <a href="http://ift.tt/2td6JOF">post</a>.</p>
<p>Using system fonts also allowed us to use a spectrum of font-weights, which otherwise would have been hard (but will become lot easier with embedded fonts when <a href="http://ift.tt/2m4t6Sp">variable fonts</a> gets implemented).</p>
<h4>Actions and Buttons</h4>
<p>Early on in the process, we made the decision to assign priority on scale of 1 to 5 to actions and buttons.</p>
<p><img alt="" src="http://ift.tt/2tdeP9W">Information and action prioritisation on wireframes</p>
<ul>
<li><strong>if the priority was 1</strong>, those actions would be combined and pushed into drop-downs.</li>
<li><strong>if the priority was 2 or 3</strong>, the actions/buttons would be in form of icon-only elements with tooltip.</li>
<li><strong>higher priority actions</strong> would have Text-only links or buttons. This would let the users take critical actions without guessing the meaning of icons.</li>
</ul>
<p>We avoided buttons with icons and text <em>both together</em> to avoid redundancy.</p>
<p><img alt="" src="http://ift.tt/2tVEa5t">Detailed instructions about the usage of buttons.</p>
<h4>Visual Hierarchy</h4>
<p>We designed all elements with two-factor distinguishers. What is a two-factor distinguisher you ask? For example —</p>
<p><img alt="" src="http://ift.tt/2td4Xgq"></p>
<p>The element in hover state above is different in colour and also has a background. This type of two-factor distinguisher reduces the cognitive load on users as it is now lot easier to tell the two states apart.</p>
<p>We used this principle across the entire app. So adjacent elements have distinguished styles establishing proper visual hierarchy.</p>
<h4>Designing for Data-visualisation</h4>
<p>Data-visualization over large-scale data is hard because one tends to run out of colours to use to denote data. We solved this by combining multiple data-points into ranges in tight spots.</p>
<p><img alt="" src="http://ift.tt/2tVENfp"></p>
<h4>Responsive-ness</h4>
<p>The responsive design concept is most talked about to accommodate smaller screen-sizes. But if a product is targeting large and larger screens (1280px wide and above), we need to think about how to use the extra space to show more information.</p>
<p><img alt="" src="http://ift.tt/2td6AKQ">(L) chart at 1280px width, (R) same chart expands to show more data-points when more width is available.</p>
<h4>The Fun</h4>
<p>How do we add some elements of fun into this mix? We explored some options to add bit of humour to the design. However, this idea was ditched to make these screens not stand out much.</p>
<p><img alt="" src="http://ift.tt/2tVgQol">The 80’s kids would love that TV reference.</p>
<h4>Wrap up!</h4>
<p>After over 2 months of collective hard-work, we delivered not only the product but a scalable and sustainable system for WebEngage. The product turned out in a way that both they and we are proud of. <a href="http://ift.tt/2tdatj7">Give the product a spin</a>, but be aware as the implementation is still under progress.</p>
<h3>What they said</h3>
<p>One of the key metric of a successful engagement is what your clients feel about your work, after all the hard work and thinking that goes into collaborating with teams. Here’s the kind words from the fine folks at WebEngage.</p>
<blockquote><p>Tejas has helped us design a top notch SAAS product which competes with some of the best in class SAAS products. He has been instrumental in driving the UI/UX of the entire dashboard together with the product team at WebEngage. When we started the project, one of our main objectives was to build a component library which would help abstract the future design efforts. Tejas has created a comprehensive component library for us which basically means that any new page on the dashboard now gets designed in minutes. It has been a great experience working with him and I would strongly recommend Tejas for any design related project.</p></blockquote>
<blockquote><p>— <a href="http://ift.tt/2tVu18M">Arpit Rai</a>, Product, WebEngage</p></blockquote>
<blockquote><p>Tejas worked with us at WebEngage to revamp the entire dashboard from a UI/UX perspective. We’re thoroughly impressed with his quality of deliverables and the high design standards that he has. His strong attention to detail along with his ability to always think from a customer’s point of view, has helped in building a product we’re all proud of. The initial response from our customers for this dashboard has been highly positive.</p></blockquote>
<blockquote><p>— Avlesh Singh, Co-Founder &amp; CEO, WebEngage</p></blockquote>
<p>Have some amazing product that needs design love? <a href="http://3sided.co.in">Write to me</a>! You can also follow me on <a href="http://twitter.com/tejas_Bhatt">Twitter</a>, <a href="http://ift.tt/2tVWtrj">LinkedIn</a> &amp; <a href="http://ift.tt/2tdauUd">Dribbble</a>.</p>
<p><img src="http://ift.tt/2tVrIT3" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2td0zxS">Designing for a data-heavy platform</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing for a data-heavy platform

Designing for a data-heavy platform

Case-study for WebEngage’s marketing automation product design

Top Stories