2
EDITOR’S NOTE
INSIDE
The importance of design in delivering delightful customer experiences is more important now than ever before. Users of digital products have come to expect a level of friction-free experience along with value and quality that is being driven by their use of mobile applications at unprecedented levels.
03
THE MVP IS DEAD Users are accustomed to a minimum of quality, and they expect that of all new products.
07
MY JOURNEY INTO PRODUCT DESIGN My aesthetic-focused design purpose was limiting my ability to understand the problems my clients faced.
09
WHY YOU SHOULD BUILD A MINIMUM DELIGHT-ABLE PRODUCT (MDP)
The Lean Methodology introduced us to the Minimum Viable Product (MVP) with the concept of introducing a set of minimum features acceptable to customers and rapidly evolving the product based on feedback and insight from these users. However, changing customer expectations on what is considered a minimum product based on various factors like smooth experience, real-time feedback, personalization and so on, is evolving the MVP to what is being termed as Minimum Delightful Product (MDP). This makes understanding customers at a deep level all the more important and the product managers have to add design as a key toolset in their arsenal to delight the customers. This edition of Product Magazine focuses on a this role of design in the life cycle of products.
Ramkumar Narayanan Digital Transformation | Product Thinking | Strategy | Zinnov, Sukino Healthcare Solutions Pvt. Ltd Editor | Prodmagazine.com
Building great customer products is always hard. That’s why I am writing this.
13
TOOLKIT OF A PRODUCT DESIGNER The design process is messy and convoluted, but there are tools that can alleviate some pain points.
THE MVP IS DEAD, LONG LIFE TO THE MAP (MINIMUM AWESOME PRODUCT) I will say this bluntly and without sugar coating … the MVP has died. But you will first need to be placed in that situation. What is the MVP? MVP: Minimum Viable Product The Minimum Viable Product (MVP) is a product with enough features to satisfy the initial customers, and provide feedback for future development. Some experts suggest that in B2B, an MVP also means saleable. “It is not an MVP until it sells. Viable means that you can sell it.”
Yes, this is a copy-paste of a simple definition in Wikipedia. One that I agree with in many aspects. Mainly due to one factor, the analysis. In my opinion, a more accurate definition of MVP would be: “The Minimum Viable Product (MVP) is the one that allows us to launch the product with the least amount of features possible so that we can learn and extract relevant information from this trial period and user interaction through a series of metrics and then act based on that data.” The best (and most common) way to explain an MVP is using this famous image.
3
MY JOURNEY INTO PRODUCT DESIGN I recently moved from Mexico to New York to join Managed by Q as a product designer. Prior to joining Q, I worked as a freelance designer for several years. This varying experience enabled me to adopt a new perspective on design, by understanding the limitations of valuing aesthetics over problem-solving when working on digital products. I first became interested in design when I was a senior in business school. I was part of an accelerator program where I co-founded a company and designed my first logo. That project led me to enroll in an elective media design class during my last semester in college, where my professor became my first design mentor. Her course and guidance gave me the confidence to pursue a career in design. After graduation,freelancing and entrepreneurship became the primary ways I learned about design. My curiosity and hunger to learn led me across the US and Mexico, where I participated in a wide variety of design projects. Through this work, I built a diverse design skill-set, which ranged from graphic design and animation to web design and development.While I was focused on learning and expanding my design skills, I never paused to question my purpose as a designer. I believed my mission as a designer was to make things ‘beautiful’ (where I defined what ‘beautiful’ was). This approach worked well for graphic design and animation projects, but as I started working on my first web projects, I began to experience its limitations. As I designed and developed websites for businesses, I faced continuous visual pushback from my clients. I (secretly) blamed this difference in opinions on my clients’ ‘lack of taste,’ and I always left those meetings stressed and frustrated. As I faced similar feedback and continued frustration in
future projects, I began to investigate the root of my stress. Designing for Solutions Through podcasts like Design Details, design events like Epicurrence, and tech company design blogs, I learned the best product designers see digital design as a collaborative problem-solving process. This helped me realize my aestheticfocused design purpose was limiting my ability to understand the problems my clients faced — and were trying to solve. My frustrations were a consequence of prioritizing visuals — not my clients’ lack of taste. This realization changed how I approached client projects going forward. I began to leverage my business education to understand my clients’ business problems, which helped define project goals and expectations. While clients continued to pushback on designs during critiques, I used their feedback to influence the next iterations of my design and better explain how it addressed the problem we set out to solve.This collaborative process helped me realize great product design is not the result of an individual designer, but rather, of the close collaboration of a multidisciplinary team, which includes design. Designing as a Team Since joining Q, I’ve spent most of my time collaborating with a cross-functional team to build features that improve the Q Marketplace experience for both office managers and service providers. The team I work with is comprised of engineers, product managers, designers, and a couple of members of other departments like fulfillment or operations. Each individual provides a unique and valuable perspective about the problem, as product changes and feature updates (as small as they might seem) have widespread impact across internal and external processes.
7
8
PRODUCT DESIGN
As I continue my work at Q, I’ll be focusing on four areas I believe will facilitate my ability to make meaningful contributions to my team: •• User research: Continued practice interacting and engaging with office managers and service providers to understand how they think and what they need. •• Business research: Developing a deeper understanding of the business mission, its culture, and operations to get a clearer vision of where the company is going and what type of products it aspires to build. •• Communication: Sharpening my speaking, writing, and listening skills to more clearly articulate my design decisions and better understand those of my teammates. •• Process: Understanding the current creative process to optimize for efficiency, such as minimizing the time it takes to ship new features and obtain feedback.
This development will help the team create a more valuable experience for Q Marketplace users. As our product continues to grow at an increasingly fast pace, improving team collaboration will better prepare us to address complex problems that (appropriately) facilitate effective communication and collaboration between office managers and service providers. I’m excited to continue my journey at Q as a product designer, and hope my perspective about design continues to evolve as I work with more stakeholders in the business and continue to learn how great product experiences are created.
Claudio Vallejo Product Designer | Managed by Q Author | Prodmagazine.com
WHY YOU SHOULD BUILD A MINIMUM DELIGHT-ABLE PRODUCT (MDP) What does it really take to build great products that delight users? How does one go about accomplishing that without going overboard with developing features?
pushed into the hands of the users to gather feedback.
How do you get to that fundamental point that is crucial for every business — making something that people want. Most companies die simply because they are not able to crack this. The truth is, building great consumer products is always hard. That’s why I am writing this. In my past six years of experience of building products for startups across three continents, my biggest learning has been this — you need to ‘WOW’ your users.
Or sometimes, the feature that could make the real difference in the overall experience for the users was missing! I will give you an example. While building multiple consumer social apps with Spangle, we missed out a basic point — setting up a content tone by seeding the platform with the kind of content we want our users to create internally. But we realized that if that tone is not set, people come and create any type of content and spam community! Since they won’t get the basic idea of what the platform is all about, it will lead to a confusing and broken experience.
Why? Because if one person has that delightful firsttime experience, they’re going to tell someone else about it! There is simply no better way to grow and companies must leverage this humancentric growth approach in the initial days. And while this may sound simple, very few companies follow this approach while building their MVP. I have seen barely usable products
This was just one example. It’s usually something like this that people miss out while pushing out the first version of their product. Many people have written around building
9
10
PRODUCT DELIGHT
products. There are thousands of articles but nobody talks about basic fundamentals.
This is the step where you gather most of your learnings to shape your product. Some of your assumptions might turn out wrong. But, you will understand who exactly will use your product and why. You will understand the biggest pain points and how you can solve them. If you do this well, you will know who your first 100 potential customers are going to be.
As for me, I believe in one simple thing — making incredible product experiences. When I started building Marsplay, this belief was at the core of everything. The team spent countless hours to build the tool that allowed users to tag the exact product that they were wearing, without having to go on any third party shopping platform to fetch the link.
And all of this will help you understand what product features you need to prioritize. Before building Marsplay, we scheduled meetings with over 50 fashion bloggers and people who were frequent online shoppers. Our most insightful and the best learnings came from those conversations.
While this was a big challenge, we knew that making the content creation process as simple and delightful as possible is the only way to make our users say ‘Wow’! After more than 500 personal DMs and hundreds of questions, I am writing my learnings from building Minimum Delightable product rather than just MVP. And these are the few strategies that I follow to get there. Talk to Customers
For example, we learnt which shopping platforms were most widely used through talking to people and integrated them in our APL. We might have ended up choosing the wrong platforms had we just gone our way without any user research. Build Audience Before Launch
12
PRODUCT DELIGHT
Otherwise, you will be lost in all the noise. The best example for this is HQ Trivia. They introduced a unique feature called Cameo that went even one step beyond live broadcasting. It allowed the audience to actually participate in the process. That was unprecedented. That was their ‘WOW’ factor. Unsurprisingly, their biggest growth channel became word of mouth and in 3 days, it had set a record of 1.2 million concurrent players! The unique value doesn’t always have to be a mind-blowing feature. For you, it could be an amazing humanized on-boarding experience that makes your users feel special. Or it could be the content you seed your platform with. For instance, we spent two months to create high quality meaningful content for our app so that when users first come to the app, they see how all the best fashion bloggers are regularly using the app and sharing useful content!
was a complete product in itself. Even if our APL didn’t work up to our expectations for some reason (which it didn’t), we would still have a playground to test the feature. This helped us immensely. Through our app, we were able to gather content from our users on the app. That helped us build the huge database which helped in experimenting and improvising our APL tool. Had we launched it as a stand-alone product, we wouldn’t have had the freedom to re-build it various times till we were satisfied with the final product that would ‘wow’ our users. While building great products always takes immense time and patience, knowing that the end goal is to delight users ensures that we take steps in that direction. Ultimately, it’s the people that we are building our product for. Hence, we are always striving to increase the ‘delta wow’. And as Steve always said:
Launch your Critical Feature as a By-product
Misbah Ashraf Partner | @Indiagoinglobal Author | Prodmagazine.com
Launching your critical feature as a by-product allows you to iterate as you learn from your mistakes without having to depend completely on its success for the survival of your product. This is what we did at Marsplay. Our APL was our critical feature but we ensured that our app
TOOLKIT OF A PRODUCT DESIGNER Picking the Right Tools for a Better Design Workflow
The purpose of this article is to bring to light the lesser known (well, at least some are less known) gems that exist that makes the design process easier. We all know the design process is messy and very convoluted, but there are tools that can alleviate some pain points and no one ever complained about organized research material or well-maintained symbols and layouts.
The best functionality of this app is the seamless sync between the different devices. Using the Apple Pencil on the iPad to draw and take handnotes makes this app even more useful in meetings, interviews, conferences etc.
This article will not be going deep into how these different tools work, but just highlight what are the biggest perks of using them and how it makes a designer’s life easier.
This application is easily the top find in 2017, thanks to Katy Jimenez for introducing me to this. A perfect visual note-taking app that allows designers to arrange their content from various sources.
This article will go through a designer process cycle starting from research, research synthesis, interaction design, prototyping to validation, and highlight tools in each phase that help designing and collaboration easier. Research Bear App for Notes There have been multiple notes apps that I have used in the recent past ranging from Google Keep, Apple Notes to Google Docs but none have been as handy as Bear. The flexibility the app provides in helping us organize notes is amazing. Use hashtags as a means to structure our navigation is a great idea. This app is extremely well-designed, minimal and provides great formatting capabilities. Taking notes has never felt this good before.
Research Synthesis Milanote
The process of design is messy, unstructured, nonlinear, and nothing like the perfect design videos one sees on marketing pages of products. This app tames the madness that the design process is, and helps designers organize their content better. I primarily use it for organizing my research findings, and the ability to create columns with a title mimics how I create affinity diagrams with post-its. Creating sections with quotes from user-interviews, consolidating the critical information from such sessions can be done easily on this tool. The components of this tool have a great visual hierarchy and hence makes scanning very easy. For example, this article was completely structured and written on Milanote as you can see below.
13
14
DESIGN IMPROVEMENT
This serves multiple purposes such as using it as a mood board, collecting research, outlining articles, to even synthesizing research.
Inserting symbols is made easy and fast where it reduces the need to use the mouse to go click on the Symbol icon, search for it on the dropdown and add it. The action that I use the most is inserting symbols and Sketch Runner provides with an option to have any tab on focus when launching. I usually set this to the “insert” mode.
Interaction Design Sketch This is a no brainer. Sketch is probably the most widely used tool by designers as of today. Yes, there are other tools that are catching up, but quite honestly, designers have become so used to Sketch by now that a jump to another tool might not be evident in the near future. There are abundant tutorials out there for perfect Sketch workflows, and here, I am going to try to talk more about some of the plugins that make this workflow seamless. Sketch Runner — Spotlight of Sketch This makes designing on Sketch way faster than one can imagine. Launching sketch runner can be done with ⌘ + ‘.
Icon Font — Sketch Plugin Icon font makes inserting icons to your designs seamless. If your icon set exists either in SVG or with necessary JSON file with icon information, this plugin helps manage and insert them from one central place. Complete font bundles can be imported that brings multiple icon-fonts into the Sketch in one go. My favorite feature of this plugin is the ability to create a custom shortcut for each icon-font.
The plugin has six different tabs and pretty much any action one wants to perform on Sketch can be done on it. Think of this as the Spotlight Search of Sketch.
Anima App — Sketch Plugin This easily has to be my favorite Sketch plugin of all times. This helps accomplish things that I have always wanted from Sketch. This plugin aids with making better layouts and creating symbols. With
15
DESIGN IMPROVEMENT
newer Sketch updates, some of what was possible only with Anima App are possible natively now, but this plugin still has a few outstanding features that I cannot imagine designing without.
Vertically and horizontally pinning — Centering a layer vertically or horizontally is possible with the native Sketch app now, and so is pinning it to a corner with a particular value as a margin.
Auto Layout — This makes it possible to create screens on Sketch that are almost responsive.
Abstract App
If one notices, irrespective of how much the screen is resized, the content remains centered and the distance between the sections besides it remains the same. This is not achievable without the plugin. How is this done? Stacked Groups. There exists a feature called stacked groups where it allows creating a fixed amount of margin between multiple layers irrespective of how the parent layer is resized. Stacking can be done with vertical and horizontal layers, thereby making it easier to create rows and columns with equal spacing between them a breeze.
Version controlling for designers have usually been of a nature similar to this : 1. App Design Concept 2. App Design Conceptv2.0 3. App Design Conceptv3.0 4. App Design Conceptv3.0Iteration 5. App Design Concept v3.0Final Feels familiar? Duplicating and re-saving the same file over and over is what designers have been used to. Developers do it the smart way with Git, and there have been Sketch plugins that try to mimic how Git works for designs, but none of them worked well for me. Either they were too convoluted to use or the trouble of setting them up and learning how to use was harder than just duplicating the files. But what happens when you need to version control and working with a large design team? Sure, DropBox or Box are viable solutions, but it still does not remove the manual versioning out of the picture. Abstract App makes this process a
16
DESIGN IMPROVEMENT
breeze. It is extremely easy to create a project and maintain multiple versions of it in branches and merging them to the master which acts as the single source of truth for the design. All this is done and the existence of the Sketch file is abstracted from the user. One less thing to worry about for designers.
This app has increased my efficiency at working on Sketch with very little fear of losing the files or having the wrong version before a big presentation. Documenting the changes at every checkpoint helps keep track of the evolution of design. The best part is the ability to go back to any specific version and look why certain decisions were made.
The one rule that is important to keep in mind is that the files should be accessed from Abstract instead of just opening the Sketch file on your computer and editing for the changes to be tracked by Abstract. The process of creating a new branch and merging the changes to the master file is simple and straightforward.
Framer I have been using Framer to develop a lot more often in the recent past since they introduced the Design tab. If Framer introduces the equivalent of symbols and ways to create and save custom type styles, I will jump to designing completely on Framer. But of course, that will mean the inability to use Abstract App which is a huge downside. Flow Component on Framer has made prototyping a breeze where with just a couple of lines of code,
17
DESIGN IMPROVEMENT
one can pretty much create the kind of flows InVision makes possible. This is easier from a workflow perspective as sending it out to UserTesting with the capability of interactions makes the tool very valuable. The biggest downside I see to designing on Framer is that not all designers like to use this platform for designing, and collaboration is not Framer’s strongest suit where other designers can leave comments on one’s prototype. This is something that I have been struggling with where there are times where the prototypes needs to be published to InVision for comments and made prototype ready for Framer which can sometimes be time consuming. Which brings us to the next tool that works well with Sketch, and does not require too much time setting up for interactions and animations — Principle for Mac. Principle for Mac This has been my go-to tool for creating very quick animation/interactions to test a concept out. Principle provides the ability to export to GIF or a video. This tool helps when there is a need to quickly test out how an interaction feels. Drivers is an interesting concept where one can move elements based on the position of other elements. This relative control of layers provides great freedom to prototype. Very easy to import files from Sketch and setting up a prototype does not take too long. The biggest downside to Principle is the inability to share a public link for having the concepts tested. Also, the GIF export that comes inbuilt with the app is buggy and does not always export good quality GIFs. Which prototyping tool to use when? I use Principle and Framer interchangeably based on the need of the hour. When creating concepts to demo to engineers or Product Managers, Principle makes it fast and easy to have a prototype that almost and feels like the real deal. Framer on the other hand, though takes some time to set it up, the capabilities are limitless as
you are playing with code that allows you prototype anything. Yes, literally anything — I prototyped a central console of automobiles that was voice controlled. Am talking THAT flexible. Also, Framer makes it possible to use real data to prototype charts, graphs etc. Accessibility Tools Accessibility always needs to be a big criteria while designing irrespective of your target audience. It does not matter if just 1% of your target audience are color blind, it is just the right thing to do by making sure that your product is accessible by a wider audience. Earlier, I wrote a piece on designing accessible products, in which I had mentioned a few tools that I use to check if color combinations are accessible — Color Safe and WebAim are great tools. Another gem which I discovered recently is this tool called Contrast — a MacOS app that probably is the best accessibility tool I’ve used in the recent times for contrast check. Closing Thoughts These are by no stretch all the good tools out there for designers, but a few awesome ones that fit really well into my workflow for designing faster and collaborating easier. I’d love to hear your thoughts on some of the tools that help you design better.
Adhithya Ramakumar Product Designer | OpenDNS Author | Prodmagazine.com
18
Editorial Team RAMKUMAR NARAYANAN
Digital Transformation | Product Thinking | Strategy | Zinnov, SukinoHealthcare Solutions Pvt. Ltd. Editor | Prodmagazine.com Ramkumar (Ram) Narayanan is a global leader focusing on data driven, digital product innovation spanning consumer and enterprise markets. He has also been associated with eBay,Yahoo!, and Microsoft..
CARLOS BENEYTO PÉREZ
Lead Product Designer | SX Author | Prodmagazine.com
Carlos is a young entrepreneur and a UI/UX Developer. He enjoys marketing and promoting online businesses, and is an ardent Apple fan and rugby lover.
CLAUDIO VALLEJO
Product Designer | Managed by Q Author | Prodmagazine.com Having expanded his knowledge in product design through freelancing and entrepreneurship, Claudio is currently a product designer at Managed by Q.
MISBAH ASHRAF
Partner | Indiagoinglobal Author | Prodmagazine.com
Misbah formerly led Product and Growth at Toymail Co. He founded the payment venture, Cibola and is passionate at building products that delight customers.
ADHITHYA RAMAKUMAR Product Designer | OpenDNS Author | Prodmagazine.com
Based in San Francisco, and with a background in computer engineering, Adhithya loves writing about his design process. He is a design mentor and believes in the power of thoughtful designs.