456789456789º 123456789

3456789°1234567899N 12345678923456789678923456789°3456789123456789S

Toronto, Canada

Our B2B Product Design Process: Unraveling the Steps for Success

Vytas Butke
Vytas Butke
June 16, 20237 min read

We share our ideal design process that we try to follow for every client, though it works more as a guideline rather than a rule.

Our B2B Product Design Process: Unraveling the Steps for Success

Introduction

Every time we have a chat with a potential client, a recurring question pops up - "What is your design process?" It's a valid question as it provides clarity on how we approach designing your product. While we attempt to follow our prescribed process, it is essential to remember that we don't view it as a rigid structure. Each project is unique, and our approach is tailor-made to suit its demands. So, if you're a client looking for a quick product design MVP, we can skip or abbreviate some steps. This blog post gives you a tour of our "ideal" design process, assuming you have sufficient time and budget to follow it step-by-step.

Image of a questionnaire process


1. Onboarding Questionnaires

Our journey begins with a couple of onboarding surveys. We gather essential information about your company and product. These questionnaires help us understand your business better:

  1. General questionnaire: Information about your company, product, access to platforms, any crucial deadlines, etc.
  2. Brand values: Information about your competitors, likes, dislikes, expectations, etc.
  3. Lean & Brand canvas: To comprehend your uniqueness and your ideal customer.
Start of a questionnaire


2. Choosing a way to start

Next, we like to better understand how you wish to start the collaboration. It might be a simple exchange of a few emails or a few calls, depending on the complexity:

  1. Start with a full UX design: Diving deep into the UX first and setting the visual design aside for later.
  2. Start with a short test project: Focusing on a particular area to deliver quick changes.
  3. Start with visual identity: Prioritizing the visual identity and branding, with UX taking a back seat for now.

For someone who hasn't decided, we also offer a free UX/UI audit of their app or a 2-day free trial.


3. Kickoff Call

Once we gather sufficient information, we hold a kickoff call. This call serves as a platform to ask questions, clarify doubts, explain our process, and decide the next steps. To maintain transparency, we believe in discussing our working methods and communication style.

Our tasks are always available for viewing on a Trello board. We share our work on Figma, using its comment feature for feedback. Additionally, we exchange Loom videos or conduct quick calls if we find ourselves stuck. We join our client's Slack or Teams workspaces and prefer to avoid calls unless absolutely necessary.

Image with a wall full of notes


4. User research

This is an optional step that we recommend to everyone unless there's a very tight deadline. The scope of user research varies on the type of company, the stage it's at and the type of product we're focused on designing or redesigning. Here's a rough outline:

  1. We start with internal stakeholders to understand what is the reason the product needs to be built. (or redesigned)
  2. If it's a redesign of an existing product, we thoroughly analyse existing usage analytics.
  3. We then arrange calls with different types of existing (or potential) users and do specific types of UX research, be it typical user interviews, usability testing or other.
  4. We then present these results and conclusions to our client and present them with a list of suggestions.
Moodboard pictures for design references


5. Moodboards

A critical part of our process involves creating moodboards. These allow us to experiment with different concepts, suggest potential options, and ensure that we're on the same page as the client.

  1. Style moodboard: Contains various visual assets and materials that match our client's creative vision. This could include photos, illustrations, patterns, logo samples, typefaces, color palettes, print materials, etc.
  2. App moodboard: For web app products, we create a second moodboard to portray UI/UX aesthetics for different platforms (Web, iOS, Android).
Identifying the visual identity of a brand


6. Visual Identity

Armed with insights from the onboarding surveys and moodboards, we craft a unique visual identity. We develop one main and one or two secondary visual identities. These identities include patterns, illustrations, textures, a colour palette, typography, a general style, and potentially, branding or a logo.

Wireframe designWireframe design


7. Wireframes and UX

Here, we delve into what usually brings the highest ROI for our clients - UX Design. We conduct user research, collate user feedback, and analyze tools and stakeholder feedback. If necessary, we may perform a UX audit of an existing app or work on User Personas. However, in many cases, we find it more effective to design and obtain customer feedback directly. This phase culminates in the creation of wireframes and high-fidelity designs.

Design System


8. Design System

With the visual identity in place and plenty of data at our disposal, we move on to set up a scalable design system. The system includes actual typography, button, and other component styles. We have written more about this in our other article here.

Dashboard design


9. Visual Design

This is where the magic happens! We take all the information gathered, utilize our newly built design system, and bring the end product to life with consistent and themeable designs.

Figma Tokens


10. Handover to Dev

We work with design tokens, which means we provide our clients with well-documented component annotations. We aid our clients with frontend work, exporting these tokens into CSS and JS files using Style Dictionary for easier implementation on Storybook. For larger clients, we can set up this documentation on Zeroheight or other design system documentation platforms. More about this in our article here.


11. Continued UX/UI design

Once everything is set up, we're ready to roll. This is where we churn out designs and ensure your product keeps evolving. Our partnerships often span at least six months to a few years, making this a continuous process.


Conclusion

Our product design process is not just a roadmap we follow; it's a philosophy that encapsulates our values of transparency, flexibility, and collaboration. While we do have a structured approach, we never lose sight of the fact that each client and product is unique. It's a balance of following a process, yet being ready to adapt as we go along, always in tune with our clients' needs.

Remember, what we've outlined here is our 'ideal' process. In reality, it often changes based on project demands. However, regardless of the path we take, our ultimate goal remains the same – to deliver exceptional product designs that exceed client expectations and make a difference to their users.

Let's build an amazing product, together

Reduce churn and grow your business with us as a design partner. Not sure where to start? Book a call with us and we’ll answer all of your questions.

Outframe Logo