As product development becomes more collaborative, it’s not uncommon to find developers in a design strategy meeting.

In fact, it’s encouraged. The notion that developers are “not creative” is far outdated.

You can ask the most technical coder of all, and they will describe their coding process as problem solving using a development language.

And what is “problem solving” if not a core design skillset?

In this piece, we’ll explore how the two disciplines aren’t as different as you think, and how developer experience can improve a design approach.

Two parts of the same team

Let’s look at two development best practices and their design equivalent.

1. Create modular code to increase efficiency

Just like designers strive for component-based design, developers apply reusable elements and efficient use of CSS. The lego-block approach to development scales incredibly well (especially for complex products).

Consider this scenario: a client has a contact form and wants to add a feedback form. If the developer has already created a class for general forms, adding a new one is not that big of a deal. Since developers are innately thinking in this manner – they are inevitably aware of ideas in which different aspects of an interface or application can be reused or re-appropriated in terms of functionality or UI.

2. Create flexible code for scalability

Just like designers build design languages that survive a growing product suite, developers seek to write code that doesn’t require complete re-writing for major changes.

Much like a designer’s UI kit, a developer creates a code pattern library which is even more flexible in the long run.

Change one element, and the update occurs everywhere.

The modular approach is the same – it’s just expressed in different forms.

Photo credit: Jack Moffett for e-book Eliminate UX Gaps In Your Product

How developer logic strengthens the design skillset

Of course, not all designers need to code. In today’s Agile teams, we should embrace the power of specialization.

That being said, code-savvy designers tend to better understand technical implications (especially useful for enterprise products). They also gain a more structured framework for problem-solving. I say that from personal experience as a developer turned designer.

Learning to code in grad school gave me a chance at an entry-level web development job, which lead to programming roles, which finally grew into a UX career.

My development experience disciplines my design process like nothing else. Coding opens our eyes to new ways of thinking and unlocks hidden parts of the creative process. Thinking logically within coding parameters brings the design problem into focus.

Photo credit: Laura Kershaw for e-book UX Design in Action

For example, at the start of a recent project for a data analytics product, the only requirement I faced was “reinvent our interface, inspire our company, and stand out in the marketplace”.

With such unclear requirements, I needed to blend design thinking and code thinking:

1. Identify the situation as a non-traditional exploration exercise.

First, I listened intently.

Is the client mainly concerned with the interface? Not so, in this case.

Sure, their interface needed updating, but the deeper problem was presenting data in a meaningful way beyond icons and colors.

2. Reframe the initial thinking.

As a developer, I’ve approached similar problems in the past by laying out a data model to support a richer experience.

On this project, I applied the same understanding to the client’s needs.

When the client said they’d like to surface a specific piece of data on a specific screen, I understood it as so much more – they were essentially drawing a connection between the significance of this piece of data to the adjacent components.

Furthermore, I now understood that two specific pieces of data are actually more powerful together, and was able to find opportunities to implement this type of “design relationship” throughout the application.

The client’s problem was much deeper than “we need a new design”.

• To support such a complex product, they must prepare for a high degree of collaboration and flexibility.

• Based on my past developer experience, I knew that the client would surface more data and capabilities as we go along. They were just preoccupied with too much work with to communicate everything at once in a traditional “requirements gathering” stage.

So, I reframed my thinking: the entire design process must be treated as ongoing requirements gathering. Everyone needed to work in an extremely flexible manner, or the project would fall apart.

In short, Photoshop wasn’t going to cut it.

3. Create a sustainable framework.

This approach to segmenting the interface is code thinking at work.

When approaching an interface development project, developers usually start by creating a framework: in broad strokes, defining areas where smaller pieces will live, and grouping these smaller pieces in a way that makes sense.

A developer’s job becomes very difficult if this organization doesn’t exist before they start diving into the details (such as specific CSS implementation and smaller components).

In a similar manner, I first sketched a “UI framework” – a way to designate some broad user goals for the design problem. By outlining the overall principles, we keep the look and feel consistent as we dive deeper into specific interactions.

When moving into the prototyping,  I was able to dedicate the necessary time to perfecting the UI components since the overall vision was clear. Since the prototype elements were treated as modules, the transition from vision to detailed crafting was much easier.

Conclusion

Be it a launchpad to modular and scalable thinking, or a valuable design tool – coding is an essential part of the design process.

To ensure that code-thinking is part of the design process consider doing the following:

• Include a developer or two at different checkpoints during the project planning and design activities.

• Collaborate with a developer about prototyping techniques that will benefit the project at hand.

• Discuss a modular approach with the development team to understand how the bits and pieces of information can positively influence the design.

If you found this post useful, get more advice in the free guide UX Design Process Best Practices. 

The post Coding is Designing appeared first on Studio by UXPin.

from Studio by UXPin https://www.uxpin.com/studio/blog/coding-is-designing/