1. Website Planet
  2. >
  3. Blog
  4. >
  5. Designers and Programmers Work Together with UXPin Prototype Design Platform
Designers and Programmers Work Together with UXPin Prototype Design Platform

Designers and Programmers Work Together with UXPin Prototype Design Platform

Ditsa Keren
Ditsa Keren
26
August 27, 2019

UXPin is one of the world-leading user interface design platforms. Thanks to their unique code-based technology, companies all over the world can prototype realistic experiences at a previously unknown speed and accuracy. In this interview, CEO Marcin Treder explains the concept of collaborative design, and how it can benefit teams with people from different backgrounds to get things done quickly and efficiently.

Please describe the background, vision, and evolution of UXPin.

To cover the early days of UXPin we have to travel back in time quite a bit!

Back in 2010, I had the pleasure to lead the UX design team at a fast-growing eCommerce
startup in Poland. The company was on the path to IPO but really struggled with product development. This challenge was caused by the lack of design – engineering collaboration. Designers and engineers were separated by bad processes and bad habits and it made collaboration nearly impossible.

To fight this challenge, together with two colleagues, I’ve started to organize co-designing workshops for designers and engineers. We’ve started every workshop by presenting findings from recent usability studies and subsequently, we encouraged everyone in the room to sketch on paper a solution to the observed user pain. These workshops became a very popular place to discuss collaboration between designers and engineers. By working together, both groups discovered that they deeply care about great experiences delivered to users.

While everyone enjoyed the conversation, many struggled with sketching. It takes a certain level of drawing skills to produce a clean sketch and not everyone was able to do it. To level the playing field, we’ve come up with a new paper prototyping method that involved using sticky notes with printed design components (such as inputs, buttons, etc.) and a piece of paper with an image of a web browser. Instead of sketching, people were building paper prototypes from ready elements!

This playful method started to work very well during the workshops and we’ve decided to turn it into a product. Soon, we’ve created a notepad with a set of generic user interface components printed on sticky notes and a notepad with browser printed on A4 pages. We’ve called the notepad UXPin.

On November 11th we’ve announced UXPin to the world and to our surprise we sold 400 notepads in 48 hours. All of a sudden our paper prototyping method was used at companies like Google, Apple, and IBM. We could not have been more surprised.

A year later, encouraged by our customers, we’ve started working on the digital version of our notepad – the collaborative design & prototyping platform (launched in December 2011), that UXPin is known for today.

8 years later we continue to work on bridging the gap between designers and engineers. UXPin today offers the most comprehensive code-based design tool on the market.

Please explain the concept of collaborative design. How does it work, and what are the benefits?

Building any digital product is a highly complex task that requires, at a minimum, a deep understanding of the technology and psychology of the user. To master those two domains, a group of experts has to be assembled and they have to find a way to efficiently work together from day one.

This is where collaborative design enters the stage. By encouraging people with different backgrounds to understand users’ problems and allowing for creative expressions of ideas for possible solutions, collaborative design kicks off an efficient product development process.

UXPin covers this process from the get-go. Every member of the team can wireframe and prototype ideas at the same time (just like google docs!), exchange ideas and comments. UXPin provides the space for the ideas to blossom and turn into great products.

Here’s some visualization to help you understand how it works:

Please describe a typical use case scenario for UXPin

You don’t really talk about a typical scenario at UXPin, but let me take you through how this would work for the Merge technology I mentioned.
Designers want to build live projects and we supply the possibility to do so. By syncing your design library with Merge, the designers can immediately work on coded components and get down to work. So, for example, building something like a calendar widget or feature for an app is now pretty simple as all the interactions (i.e. setting a reminder for a specific date) are coded within the calendar component. So the designer just utilizes it (changing properties, colors and such) and instead of a bunch of static artboards they can present a living prototype. So our “use cases” are more about inviting more people to the table and helping them realize they don’t have to work in separation.

Which technologies do you find to be the most intriguing these days, and why?

I’m extremely excited about any technology that helps bridge the gap between designers and engineers. I believe that this very gap constitutes the biggest problem in modern product development.

Let me give you two examples.

First of all, our very own UXPin Merge. UXPin Merge is a technology that connects our design and prototyping editor directly with the production code repository and imports code components with all the styles and interactions, directly to the editor. Within seconds, designers can be using production code to build new ideas and… they don’t have to know how to code. In my opinion, this is the fastest process of prototyping new ideas that stay consistent with the existing platform. Merge is currently in closed beta and works with React.js repositories only.

Secondly, I’m a big fan of Google Flutter. Flutter lets engineers work with a single code base and ship native code to a variety of platforms, including iOS and Android. Unlike React Native – no web view is involved. Flutter compiles to pure native code, which means that top-level performance is achievable in a record development time.

26 claps
Clap for the post if you found it useful!

Related posts

Show more related posts

Any comments?

0 out of minimum 100 characters
Required Field Maximal length of comment is equal 80000 chars Minimal length of comment is equal 100 chars

We check all user comments within 48 hours to make sure they are from real people like you. We're glad you found this article useful - we would appreciate it if you let more people know about it.

Share this blog post with friends and co-workers right now:

We check all comments within 48 hours to make sure they're from real users like you.

Once a month you will receive interesting, insightful tips, tricks, and advice to improve your website performance and reach your digital marketing goals!

So happy you liked it!

Share it with your friends!