Published on | Prototyping: From UX to Front End — Medium Talebook

The recent explosion of design tools (those supporting designers’ work) is hard to ignore. Last month, InVision announced the upcoming release of Studio — through which it will join the likes of Sketch, Adobe XD and Figma. With prototyping tools like InVision and Marvel UxPin, and more advanced tools like Framer, Principle and Origami, turns out it’s a prett-tty good time to be a designer.

Most popular design tools

I remember creating my first prototypes using ActionScript 3.0. Believe me, it was no easy task. The year was 2013, and I was desperate to add motion to my diploma project, an R/C car controller app. Prototyping wasn’t exactly popular in such times, and designers like me wanting to bring their designs to life had two options — use ActionScript 3.0 or learn JavaScript… As I input every line of code, I felt like a keyboard shredding hacker from a 90’s action film. As rewarding as the experience was for me, it was no surprise that just a few of my friends joined me on this path — the extreme learning curve coupled with testing device setup was enough to dishearten most.

My first iOS prototype created in Flash

At this point I knew that something needed to change if it would ever be possible to make apps as beautiful as I envisioned them to be in my head. A few years later, it did. I found out about Framer, which essentially removed all of the pain points from a designer’s perspective, as well as introducing far more effective approaches to creating prototypes.

But, I feel something went horribly wrong.

I get the feeling that we are becoming so fixated on visual tools that the concept of creating a new and usable product is lost. The void between making pixels look beautiful and product design is enormous. In fact, wireframing and visual design should be one of the last steps, preceded by extensive research and understanding target users’ needs. The aspect of the most importance is actually invisible.

This trend, and my point, is exemplified by dribbble. An unscalable mountain of magnificent interactions, designed only to achieve visual effects. Where problem solving never even appeared as a blip on the radar. This is the issue that we, as a design society, must deal with.

Don’t get me wrong, I love dribbble. It’s a perfect spot to very quickly scoop a load of visual inspiration. When it comes to visual design I use it everyday. But what about the logic behind these designs? Why did the designer choose one pattern over another? What problems did the identify, and which does this solution combat? What were the outcomes of the research phase?

Design without the purpose is called Art.

Problem — recognition of client’s needs

I decided to take a closer look at this problem. Together with Mike, we carried out in depth research, interviewing more than 30 designers are different levels of their careers — from beginners in startups to product directors in corporations such as: Google, Adobe, Microsoft and Airbnb. In addition to drinking excessive amounts of coffee, we asked them questions like:

How do you create projects?
What does the process look like?
What problems interfere with your day-to-day?

We met a lot of great designers, and had a bunch of fun in doing so.

We’re looking forward to publishing a report of our findings soon. The high level conclusions are as follows:

Designers at the start of their career often face problems understanding exactly what it is that their client needs. Carrying out the survey phase is above their level, and the knowledge required is difficult to gain since this is usually done by a specialist.
Intermediate level designers are keen to start with research, but struggle to encourage engagement from both sides: their own supervisors, or clients.
Highly experienced designers have their own tried and tested questioning techniques that work. The most pressing issue for them is connected with selecting the right people to research, accumulating relevant and comparable data, and the analysis of such.

User Experience without a user is not UX

Here, the invaluable concept is that of Human Centered Design — a methodology which places users in the centre of the process, as the most important part. It offers an answer for the troubles voiced by less-experienced designers. Here we have three phases — Inspiration, Creation of Ideas and Prototyping. Adhering to such guarantees fluidity in the creation of the product, which is constantly built in sight of user opinions and feedback.

When I heard this term mentioned three years ago, that same light bulb flicked on in my head, just as it did with Prototyping and ActionScript 3.0. I warmly welcomed the idea, and thought it would only be a matter of time until misunderstandings on the client side would be thing of the past. Sit back and wait for the magic to happen… Right?

Wrong. Ideo and Frog brought the best option to the table, at the time, but the process of using the tools requires more time than designers typically have. Ultimately, not the answer we needed.

Why it is not popular?

Ideo and Frog brought the best option to the table, at the time, but the process of using the tools requires more time than designers typically have.We took a step back, as designers, and thought “How can we lower the entry threshold? How can we create a new tool which will open the doors to the world of research?”.We named the answer Talebook, because each project describes an incredible story.

Developing this idea itself was interesting, because in order to create it, we had to follow the exact process we are hoping to refine, or revolutionise. Thus, we were our own clients, trying to conquer the same pain points as in any product development. We, of course, had our own assumptions, which historically tend to be proven wrong, or at least very inaccurate.

After conducting further research, we were able to hone in on, and build upon three personas — the key groups whose needs must be understood, and reflected in the product:

Freelance UX Designer — well accustomed to meeting international clients remotely. The geographical spread means there is infrequently the opportunity to meet in person — Skype, Hangouts or Slack usually does the trick.
SH UI Designer — based in a software house, with very little direct client contact. An intermediary like a project manager replaces the connection.
Startup Designer — a young designer, applying their passion within a small (but growing) Startup.

Each of these users is thought of in Talebook. Those without experience are supported in conducting meaningful research, whilst he more advanced user will appreciate the clean way of storing research data, and the tools at hand to analyse it.

The path to enlightenment

Using our research, we mapped the path taken in the most successful and informed research phases. Each of the steps is critical in understanding the needs behind the design, from all perspectives:

It is:

Stakeholder Interview —
User Interview
Competitor Analysis
Problem definition
Personas
Solution definition
User flows

How about custom process?

We know that each and every project varies in infinite ways — there is no such thing as ‘one size fits all’. That’s why we’ve made the process fully customisable, and allowed you to add your own steps.

We’ve also equipped Talebook with a series of templates, ready to fill up with data and insights gathered from your client. Each method is explained in detail, to ensure you’re getting what you need at the right moment.

We’re currently in the middle of intense testing, which means we’re super close to finishing up. By the end of November, we’ll be inviting users to join forces in creating a better design world with accessible user research! Join us on this journey!

You can also check our Facebook page or send us email.

UX missing piece was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX missing piece

Cool stuff, every week

More Articles