Designing digital products “User First”
Leave your comfort zone and make something people want by designing around their needs.
Our work methods are changing and so are we
Since the very beginning, the web has changed perpetually. And so have the ways of designing digital products, as well. Designers want to work better and more effectively. They had started to rethink their design process and adapted their work methods accordingly. Thereupon, the choice of better work methods began to influence the outcome. This might be one of many reasons we design “User First” nowadays, which basically means building products around the user’s needs.
Back in the old days the fixed waterfall process (plan, design, development, launch) stopped us from quickly shipping our products, which is quite important to learn if our design solutions work in the real world: “Build, Measure, Learn” is still one of the most important methods to create meaningful products, built for the user. Creating a lot of iterations as part of a modern, dynamic and agile process leads to more flexibility and faster product development.
So how can the individual design process adapt to the User First design strategy? And how can the design process support quick design iterations to measure and learn about the product‘s success effectively?
Designing User First
The biggest change in nowadays web design is that we all focus on crafting our digital products according to the user‘s needs. As designers we always keep in mind how the user will interact with the product and we often try to prove our designs by collecting user data or running user tests, because we want to build the best possible experience for the users.
The User First design strategy is the next step beyond the modern web design techniques “Mobile First” and “Content First”. It shifts the focus from devices and content directly to the user‘s needs. You do not reduce complexity according to screen sizes and content, for instance; you reduce complexity according to the user‘s needs. Therefore it leads to a multi-device experience where the product is built around the user and his needs instantaneously. The idea of building products with focus on your users affects the design process in several dimensions:
Start with sketches
There is less time than ever before for shipping iterations. The product needs to be tested in a very early state to learn if you are on the right track. This is why sketches are a very good start. Sketching is about developing ideas and to communicate them in order to explain what you have in mind.
Usually, you start with several sketches based on your user‘s needs or a design problem. These first sketches are essential to communicate your ideas to your team and stakeholders, but more importantly, to get feedback from your users. Here, Photoshop is a great tool for doing digital sketches in an early state of work. It offers very fast visualisations and iterations.
You can also create moodboards in Photoshop for establishing a design atmosphere (have a look on Style Tiles) or even bigger — a web technique moodboard in which you collect interaction patterns and behaviours. It is also possible to create sketches by coding directly in the browser.
Fast sketches on paper, in the browser or in Photoshop are great to start. Wireframes are not. They just deal with hierarchy of content. You will lose context and meaning. And you cannot communicate through them. It is very difficult to get a common idea of the later outcome trough wireframes and so you cannot communicate on a common level with your teammates and users. The chance of everyone being disappointed in the end is very high. Furthermore, wireframes do not tell any story. They are static and lifeless. Wireframes are a waste of time in your design process.
Base your decisions on user data
As mentioned before, your first sketches should be based on the user‘s needs. These needs could be generated from either web analytics, surveys or user tests, for instance. It is important to understand the problems your user has and to create solutions that make sense. The user data should influence your work process, but not determine it: User data is to be used wisely, and not to be followed blindly! Having the data is one thing; understanding them the other. It is not a good idea to colour all your buttons in red, just because red buttons have a higher clickrate measured in A/B tests.
Building prototypes
After the sketching phase it is time to transfer your tested ideas into a real prototype.
As Josh Brewer told us in his talk “Photoshop lies! And other sobering truths about Product Design“ at Beyond Tellerrand, a “prototype is worth a thousand meetings”.
And this is true: Communication on a prototype is easy. Everyone sees the same thing and has the same idea in mind. Prototypes are built in the right medium, are interactive, quickly changeable and are ready for user tests. Plus, they can be expanded into a shippable product.
Working with real content
One of the big benefits when working with a prototype is that you can easily integrate real content. It immediately shows if the design works or not. Possible problems can be identified quickly and broken layouts can easily been fixed. Additionally, you can test minimum and maximum situations: How does a newsfeed look like with 1000 entries and with no entry at all? Working with real context provides for new ideas on how to improve the product. And you can personalise the prototype for user tests, which makes it much easier for the user to empathise with the product and will lead to better test data very likely.
It is a good idea to use real content for your prototype and sketches. You do not fool yourself by using placeholder text: “Lorem Ipsum is fucking evil” (Josh Brewer). Websites are mainly about their content. When you do not care about the content, you do not care about your users as well.
Sharing and collaboration
Sharing is one of the biggest issues in the design process. And on the other hand, it is one of the biggest chances to improve your work. When working on it, you need to share the prototype with your developers, product managers, stakeholders, designers, copywriters and the test users. One prototype can serve them all when created as an HTML webpage that is accessible for all of them. Just think of the copywriters who can test different wordings, languages and texts directly in the prototype by using the browser‘s web inspector. It is easy, fast and efficient.
Forget Photoshop at once
The time of pixel-perfect Photoshop compositions that developers translate into working web products has fortunately ended. It costs a lot of time and money and does not fit into modern, flexible design processes anymore. Designing one experience for all available devices is nothing you can build in Photoshop. It was not designed to build websites and therefore we should not use it in this way.
When it comes to build the first digital layout from your sketches, forget about using Photoshop. The look and feel of a webpage cannot be built in Photoshop properly. And it is not testable on different devices in different contexts.
Photoshop is lying to you due to the look of your design: Depending on browser, operation-system, screen and device, browsers render the images, fonts, icons etc. in other ways than Photoshop does. And there is a lot more than just the look to keep in mind: Performance, Responsive Design, Microinteractions, ergonomics and, of course, the general feeling. A website is not a static image hanging framed on the wall of an art gallery. Websites are dynamic and active and need to be treated as such. A Photoshop document is static and not clickable. It is hard to think of complex interactions like Parallax Scrolling when you are working with a tool that cannot handle interactions.
Displaying and describing interactions in Photoshop is very painful. It needs a lot of Photoshop layers or documents, and it is very hard to create them statically. Plus, it will look odd in the end or at least different from what you had in mind when building it.
“Photoshop is a dying product design tool. Designers moving our craft forward are moving between sketches, whiteboards and prototyping tools. This is one reason people say designers should code” (Paul Adams, The Dribbblisation Of Design).
We are wasting a lot of time on simulating something that can quickly and easily be built in the real thing. Everything you build in HTML is developable.
“HTML/CSS is real in a way Photoshop will never be.” (Why we skip Photoshop — Jason Fried)
Pixel perfection is a lie
There is no such thing as pixel-perfection. Layouts are looking differently on different devices, browsers and screens. Pixel-perfect is a lie. It is impossible to predict all possible use cases and to consider all possible kinds of content in your product. It is an outdated concept that can probably been replaced by the Atomic Design Proposal by Brad Frost.
We need to make realise that we are not designing print products for a final publishing. We do not print books. This is why it is a waste of time creating huge Photoshop compositions of what a website could look like in pixel-perfect details and printing them in order to present them. It is a media discontinuity: We need to make decisions on the right medium. Font-faces, colours and interactive elements are not displayable properly on paper. You get the look and feel of a book or a poster but not of a digital product. You are building a web product, not a book. Don’t fool yourself.
Working with code
It is no surprise that big companies like Google, Facebook and Pinterest are looking for designers with coding-experience in their job offers: Designers need to understand the medium they are working in. Realising, and not just simulating, the own designs is one of the most important skill besides your design skills to develop great products. You need to produce something that is shippable.
It is a fact that HTML and CSS are very simple description languages, easy to learn. They are very well documented: You can find millions of helpful tutorials and instructions in the internet. And you can also copy a lot of existing code from others. There is no need to be a front-end professional. Quick and dirty prototypes are sufficient.
When it comes to special web techniques prototyping-tools will reach their limits. Think of Fluid Layouts, Responsive Design, Multi-Device Experiences, Fixed elements, CSS-Animations, Parallax-Scrolling, Scrolling-Position, TouchEvents, Retina Display support, Webfonts or Animations. You do not need another product like Photoshop that simulates websites. You cannot feel or build real web-experience with a prototyping tool that simulates the reality; you will lose the experience. Hand-coded prototypes are the real experience. You can do prototyping on different devices with the look and feel of a real website.
Think of the fast iterations and changes you are able to do with code within seconds: You can change a link-colour, font-size and mouse-hover-effect in no time. You can add, duplicate and delete content with a few clicks. And it is easy to convert an HTML prototype into a styleguide (Best practice: Starbucks) or to expand it with fancy web-technologies.
Leave your comfort zone
Designing digital products User First requires a completely different view on the design processes. Hand-coded prototypes based on the user‘s needs is one of the new work methods a designer must know. Classic web-design with a waterfall design process is mostly outdated. Iterative design based on the user’s needs is the new way of building meaningful digital products.
Designers will code
No doubt, there is a reason for Google & Co to hire code-experienced skilled designers. It does not matter if you are a Product Designer, UX Designer, Interaction Designer or a Visual Designer. You need to work interdisciplinary nowadays.
“Interactive design [is] a seamless blend of graphic arts, technology, and psychology” (Brad Wieners, Wired, 2002).
The new working methods demand changed design processes. It is a fact that designers will have to code. Designers and developers are not divided anymore. Both need to work interdisciplinary when it comes to build great, meaningful digital products.
It is a good idea to leave your comfort zone and start learning to code to know how the web you are designing works and to build prototypes for a real web experience and better outcomes. It is easy to learn and you will get success very soon.
