A Taste of Product Design

The design industry has evolved quite a lot in the last few years and today there are a number of different responsibilities encompassed by the umbrella term “Designer”. This kitchen brigade of roles has to be defined and orchestrated so that each one has the ingredients they need to cook their portion of the dish.

Thinking about this distinction in our industry, I recently tweeted this:

The first problem in creating software is that most teams confuse UI/UX Design with Product Design. The two roles are distinct and not setting boundaries can lead to the failure of a project.

What I wanted to highlight is that a team without an entity with access to Business Knowledge, will miss what we define as Contextual Knowledge.
By the time you get to the end of this article you’ll know what “Contextual Knowledge” is, and what makes swissQuant products successful.

What is a Product anyway?

Merriam Webster’s Dictionary provides two relevant definitions for Product:

  • Something (such as a service) that is marketed or sold as a commodity
  • Something that is produced

While these are both accurate when it comes to physical products and commodity services, this is not how the interactive design industry has come to define it. A more accurate definition would be:

  • A digital tool or experience that is updated continuously while still in use

This often refers to SaaS products that receive ongoing updates as the company adds features and adjusts to market forces and customer demands.

In his book, Elements of User Experience Design, Jesse James Garrett, founder of Adaptive Path, shows a great model for explaining product and user experience design.


I strongly suggest reading the concepts, but what I gathered from it is: the first 3 levels are the task of a UI/UX Designer, while the last 2 are tasks for Product Designers. Let’s dive into some terminology.

What does UX mean?
UX applies to anything that can be experienced—be it a website, a coffee machine, or a visit to the supermarket. The “user experience” part refers to the interaction between the user and a product or service. User Experience Design, then, considers all the different elements that shape this experience.

The ultimate purpose of UX design is to create easy, efficient, relevant, and all-round pleasant experiences for the user.

What does UI mean?
It’s the process that focuses on icons and buttons, typography, and color schemes, spacing, imagery, and responsive design.

Like User Experience Design, User Interface Design is a multi-faceted and challenging role. It is responsible for the transference of a product’s development, research, content, and layout into an attractive, guiding and responsive experience for users.

What’s the difference?
The main difference to bear in mind is this: UX design is all about the overall feel of the experience, while UI design is all about how the product’s interfaces look and function.

To summarize:

  • UX design is all about identifying and solving user problems; UI design is all about creating intuitive, aesthetically-pleasing, interactive interfaces.
  • UX design usually comes first in the product development process, followed by UI. The UX designer maps out the bare bones of the user journey; the UI designer then fills it in with visual and interactive elements.
  • UX can apply to any kind of product, service, or experience; UI is specific to digital products and experiences.

What’s missing?

The definition above is clear, but what about all those specific aspects of an industry that define the Business Domain? At swissQuant we develop an ecosystem of applications for Fintech, so domain knowledge includes:

  • Financial knowledge: expertise of banking processes, use of technical language, understanding of complex data visualization
  • Target audience. who are the users of the product and what kind of knowledge these users have (Branch Manager, Relationship Manager, Bank’s Client)
  • Market gaps: what do the competitors offer, how they have solved their technical challenges and what has not been yet created
    Our internal structure has settled on the role that can bridge the gap between generic knowledge and specialized knowledge: the Product Designer.

Contextual Knowledge in Fintech
In short, a Product Designer designs solutions to the problems that might arise during both design and development phase. They have direct connections to the sources that provide great knowledge of the industry the product is built for and can give answers to questions that block designers and developers.

In Fintech they will be able to investigate and then suggest how a product should:

  • Adhere to regulations (in multiple Countries)
  • Display metrics and aggregated information useful to the user
  • Display best suited visualizations for large sets of data (candlesticks, histograms, spider charts, table fields)

In order to answer these questions, Product Designers will audit feedback from clients, connect to Product Owners and then assemble teams to facilitate solutions, create multiple test plans, produce wireframes and go through rounds of A/B testing. A Product Designer will also support the developers through the launch process, as well as working alongside the marketing teams to ensure synergy between the brand and the product.

From these skills we can derive our definition of Contextual Knowledge:

Context most commonly refers to the environment or setting in which something exists.

In software development, context is given by business logic, the implementation of algorithms that shape data into features or visually appealing elements.
In design, context is given by the scope of the product, the set of answers that developers need to implement a feature.

Product Designers are, in short, the guardians of the product: ensuring it’s the most relevant and functional product it can be and that all the stakeholders are onboard.

One of the best ways to distinguish between these two roles is to look at the questions they ask:

UX Designer – Prioritize usability Product Designer – Prioritize process, business, return on investment, and brand
“How can I group these form fields together to reduce the number of clicks?” “What fields and default values should I show in this form?”
“What’s the contrast ratio for this group of statistic values?” “What statistics should this drilldown screen show?”
“How do I make my design user-friendly?” “How do I make my design changes effective over time?”
“Is this product easy to use?” “Does this product make sense in the current economy?”


Simply put, a UX designer will identify the problems, and a Product Designer will find the solutions, which of course means that the latter have a higher range of responsibilities within the project.

Viputheshwar Sitaraman, who has worked as a design consultant for companies ranging from high-growth startups to Fortune 500 companies, believes that the roles have distinct responsibilities that need to be taken into account, and he says:

“The linchpin differentiator is that a UX Designer is solely focused on the user experience, whereas a Product Designer is concerned with overall business goals (including user experience).”

He continues:

“The core difference is their relationship with high-level business development goals and key performance indicators (KPIs). UX Designers’ primary / only KPI is user satisfaction with the customer experience. As such, much of a UX designer’s job focuses on optimizing, improving, and innovating customer flows.”

Then, he further elaborates that the product designer is responsible for seeing the bigger picture of a product or project:

“Product Designers’ KPIs tie to the business as a whole: such as expanding into new markets, building organic growth engines, or increasing trial-to-conversion rates. As you can imagine, these kinds of decisions are far different from the experience design tasks typical of a UX role.”

Bridging concepts to Products
Product Designers are entities that understand business objectives and do the research to provide specialized knowledge and market analysis to their team. But how can this knowledge be integrated into the daily routines of a team?

At swissQuant we have taken a step further and transferred this know-how into a step-by-step process; it guarantees a consistent outline to make highly abstract financial concepts become Products and a Frontend Design Methodology that the whole company can follow.

First step is for Product Designers to gather intel, they will:

  • Empathize: Conduct research to develop a deeper understanding of our clients.
  • Define: Combine the research and observe where problem exist. In pinpointing client’s needs, they begin to highlight opportunities for innovation.
  • Ideate: Generate a range of potential solutions by giving themselves and their team total freedom.

Then, both Designers and Developers take part of the following:

  • Workshop: introduce areas of the company to our unified Design System and Component Library Playground
  • User Journey: a brainstorming session to drive all kind of designers through an interactive questionnaire that covers typical details: What problem do we solve? Why are we doing this? How are we doing this? What do we want to achieve? What data do we need and who provides it?
  • Flow Chart Design: outline all paths of a user journey flow into diagrams, easy to change and maintain
  • Wireframe Design: a low fidelity mock representation of the Flow Chart, used to decide what visual elements, technologies and architecture fit our goal
  • Feature Design: we follow Feature Driven Design to reuse existing features and integrate new ones with modularity in mind
  • Handoff Mock Design: an high fidelity mock representation of the Flow Chart and Features that will be used as a 1-1 guideline by developers

This process helps UI/UX Designers and Developers understand the user experience of a product as a whole; not purely as interaction (feel) or visual (look) design part. Only after that, it makes sense to move to the actual implementation of a design solution which includes:

  • Prototype: Build a prototype (or series of prototypes) to test a solution. Creating a prototype lets designer see if they’re on the right track, and often sparks different ideas that wouldn’t come in other cases.
  • Test: Return to our users for feedback, asking ‘Does this solution meet users’ needs?’
  • Implement: Put the vision into effect. Ensure that the solution is materialized and works for our users. This step is crucial for the entire process.

The secret sauce of out-of-ordinary design at swissQuant is a definition of both the roles and the path to follow.

Crafting complex financial products for our clients’ users is a recipe full of rare ingredients. We believe this methodology ensures we deliver the right platter of UIs that satisfies the need for simplicity and request for additional value of the end user.

Share on: