Friday, 18 August 2017

Content or design? What comes first and why designers should help create content for websites.

Content or design?

What comes first and why designers should help create content for websites.

Starting a new web design project is as exciting as it is frightening. There are many unknowns, usually very little time and client expectations are piling up. Sometimes there is no brief, contact with the client is done by a middleman and information is scarce. You have an idea for the design but you still have too little information about the product to come up with something substantial. Stalemate.
Can a designer work without a brief? Well… he shouldn’t. A brief becomes a point of reference — it’s your first contact with the project. It has the basic outline of what the website should be about, what the target audience is and what are the goals. If your client doesn’t provide you with something like this, it’s in your best interest to meet, talk about it and ask questions.
What is the product? Washing powder. What does it do? It washes. How well does it work? The best. Why is it the best? Because it’s unique technology.What can I do with this washing powder? Clean whites and colors.
Getting these basic pieces of information gives you enough knowledge to come up with ideas for information architecture, graphic elements and a basic narrative for the website. Don’t be afraid of asking questions, they will help you to avoid mistakes and come up with a better design.
Information is king. It’s the core of your website — without it, it would just be a pretty shell, awesome looking but lacking practical application. As a designer, you create a design system that combines “ah that looks awesome” and “oh, that’s interesting information”, with “just two clicks and I can purchase this thing!” That’s good design — pixel perfect, informative, intuitive and obstacle free.
Web design is about solving problems and the main problem is how we tell the story of a product, so people want to use it. That’s why typography, colors, illustrations and all the beautiful stuff is not providing answers to the problem; it is the means in which we present the outcome. Let’s focus on content first.
That means content should not be the last stage in design, something to be filled in right before the launch. Content is the backbone of your site, and must be developed together with the visual design.
So hold your horses, sit down, pull out a sheet of paper and think of the website’s architecture. Because if you focus too much on pixel perfect design too early in the process those decisions you make now will later rule the content. We don’t want that, we want our king (content) and queen (design) to gracefully walk down the path of success ;)

You are the Alpha and architecture is Omega

Not every company has access to a content strategist or information architect, so many times the designer shapes both. Often we create information architecture, user flow, and also help in developing content strategy with the marketing department. It’s not a chore, it’s part of our job, and as designers we cannot forget about the bigger picture — a website is not just an aesthetic form, it’s a system where content and design come together and influence each other.
First, content framework can be established while we work on the basic website architecture. At this point, we set a basic navigation structure and an outline of the content of the pages. We make decisions on what order the links should be placed in and that sets the priority of the content because based on the gathered information we decided that the “technology” subpage is more important than “services.”
Should a designer write content? It’s not your job, right? Well, not entirely. You, as a designer, have the responsibility to take risks and set your project on a course. You obviously will do this with the visual aspect in mind and you should do this with content as well. It’s enough that you just set a general direction for the content and the copywriter will take care of the rest. It might take some time but it will be worth the effort.
Another solution is to wait for the content draft, which might take a long time and might not be what you had expected. Despite the quality of the content draft, it should be enough of a point of reference for you. At least you have something that you can work with as it gives you an idea about what the client thinks is important. The most common mistake is to just copy and paste this content into your design, adjusting your layout to fit those 5 paragraphs about how the product will disrupt the tech world while providing holistic solutions…. Nope, use that content to your advantage, it should be an inspiration for you; tweak it, suggest changes, use it as your proto-copy.
Don’t just wait for the email with the final_final_www_COPY_07.doc as an attachment. It will come too late and it won’t be what you think it should be. Be engaged in content creation, see how it “fits” in your design, get feedback and implement. Designing a website and content is a process that requires both parties to be engaged and goal-oriented. This kind of engagement protects you from ending up with a generic, template-like website. Each project is different and you should treat it with custom care.
Good UX takes the content and communication of the website to the next level. When content supports design and vice versa, it’s the effect of the collaboration of the designer and content creator. That is why the creation of content and design is a somewhat organic process, and not the waterfallmodel; it’s many iterations until you finally arrive at the one that is ready for launch.
Is content more important than design, or the opposite? Maybe it’s great content that drives and inspires great design or maybe it’s the design vision that drives awesome content? Well, I would guess it’s both at the same time because only when the two (content and design) work together can you achieve balance in your project. Yes, the design draws attention and it lets users decide in a split second whether to stay or leave, but it’s the content along with the design that drives user engagement and conversion rate. One cannot exist without the other. Thou shalt remember!

Design system

Paragraphs, headlines and bullet points are not only text placeholders but they are important elements of design; their length, visual arrangement, hierarchy and meaning are part of a design system that you create for every project.
Designing is understanding your subject (client, product, service) so you simply must know a lot about it — ask questions, analyze competitors, talk to product owners. Knowledge is the base of good design and will help you choose the right path for the visual aspect of your project. No doubt it will help you come up with guidelines for website content.
Microcopy becomes part of UI
A website is a sale/informative entity, therefore information and how it is presented is the goal of our work. Text with illustrative elements helps create or sustain product awareness. It also conveys information about the core values of a product. Website content is a broad term; it spans from general website narrative to headlines and informative paragraphs, but it is also those little words which make a difference. Never forget about paying attention to micro copy. It helps break the barrier between the website and user. It makes a website more human, direct and accessible.

Lorem ipsum

Using only Lorem ipsum will make your draft design hard to read, better to try come up with some content.
For internal purposes lorem ipsum serves as text placeholders. I personally use it just to see how a 4 line paragraph will look next to that icon I was drawing for a couple hours. But what I have to know is, what is this icon illustrating? If I know that we are showing “payment security” and the client told me it’s state of the art encryption i don’t have to wait for the paragraph copy, I just have to make sure to leave maximum 4 lines plus a two-word headline.
Your clients should never see Lorem Ipsum. It’s better to draft copy than meaningless gibberish. Remember that your clients sometimes are not able to “imagine” the intention of text.
Lorem ipsum is just a helpful tool in web design; it should never be a substitute for creative content. Design with content in mind. Use lorem ipsum with low fidelity mockups, it will simply tell you that here you are giving some space for text.

Stages of creating content — the most universal way

1Kickoff meeting. Your first opportunity to hear out your client’s expectations. First and foremost you learn about the subject of the project and it is your time to ask all your questions.
2Information architecture. It allows us to create a tree-like structure of a website where each page covers a different subject of our website, allowing us to block out sections of content. It gives us a rough look at what we want to talk about — nothing too specific but it is an important first outline of content — just like deciding on how many rooms your house will have.
With each step your content and design should become more detailed.
3Draft content. Once you have the architecture information it’s time to clarify the goals of your website and how the content of each subpage relates to one another. This part is crucial because it has to answer questions that users might have. Remember that you are helping design content for the user and their comprehension of the copy is a priority here. You can draw a simple wireframe of a website on a piece of paper and describe what content could go in individual sections, like here we should write about features because earlier we introduced the product. This can be used as a basic guideline for content.
4Design fitting. Once we know the basic narrative of the website we can move from sketch to low fidelity design, which allows us to place ideas for content in the right position, e.g. designing sections, paragraphs, header, sub-headers, foreseeing places for icons and other elements. This is the time to experiment with ideas, decide on technological solutions and possible interactions (sliders, panels, animations, infographics etc.). For this stage you can use a wireframe tool like UX Pin or Balsamiq.
5Design iteration. So you presented your current design ideas, you talked about interactive solutions, ideas for illustrations and so on. Now is the time to tweak the content, add micro-adjustments, scratch redundant elements, simplify text, add missing titles and so on.
6High fidelity design. Time to pull up your sleeves and design the hell out of that website. At this stage the content is almost done; you and your team know exactly what the message is of your website, which allows you to come up with relevant design solutions and illustrations!
7Final touches. Time to move stuff a pixel to the left and make the logo bigger.
8Launch. The project is out there, free as a bird.
9Gather data. Evaluate the content and design based on data and tests — the conclusions of this audit will lead you to the next step.
10Design iteration. Incorporate what you have learned from your audit and optimize the website to achieve better engagement and conversion. But that’s a topic for another article…

Like I mentioned earlier, designing a website is an organic process and the best way to move it forward is to engage the client in the process, ask lots of questions, and bounce many ideas off of them. The simplest way to do that is to organize workshops where you work together exchanging ideas, inspirations, quick wireframes and user stories. It’s faster and far more productive than sending a bunch of emails.
I have gathered a few interesting articles on the subject of copywriting in the designing process that might be useful for further research. Hope you enjoy!

Saturday, 29 April 2017

How to make Magento2 website faster

Magento websites usually have large visitors. Its mean website should be fast enough to deal with large number of visitors.
To make magento website fast we can use varnish cache that is open source web application accelerator.
Varnish caches files in memory, this enables Varnish to reduce the response time and network bandwidth consumption on future, equivalent requests.
Here is step by step guide to make your magento 2 website more faster than ever by using varnish cache.
1. Install Varnish (Ubuntu)
  • open terminal run "sudo curl | sudo apt-key add -"
  • Run sudo echo "deb precise varnish-3.0" | sudo tee -a /etc/apt/sources.list
  • sudo apt-get update
  • sudo apt-get install varnish
  • check that varnish is installed by typing “varnishd -V”

2. Configure apache

Note: apache runs on port 80 so varnish server cannot run on port 80 so we need to change the apache port from 80 to 8080
  • change apache port 80 to 8080
  • go to /etc/apache2/ports.conf and change Listen 80 to Listen 8080
  • save configurations
  • virtual host settings “sudo nano /etc/apache2/sites-available/000-default.conf”
  • change <VirtualHost *:80> to <VirtualHost *:8080>
  • if you have configured any virtual host change the port of that host from 80 to 8080.
  • restart apache “sudo service apache2 restart”
  • check the localhost with the port 8080 “curl -I http://localhost:8080

3. configuration of varnish to use with apache

  • Setting up varnish port to 80 “sudo nano /etc/default/varnish”
  • change DAEMON_OPTS="-a :6081 \ to DAEMON_OPTS="-a :80 \
  • save configurations
  • run “sudo service varnish restart”
  • check our varnish is working by “curl -I http://localhost
  • check varnish is listening top port 80 netstat -tulpn | grep varnishd

4. Configure Magento 2 to use Varnish

  • open file “sudo nano /etc/varnish/default.vcl
  • change the .host ( to your own IP(xxx.x.x.x) and port should be 8080

5. replace configuration file

  • First enable the Full Page Cache to use Varnish (Go to Admin > Stores > Configuration > Advanced > System > Full Page Cache), you will see as:
  • Save the settings and hit the Export VCL button (Varnish 3 or 4 as per your Varnish Version).
  • And use this default.vcl to replace the file in /etc/varnish/default.vcl
  • to see the varnish headers
  • magento application must be in developer mode
  • you have enabled the full page cache from system->cache management

6. Add cache hosts to app/etc/env.php

  • Go to app/etc/env.php
  • add code at the end of file

7. add the varnish server in your magento config to http-cache-hosts

Run “php bin/magento setup:config:set –http-cache-hosts=”
change the ( to your own IP(xxx.x.x.x)
service varnish restart
service apache2 restart

8. varify varnish is working with magento 2

  • Verify contents in var/page_cache folder is not regenerated (server configured to serve the content from Varnish, once cleared, cache folder (var/page_cache) should always be empty.

Wednesday, 15 March 2017

Second-hand UX

Something that I feel is overlooked by a lot of product designers is the second-hand experience of their product. That is to say, above and beyond the target user, who is affected by the product—and most importantly—what is their experience?
If the UX team has satisfied all the needs and desires of the target user, minimized their pain-points, and maximized their ability to enjoy the most common process flows, that is truly awesome—but how does the experience they design affect that person’s social circle? Do product designers currently see that as a question worth spending additional time and resources to answer?
The classical method of product design is for design considerations to be dictated by our insights regarding the target user, as well as the goals (often monetary goals) of internal stakeholders. But as tech continually permeates our lives in an increasingly personal fashion, I believe the need for second-hand experience analysis will begin to shine through.
Photograph showing a woman texting (target user's experience) being watched by a male companion (second-hand user experience).

The power of shared experiences

The experience of the target user is not isolated from the experience of the indirect user. Whether it happens immediately or eventually, the two experiences affect and influence each other.
The target user, as entranced as they may be by their own experience, will continually receive feedback from others who were witness to this experience and will begin to judge the primary experience not only from their own frame of view but also from feedback received from constituents of their social ecosystem. The final verdict on an experience is often a group effort.
Venn diagram with three circles: left, primary experience, overlaps center (final verdict), which overlaps right (feedback from second-hand users)

The need for second-hand UX

The need for greater focus on second-hand user experience is real. Many existing products already demonstrate a gap in the experience that affects indirect users.
One easy example of this might be the prevalence of texting and how it affects secondary users. What started as a flicker of excitement with the invention of smartphones (even if they were flip phones, sliders, or some other sort of archaic paperweight) has grown into something that has become a contentious social (and sometimes physical) habit.
Whether texting is positive or negative as a whole is a subjective judgement which requires a certain scope to even make a judgement feasible. For example, in a very surface-level, everyday efficiency scope, is texting positive? Probably so, at least for the direct user. But within a different scope, one that perhaps takes a look at the sociological/psychological effects of texting, would you come to the same judgement? Maybe, maybe not, but you’d certainly give it more thought.
Common responses to these deeper-level scopes consider issues such as how mobile phone usage creates a social distance between the primary user and secondary users. The dynamic, generally speaking, encourages less frequent and more shallow interaction between the person using the mobile device and the other people that may be around them. How often do you see people over-indulge in their electronic devices at the expense of paying attention to those around them?
Think back on personal situations where you might have been the secondary user. How did your feelings change towards the primary user? How about toward the product itself?
The smartphone—something that was intended to be a design solution for pain-points of communication efficiency, frequency, and accessibility—brings a complicated dynamic. It has raised questions with philosophical, psychological, and sociological underpinnings that should lead us to question the pros and cons of what I call short-term experience solutions, ones that satisfy the immediate user but don’t necessarily take into consideration the long-term effect these decisions have on the social ecosystem that encompasses the user.
That being said, I’m not here to rag on texting. On the contrary, I am totally addicted to texting and general mobile phone usage, despite the fact that its negative impacts are so apparent to me that I have recently started doing several exercises to try to correct my text neck.
Rather, I’d like to draw attention to the social dynamic that is created by tangible tech, be it a wearable, a mobile phone, a laptop, earbuds, or even a virtual reality headset. Each device, as well as the context it is used in, bears with it a social dynamic. These social dynamics are a much more important part of the experience of a product than the field of UX / product design would demonstrate historically.
I do think that designing for the primary user should be of utmost importance—but I also think product designers need to start valuing how the primary user’s interaction with the product affects their relationship with their social environment.
There is precedent to support an increased focus on second-hand user experience. We’ve read about the social implications of addictive smart-phone usage, the unintended negative interpretations of checking your Apple Watch, and of course the privacy concerns of wearables like Google Glass.
If you somehow think we’ve seen the peak of socially-permeating tech, think again. Technology is only going to continue to penetrate our lives as time passes, further warranting the need for considering second-hand UX.

The big question

This raises the question: When will second-hand UX become an integrated concern within the practice of UX?
Undoubtedly, product designers are concerned to some extent about how their products may affect second-hand users, but how often do we actually involve indirect users in the discovery and validation portions of our design process? To what extent are second-hand users a driving force behind how we generate requirements? (How many times will I say “second-hand”?)
Making this concept of valuing the experience of indirect users a top of mind concern could drastically alter the way UX practitioners do their work.
Just imagine the potential shift in focus for user research. Direct observations of people near someone using their virtual reality / augmented reality headset. Surveys, interviews, and focus groups inquiring about the experience that people had when their friends were using their new smart-watch. The possibilities are vast.
One way to utilize second-hand user research would be to engage existing UX assets, but with a new twist. Instead of traditional personas, we could have second-hand personas that examine the demographics, behaviors, likes and dislikes, proficiencies and deficiencies, and other attributes of the indirect user of a given product / experience. Who is our typical second-hand user? How might we describe them?
Similarly, UX practitioners could start developing second-hand journey maps that divulge the way an indirect user is thinking, feeling, and acting for each action that the primary user takes in their experience with the product. How did you feel as your friend watched a video on their virtual reality headset? What action did you take when your coworker started working next to you with their earbuds in? What were you thinking when your roommate used a voice command on Amazon Echo to lower the song you were listening to?
This shift in focus could open up a whole new realm of UX research and design that could lead to interesting new experiences.
Collaborative mode for VR headsets where multiple people share the same vision? More functionality built into health informatics for sharing data from person-to-person? Socially-contextual settings to limit notifications and keep users engaged in the real people that surround them? Maybe, maybe not. One thing is for certain: The ability to definitively and accurately decide how and when to implement design patterns like these will be dependent on empathizing with indirect users.

Next steps

So why is this important? Why should we care what indirect/second-hand users think or feel?
From a monetary perspective, the answer is simple: Purchase and usage considerations do not end at how the product/service will affect the buyer. Considerations extend into how it will affect the things they care about (which transitively affect them)—most often being their relationship with other people.
From a philosophical perspective, a lack of care about the psychological and sociological toll our products may take on users could drastically alter the concept of a traditional society altogether. It’s better to recognize and reverse potentially harmful design patterns now before habits and cultural beliefs lose sight of social concerns that were once fundamental. Despite popular belief, money and societal good do not have to be mutually exclusive. Let’s start taking second-hand experience into consideration and make it a core part of the way we practice UX.

Alternative content