Lecture: Breaking down software-based barriers in the design process

Last Wednesday at the UIG Spring Conference, we had a presentation on a tool that has greatly simplified our design process, Sketch App.

Like many project teams, we are constantly asking ourselves what we can do to simplify and speed up the design process and optimize communication with the project team.

We often work remotely with our clients as a concept / design team – so we don’t always sit in one place with the entire project team. This actually works surprisingly well, but also brings its own challenges – especially in the transfer of design documents. These challenges were precisely what the presentation was about.

Frankenstein lives – often in the www

The bottom line is that it’s all about communication and documentation – and how it’s made easier for us to do just that. There are many different reasons why digital products such as websites, online stores or applications a) behave differently than thought/planned and/or b) look different than planned during launch or relaunch.

If, for example, the fact is ignored from the beginning that a digital product grows or is extended (and it does in 99%) – or a concept / layout is not well documented, for example – and also has gaps due to missing “intermediate steps” or elements that are not thought through and defined to the end – this leads to sometimes wonderful interpretations of what is finally implemented. Each person then does a bit of what “suits” him/her. The results are: Inconsistency in interaction or UI patterns (everything works differently) and in visual design (everything looks different). In short: Congratulations, your product got “frankensteined”.

Inconsistency is a usability problem

The ones who suffer are our users. Because inconsistent behaviors of digital products and a diverse patchwork of UI elements create confusion with sometimes high cognitive effort. In other words, usability can suffer considerably.

Good documentation is half the communication

We want to counteract this scope for interpretation and the inconsistency that follows.
For example, the “sketch app” software makes our design documentation, and therefore communication, much easier than the software we had been using previously.

In other words, we have found that there is software that is simply very good at communicating the design concept of a digital product coherently to the rest of the team and thus simplifies these processes considerably – at least that is our experience.

Because: the “hurdles” (barriers) are often in the loss of information that takes place when one project team (e.g. concept) hands off the design document to the “next” project team (e.g. visual design) at some stage in the project. Between these two teams alone, susceptibility to errors and irritations can run rampant – not to mention the handoff to technical development, which often has to settle for a stack of jpgs that don’t cover many statuses or feels forced to wade through too many individual documents to understand and “read” the overall concept. All this is very troublesome.

Of course, it is not the sole task of software to simplify processes. There is no such thing as a “magic button” that you press and everything will be great. The human factor plays the main role here.

With sketch, however, it is much easier to create design documentation and also pattern libraries than, for example, with Photoshop – which until about two years ago was our faithful companion in the field of visual design – for the conception we again resorted to other tools. It is now also much easier to “transfer” e.g. UI patterns or wireframes in the conceptual “shell” into a visual design without loss of information or to refine them step by step, since everything happens in a single document.

As I said, this presentation reflects our own experience and the approach is also not suitable for every situation. In any case, it has helped us a lot to create good and complete design documents – especially when it is clear that in addition to the concept there is also a visual layout, and thus one can somewhat counteract the danger of document clutter and transcription errors and the often resulting misunderstandings.

It remains exciting as the web/ UX/ design industry yearns for products that are perfectly tailored to the specific needs of the UI design process. Sketch is one of them.

Links

https://www.sketchapp.com/
http://sketchtoolbox.com/
http://www.sketchappsources.com/