facebookpixelcode
g12

Product Strategy and Consulting

Get your tactical roadmap to success.

Dedicated Product Team

Scale your team instantly and hit the ground running.

MVP Development

Fast-track your journey to product-market fit.

Co-Development Program

Let’s navigate growth, together.

© Copyright  2024 Siam Computing. All Rights Reserved.

UI/UX Design

Elevate your product with designs that captivate and resonate.

DevOps

Enhance your operations with our DevOps expertise.

Coding & Testing

Discover our technology acumen and unleash the full potential of your product.

AI & Chatbot

Transform your user interactions with AI brilliance

© Copyright  2024 Siam Computing. All Rights Reserved.

Who we are

Learn about our journey and meet our team.

Careers

Apply to jobs in Siam and join our team.

Graduate Training Program

Knowledge-focused career development program for graduates.

© Copyright  2024 Siam Computing. All Rights Reserved.

Blog

Deeply written articles on strategy, design, technology, and business.

Our weekly newsletter

Weekly mailer with techbiz updates and insights for product leaders.

ProdWrks

Community and publication for product builders and problem solvers.

Case Studies

Outcomes of our strategic design and development journey.

© Copyright  2024 Siam Computing. All Rights Reserved.

Gen AI

Explore boundlessly, create freely with GenAI.

Machine Learning

Data-driven predictions and innovation.

AI Driven Development

Streamlining Development From Coding To Deployment.

Image & Video Processing

AI for enhanced, analyzed, and automated visual processing.

Conversational AI

Automate Interactions & Personalise Experience.

© Copyright  2024 Siam Computing. All Rights Reserved.

MVP Development
Revamp Single Post
9 MIN. READ

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

Key insights on making a product work well.

The blog delves into common design pitfalls that can hinder product development success, emphasizing the importance of effective design strategies. It highlights the significance of early product design integration, illustrating how poor design can impact customer perception and business reputation. Additionally, it explores the necessity of design systems, visual guides, and UI/UX considerations for cohesive and user-centric product development.

Chapters
Chapters

Product Design Strategy

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

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.

If you draw a Venn diagram of people, processes, and technology, Chid sits at the intersection. As chief product strategist at Siam, he leads research, design, and development efforts to bring user-centricity to the heart of every product we craft.

More insights

Productivity

Imagine walking into a clinic. No doctor greets you. Instead, a machine scans your body, analyzes your symptoms, and within

6 MIN. READ

Productivity

As the demand for better patient outcomes and operational efficiency grows, hospitals are increasingly turning to automation technologies. These innovations

6 MIN. READ

Productivity

Digital Doctor: Hope, Hype, and Harm at the Dawn of Medicine’s AI Era

Imagine walking into a clinic. No doctor greets you. Instead, a machine scans your body, analyzes your

6 MIN. READ

Productivity

Automation in Hospital Operations: Benefits, Types & Trends Explained

As the demand for better patient outcomes and operational efficiency grows, hospitals are increasingly turning to automation

6 MIN. READ
Subscribe to our Newsletter
Get weekly insights into the world of products and techbiz, served with a slice of humor.
— Read by 4000+ founders

SUBSCRIBE
TO TWIP

Get six new insights into the world of products and techbiz every week.

Join 4000+ founders.

Get in touch

Please share your details and one of our Product Strategist would get back to you shortly

We appreciate you for getting in touch with us!

Someone from our team will reach out to you within the next 24 hours. If you’d like to skip the line and directly book a consultation with us.

Contact Page Revamp