Product Design Strategy – Design Systems, Visual Guide, UI / UX

Product Design Strategy

Introduction

Product Design is too important to be left to the end. It’s not about how something ‘looks’, but rather as how something ‘works’. At Siam Computing, we believe that Product Design needs to be ‘baked into’ the product and its functionality as early as possible.

In this edition of our blog, we would like to touch upon the various aspects of product design: why companies and startups need it and how they can define and chart their product design’s path.

Why do startups and companies need product design?

Design is everywhere. At its best, it goes unnoticed. It is only when something does not work, that the design is noticed. We have all been there : tables and chairs at restaurants that ‘rock’ thanks to bad design, cutlery like forks whose tines are not aligned, stationery like pens that don’t work because the nib is not aligned…and many more examples that pop into our minds.

What is significant is that bad design tends to assign a ‘halo effect’ on the company and its operations. The general impression is “If these guys can’t even fix a table, how are they supposed to run a restaurant?…I wonder how they would be running the kitchen?!” For design buffs, the not so distant memory of badly designed keyboards by one of the most vaunted ‘design companies’ in the world – Apple – sends shivers down both the customers and (we assume) the company’s collective spines.

Design to us, is not just about focusing on the color of the pixels and the fonts. Those aspects are important, no doubt, but god design is far more than just fonts and colors. Design defines how a product is architected – right from the beginning.

In an excellent blog on Medium, UX Planet’s Stephane Martin writes that good design helps protect revenues, reputations, colleagues, and understanding how to adapt quickly to a change in the situation to roll out new and different solutions, if the original solution to the one the company picked first does not work. It also allows leaders across all levels in the organisation to empower product teams to find the best solution to a given problem. 

Good design addresses the following critical areas:

  1. It helps define a ‘True North’ that the organisation can navigate towards while designing their solution-set
  2. Good design helps the company identify the customers it wants to go after and then follow through that identification with products and services that align with the customers’ expectations
  3. Good design defines how success is measured. Here, it’s not only about how a product looks, but also how it functions and solves the pain points of the customer, while at the same time, playing up the gains that customers benefit from. Remember the “Value Proposition Canvas”?
  4. Help eliminate/fine-tune risks, assumptions, and capabilities through identifying risky assumptions for rework (and possible elimination) and creating new and better ways of serving the target users by creating better designed products.

Defining and charting the course for Product Design

Using frameworks such as the AEIOU Framework (mnemonic for Activities, Environments, Interactions, Objects and Users) allows companies to consider all aspects of the process and problem they are designing for. Whatever the designers are thinking, feeling, saying or doing; the end result will ultimately impact one or more of the components in this framework.

Activities include actions with specific goals in mind, and the processes that the user performs to achieve the desired end result to solve the user’s problem. What are the activities and actions that the user performs? What activities does she perform to solve her problem, mitigate pain points or even play up on the strengths? What actions would the user take from onboarding themselves onto the product, remembering to use it when she feels the need to solve the problem? What activities does she perform consistently, for which the UX/UI friction needs to be eliminated? 

Environments provide details on the characteristics of the space where activities are being observed. Where is this activity being performed? In a lab? Office? Outdoors? In the wild? Would this product be used within groups of people? Each location or environment has its own unique characteristics that define and shape the end product.

Interactions include both interactions between people before, during and after they use the product as well as the interactions the user has with the artefact itself. What are the circumstances under which the user uses the product? Is she interacting with a group of people? Is she able to interact easily with the product as and when she wants to? Does the product interact intuitively with her and learn what she’s looking for as soon as possible? Does she feel comfortable and confident about interacting with the artefact?

Objects catalogue the items present in the environment and how they are used. Some objects are central to the end goal that the user wishes to achieve while some others are peripheral. From what we have read, this specific attribute has more relevance in the physical world, as compared to the digital world. However, we believe that designers need to understand how objects interact with each other as well as come together to serve the end goal of the user.

Users include the people within the environment that are being observed. The entire effort of product design happens for the end user’s comfort. We have already covered users in our second blog titled ‘Personas’.

Recommended read on this topic : See how the Product Creation Studio UX and Industrial Design team to explore what an urban city commuter bike could look like in the not so distant future.  The outcome was an exploration of features related to user needs, context of use and environmental impact.  

Design Systems

Introduction: What is a design system?

Design systems are essentially collections of rules, constraints, and principles, implemented in design and code. The 3 following attributes serve distinct functions and provide coherent, systemic order in systems from buttons to single page applications.

  • Rule: must have a visual cue or text to indicate CTA
  • Constraint: can only have 3 unique types — primary, secondary, and default.
  • Principle: should be used for specific user interaction

What is a design system | The Muzli Blog on Medium

A design system is needed to ensure that there is consistency in the application design as well as how the product looks, feels and works. A design system is a living guide that evolves as the company/products/markets mature and change. It is adaptable to new and different ways of representing the product.

How can design systems help a company?

Design systems help companies create and work with a ‘unified view’ of the product and the way its design will be approached. Internal teams can become more productive and collaborative because they literally ‘speak the same language’. Being able to work together on shared work products with a shared understanding boost speed of output and productivity.

The component based systems that Design Systems help germinate, allows easy definition and change management. Once the styles are set, the Development team can then work on these styles like templates. Template-isation of the product again helps boost speed and scalability

From a Human Resource perspective as well, design systems help the stakeholders in the hiring process get on the same page in terms of the skills, capabilities and ‘project fit’ of the candidate being interviewed. Successful candidates can then be shared with successful candidates who then join as new hires and become productive, that much faster.

Building a Design System

Building a successful Design System is a task that needs close thought, frequent discussions amongst the team members, clarity of thought, attention to detail and a willingness to start all over again if the design system outlives its utility (which it will, at frequent intervals). 

We are listing out the steps to help get entrepreneurs a ‘rough idea’ about how to proceed. However, we would highly commend the blog “Building Design Systems” from the Muzli Blog which lists the various steps in much more detail.

Step 1 : Building a team

Some of the key players who need to come together to define a Design System are:

  • UX Designers — These staff members help create tailored experiences to ensure that the product looks and feels consistent with the brand guidelines as well as with other products that are already part of the company’s suite of products
  • Product Managers — Product Managers are in touch with customers and their inputs are invaluable in ensuring that the discussion stays grounded in facts related to how the customers would perceive this product. They act as the rail that ensures that the discussion does not veer off course.
  • Content Strategists — Every company approaches their stakeholders with a certain voice or tone that reflects the ethos of the company. The Content Strategists ensure that what is being communicated is ‘on point’ and within the overall tone of voice that the company has identified for themselves.
  • Leaders — Projects need executive buy-in right from the very beginning. These Leaders act as the evangelists of the products and provide the necessary ‘push’ to ensure that roadblocks and bottlenecks are cleared in a timely and satisfactory manner.

Step 2 : Strategising a roadmap

A roadmap is a high level perspective of objectives and key result areas represented on a timeline. This provides a ‘who does what by when’ plan to the various people involved in the project. 

Step 3 : Research

This is a great opportunity to research target users again on the issues that they face while using the systems and processes asn it is now. This is also an opportunity to work around any of these pain points and incorporate the path to these solutions into the design system that is being developed. Artefacts that have been collected during the previous design and brainstorming sessions are invaluable resources during this stage of the project.

Step 4 : Audit designs

Review the design inventory through the lens of the ‘user-needs’. It is important to collect all existing resources, documentations, mockups and designs that are currently being used, and then evaluate them through its usefulness to the end user. The team needs to look for design styles that are currently in use or even one off designs that were used on special projects. Thoroughness is the key and the idea is to minimise ‘surprises’ as much as possible.

Step 5 : Create systems

Creating a system is the ultimate end result for the entire exercise of creating a design system. Companies today are made or broken based on their design systems. We could go on and on about the end result that companies must aim for, but we believe that the examples below would describe what the end result should look like, far better than reams of text could. We would urge you to ‘geek out’ on these two famous design styles that have made quite a splash in the technology ecosystem.

  1. IBM’s Carbon Design System : https://www.carbondesignsystem.com
  2. Google’s Material Design : https://material.io/design 

Step 6 : Maintain systems

Design systems need to be constantly maintained. Just as a beautiful home falls into disrepair without proper upkeep and maintenance, a design system must be kept updated at all times. Design systems need to be constantly reviewed for relevance to the latest technologies, design trends and external environments. 

Thinking cyclically is more apt than thinking linearly. As with everything else in the journey, it is important to review, evaluate and make course corrections. 

Visual Guides

Visual design focuses on ensuring that all the pieces of the puzzle come together in a cohesive and coherent fashion. Until this point, the design was conceptual and was at the most, a static representation with some elements of movement. At this stage, the product takes on the shape the users will see it in.

Visual design also focuses on a few key elements that need to be considered while creating the visual guide – You can read all about it here : 

User Experience (UX)

As the name suggests, User eXperience refers to the experience that the user derives from the product, while using it. User experience is now a critical factor in ensuring that people continue to use the product. The reason for this is because users now have an abundance of choices in front of them when they decide to use any product.

User experience adds the ‘X’ Factor into the user’s experience of the product. Ideally, a great UX should wean the customer away from rival products towards the company’s product that is being touted as the solution.

UX ensures that the entire product works seamlessly from the customers’ point of view. The way the screens, buttons, call to action, text and various other components provide a sense of unity and coherence is an important part of the UX Designer’s key result areas. 

The role of UX is challenging to say the least because there is simply no ‘one way’ that will solve the problem. While designing for humans, the UX Designer needs to constantly be on the lookout for verbal and non verbal cues, obstacles that the user faces, feedback about the product on online as well as focus group discussions and many more other arenas where customers provide their feedback on the product. 

The task of UX is therefore to understand deeply what the customer wants, and then working with the User Interface Designers to provide the desired outcome.

User Interface (UI)

UX designers define the way the product experience unfolds. While the UX designer lays out the contextual framework and ideas behind creating the optimum experience, the User Interface Designer is tasked with fleshing out the ideas and giving it shape through screens, transitions, imagery, action buttons and the actual ‘nuts and bolts’ of the product.

The UI Designer is also responsible for ensuring that the entire design system works in unison with the style guides, branding and design ethos of the company. There is simply no point in creating a great user experience for a customer who is still thinking about which brand this awesome UI/UX is trying to serve!

UX and UI need to work closely together. If one fails, the other’s efficacy in solving the user’s problems will be hampered. Done well, UI and UX are the secret sauce that creates magic – delivering an pleasurable experience while at the same time, solving the user’s problems.