InRhythm

Your partners in accelerated digital transformation

design

The Definitive Guide To Your Design Language System Roadmap

Author: Ashton Coghlan, Senior Product Manager and Oleg Ivanov, Design Tech Architect @ InRhythm

Overview

Building a Design Language System is a transformative journey that empowers organizations to establish a cohesive and consistent visual identity across their digital products. By investing time and effort into crafting a comprehensive roadmap, teams can navigate the complexities of implementing a Design Language System with clarity and purpose.

Struggling to figure out the order in which you should build your Design Language System components? Here’s a logical roadmap that shows how your work next week can build off of this week’s work.

  • Overview
  • The Definitive Design Language System Roadmap 
  • Closing Thoughts

The Definitive Design Language System Roadmap

01. Design Principles And Style Guides

Before starting with actual components, define your design principles and create a style guide that includes brand colors, typography, and general aesthetic direction. This provides a basis for all the components that will be created later.

02. Grid And Layout

These are the basic structural elements of your design. It’s important to start with them because they will provide the skeleton for all your designs, ensuring consistency across different parts of the application.

03. Buttons

Buttons are among the most fundamental interactive elements in any interface. They are simple enough to serve as the first real test of your design principles and style guide.

04. Input Fields

Inputs like text fields, checkboxes, and radio buttons allow users to interact with your system. They are the basis of forms, which are an essential part of most interfaces, allowing user registration, data input, and configuration settings.

05. Form Layouts

Now that you have individual inputs, it’s time to think about how they work together in forms. This includes error states, help text, labels, and form organization.

06. Navigation

Navigation components like menus, sidebars, and tabs guide users through your application. These components are more complex, but they build directly on previous components.

07. Notifications

Alerts, badges, toasts, and other notification components provide feedback to the user. They often contain other elements (like text and buttons), so it makes sense to create them after those base components.

08. Cards And Tiles

These are reusable components that often group other components together. They can contain images, text, buttons, etc., so they should be created once those underlying components are finished.

09. Modals And Popovers

Modals and popovers are common components for user interactions. They typically contain a combination of many other components, so it’s best to tackle them once you have a good set of other components to work with.

10. Tables And Lists

These are used to display collections of data. Tables can be quite complex, requiring careful consideration of responsive behaviors, interactivity, and accessibility.

11. Charts And Graphs

These components are typically more complex and specific to certain use cases, so they often come later in the process. They can be built using a library or custom-built, depending on your needs.

12. Templates

They refer to reusable layout patterns for common pages or sections within an application or website. They help to ensure consistency and efficiency in design and development. 

Here are some common types of templates:

  • Homepage Template

This could include areas for a hero section, features or services, testimonials, and a footer.

  • Product Page Template

For e-commerce sites or applications, this template would include areas for product images, product details, price, add to cart button, and related products.

  • Article Or Blog Post Template

This template would include a title area, author information, the main content area, related articles, and comments section.

  • Dashboard Template 

For applications with a dashboard, this template would include areas for navigation, widgets or cards for key metrics, and possibly a section for recent activity.

  • Form Template

This could be a generic template for any form, with areas for a form title, form fields, a submit button, and error messages.

  • Authentication Template 

This template would include forms for login, registration, and password reset.

  • Profile Page Template 

This template would have areas for a profile picture, user information, and settings.

  • Error Page Template

This template would include a message about the error, possibly some humorous or branded graphic, and a call to action to return to the homepage or previous page.

13. Advanced Components

Finally, you will have some components that are specific to your application, which might be more complex or just different from standard components.

  • Interactive Maps

These could include features like zooming, adding markers, or displaying information on hover or click.

  • Custom Video Player 

This could include custom controls for play/pause, volume, and fullscreen, as well as possibly features like captions, speed control, and a progress bar.

  • Complex Data Visualizations

These might go beyond standard charts and graphs to include interactive features, multiple data sets, or complex animations.

  • Rich Text Editor

This component could include text formatting options, image insertion, and possibly even features like auto-save or version control.

14. Interactive Timeline/Carousel

These could include custom animations, swipe or drag interactions, and responsive behavior.

  • E-Commerce Components

This could include a custom shopping cart, product configurator, or checkout process.

  • Interactive 3D Models

This could be used in industries like architecture, interior design, or e-commerce to provide an interactive 3D view of a product or space.

  • Real-Time Chat Or Messaging Component

This could include features like typing indicators, read receipts, and attachment options.

Closing Thoughts

With a well-defined roadmap in place, the organization can embark on a transformative journey, unleashing the power of a unified design language across all digital touch points. By aligning design and development teams, streamlining workflows, and fostering consistency, the design language system will become an invaluable asset, driving user engagement, brand recognition, and ultimately, the success of the organization’s digital products.

So, start building your roadmap, gather your team, and embark on the exciting adventure of creating a design language system that will elevate your organization’s digital experiences to new heights.

At InRhythm, we have extensive experience in helping organizations set up their design language systems for success. Our team of experts can provide guidance on best practices for tracking and analyzing key metrics, as well as help organizations develop and implement a design language system that is tailored to their unique needs and goals. If you’re interested in learning more about how we can help your organization succeed with its Design Language System, please don’t hesitate to reach out to us.

5 Soft Skills That Every UX Designer Should Have

Overview

No alt text provided for this image

Creating a digital product is full of rewards and challenges. No two projects are ever the same, meaning that each individual one must be approached from all angles. There are certain skills that are crucial if one wants to be a successful designer. Skills like wireframing and prototyping are key, but soft skills are just as essential to good design.

The following soft skills are a necessary part of every UX Designer’s toolkit.

1. Empathy

No alt text provided for this image

How can you build a product that accomplishes a users’ goals if you don’t understand their needs and desires? In order to be a successful UX Designer, it is paramount that you put yourself in the users’ shoes so you can truly design with their needs in mind.

You have to be able to design and solve for various types of users. Learning to empathize with them is a skill that will develop over time, but you have to feel what your users feel in order to shed light on what will be most beneficial for them.

One of the best ways to begin implementing this into your everyday practice is to speak directly to your users, whether it’s through surveys, user interviews, or usability tests.

No alt text provided for this image

For example, the core of a usability test is not about understanding your product, but about understanding how your users use your product. What is the path they take to get from A to B? What frustrates them the most? What makes them happy?

Another great technique for getting to know your users is observation. Immerse yourself in their environment. It is your responsibility as a UX Designer to be empathetic toward all users of the product and make certain that their goals and needs are met.

2. Effective Collaboration

No alt text provided for this image

You have probably found yourself in a situation where you were wearing a variety of different hats as a designer. You also most likely realized that relying on yourself to perform all these jobs was quite challenging or nearly impossible. This is because an individual cannot build a successful product on their own. It’s a team effort, encompassing roles from UX Designers to Product Managers to Developers to Marketing and so on.

As a UX Designer, you will have to collaborate with other teams on a daily basis. You will partner with developers to understand constraints, or connect with the marketing team to ensure you are consistent in how you communicate the value of the product to your users.

No alt text provided for this image

Integrating with other teams means you sometimes have to rely on others to guarantee that everything goes smoothly. This is why collaboration is a skill you must possess in order to be an effective team member. If you know how to best utilize each team’s specialized skill and vice versa, you will create a mutual respect for each other. This will allow you to create an environment for the product to flourish and reach its full potential.

3. Adaptive Work Ethics

No alt text provided for this image

The world is constantly shifting, which means that the most popular trends today are waiting to be replaced by tomorrow’s fads. There is a good chance that what excites a user now will bore them next week. As a UX Designer, how can you combat this unpredictability? First, it is your duty to plan and be aware of the malleability of trends in technology. It is critical to stay informed and up-to-date with the latest craze, while also not losing sight of what is truly important.

In order to keep yourself from drowning in a sea of uncertainty, ensure you are listening to UX/technology podcasts, reading recent articles, or planning lunch-and-learns with your team. Remember to not become too wrapped up in the “now” because that is likely to change. Instead, stay informed and keep that information in your pocket so that you are prepared for any situation.

No alt text provided for this image

Each project brings new challenges that you may not be able to plan for. It’s important to not become frustrated or overwhelmed if some aspect does not go exactly as planned. If you craft a solution for a product and it does implement as intended, then have backup solutions. There is more than one answer to the problem, and planning for the unexpected will help you adapt more quickly. While it is nearly impossible to know every single problem that could emerge, you can be aware of these potential issues and plan out how you will solve them. You should be equipped with the necessary skills and mindset that will allow you the flexibility to make changes during any stage of the process.

4. Passion

No alt text provided for this image

While being passionate is applicable in any field, it is especially relevant to UX; as a UX Designer, a lack of interest will seep through into the product. If you don’t have a passion for creating and solving problems, then you won’t be an effective UX Designer.

It takes a lot of patience to craft the right solution and you have to crave thinking outside the box and digging deep. You may need to come up with 100 different solutions before you have your “aha” moment. This probably means gathering more research, running tests, analyzing data, and creating wireframes. You have to possess that inner drive to create (and iterate and then iterate again). You can grow to love the field of UX, but this “soft skill” is more of an innate passion for design that you should already possess.

5. Open-Minded Approach

No alt text provided for this image

This may not be a skill that immediately jumps into your head when you think of UX Design. Yet, if all UX Designers were narrow-minded, then it would be impossible to ever accomplish anything. How can you create a great product if you are not open to new ideas and other points of view?

You need to listen to your team members—and your users—and know when and how to utilize their ideas. You also have to be open to trying solutions that are unprecedented. The same solution is not going to work for every problem, so learning how to be accepting of new methods will go a long way. Be comfortable with the unknown and receptive to other ideas.

Tolerance for other perspectives is what separates a beginner from an expert. Think critically, but withhold judgment. Be inventive, without boundaries.

Closing Thoughts

No alt text provided for this image

Soft skills are equally as important as technical skills, if not more vital. Being able to empathize with users or collaborate productively with your team is what will ultimately drive results and culminate a great product. As a UX Designer, you will be constantly faced with new challenges which force you to think outside the box.

Possessing these soft skills will help you clearly align your user’s goals with critical business objectives. Therefore, raising the bar on your overall successes as you continue to learn and grow as a UX Designer.

Photography For UX Designers: The Top 4 Tips To Make The Most Of Online Imagery

Overview

Photography is a crucial part of designing a layout or banner. When thinking about an image to place with text, whether it be overlaying on the image or underneath, above, or to the sides of an image, a designer needs to consider two key factors:

  • Does the image make sense?
  • Does the image have a conversation with the layout?

Elements such as the dynamic imagery of people interacting, strong lines, action, or diversity are all ways that design and imagery can speak to each other.

No alt text provided for this image

Using these elements helps create a story for the viewer to interact with and incite a more personal experience on a larger scale. To have a viewer relate to content is achieving the ultimate goal: Fostering an emotional experience is gold-medal status.

1. Ensure The Image Speaks To The Content

When developing the design of a page with photography in mind, the closer the image relates to the content, the more likely the viewer’s eye moves around the page in a pleasing manner.

Strategically placing images on either side of the screen will help the viewer have resting time between content, which creates a “visual storyline” for the page. The images also help the user stay engaged with the page.

No alt text provided for this image

2. Photograph Composition Builds Directional Sight Lines

Make sure that the main element of the image—such as the people or subject matter— is placed to the right or left. (The exception being the positioning of the direction of the content in an advertisement or banner) If it’s in a layout, making sure to have the image point in the direction of the content that viewer’s need to be directed to focus on first, is crucial.

No alt text provided for this image

3. Appropriate Image Content Enhances The Story

Make sure the subjects in the image are both dynamic as well as inclusive. All subjects should tell a story to help the user understand what the content will say, like the synopsis of a paragraph.

No alt text provided for this image

4. Complimentary Color Theory Provides Both An Aesthetic And User-Friendly Experience

Studies have shown that a dark background with the text knocked out makes for a more eye-grabbing advertisement.

For example, if the image is being used for an advertisement, it’s easier for users to read smaller text if it’s dark text on a light background.

It’s imperative to make sure the section where the text sits is not too busy. The user needs (and wants) to authentically experience content without strenuous distraction.

No alt text provided for this image

Closing Thoughts

Keeping all these elements in mind while looking for imagery to “illustrate” a layout or advertisement will help any user have a better user experience.

The Importance Of UX Implementation In Financial Institutions

No alt text provided for this image

Overview

As a UX Designer, one will experience a multitude of industries across their career. Two of the most historically challenging areas, across the board, to assert major design change have been Healthcare and Financial.

When approaching an expansive operational change pitch, its important to succinctly addresses the major pain points from a creative/UX view when working with corporate stakeholders that have a seemingly opposite set of skills and expertise (ex. math vs. art).

The challenge becomes: how do we shift traditional “path of least resistance” thinking to a mindset visualizing the importance of forward progress?

The following ten strategy points are key to informing a current and/or future financial services client of the progressive mindset behind updating their UX infrastructures:

1. View Design As A Methodology, Not a Package

No alt text provided for this image

Banks and financial institutions perceive design as a package while fintechs see design as a consumer-centered approach, but let’s call it what it is; a lack of understanding.

Design has been viewed by many clients as “paint” and not “structure,” and that is specifically why it’s so important to educate stakeholders on Design Thinking and Methodologies. It is so much more than making a logo, picking colors, and playing with fonts.

Design-based decision-making should not be led by Product Owners, Project Managers, Developers, Engineers, or even Stakeholders. They can provide unique perspectives, present opinions on research, provide reasonable requirements, all while engaging with in-depth data and applicable feedback. But the rest should be in the hands of the Designer. 

2. Increase The Scope Of UX Design Influence

No alt text provided for this image

UX experts are trained to be user-centric while curating and crafting experiences that ensure user satisfaction and delight. Thinking that “anyone can do this” is pure hubris. Yes, everyone can be creative. No, not everyone is good at it.

Hire the right talent and give them the freedom to explore.

Financial apps must be about ease-of-use and intuitiveness before tackling how pretty it looks or stuffing as many features in as possible. UX, as a design method, ensures that the user is fairly represented against the requirements of the need. Stakeholders typically have strong opinions on design, but they aren’t likely to be the ones using it everyday. It’s acceptable to push back, but you should have the research to support it.

3. Challenge The Banking Legacy

No alt text provided for this image

We should remember that it takes two – Product Owners and UX Leads should be solidified as the cornerstone of every good project from the very beginning. You need both of them to always be present: the client advocate and the user advocate.

Traditional corporations rely on structured hierarchy to get things done. However, inserting the pragmatism of Design allows for individual agency and decision-making to happen on a more detailed level and that is where the trust is needed. Your UX folks are smart. Let them do their thing.

The core takeaway is that UX people are needed before the project kicks off and should remain attached during the entire duration to capture data, extrapolate findings, align with visuals, and prepare to iterate on the next version. They help tie it all together. Let the User Experience team understand how users experience your product.

4. Switch From Fragmentation To Ecosystem

No alt text provided for this image

“Fintech”, as a label, is shifting to include any new products and/or brands that are promoting digital as the main primer for change within their organization and offerings. Banks are resistant to this type of change simply due to how their control of wealth is dependent on small static changes over long periods of time: Take money, sit on it, make interest, share dividends.

Fintech is breaking down walls that banks cannot adapt to, like cryptocurrency, DeFi, and other new concepts. Not all banks have invested in fintech, but all fintech have some form of banking service. 

Many traditional banks failed due to the inability to accept rapid evolutions as they typically desire stability and slow, predictable movement. That’s what happened in the mid-2000s when small banks couldn’t invest in online banking in a reasonable timeframe and/or provided a poor user experience. They “stayed the course” right into getting absorbed by larger entities to survive.

We know that embracing flexibility and new ideas can be risky, but a good risk assessment will show massive gains for a healthy investment in UX Research and Design.

5. Put UX Research First

No alt text provided for this image

Fintech excels in Product Design which culminates research and data into a cohesive and consistently built system from the very beginning of the brand’s inception.

Naturally, creating multiple services on one product can be hard. The FDIC says you need this, InfoSec says you need that, Engineering wants to save time and use a 3rd-party API/iFrame, and so on. We are challenged to be in compliance and have a beautiful application for users to intuitively engage with. But that’s the reason why it’s so important to invest in your UX teams!

Make sure that you have the data to support a unified system of products and services while maintaining a Design Language to keep everything looking and operating the same on every page for every user. Consistency matters!

6. Provide A Unique Value Proposition

No alt text provided for this image

Even if you’re “copycatting” products from other systems, your users are different and finding out what their needs are will increase engagement much more than assumptive design ever could. If you don’t know what people think of your product, you’ll never be able to pivot in the right direction. When they move, you move, just like that. There’s a big difference between qualitative and quantitative feedback.

Everyone wants to try to cram their entire product offering into a single app. It’s wonderful to have, but sometimes it’s just plain impossible to accomplish with the time and resources you’ve been given. We can’t always “make it fit” for everyone. The honest truth is that it won’t ever work for everyone and the individuality of your target demographics and focused segmentation should be the most valuable asset in your research arsenal.

Yes, you need a unique value prop, but only if it directly benefits your audience in a positive and engaging way. You want people to tell others about your product in a satisfied way. Bad reviews always lead to abandonment.

Take some time to compare what fintech and your direct competition is doing well and filter out how you can emulate those good ideas while staying on-brand and on-message. A good designer can help translate this information into a fully realized and custom experience.

7. Drop The Obsession With Banking Functionality

No alt text provided for this image

We should try to fit in as much functionality as possible, but not at the expense of the product or its users.

Every customer should have a journey that offers a simple “happy path” to completion. In finance, complexity can often be a source of pride and exclusivity. That may not be the case with all of your customers.

8. Measure Results By Quality, Not Quantity

No alt text provided for this image

Quality vs. Quantity is not a thing anymore. It’s instead the marrying of the two ideals of Quality and Quantity in a cohesive and engaging way.

The qualitative research that needs to be done should be exponentially impacted by the quantitative surveys and analytics gathered during initial research. For examples, we may lose quality when speed is priority, however this is why rapid user testing and prototyping is so important.

Test, review, rinse, repeat.

9. Focus On Emotions Instead Of Information

No alt text provided for this image

Empathy will always be key. People have emotional connections to their finances and the institutions they invest that buying power into. Banks tend to overwhelm people with unfamiliar paperwork, nomenclature, acronyms, and fine print.

The future of finance is making informed decisions based on simplified communication and customer loyalty. Keeping the complex curtains up will keep curious people away.

10. Invest More In Customer Experience Than In Marketing

No alt text provided for this image

The customers you have are worth more than the ones you lack. Marketing tends to focus on garnering new business while maintaining existing relationships are not as much of a priority. And that’s OK! But maintaining long financial relationships with contented customers far outweighs the risk of that unknown potential.

Let your product speak for itself through accessibility, effective UI, and an intuitive landscape. You want people to recommend your product to others. Curiosity and satisfaction go hand-in-hand; if you’re interested in something, would you rather find out about it from a banner ad, or several different family members and friends who all gave it glowing reviews?

Closing Thoughts

No alt text provided for this image

UX, UI, Design, and Creative are not as highly valued or involved at an early enough stage of the project to make an impact. Financial companies tend to relegate those team members to Production Art and QA Maintenance asks due to a lack of understanding of how effective and powerful adding UX Designers can be. Keeping them out of the project loop will not only dull their edges, but have them looking for new roles elsewhere.

Fintech teaches us that looking at finance in a customer-centric way is effective, profitable, and mirrorable at the corporate scale for banking.

Top 5 Best Practices For Building Forms

Various forms like sign-ups, logins, or checkout pages are seen everywhere in applications and websites, but what attracts a user to fill one out? What exactly makes one click the sign-up or call-to-action button on the page? Forms exist to be filled out, but there are a surprising number of forms which—through poor design, excessive fields, or other factors—push users to abandon them, unfilled. Make your forms simple and easy to navigate, and watch the data come flowing in.

Here are a few best practices when putting together your own forms to keep engagement high:

1. Ask For Less Information (and have an easy login!)

If you have a page with a sign-up flow for a new mobile app, what do you want to know from your user? It depends on what the product is and why you need the information from them. As an example: a date or friend matching platform would want your age, gender, and zip code on one screen. The next page could be preferences about the person you are hoping to match with. All of this information is necessary for the app’s purpose, but connecting to Facebook or Google has also made it much easier to skip certain steps in this process, allowing for less info needing to be manually filled out.

The following demonstration shows just how easy it is for the user to access all of the fields needed—i.e. name, picture, friends—from the Facebook API instead of filling out the same information manually.

No alt text provided for this image

2. Single-Column Ease vs. Multi-Column Stress

When you’re making a form, make sure it’s displayed in a single-column instead of a multi-column. This design element will make it easier for users to scan through and complete instead of trying to tab through different fields and with the potential of resulting frustration.

The following demonstration illustrates, the relative ease for a user to scan through one column, answering questions in a linear format instead of doing a Z-pattern back and forth.

No alt text provided for this image

3. Automate, Automate, Automate

One of the best form practices for improving design is automation. Automation makes it easier for the user to go through fields, without worrying about switching from lower and upper cases. The only fields that should not be capitalized are emails and passwords, since those cause delivery issues.

4. Progress Tracker

A user who is filling out a form—unless it’s a simple sign-up—wants to know how long the process will take them, and maybe even if it should be filled out now or saved for later. For mobile and desktop alike, a progress tracker should be included, like the examples shown below.

No alt text provided for this image

If the user is on a certain step it’s important to note that as well, all within an easily understood display of what they’ve already completed.

5. Testing (even when you don’t want to)

This is the step that many don’t even think of taking, since the design could be flawed and more time could be wasted in redesigning. The form you just created should be tested on a few different devices (at the very least on mobile and desktop) to see if it actually works and makes sense. What’s the point of developing a product that doesn’t work for the user?

The ultimate goal is getting the user to click on the “continue” or “submit” buttons in the end. By following these best practices, you can remove common roadblocks in form submissions and make the experience better for your users.