Design @ Minds

Hey all, checking in for what is our first post as Minds' design team. This is also our official introduction to the larger Minds community as we look to observe, grow, and experience the awesome world of Minds with y'all, so hi!

We wanted to give everyone a sneak peek on what we've been cooking up, some of the core principles of what we consider important as we design for Minds as a product, and touch more upon the role that design plays at Minds, including ways we work.

Design principles at Minds

Before really designing products at Minds, it was very important to take a step back and really hone in on what we wanted our product and company to be, and evoke in terms of what it means for our users. These initial guidelines then served as early examples of principles, that we all wanted to align on as a design team. This ensures that all of us, whether we be in design, engineering, product or marketing, are speaking the same language in terms of what we want the product to be (at least from a vision POV).

After back and forth, a step back at what the company is, how we started, and prioritizing what we value the most, we aligned on a core set of principles that we could always refer back to when designing any Minds related experience, be it a future landing page, an improvement to the product, or even a branded slide deck. Tactically, this was used in our recent design system update, a pattern of common colors, typography and styles (buttons, links) to align our product closer to our brand values, and give a fresh coat of paint to our future updates at Minds.

The principles we ended up aligning on were

• Transparent
  • open source typography and assets are a public good contributing to the global commons. Clear and accessible components enable informed, confident decisions both visually and philosophically.
• Universal
  • Each piece is part of a greater whole and should contribute positively to the system at scale. Our product and visual language should be welcoming and accessible, optimized for both quick consumption and creation.
• Innovative
  • Our work should speak boldly by making considerable thought to craftsmanship and attention to detail. Use innovative thinking to create atypical, yet memorable experiences for the user.
• Consistent
  • Create familiarity, and strengthen intuition by applying the same solution to the same problem. We recognize that usability is improved when there is a unifying force around the product.

Applying our design principles

One of the first undertakings we aligned on was our brand, and tying our principles back to define a consistent typography style and color palette.

For our typography styles, we went ahead with the transition from Roboto to Inter. Whilst both are open source, Inter's versatility for high contrast interfaces won out here, especially for a product such as ours, where we aim to provide a first-class experience on native mobile (apps) and mobile web (website). In terms of the typographic scale itself, we chose a consistent base value, 16px, and utilized a scale of 1.2 for increases in step size to generate our headers, body text and button text, with a defined 1.400 multiplier ratio for line heights.

Whilst generating our color palette, we reskinned our app landing page, some of our logo designs, and old mood boards to come up with a core set of brand colors.

We then went ahead and locked in these hex values, to generate a clear set of color variables that we'd restrict ourselves to as a design and development team.

Why? So that each new feature, each new improvement or iteration to the product is following the same predictable set of guidelines, ensuring consistency and in the end, a better user experience.

When applied to our current newsfeed, you can see a few differences already, especially in the visual design of our sidebar navigation, and the rhythm in terms of visual hierarchy. Most noticeable of all, of course, is a more intentional, high contrast color system that aims to provide an enjoyable reading experience across a variety of screen sizes and contexts.

Aligning on our design system with development, design and product

To get aligned however, was extremely important, because without the input of our superstar developers, the design system is simply an aspiration. To align early, we shared updates about components we were working on and identifying async, which then included a QA doc and Figma file that we were working out of. Whilst this gave us context, we wanted to make sure that the variables that developers end up using to define some of our smallest possible denomination of a style, such as

• color name
• button size
• spacing size
• text size

are also the same ones being utilized by the design team. To that end, we as a design team generated a consumable .json file for our developers to refer to directly, continually iterating on the naming conventions of the variables (we call them design tokens, but they serve the same purpose) so that designers and developers are both referring to one thing, and speaking the same language. Our lean sprint planning process and workflow in Gitlab ensures that developers have enough time to scope out any issues / concerns, and pick up the corresponding Gitlab ticket itself.

Introducing user testing as a way to de-risk designs

One aspect of design at Minds that we're excited to share as we grow and aim to solve the "right" problems, is us hosting open user interview sessions every Wednesday. Why? Too often, we as designers at Minds can get lost in the weeds in terms of potential improvements to the product, needing a fresh set of eyes. If a feature that we are designing makes sense to us, but doesn't make sense to folks once we release it out, that means we made the wrong assumption as a design team. Unfortunately in this industry, assumptions can often be fatal if not backed up by any validation.

Therefore, to best serve the community, what better way to strengthen trust than to build and share in public. We would be nowhere that we are today as a company, without our community, so to have this space as a way to gather peoples' latest thoughts, concerns, insights and feedback would be an awesome way for us to give back, and hopefully serve y'all in the best way possible!

Does your team need a design system?

It really depends on the size of your product and team, and every single person is going to give you a different answer. What we can say is, we realized that between our different platforms and contexts (web, mobile), a lot of the spacing, certain components, and layouts were being duplicated, which ended up making our developers spend more time on redundant tasks. This rings true on the design side as well, where instead of having building blocks to ensure consistency and build from there (sort of like lego blocks), there were some one-off screens with spacing at 23px, others at spacing with 24px (a very granular example). As an organization scales, it can definitely be useful to have a tactical pattern of components that are shared between design and development, so that the core product experience is somewhat consistent.

To that end, we've provided a little resource here at www.figma.com/@mindsdesign, where you can create a copy, re-mix the file, and publish your own version of the file. It is the current public release of our design system, and we'd love for y'all to play around with it, see some of the visual design details, or perhaps use it as inspiration for spinning up your own design system!

Say Hi!

To say hi to the Minds design team, either hit us up on the @design channel on Minds, or check out our links

• www.figma.com/@mindsdesign
  • Figma community
• design.minds.com
  • Design system documentation