InRhythm

Your partners in accelerated digital transformation

Designers

Why Your Design Language System Needs A Product Manager

Overview

A Senior Product Manager specializing in Enterprise Design Language Systems offers expertise in creating, scaling, and optimizing cohesive Design Language Systems that drive efficiency, consistency, and innovation across large organizations. By leveraging their deep understanding of product development, user experience, and cross-functional collaboration, they empower enterprises to accelerate innovation, hack their own bureaucracies, and enhance product quality while reducing design debt, as well as development and maintenance costs. 

In Ashton Coghlan’s Lightning Talk session, we will be uncovering the the primary strategies for effectively Product Managing Design Language Systems:

  • Overview
  • What Is A Design Language System?
  • What Does A Product Manager Bring To Your Design Language System?
  • Top 10 Reasons To Hire A Product Manager
  • Closing Thoughts

What Is A Design Language System?

By direct definition, a Design System is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. According to Emmet Connolly, Director Of Product Design at Intercom, “… most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.” 

The Design Language System can be considered the source of truth for how elements look and behave.

  • Designers, developers and content authors can use the DLS to check if an element of design already exists
  • Content authors can use the DLS for instructions on how to use certain design components

Like a natural language, the Design Language System is supposed to grow over time as components are progressively added to it.

Design Language Systems are aimed to be a shared Language for understanding design, that transparently leads to understanding implementation. 

In short, a Design Language System is a living, breathing organism that guides and supports the building blocks of your product.

What Does A Product Manager Bring To Your Design Language System?

Design Systems have become an essential part of efficient product development workflows, and there is a great benefit to treating the system as a product itself. Design Systems are ever-evolving tools and processes that need product management to support the full lifecycle from the initial build throughout ongoing maintenance and iterations.

The collaborative efforts of a cross-functional product trio including design, engineering, and product management are key to building a successful Design System that will continue delivering value to an organization over time. 

As the Design System matures, a product manager can help keep a groomed backlog for new releases, maintain intake and support processes, and measure/report on the impact of the Design System to ensure ongoing investment.  

Top 10 Reasons To Hire A Product Manager

Where system designers and engineers have the subject matter expertise to build a Design System that’s compatible with current workflows and technology, a dedicated product manager can help align the vision for the System to the goals of the organization, prioritize the roadmap based on those goals, and build a communications strategy to drive adoption and create feedback loops with consuming teams.

Proven benefits of hiring a Product Manager to support the implementation of your Design Language System are:

  1. Cross-functional Collaboration– A product manager facilitates communication and collaboration among different teams, such as design, development, and business. This ensures that the Design Language System meets the needs of all stakeholders.
  2. Strategic Vision– Product managers have the ability to define and execute a long-term strategy for the Design Language System, ensuring it aligns with the company’s goals and objectives.
  3. Prioritization– With many competing demands, a product manager can prioritize features and improvements to the Design Language System, maximizing the value delivered to the organization.
  4. Customer Focus–  Product managers have experience understanding customer needs and incorporating their feedback into the Design Language System. This ensures a user-centric approach that improves usability and adoption (Your downstream product teams are your customers).
  5. Change Management–  Implementing a Design Language System can involve significant changes in processes and tools. A product manager can help manage these changes, ensuring a smooth transition and minimizing disruptions.
  6. Metrics And Measurement– Product managers track and analyze metrics related to the Design Language System’s adoption, usage, and effectiveness. This data-driven approach helps identify areas for improvement and demonstrates the value of the Design Language System to stakeholders.
  7. Scalability–  As your organization grows, a product manager can ensure that the Design Language System scales effectively, addressing the needs of an increasing number of users and projects.
  8. Documentation And Training–  Product managers can oversee the creation of clear, concise documentation and training materials, ensuring that team members can easily access and understand the Design Language System.
  9. Continuous Improvement–  Product managers are adept at iterating on products and systems, ensuring that the Design Language System remains up-to-date and evolves with the needs of the organization and industry.
  10. Budget And Resource Management–  A product manager can help allocate resources efficiently, making the most of your budget and ensuring that the Design Language System’s development stays on track.

These factors not only enhance the viability of the Design Language System from the start – but provide a solid foundation for its enduring influence within your organization.

Closing Thoughts

Working with the client, Product Managers craft a tailored Design Language System strategy that aligns with their unique business objectives, elevates their brand, and fosters a seamless user experience across all their digital products and platforms.

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.

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. 

A Comprehensive Introduction To Apple’s Human Interface Guidelines

Overview

No alt text provided for this image

Human Interface Guidelines suggest how interface components should look and how users will interact with them. There are as many ideas about interface design as there are proponents of any particular library or API. 

All interface designs share a similar goal, which is to create a unified user experience across the environment. To accomplish that, the guidelines help make their design’s interface intuitive, consistent, and learnable, both for the OS for its applications and tools. All interface elements and their guidelines should be included in an interface design document with usage examples, when practical. For example, buttons, checkboxes, dialog boxes, application views, buttons, bars, etc.

In Hamid Mahmood’s Lightning Talk session, we will breaking down the following topics:

  • Overview
  • Human Interface Guidelines
  • Customer Impact
  • Live Demonstration
  • Closing Thoughts
  • Additional Resources

Human Interface Guidelines

No alt text provided for this image

Apple was one of the first companies to use “look and feel” in their literature when referencing the MacOS interface in the 1980s. As technology advanced, ideas on interface design also advanced.

Today, Apple has “Human Interface Guidelines” that establish how an application should look and feel to users on all of its platforms.

Apple’s HIG is an extensive document covering all aspects of application look and feel across the entire Apple ecosystem. There is a platform-specific HIG for each Apple OS environment: 

  • macOS for MacBooks
  • iOS for iPhone/iPad
  • watchOS for Apple Watches
  • tvOS for Apple TV

Apple’s HIG is organized by platform and technologies. Each platform is subdivided into sections. For iOS, for example, the sections cover architecture, user interaction, system capabilities, icons and images, bars, views, controls, and extensions.

From the iOS section topics, it’s evident that Apple is invested in ensuring that applications on their platform have that certain Apple “look” and that those applications function in a consistent manner. 

Consistency is an important factor in user uptake of new applications. When UI elements function similarly, it’s easier for users to transfer their operational knowledge between applications. 

Using the HIG helps maintain the quality of applications by guiding UI decisions to support the application’s operation. Following the HIG will improve engineering and design decisions by helping programmers anticipate what most users will expect from an application’s interface.

It’s important to remember that the HIG does not dictate how an application operates, it describes the user/application interaction through visual cues, controls, and application feedback.

Customer Impact

No alt text provided for this image

When followed, the Human Interface Guidelines ensure that the components of an application’s UI are understandable to the average Apple user through familiarity with the OS and with other applications.

Maintaining a consistent interface helps create an application interface that is more rapidly accepted and gives users an increased feeling of being in control, which creates a positive user experience. A side benefit is that an application will complete the App Store approval process in a more timely manner because the UI and its controls appear and operate in the manner expected by the reviewers.

Live Demonstrations

Hamid Mahmood has crafted an intuitive walkthrough demonstration of the advantages of application coding within Apple’s Human Interface Guidelines:

No alt text provided for this image

Be sure to follow Hamid’s entire Lightning Talk to follow along with these steps in real time.

Closing Thoughts

No alt text provided for this image

Apps in this era of phones, laptops, tablets are not restricted to one device. Nor are users.

Therefore, it becomes imperative to adhere to some consistent UI guidelines to ensure a seamless experience and broader adoption by users. The cut-throat competition between iOS and Android has been good for both, making them more polished, more feature-packed and technologically potent. The best design services know how crucial it is to keep these guidelines in mind when designing interfaces on iOS and Android.

Happy coding!

To learn more about the implementation of Apple’s Human Interface Guidelines and to experience Hamid Mahmood’s full Lightning Talk session, watch here. 

Additional Resources