A design-driven approach to product thinking
Design it | IIM Lucknow
Highlights from my talk about design thinking processes and prototyping in product design at Inflection Point 2021, the Product Management Fest of Indian Institute of Management, Lucknow.
The session revolved around the core concepts of design thinking and the user-centred design process.
It also introduced folks to getting started on a UX strategy for creating digital interfaces and experiences and translate those amazing ideas and concepts into wireframes and prototypes.
The session was attended by 90+ students along with 100+ registrations for the wireframing contest that followed.
We often see design being misunderstood or partially understood as something that is used to make things “look pretty”. However, the role of design is far greater than what is perceived at the outset. It is of utmost importance for us to realise and understand how design is about solving problems, which makes it an essential part of everything. I wanted to impress this point upon the students at one of the eminent B-schools in India while introducing them to some of the common practices and tools that designers use in their design processes.
Understanding design thinking
Design, at its core, is about solving problems — problems that real people are facing. But before we can do that, it is crucial that we identify and define the real problems.
When we are encountered with a problem, we are tempted to look for solutions. But how often have we actually paused and asked ourselves what might be the root issue that’s causing the problem? We think we know a problem because it presents itself in a certain fashion, but do we really know the actual problem? When we concoct solutions for such surface-level problems, they are mere fixes rather than lasting solutions. In a world where entire products and services are built around solving problems, how can businesses sustain if we barely scratch the surface and build without a deeper understanding of the situation?
“Design thinking expects you to question the questions…”
For every problem we encounter, we should keep asking “why”, until there are no more WHYs. Only then should we move on to the HOWs. Often referred to as “ripping the brief”, this method ensures a sound understanding of the situation and eventually leads to a multitude of possible solutions.
To illustrate my point further, here’s a video of a kid who managed to get his head stuck in between the bars on a gate. In this example, once we understand the situation and refine the problem, it opens up a number of possible approaches and potential solutions.
Design thinking, as a concept, has been practised in various fields since people started making things. We look at two popular definitions — one from Tim brown, Chair of IDEO and the other popularised by Don Norman in his book Rethinking Design Thinking. At their core, they represent a similar philosophy that involves real people and actual problems.
Any design process, in general, embodies these principles and provides a generic framework for user-centred design thinking. There are a number of popular frameworks —
• British Design Council’s Double Diamond
• Stanford dSchool’s Design Thinking Process
• Ideo’s Human-Centered Design Process
One of the design processes that draw from these principles and is quite generic to be applied to any creative process is a revamped version of the Double Diamond by Dan Nessler.
The design process comprises four primary phases. It starts with ripping the brief and research to narrow down upon the things that need to be designed. Once that has been determined, the journey moves towards finding potential solutions and creating them the right way.
As Dan describes in the article,
“Phases of this process are either diverging (<) or converging (>). During a diverging phase, you try to open up as much as possible without limiting yourself, whereas a converging phase focuses on condensing and narrowing your findings or ideas…”
Lets’ talk Prototypes
Once we have figured out what to design the next step is to transform those ideas into visuals that can serve as tangible proofs of concepts.
According to The Research-Based Web Design & Usability Guidelines,
A prototype is a draft version of a product that allows you to explore your ideas and show the intention behind a feature or the overall design concept to users before investing time and money into development. A prototype can be anything from paper drawings (low-fidelity) to something that allows click-through of a few pieces of content to a fully functioning site (high-fidelity).
Design is iterative in nature — ideate, test, iterate. It is quite impractical to actually build a finished product and then find flaws and go back and start from scratch.
Hence, prototypes play a very important role in the diverging phase of ideating solutions. They help you to —
• Visualise product/feature ideas quickly.
• Present multiple concepts on the table to help make informed decisions.
• Communicate choices and design decisions with less friction across teams.
• Test ideas/concepts along the design process.
• Iterate on designs rather than on half-baked products to make sure they are usable and useful to end-users.
Prototypes help you “fail early and learn fast…”
The terms used to describe prototypes with varying levels of fidelity are often used interchangeably and can be confusing.
According to UXMatters, this is what they loosely convey —
Sketches: The intention of sketching is to separate design from the process of making.
Wireframes: A wireframe’s purpose is to communicate and explore the concepts that come out of sketching — that is, those concepts you actually want to pursue further during user interface design.
Prototypes: Our designs are still not final, but we have defined a set of ideas we know can actually be pursued, and we begin to refine and exemplify them.
A case study on prototyping fidelity and how they structure stakeholder meetings found that the choice of a prototyping technique can be made based on what the designer wants the stakeholder meeting to focus on. It is important to know one’s audience and adapt the choice of prototyping technique accordingly.
The choice of prototyping tools depends on the fidelity of the prototypes we want to make and the purpose they will serve. One can simply draw the concepts on pieces of paper and use them to validate early ideas. The same can be done using familiar digital tools like Apple Keynote or Microsoft Powerpoint.
When it comes to more refined mockups, designers often have their tools of preference like Sketch, Adobe XD, Figma and so on. For complex prototypes that involve complex interactions and animations, one can use other tools in combination like ProtoPie, Invision or even resort to video making tools like Adobe AfterEffects. Most of the popular tools come with UI kits that can be used as templates along with online literature that can help with getting started and keeping up with the best practices.
A survey by UXTools found that most of the respondents preferred “simple hotspot prototyping tools while using more complex tools as secondary options”.
One of the important aspects of these tools is how much they can simplify design handoffs by showing code snippets that developers can use in their stylesheets. When working on large projects across teams, managing visual styles and communicating them to dev teams can get quite messy without a proper handoff system in place.
Elements of User Experience design
We live in a digital-driven world, so chances are that we have used an app-based service at some point or the other. All these apps solve one or more problems, but it does much more to give us a delightful experience which makes us come back to them and rely on them to get our job done!
As Nielsen Norman Group defines it,
“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.
The UX design process can be summarised in five steps, which are collectively known as the “Five planes of UX” as popularised by Jesse James Garrett in his book The Elements of User Experience: User-Centered Design for the Web and Beyond.
It is a bottom-up approach that starts with defining the user needs and business requirements. The strategy draws heavily from research, both qualitative and quantitative which then enables the designer to define the features and functions that the interface will have. These are then organised and structured using information architecture diagrams and user-flow maps which create the skeleton of the application. The last stage is the visual design which focuses on the aesthetics and polishes the surface that users will see and interact with.
Visual delight comes from the surface that users see, but experiential delight draws from every preceeding step that holds the application together.
Wireframes and prototypes play an important role in building and validating every step of the process.
Good design is — Invisible, Intuitive and Delightful.
An important part of good design is usability. As Jakob Nielsen from NNGroup defines it,
“Usability is a quality attribute of the UI, covering whether the system is easy to learn, efficient to use, pleasant, and so forth. Again, this is very important, and again total user experience is an even broader concept.”
The entire process involving UX strategy, prototyping and user-testing is explained using a case study for redesigning an Indian comic book website.
Resources to familiarise with elements of user interface
Case study — Designing a death-care service
Slide-deck from the session
If you want a consultation on your project idea or a review of your design portfolio or simply wish to share some thoughts, feel free to reach out…
Email: pkd@prasantakrdutta.com
Twitter: Da_Pacific
