Google Unveils New Home for Open Source

On the back of Google’s successful open-source projects such as Kubernetes and TensorFlow, it’s no surprise to hear that the Mountain View, California-based company is taking another step into open source.

This time, it’s launching an all-new website dedicated to showcasing all of Google’s open-source projects in one handy URL. Google’s Open Source site is based on the philosophy that everyone benefits from open source, and developers now have another repository to access if they want to collaborate on the creation of new technology.

The projects’ code will still exist on Google’s own self-hosted git service as well as GitHub, yet this new site is going to operate as a central directory for them. Though showing off Google’s projects is the main point of the new site, it’s not its only purpose. Google says it’s also going to use it as a way to give developers a behind-the-scenes look at how the company operates its open-source projects.

According to the announcement on Google’s official Open Source Blog, the company’s open-source protocols are based on many years of experience and lessons its teams have learned along the way. However, the company cautions that developers shouldn’t read their documents as a definitive “how-to” guide, seeing as how there are multiple ways to do open source.

Conceding that its way may not be the way for everyone, the company nonetheless is letting outsiders have a look at its open-source approaches.

The new site currently features 2000 projects, and this list is by no means complete and will continue to grow.

Together with this new site going live comes word that Google is making public a collection of its documents concerning how it handles open source internally. The subjects in the documents cover a range of topics, everything from the particulars of Google’s release processes for its new projects and how to go about submitting patches to other projects, to the company’s policies on dealing with third-party open-source projects that it uses internally.

Google has a long history with utilizing open source for innovation. Think of this site as a way of Google returning the favor to the open-source community. Site visitors can expect to see released code that pushes the industry forward, gives insights into best practices, or is just fun to see.

Google’s already had success with its recent open-source projects. The aforementioned Kubernetes and TensorFlow have grown to where they each have big ecosystems around them, so these new documents are definitely worth a glance, from a developer’s standpoint. If nothing else, checking out the new open-source site will be helpful for other companies that are thinking of releasing their internal code as open source.


How to Succeed With Design Thinking

Design thinking is the idea that we can solve problems by practicing human-centered design—putting people at the centre of the problem solving process.

Core to the idea of design thinking is that we focus on an overall goal, rather than say a specific problem to solve. While it can help us solve some of the world’s most complex problems (think global warming), we can also use it every day in the web industry, to help us solve our own complex issues.

For example, a product manager may come to you and say ‘we need to improve our web traffic this month by 50%’. The traditional way of solving this maybe to increase advertising spend, to run a social campaign, or purely look at methods that are for traffic building.

The design thinking approach to this problem is to ask ‘why?’—maybe the 50% increase in traffic is expected to yield an increase in leads. Well, rather than going down the costly process of paid advertising to boost traffic and leads, maybe a better solution is to improve the conversion rate of the already existing traffic.

How design thinking looks in practice


A great example of design thinking in practice comes from the early days of AirBNB. Very early on, they realised that their apartment listings tended to have poor quality of photos—often from older camera phones. They believed that if more apartments had better photos, they would receive more bookings.

So what did they do? They flew out to New York (where the majority of listings were), rented a camera, visited some users and dramatically improved the photo quality of those listings. Straight away they doubled their weekly revenue, the biggest improvement they’d made in a long time.

How is this design thinking? Well, AirBNB knew that it was impossible in the long term to be able to treat every single user like this and fly to every destination. But, knowing how critical it was, they chose to employ a short term solution that wouldn’t scale, because if it worked, the outcome was overwhelmingly positive for the company.


Another great example of design thinking in practice came from the Nordstrom Innovation Lab. Nordstrom, a top US retailer, hired a team of people to mine data that they gathered from sources like Facebook, Pinterest and Twitter to create curated experiences for customers based off their preferences and in-store activity.

One of the activities that they undertook, was to go into a retail store and create a sunglasses iPad app on-site in the store. Rather than take a typical approach of collect data, design in their offices, and test the product on users, they physically brought designers and developers into their store and setup shop. This allowed them first hand access to real customers (not recruited users to study), and meant that at every step of the way they were able to test with real users. Rather than just the user researchers getting up-close access to customers, project managers and developers also had access and ideas could easily be tested and validated with customers in real-time, as they developed the app.

This ‘lean’ approach is central in design thinking. As with the AirBNB example, this idea doesn’t necessarily scale—not everyone can go on-site and build an app in this method—but Nordstrom used their resources to get close to their customers and to get something built, based on the direct feedback they received. Whether the app worked or not long term, their approach meant that they had something to test much quicker than if they had of taken a more traditional design approach.

‘Wizard of Oz’ Technique

Another great example of design thinking in practice, using a ‘lean’ approach, is the ‘wizard of oz’ technique. The term originates from the field of experimental psychology in the 1980’s. As ‘Universal Methods of Design’ puts it, the Wizard of Oz is “a research experiment in which subjects interact with a computer system that subjects believe to be autonomous, but which is actually being operated or partially operated by an unseen human being.”

It’s so-called because the user or test participant may think they are interacting with a computer or system, while in fact there’s a human ‘behind the curtain’ operating the computer (the operator is ‘the wizard’). While this specific employment of the approach originates in the field of psychology, there are many ways in which we can employ it in our web designs today.

Essentially the idea is for us to test if a feature is worth building, before we build it. This is the same reason we prototype, we want to build something quickly so that we can validate it with users. The ‘Wizard of Oz’ approach is different to prototyping, as prototyping tends to be something we build before we build a real product, whereas the ‘Wizard of Oz’ tends to be more of a minimum viable product (MVP) for an idea. 

So how does that work? Well, the ideas can range from simple to complex. On the simplest level, let’s say you want to add a newsletter to your website. You’ve heard this is a good idea, but maybe you’re worried that you’re going to have to sign up to an email service, like Mailchimp or Campaign Monitor, you’ll need someone to design your newsletter, someone to code it and then someone to create content—could be a costly exercise.

Well, one way of approaching it would be to strip that all back—use a free plan with MailChimp or Campaign Monitor, start with a basic template and focus on the content. However, how we could really strip it back is to use the Wizard of Oz technique—have an email signup and collect emails in a database, not attached to any service. Just collect email addresses to see if there’s actually a desire for this email list. If no-one signs up, you can divert your attention elsewhere. If a few people sign-up, you can manually send them emails and see if it gains traction. If a lot of people sign-up—well maybe you can afford to spend that extra money on implementing the feature properly!

The startup ‘CityPockets’ employed this method to come up with their MVP. In order to validate their idea (collecting users’ coupons for various stores in one central location), they told users to forward them emails so that they could do the sorting out. Rather than use back-end logic to implement this feature, Cheryl, the company’s founder, spent hours manually entering the coupons into a database herself. This meant rather than spending time and money on creating the back-end for her app, she was able to get a working product much sooner by doing some ‘heavy lifting’ herself.

Sure, this idea wouldn’t scale, but it let her find out very quickly what kind of changes she needed to make to her app, and therefore when she did get to creating a back-end, there was a lot less wasted effort.

True design thinking means putting people at the centre of your design experience. While people say they want things, using techniques like the ‘Wizard of Oz’ it’s easier to see if they actually will use the thing that they say they want, and makes it easier for us to design the right things for our customers.

Why design thinking?

As in the examples above, it’s clear that by applying design thinking, we’re solving the real problems of our customers, rather than focusing on business goals exclusively. The idea of a small company with not a huge amount of money flying to New York to take a few photos may not have floated in a lot of corporate board rooms, but there’s no doubt this decision changed the direction of the company. Not everyone can go into stores and build apps on the fly, but adding an email field to collect users’ emails for a particular feature is pretty doable.

Part of the reason this idea of design thinking is so good, is that we can look at problems in a different way—often reframing the problems, where maybe the traditional approach tends to prioritise the wrong things.

It also allows us to be agile and lean. It means that rather than spending a whole lot of time building a product or a website, then launching and seeing what happens, it allows us to build something smaller and launch earlier. Test it, pivot as needed. Analyse as we are building the product, not waiting until the end.

These benefits are endless. A design thinking approach means involving the users in the process. Not only does this provide better solutions, but it means that the users feel part of the process. They feel loved, like someone is actually caring for them. This will cause them to forgive potential issues more readily and in turn become promoters, who will encourage their friends and others to use our products and websites. This effect, is of course more popularly known as the ‘halo effect’.

Another great example is from the financial services company Fidelity . They sent some of their graduates to ‘design school’ to apply design thinking and here’s a quote from what they learnt:

Designs and project plans can…be adjusted or scrapped before the team has spent significant amounts of time and resources polishing a product offering. Perhaps most importantly, this methodology avoids the model of inviting customers to review a mockup website that is more or less fully functional, which leaves customers feeling as if their input is largely an afterthought.

Everyone can be a design thinker

While user experience designers, and indeed other web professionals, should be adept at practicing design thinking skills, design thinking can be practiced by any employees encountering a situation where they need to resolve a problem, not just those with the term ‘designer’ in their job title.

As designers, we have a responsibility to not only practice design thinking ourselves and apply it to problem solving, but to explain to others around us why we make the decisions we do and aid them in practicing similar methods in their work.

How to apply design thinking in web design

Talk to your users

Don’t just ask them questions, observe them. Use data, but make sure you back it up with real world observations and don’t rely on the numbers alone. Bear in mind that data tells us what people are doing, but talking to people tells us ‘why’.

Although, remember, with all of this, we have to remember who we are dealing with when we talk about ‘users’. 100% of users are people. People like you and me who have a lot of inherit biases. That means that it’s built in to us to think in a certain way in certain situations. Even the way we ask a question, can skew the answers in a particular way.

In short, you should 100% listen to people, but be careful what you ask them and the way you ask it!

Test ideas by prototyping, Try the ‘Wizard of Oz’.

Fail early, fail often. Don’t be afraid to try things that don’t necessarily scale. Make sure you’re agile enough to pivot ideas if they aren’t working out. Don’t be worried about perfectionism, just get things done and see if they work.

There’s plenty of tools out there to help us build things quicker than ever before (including pen and paper!) and test out ideas to see what is working, before spending lots of money on a ‘perfect’ product that works great, but nobody needs.

Feedback, feedback, feedback

Note this doesn’t say numbers, numbers, numbers. As leading advertiser Rory Sutherland has said, “as soon as a number becomes a metric, it loses all relevance as a metric”. This is to say that as soon as we become too focused on the one number or the one metric, it’s easy to lose sight of the overall goal.

Make sure you regularly seek feedback on your designs, from users, from analytics and internally as well. As I’ve mentioned throughout the article, there’s no single source of truth for this. Use a collection of all the feedback you can gather to make balanced, well thought out decisions.

Step back and reframe

If it’s not working, try stepping back and reframing the problem. Look at the context of your problem, is there something you’re missing? Make sure and get everyone involved in the solution. Your users, yes, but involve your developers. Involve the receptionist—anyone with a different perspective will have valuable feedback for you.

As I mentioned earlier, designers aren’t the only ones who should be practicing design thinking. In fact, if we try to do it all on our own, we aren’t doing our jobs correctly.


There’s plenty of literature out there on how to practically implement design thinking. The evidence all suggests that employing this new methodology for solving problems, is more creative and more effective than more traditional methods.

(Ref- the design process at Ideo)

As designers, we’re in a position to educate those around us to employ this methodology and lead by practicing it ourselves in our day to day work.

Whether this is in our hands on design skills, like building rapid prototypes, or at a higher level when communicating to our clients and stakeholders, using design thinking we can ensure that we are solving the correct problems and not wasting our time building unnecessary products and websites.


Designing with extreme prejudice

It’s a controversial third rail topic most people acknowledge, but do their best to avoid talking about: classism dominates our lives.

Most people mistakenly believe class is simply about how much money you make. There’s actually two completely separate ingredients at play here.

  1. Economic class. The amount of money you bring in and how you spend that money.
  2. Social class. How respectable and educated you are, the family you come from and the rules (e.g. values, beliefs, morals, etc.) you follow.

Changing your economic class is easy. Just make more money and spend it on the right things.

Social class is much more difficult to change. That’s because it’s based almost entirely on culture.

The best designers work with this prejudice

Social class is a classic example of In-group favoritism. If you’re part of the group you’re accepted and welcomed as part of the group. As people, we have a tendency to favor our own groups over everyone else.

We look down on those who aren’t part of our groups, treating those who aren’t like us as outsiders.

Every group has its own set of rules which typically includes…

  • Values and beliefs
  • Interests
  • Imagery and presentation
  • Colors and designs
  • Social norms

This isn’t everything.

Each class or group has hundreds of rules with specific right and wrong answers for each. These details create a group or class identity. “If you’re one of us you’ll do what we do.”

Your designs should cater to these details

Wait a minute!

Why do we need prejudice in our designs? Why can’t we design something good that’s free from all bias?

Because “good” is subjective.

Don’t misunderstand; I’m not suggesting you should run out and do something unethical. I’m recommending that you work within the framework (e.g. values, expectations, etc.) established by the group you’re designing for.

Take these four sites for example:

Craigslist is an ugly site. But they serve 60 million people in the US alone, making 381 million dollars in 2015!

Hacker News isn’t beautiful but it’s a tight knit community, serving 200K to 300K users per day.

The Drudge Report is really ugly. Yet, they manage to generate 300K unique visits per day making its sole owner, Matt Drudge, more than a million dollars per year. It’s also one of the best designed sites on the internet according to Jason Fried.

4Chan is a passionate community of gamers. It’s a top 500 site with more than 98 million active users who are intensely loyal.

Did you see it?

The theme with these sites?

They’re collectively viewed as “ugly”. They reject modern design principles, make things more difficult for users and aren’t really intuitive to use. Yet these sites are all extremely popular.

So what rules are these communities following?

  • Form follows function
  • Utility > aesthetics
  • Knowledge > emotion
  • Pretty may be viewed as “selling out”

How do I know?


Their readers were developers, designers, and techies. People who believe form should follow function. Somewhere along the line Digg lost sight of that.

They redesigned their site and changed their logo, losing 35 percent of their audience almost overnight. 

What about luxury car manufacturers?

Have you ever noticed that luxury products – cars, perfume, clothing, etc. Seem to use less words, but say more with their designs and marketing?

That’s no accident.

Presentation is an important upper class value.

They get their message across with imagery and presentation, using their design to speak directly to their customers – the less words used, the better.

What rules are these sites following?

  • Presentation > quality
  • Quality is assumed
  • History, the past impacts the future
  • They’re part of an elite/exclusive club

This makes sense when you realize the rich believe they’re better, smarter and more virtuous than everyone else. The designers who created these sites would probably disagree with that. 

They still worked within that prejudice to create something that serves their clients.

Here’s the part average designers miss

Average designers create designs based on their worldview and what they want. They focus on what feels good (to them), works best (for them), what looks good (to them). Often times they completely neglect the needs of the people they’re designing for.

Which almost always guarantees an unhappy client.

The best designers use their client’s prejudice to meet the wants and needs of everyone involved – clients, customers, partners, etc.

So how do you use classism in your designs?

First, start with your non-negotiable anchor points. Have a clear set of guidelines, know yourself. Follow your conscience.

Are you comfortable designing something, immoral or unethical? Are you comfortable creating something for someone with values and beliefs you find controversial, disgusting or extreme?

Where is your line? How will you handle it when others ask you to cross that line? Plan your course of action ahead of time.

Second, do your very best to understand those you’re designing for.

Every group believes other groups are inferior. The upper class looks down on the wealthy. Middle class workers resent upper and lower classes. Vegans, vegetarians and meat eaters resent each other.

Remember when I mentioned each group comes with its own set of rules? Take the time to learn those rules. Learn about their expectations regarding…

  • Values and beliefs
  • Interests
  • Imagery and presentation
  • Colors and designs
  • Social norms
  • Language, jargon and figures of speech

Learning about these details creates a design framework. Believe it or not, these limitations will improve your designs. But only if you’re aware of them.

Let’s say you’re designing for a group of developers. They believe form follows function, so using a beautiful cursive font like Wahhabi Script may not be a great idea.

Third, talk to people in each group.   

What does your client stand for? What do their customers expect? Take some time and interview them. Learn about their rules and expectations. Find ways to bridge any potential conflicts in your designs.

Finally, when you’re ready, design.

Create something that conforms to their worldview. Your job isn’t to change their minds, it’s to serve. Meet them where they are and you may get an opportunity to change hearts and minds.

Use force or coercion to get your way and rejection is virtually guaranteed. Average designers push for what they want. “I’m the expert!” they tell themselves. 

I don’t use classism in my designs and I do just fine

Ah, but you do.

It’s a foundational part of life. Standing for this excludes that. Brutalism can’t be Modernism, in the same way at the same time.

When you design, you make a choice.

Average designers are okay with mediocre results. The client’s happy so I’m happy.

Elite designers focus on outcomes. “My work changed the way customers looked at your business. My work changed an industry, product or service.”

Classism is the last socially acceptable prejudice

Each class or group has a list of rules with specific right and wrong answers for each. These details create a group or class identity. “If you’re one of us you’ll do what we do.” It’s certainly not ideal, but it is something we have to deal with as designers.

Want to become an elite, sought after designer?

Start with understanding and acceptance. Work to accept people as they are, respecting their boundaries, rules and expectations. Meet them where they are and you’ll find their prejudice stops mattering.


Vivaldi Browser’s New Feature Makes History

Vivaldi Browser, the brainchild of Opera co-founder Jon von Tetzchner, is launching a new feature that’s downright historic. Today, the browser reveals its History feature, which provides users with detailed insight into their browsing behavior.

This isn’t just your average history record. Instead of users simply looking at what websites they visited—line-by-line and row-by-row, like other browsers—Vivaldi gives them visual clues instead.

According to the company’s latest press release, the new feature means users can conduct a full-fledged analysis of their browsing patterns, all supported by stats and a visually friendly interface.

As von Tetzchner puts it:

Instead of having to scroll through hundreds of lines, Vivaldi gives a comprehensive overview of history, presented in a visual way. This lets our users analyze their online activity and helps them find what they are looking for.

So say goodbye to the days of monotonously scanning your browser’s history until you finally find what you’ve been looking for. This new feature lets Vivaldi’s users efficiently locate what they’re searching for by allowing quick scans through visited sites and offering helpful hints when searching for older URLs.

The end result is a better user experience.

Users will also be pleasantly surprised by the use of a calendar view to present all this history data. Changing to a calendar view provides users with a more user-friendly interface that’s easier to look through than having to scan line-by-line, as with traditional history views.

In addition, a color-coded heat map and graphs to the right of the calendar give users a further layer of depth to their history browsing. Key browsing trends and the user’s online-activity peak round out the data that’s available for analysis.

These changes allow users to locate previously visited webpages even if they fail to remember the exact search term. That’s because this new feature puts searches in context. For instance, it will help users find an old URL if they see it show up on a specific day when they were more active on the web.

Users also have full control over their history search: They’re able to narrow down their search to a range of dates from the monthly view or just from the Day Picker Calendar. Just for good measure, users also have the power to filter their search results by title, date, views and addresses.

Perhaps the best part of this update is the emphasis on privacy rights. Vivaldi never collects the user’s history data because all of this data is local to a user’s browser.

Using the history feature is straightforward. Vivaldi has incorporated History into the browser’s Side Panel, so simply clicking on the History icon will show the user the list of previously visited URLs, right next to the open sites. This design allows users to efficiently search through their history without having to leave their current page.


15 Psychology Hacks that Boost UX

There loads of things that subconsciously sway our decision making everyday, subtle psychological influences working away in the background. Psychology affects your users’ experience. It has an unavoidable knock on effect on your conversion rates. It’s definitely time to upgrade your toolkit so you too can boost conversions on your landing page… Let’s go!

1. “Encapsulate” Key Areas of Your Page

Envelop and surround things you want to retain people’s attention, it stops attention wandering elsewhere on the page so quickly.

2. Exploit Color and Contrast

People emotionally react to color, so choose an appropriate palette. Use contrast to make your UVP and CTA’s jump off the page at the viewer. The “Von Restorff effect” says we remember stuff that sticks out, that is different so let’s use that to our advantage to ramp up conversion.

VWO uses color contrast to really draw your eye to the request a demo button.

3. Use White Space

Maximize usability by minimizing cognitive load. Whitespace isn’t just an aesthetic choice, it makes any user interface easier to digest. Use “whitespace to give visual breathing room” to important elements of your page.

4. Ensure Consistency

Earn the trust of your target audience. Give them the comfort they need, reassure them and allay any potential anxiety by providing a consistent user experience. Advertising, messaging, customer service (everything!) all needs to seamlessly come together to provide a united and trustworthy experience for highest conversion.

5. Connect with Pictures

We all recall images better than words. For a better user experience (and the conversion boost that comes with it!) incorporate relevant, emotive pictures into your landing page to give context and aid recall.

6. The Primacy Effect

…is the name given to the principle that describes people being more likely to remember things at the beginning of a list. There is a subconscious emphasis placed on things we hear or see first—capitalise on this and create killer headlines!

Duolingo’s page begins with a short, snappy, memorable headline.

7. The Recency Effect

Is another interesting aspect of how positioning of information on a page is crucial. People remember what came last in a sequence more easily too.  Make sure you end a page on something you want to stick with your prospect like your USP.

Duolingo’s landing page finishes up with a concise call to action that echoes the headline.

8. Repetition, Repetition, Repetition

Ok so we remember the first and last things on a landing page more easily…but what about all that (quite frankly important!) stuff in the middle?! It’s a good idea to reiterate important information throughout a landing page to really drive home the message.

Repetition! Duolingo reinforces their messaging throughout their landing page.

9. Leverage Social Proof

People are complex social creatures, we all want to fit in. When we see other people doing something, our assumption is that that must be the right thing to do…so we want to do it too! Use strong, sincere testimonials (with images!) on your landing page to boost conversion.

10. Show Authority

Any well known brands or businesses use your product? Get some logos up on show to draw attention to how popular and credible your product is. People respect authority, use it to your advantage to encourage users to convert.

Trusted Housesitters leverage social proof using Trustpilot & demonstrate authority showing logos and awards.

11. Fear of Missing Out

People hate to miss out. They hate missing out far more than they like to gain stuff it turns out. Make it really clear to your potential users what they will lose out on if they don’t get on board. (Don’t be mean though—no one likes cold hard scare tactics!)

12. Show Urgency and Scarcity

Obvious as it seems, scarcity sells. Impose limited availability on your offering or a time limit on purchasing. Perhaps showcase the number of something sold or the decreasing number left available to convey real urgency and encourage conversions.

Amazon draws your attention with red text to highlight when there’s only a small number of something left in stock.

13. Inspire Reciprocity

Your user is far more likely to give of theirs in return for something of value. You want their details? Trade something for it and use it as an opportunity to exceed expectations.

14. Tell a Story

There is power in storytelling. Is a feature of every culture and people remember stories up to 22 times more than facts alone. Use the art of storytelling to engage prospects and trigger emotion. Great text and relevant images all help your message to resonate with your advantage and aid conversion.

15. Give something away for free

Everyone loves freebies! Giving away a sneak peek or trial of your product or service helps remove any anxiety about commitment to something users might not find they get on well with. Try before you buy type offers instil trust and provide good UX – win win!

Spotify offers a free 30 day trial of it’s Premium Subscription to tempt you in.

Top performing landing pages apply combinations of the techniques described above to connect with their audience—no one aspect alone is the holy grail of conversion. Make it your mission to find what works well for your users and your product through ongoing testing and iteration—good luck!


In Defense of the Jetpack WordPress Plugin

The Jetpack WordPress plugin has seen its share of drama over the years. Some folks argue that it’s a burden on site resources, while others can’t imagine running a website without it. We’re on the side of endorsing Jetpack, and we’ll explain the arguments below. Not only that, but many experts state that WordPress wouldn’t be remotely popular if it weren’t…. Continue Reading

The post In Defense of the Jetpack WordPress Plugin is written by Brenda Barron and appeared first on WPKube.

How to Sell Games on the Web

The first step to getting famous as a video game studio is to make a great game. The second step is to sell the darned thing to a whole lot of people. That is, of course, easier said than done. It’s not enough to throw the game on Steam Greenlight and hope for the best. You have to get people excited. You need hype.

There’s a lot that goes into marketing a game, but this is WDD, so we’re going to focus on one thing: video game websites. Specifically, we’re going to focus on sites that market games to new players. We’ll go over the current game site design trends, general tips for making your own, and some UX concerns that may arise.

I won’t be addressing community sites or forums, video game blogs, gamer social networks or ranking sites, clan websites, or any of the other kinds of game-related sites, because I just don’t have the space. All of those probably deserve their own articles.

The trends

Once upon a time, most video game sites, and indeed most sites, looked a little bit like this:

That’s the site for Planeshift, an ongoing open source MMO project. Okay, I feel a little bad about picking on an OSS project, but theirs was the only site I could think of that still looks like that. And still uses tables for layout.

Their site reflects the product, really: it’s old school. You have to type to talk to NPCs.

Throughout the early 00s, a lot of game sites stayed like this, while others experimented with various trends, most of which incorporated elements of the game’s own UI or branding as part of the website’s UI. There were also, of course, plenty of Flash-based sites meant to reflect the dynamic experience of playing video games as much as possible. (Many of these experiments served their purpose, and have rightly died off. Thus, I have no screen shots.)

In the past few years, sites for marketing video games have started to fall into one really predictable pattern, with most of them adopting the full-screen-section-based-landing-page style.

We need a shorter name for that.

This style is used consistently across companies large and small, it’s used for games from different countries, and it’s used for basically every game genre. It is characterized by the full-screen focus, lots of huge images, some video, and occasionally parallax effects.

Here’s a small sampling of what I mean:

And here are a couple of examples with parallax:

Even with this same-feeling style of design, you can differentiate your site by working elements of the game’s UI and branding into your site’s UI. Have a look at Dungeons & Dragons Online’s website:

Now is this trend a good or bad thing? As usual, I am of the opinion that if it works, if it’s selling your product well, then it’s working as intended. As a customer (read: as a huge nerd), I don’t need the site to be super original, I need it to tell me what I want to know about the game.

Not everyone does things the same way, though. Some sites throw you straight into the community. Here, Guild Wars 2 is banking on its brand recognition. If you don’t know what it is, you’re probably not that interested. This is a bold strategy, but I wouldn’t recommend it for everyone.

Some other game sites have kept to the old “Gaming Clan” look. Remember when every Photoshop-owning gamer used to make their own “clan website template”? Please tell me I’m not the only one who noticed this trend. Heck, some people are still doing it.

How to sell your game: show off the experience

Okay, so you’ve settled on a landing-page-style template for your site, and you want to sell your game. How do we do that? Well, games are all about the experience. You have to sell the experience that your game provides to the people who will like it best. This is the one big thing. If you take nothing else away from the article, this is what you need to know.

People who play video games tend to play them quite a bit. Over time, they develop a taste for the kinds of experiences that they enjoy the most. (Warning: Sweeping generalizations to follow…) People who play racing games love the illusion of speed, and the challenge of out-performing a smart opponent, whether AI or human. People who play multi-player shooters love that competitive challenge, but they might prefer a slower, more tactical pace, or they might want a run-and-gun game.

People who play single player and co-op shooters want some challenge, but they mostly want to mow down hordes of virtual enemies, whether alone or with their friends. People who play strategy games want to out-think their opponents on what might as well a much more complicated chess board.

You have to sell the experience that your game provides to the people who will like it best

People who play RPGs might be looking for an action game with a good story, or a world where they can decide what happens to the fate of civilizations, a dating simulator, or some combination of all three (cough Mass Effect cough). People who play horror games want to be scared and challenged at the same time.

Then there are the settings: urban, rural, sci-fi, wild west, and the list goes on for a really long time. People want to know these things. Heck, before I pick up an MMO, I want to know if I can have more than one hotbar.

The point is that you can’t just say, “Our game is totally fun!”, put in a couple of screenshots, and leave it at that. You need to show them, in detail, exactly what kind of experience they’ll be getting. Gamers have been buying games based on hope for a while now, and many of them have been burned before.

The smart game developers give as much information about the game as they can without giving out, say, story spoilers. The more accurately the marketing materials resemble the final product, the better. Every year there are scandals about how games were completely misrepresented before they came out, and that hurts sales.

You might be trying to surprise your players, but more often than not, developers who hide all the details are just hiding a bad or unfinished game. Buying anything is always a bit of a gamble, but right now, finding a truly good game that actually meets the marketing department’s claims feels a bit like winning the lottery. This should not be so.

What to showcase

Start with the gameplay. This is the experience. This is also one of the few times when I’ll say that video is almost necessary on a website. Still images don’t convey enough information about how it feels to play a game.

Heck, even video tends to fall very short, but until we can play demos right on your site, it’s the best we’ve got. Don’t tell them how great the game is. Let them feel it for themselves, as much as possible.

The 2016 release of Doom did this very well. Go to the website for Doom (Fair warning: it’s Doom. There’s virtual gore.), and you’ll see that most of the pages are light on text, heavy on background video. If a picture is worth a thousand words, short videos at 30-60 FPS are like one heck of a novel.

Next, you’ll want to include a clear and immediately available price, or price table. Be very clear about what your buyers get for what price. Some companies try to deliberately make this confusing, and it backfires, all the time.

Get people talking about your game. Be sure to include links to any forums, Facebook pages, or Twitter accounts where people can talk with you about your game, whether it’s out yet or not. People talking to their friends is where a lot of hype comes from

If your game is lore and story-heavy, it can help to include a beginner’s introduction to the story and setting. Just don’t fall into the trap of trying to make the lore into your marketing material. Jumping feet first into a whole new world is a big deal, and if you start throwing too many fantasy names at players who haven’t even bought the game yet, that could backfire. Put some basic lore on the site, but not on the home page.

UX concerns

Selling a game is a bit rough, because in order to properly showcase a game’s experience, you need a fair bit of visual material to get the point across. On the other hand, people with bad Internet play video games too. Just make sure to optimize your video and images as much as possible. Use responsive images, and have the video available in multiple qualities.

And though you might be tempted to animate your UI a lot, like in the days of Flash, I’d keep that to a bare minimum. The sheer amount of visual media will already be hard on some people’s connections. Extraneous UI animation just adds to that burden.


The sites that sell me on a game are the sites that tell me what I need to know, not what they think I want to hear. This is true of all websites in general, but remember that gamers are often far picker than average consumers.

And right now, some simple clarity and honesty is all you need to set yourself apart from, and morally above some AAA game developers. This is not a great state of affairs, but you could make it work for you, by being better than them.


Popular design news of the week: March 20, 2017 – March 26, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Bored with Hamburger Menu, Time to Try these Alternatives


Web Design Freebies: The Ultimate List for 2017


Best Design Advice no One Ever Gave Me


9 Simple Tips for Designing a Successful Logo


The Cost of Bad Design


Anybody Can Build an App (or Bots) Easily with this New Coding Site


8 CSS Tricks You Never Use


Got 15 Minutes and Want to Learn Git?


Meet the Next Smashing Magazine


ColorWare’s Retro-styled iPhone 7 Plus is Beautiful and Expensive


Icons for Change — by Noun Project


3 Things Design Researchers Can Learn from Online Dating


Screenshot? Ugh, You’re Doing It wrong!


Which Responsive Design Framework is Best? Of Course, it Depends.


Essential Web Design Software for Beginners: Tools of the Trade


Paper Airplane Icons


10 of the Best Notebooks for Designers


The Ultimate Guide to Keeping a Steady Stream of Web Design Clients


Text Effects with CSS


Google Turns Search into an App Launcher (and It’s a Pretty Big Deal)


8 Ways to Improve your Website’s UX


Google Maps Can Now Save your Parking Spot


The 10 Best Newsletters Web Designers & Developers Should Subscribe to


How to Successfully Design for the Confusing Way People Buy


The Three Hour Brand Sprint


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.


Comics of the week #384

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

The Lesson

Fair is Fair


Don’t Judge a Book by its Cover

Can you relate to these situations? Please share your funny stories and comments below…


A Beginner’s Guide to Designing Conversational Interfaces

Whether you love them or hate them, conversational interfaces have started making a significant impact in the business/brand communication landscape. Though many businesses have realized that conversational interfaces are likely to cause a major shift in brand communication there are many who are skeptical about CIs.  CIs have limitations, but they are here to stay and they will get better and more advanced, and that the current issues will be resolved over time. 

These limitations should not stop businesses from leveraging CIs for business growth as history has proven time and again that failing to adapt to market changes has always cost businesses heavily.

What is a CI?

Conversational Interfaces(or CIs) are currently of two types: Chatbots and Virtual Assistants (Siri, Google Assistant etc.) but, arguably, conversational websites like Adrian Zumbrunnen and can also be considered conversational interfaces. 

CI design demands a fundamental shift in approach to design–minimal visual design and more use of words; content, presentation and conversation flow are the primary UI elements of a CI design. As Matty Mariansky, Co-founder of Meekan, puts it “Content becomes the Style”. This is the fundamental CI design principle that the designers have to adopt to take a leap.

Virtual assistants are built by tech giants like Google, Apple, Microsoft, Samsung etc. Chatbots and conversational websites are the CIs that are usually built by businesses. So, the dos and don’ts of CI design discussed below are with respect to chatbots and conversational websites/apps only.

There are two major types of chatbots: rule-based chatbots (programmed to give canned responses), and AI (Artificial Intelligence) based chatbots. Further, they can be classified into text-based and voice-controlled chatbots. Since most of the chatbots have some limitations and AI/machine learning/natural language processing technologies still have to get advanced enough to enable a ‘perfect’ human-like conversation—though many AI-based Chatbots are reasonably good at it—we need to follow certain design guidelines/principles while building a Chatbot in order to ensure friction-less communication.

Resources, Guidelines and Design Tips

Messaging/Chat Platform Documentation

As you may know Chatbots usually live in popular messaging products like Facebook messenger, Telegram, Slack, KiK, Slack, Skype, SMS etc but they can also be integrated into your website or app.

You choose messaging platform(s) on which your target audience or potential/existing customer are active. Platform-wise documentation:

Expect more messaging platforms to offer Chatbot APIs in the future.

Chatbot Building Services

Chatbots have minimal UI and thus designers need not worry too much about the design or visual aspect, what is more important is the construction of the right conversational flow. If you get the flow chart right, half of the job is done.

There are plenty of Chatbot building services which enable non-technical people to build simple chatbots. If you are a small business owner or a designer with limited or no coding knowledge, these services can really come in handy. For example Chatfuel, a bot builder for Facebook Messenger offers a free service, providing a drag-and-drop interface and no coding knowledge is required.

There are many other similar services including Manychat, Massively, Motion.Ai, Octane.Ai, AI Buddy, AI Pioneer, Rebot.Me, Pandorabots, Second Ego, Zabaware, Botego, Infs Intellectual Agents, Personality Forge, Do you Dream Up, BotLibre, BotPlatform, Flow Xo, gupshup, Chatbot4u and more.

If you intend to build a more advanced bot, you may consider the following services: – This powerful and robust platform, which was recently acquired by Google, can help you build simple to advanced conversational interfaces. – This is another comprehensive, extensible natural language platform, owned by Facebook, which enables you to build text-based and also voice-controlled chatbots which can understand humans.

Bot Framework – Microsoft’s Bot Framework enables you to build cross-platform, intelligent bots which can be integrated to any messaging or chat app that supports Chatbot Integration and they can also be integrated into your website, app or even office 365 mail.

IBM Watson – Another great platform owned by another tech giant—IBM—helps you to build Chatbots that understand natural language.

Other Important Resources

Botwiki – This is an ultimate resource to find all information related to bots including Bots directory, tutorials, articles, tools, events and more.

Twine – Twine is a great tool that will help you to construct conversational flow. It enables you to create non-linear, interactive text scripts and conversational flow.

Botkit – undoubtedly a great resource, it is a popular open-source toolkit that contains ready-made code and commands which enable you to create Chatbots for Slack and other messaging platforms.

Botframe – It is a cool and user-friendly Prototyping tool that helps you to simulate conversations. 

Superscript – A dialog system and bot engine which is extensible and designed to work with other AI Frameworks such as, IBM Watson, etc. It helps you build Chatbots that can have human-like conversations.

qTypes – A comprehensive library of defined question formats and a how to answer/respond guide.

Normalizer – this app processes user input and make it understandable for bots.

CI Dos and Don’ts


Defining the purpose of the CI/Chatbot is first important step. What customer problem will it solve efficiently? How will it benefit the target audience and you?

Visual Design Vs. Content

As discussed, CI is more about content and less about visual design. So, the focus should be less about the look and feel and more about content.

Conversation Flow Chart

The key to success is in getting the conversational flow right. Remember, the major objective of conversational interface is to minimize user’s effort to communicate with the system—so, the challenge is to anticipate users’ needs and provide the right solutions/answers with minimum user input and stored information. Conversation flow chart is the major component of CI. 

Draft a set of questions that your bot should be capable of answering—those relevant questions which the user is likely to ask or should ask to get a prompt, canned response that will take the conversation forward and keep it on-track. Use qTypes (mentioned above) for Q&A drafting. Your bot should be taught to distinguish and understand different types of questions. qTypes can be leveraged to make your bot give prompt replies to standard questions.

Great Start

Unlike GUI, CI doesn’t have interactive elements which the user is usually familiar with, like the buttons (though minimal use of buttons is recommended—explained below), menu/drop-downs etc. In case of CI, a user usually either views a blank screen or no visuals at all (eg. Amazon Echo), so it is important to guide the user promptly to start the conversation by telling them to how/where to start and how the Chatbot/CI can help them.

Being Concise and Succinct

Avoid giving too much information in one go. Open-ended questions should be avoided and clear options should be provided so that the conversation remains objective and it does not go off-track.

Do not provide too much information and multiple options in one go. 

Step by Step

Request information from the user or ask questions one by one. Once you get the right information, proceed to the next thing.

Clarity and Confirmation

At every stage of the conversation, make sure that your user understands the conversational flow. Keep the user informed about the tasks carried out and also make sure that the right information has been collected from the user at every stage. Always repeat and get a confirmation from user every time they provide an input.

If a user input is incorrect, make the user clearly understand what went wrong and what they are supposed to input instead.   

Using Buttons and Clear CTAs

We discussed providing clear options/CTAs so that the conversation remains on-track and the use of buttons is a great way to ensure clarity, as users know what to expect at every stage, and also buttons reduce typing (and typos); thus, buttons minimize friction. Normalizer (mentioned above) also helps you to tackle typo issues.

Human Touch

Not only the flow of the conversation is important, it is also important to make the conversation sound natural, maintain continuity, and avoid bringing different topics together into the conversation. Maintaining a friendly tone and picking the conversation from where it was left during the previous visit are some of the things that can make the user feel important. Personalization is also a key aspect of adding a personal touch to the conversation. 

Do provide timely suggestions or guidance to the user whenever required. For example, sharing a link to the FAQ page at the right time may be of great help to the user. The user might also appreciate it if you provide alternate solutions or recommendations.

Making non-lexical sounds like oh, hmm, uh etc during conversation also make the conversation sound natural. 

Giving a funny reply or cracking a light joke when the user tries to take the conversation off-track (e.g. by asking irrelevant questions) also works and makes the conversation sound very natural. Timely humor always uplifts the mood. Rude users can also be tackled with funny, witty responses.

Use of Animation/Graphics

In case of text-based chatbots, clever and timely use of animation spices up the conversation and brings a feel-good factor into it.

In-built Channel to Escalate Unresolved Issues

As we discussed earlier, most of the chatbots are rule-based and at times may not be able to resolve complex customer issues – so, there should be an escalation channel in standby mode through which the chatbot can refer or escalate unresolved issues to your customer support team for human assistance.

Exit Option

At some point in time during the conversation the user may want to end the conversation and contact you through other modes of communication, give the user the option to exit the conversation and once the user exits you can display your email and/or phone number.

The Challenge of CI

Most of the Chatbots/CIs today have certain limitations and they don’t have human-like conversations perfectly ( but many AI-based Chatbots are reasonably good at it). The major challenge yet to be tackled perfectly is natural-language processing – typos and grammatical errors are common in human conversation (both oral and written) – short forms, slang, and sounds are also often used in conversations. Apps like normalizer help us to tackle this issue to an extent but gaps always remain. 

In the near future, continuous advancement in NLP/machine learning/artificial intelligence technologies will fill this gap and we say with confidence that future AI-powered chatbots will have human-like conversation perfectly. Until then, play by the chatbot design rules to ensure successful chatbot design and deployment which in turn ensures successful customer engagement.