Upstairs Stories » Pixelgrade https://pixelgrade.com/upstairs/ A place of discovery, learning, and meaningful connections built around creating beautiful and successful websites for positive impact. Wed, 08 Jun 2022 08:59:42 +0000 en-US hourly 1 https://pixelgrade.com/wp-content/uploads/2016/11/pixelgrade_favicon2-1-50x50.png Stories to Imagine your website - Pixelgrade Upstairs https://pixelgrade.com/upstairs/about/craft-your-website/imagine/ 32 32 Can a niche WordPress theme help you build a unique website? https://pixelgrade.com/upstairs/unique-website-wordpress-theme/ https://pixelgrade.com/upstairs/unique-website-wordpress-theme/#comments Thu, 09 Sep 2021 13:48:19 +0000 https://pixelgrade.com/?p=126785 There's more behind a WordPress theme's demo, and it's time for you to glue the pieces together to make the best decision.

The post Can a niche WordPress theme help you build a unique website? appeared first on Pixelgrade.

]]>
One of the concerns we frequently hear during conversations with customers and potential buyers of WordPress themes is somewhere along these lines: I don’t want a website that looks like others. While this threat is valid in many regards (we could debate on another occasion), the reality is far more complex.

Anyone who plans to build a website for his products or services aims for differentiation. We, as human beings, strive to feel unique. In so many senses, we are. There are plenty of nuances: from our culture to our backgrounds, from our experiences to our families, from our way of looking at the world to our approach to raising kids. Beauty lies, indeed, in diversity.

In 1980, Snyder & Fromkin, two writers and psychologists whose names have an echo among folks interested in the concept of uniqueness(they even invented a scale for measuring it), came up with something labeled as The Theory of Uniqueness.

Uniqueness theory deals with people’s emotional and behavioral reactions to information about their similarity to others. According to the theory, people find high levels of similarity and dissimilarity unpleasant and therefore seek to be moderately distinct from others. via

We tend to compare ourselves with others based on various attributes, such as personality traits, status, even opinions, and physical characteristics.

Sometimes, if we feel too alike in multiple areas, we experience threatening. We need to tango between being somehow similar, which comes with a comforting feeling of familiarity as well as being distinct, making us feel special.

This need translates as well in the digital realm. Each picture we share, article we publish, or Youtube video we distribute is a means to put ourselves out there to showcase our unique experiences, perspectives, or simply the things that match who we are. 

Of course, all of these taken individually are not unique. Many other people went to the exact place, read the same posts, or listened to the same music. However, we experience them differently. It’s almost impossible to grasp precisely, in the same way, our adventures or interests; therefore, we distinguish ourselves from the pack.

The same is applied when it comes to building a website for yourself or your business. You look around at various examples, create a mental list of the elements, colors, shapes, and ideas from all over the Internet and map out an image of what might make you stand out. 

One of the main challenges is that, at least with WordPress, the search begins with finding a theme that serves your vision.

How can something prebuilt (that many other people buy) make you feel special and get the right kind of attention?

Yes, it might check many if not all the boxes you have in mind, but the challenge still stands—can something predesigned make you shine?

Before jumping to specific examples of businesses from the same industry that have websites made with the same WordPress theme but look highly different (thus, your uniqueness is safe and sound), let me put some ducks in a row within the WordPress ecosystem. It’s essential to have a broader understanding to make the best decisions.

🦆 WordPress theme demos are a blessing and a curse

Some time ago, we ran several customer interview sessions. For a few months, we scheduled calls to determine their decision process when choosing a WordPress theme.

We had our fair share of data gathered along the way, our gut feeling was sharp, but it felt like a wise idea to find out their truth.

During the conversations, most of our customers were loud and clear that the demo highly influenced their final decision. They looked at the demo first, then the features and the price. One crucial need they wanted to fulfill was finding a theme demo as close as possible to their desired outcome. Folks already had in mind a crystal clear result. If the demo was too far from what they planned to achieve, they would have to dig deeper.

There was a catch. Looking at the demo was the equivalent of I want it exactly the same. Which, I admit, can feel honorable. We managed to match our product precisely with the needs of our customers, but it’s not cool at all mainly because the demo is, well, just a demo.

We thought people would treat it like a canvas, a starting point to get going with ease. We knew that we offered far more and expected customers to take advantage of this creative freedom. We built a playground to put together a website that made them stand out from the crowd. 

It turned out customers did not have the time, energy, or mental bandwidth to imagine things. They wanted the dish already cooked, not just the ingredients. On top of that, they aimed for something unique, special, built for them. Oh well, we felt like complexity was only increasing.

The apparent conclusion seems to be that having as many ready-made dishes available (as in the case of multipurpose WordPress themes) is the answer to achieving uniqueness, right? Not quite.

We designed a container with everything you need to create and run a website safely and efficiently.


🦆🦆 Niche WordPress themes are the real solution

There’s no news that we’ve been creating WordPress themes that solve particular pains. We’ve been believers in developing products for specific niches that have the power to help creatives (food bloggers, travelers, photographers, videographers, small business owners, etc.) get the job done and focus on what they love most.

We created Rosa2 for restaurants and coffee shops. We developed features that bring real added value for those running a bistro, a taverna, a gourmet family business, you name it. We designed a menu that’s easy to create, highlights the best dishes by the blink of an eye, and does not require effort to maintain it in the long haul. The same is valid for a handy reservation form in tune with the overall visual mojo of the theme. Or the stylization of the WooCommerce add-on to provide a coherent digital experience if you plan on selling online.

We designed a container with everything you need to create and run a website safely and efficiently. Internally, we refer to this approach as Decisions, not options. It is our mantra in everything we build.

Of course, choosing a multipurpose theme (aka one that claims to fit almost any need) can seem like the best option if you want to be truly unique. Since it’s adaptable to nearly anything and you can cherry-pick what you like from each niche, you surely have the best chances of making it your own, right?

Every business has its own branding, font family, color palette, storytelling, logo, and photos that create its unique personality and style.

The problem is that when you buy something that can do “everything,” it almost always means that it can do most things average. It’s a hustle to get it to work and navigate through the multitude of settings and options that you need to dial up and down. A job surely not pleasant nor easy if you don’t have solid design or coding skills.

Here’s an example—think about a swiss knife. It can be many things: a knife, screwdriver, can opener, bottle opener, scissor, and so on. So, how come we don’t just have one around the house and get rid of those many other items it replaces? I think it’s because, although it can do a lot of things, bringing it to work is not easy (how many of us lost fingernails trying to pull out the knife?) and the way it’s built (thick, not ergonomic, small for some jobs but too big for others) makes doing a single task more complicated.

The same is true with themes that promise it all. Since they want to please everyone, they do it at the expense of your time and frustration for how complicated it is to maneuver and get it to simply work.

You could say that too many people using the same niche theme (like Rosa2—our restaurant WordPress theme) will lead to similar websites. In the end, there are around 14K+ folks around the world who spent their money on this WordPress product alone.

How could they even possibly differentiate themselves? It’s the same chassis that supports everything. How many times can you reimagine it?

Well, I would dare to say that such a perspective does not reflect reality.

On the one hand, every business has its own branding, font family, color palette, storytelling, logo, and photos that create its unique personality and style. You cannot (and should not) copycat others, nor can you aim to achieve the same look and feel. It’s just a useless concern to carry on your chest. Let it go.

On the other one, who’s to say that you need to fit within the bounds of its initial layout? We noticed first-hand how customers take Rosa2 to the next level and make it shine on their terms. Since the theme is built on the new block editor, the freedom that comes with that demonstrated that people can constantly surprise us with the combination of blocks used on their website.

With these two takeaways in mind, I want to walk you through a few drooling food businesses within the same industry—restaurants. All of them use Rosa2, our flagship product, to present their work, products, services, philosophy, and team in a unique way.

They all started from the same demo and niche product and made a little extra effort to detach from it and adjust the WordPress theme to their personality and context.

It’s not about custom work, hiring designers or developers, nor it’s about spending countless hours in forums about website creation. All you will see it’s just a combination of the tools we offered out of the box and their mojo added into the mix.

You are a drop in the ocean, and to make ripples and keep momentum, you need to amplify your uniqueness in a sustainable manner.


Images and fonts can set you apart in a meaningful way

Often, when you want to build a website, you bend your mind to find the right ways to differentiate yourself. But in most cases, there’s a simple answer: choosing the right photos and fonts representing your business. Take the two examples below.

One of our clients is Bistro Biocity from Germany who welcomes its visitors with the screen below:

The homepage of Bistro Biocity

Without even reading about the ingredients used, their philosophy, or way of going things, you instantly understand the kind of meals they serve: healthy, rich in vegetables, balanced, full of nutrients.

Their choice of fonts provides hints on how they want to be perceived—modern, professional, set in doing things a certain way but playful and fun to be around. It doesn’t take long to scroll and see the same unique elements repeated with each block added to the page.

How the rest of the homepage looks like

Now, let’s take a look at another website by our client Modesto from Denver, US:

The homepage of Modesto

By looking at the first image, you instantly feel the type of place Modesto is: fun, family and friends friendly, a place where you can eat great food, laugh out loud, and have a great time among a welcoming staff. You will feel comfortable the minute you walk in.

The font choice is also on point—it’s in line with the logo displayed at the top and overall vibe—loose, chill, relaxed, fun.

As you can see, even though both websites have a similar approach to the homepage, the things that set them apart make you overlook the fact that they (in essence) use the same WordPress editor blocks from Rosa2: the Hero of the Galaxy.

Even though the structure is similar (big background image with text on top), by adapting the fonts and images to who they are, these businesses manage to differentiate and communicate their unique way of doing things.


Colors and a bit of creativity can show your uniqueness

You might think that almost all restaurants need to display their menu online—and since it’s the same feature used by all customers who purchase Rosa2, the menus will look the same.

This is not true in the slightest. Although you get the same Food Menu block, adding your unique dishes can make room for a lot of creativity.

To illustrate my point, I’ve chosen Modesto’s website once again. Take a look at their menu:

Modesto Menu Example using Rosa2
Modesto’s menu created using Rosa2

The great choice of fonts instantly sets them apart and makes them unique. Combined with the background color, their menu gets even more pleasing to the eyes.

Besides that, with a bit of creativity, they created a colored marking system that highlights various details about their food. With a single glance, you can see which dishes are Gluten Free (marked GF), Vegetarian (marked with a V), or Gluten Free Upon Request (GFR).

Now let’s look at another customer—this time is Spice Room from Denver, US.

Spice Room’s menu created using Rosa2

Honestly, at first glance, it’s hard to think that both Spice Room and Modesto use the same editor block at the core. The difference is almost palpable. 

Spice Room nailed the font choices, while the color combination and the highlights for certain food items make it easy to scan the menu. 

Another great way they stand out is by using a list of icons to signal various specifications about the food they serve.

With the help of a legend at the top, you can quickly skim through the menu and choose an item that matches your taste. Let’s say you are vegetarian—you don’t have to read all the ingredients to understand which is which. All you have to do is scan for the corresponding icon.

As you can see, with a bit of imagination, both businesses managed to use the same feature from Rosa2 to present their menu in a unique way and set themselves apart.


When it comes to the digital world, things come with higher stakes. We not only make comparisons with our colleagues, neighbors, family members but with the world out there.

Your website is no longer something to brag about within your local community or to put it down on your business card. It gained far more meaning. It’s on the world-wide-web, it’s searchable, it’s shared on social media, it’s linked, it’s part of a spiderweb. It has a bigger role in your business success, however you want to define it. 

So yeah, having the strong desire to build a website different and truly yours makes perfect sense, especially in the crowded digital field. The truth is that you are a drop in the ocean, and to make ripples and keep momentum, you need to amplify your uniqueness in a sustainable manner. This could mean to make a step further and put more of you out there. It might be enough.

Does Rosa 2 sound interesting?

Take a look and discover all the features packed into this versatile WordPress theme 👇

View Rosa 2

The post Can a niche WordPress theme help you build a unique website? appeared first on Pixelgrade.

]]>
https://pixelgrade.com/upstairs/unique-website-wordpress-theme/feed/ 2
About page examples for different team structures https://pixelgrade.com/upstairs/create-about-page/ https://pixelgrade.com/upstairs/create-about-page/#respond Wed, 11 Aug 2021 13:52:10 +0000 https://pixelgrade.com/?p=126410 Having troubles creating an about page that matches your particular needs and team structure? Read this piece to overcome this challenge.

The post About page examples for different team structures appeared first on Pixelgrade.

]]>
The About page is one of the most important ones on your website. Yet, it’s often overlooked. It’s like the alley in front of your house—it paints a picture about who lives there; it gives some clues that visitors use to create a narrative out of it. Learn how to create an About page authentically and in a way that matches your team structure and size.

Each context is particular as each story is unique. How you pack your About page can make or break the experience. The good thing about building a web page is that there are patterns (both for writing and visual representation) that you can identify and use depending on your needs. These patterns come with various challenges, but I hope this article can help overcome some of them.

There are plenty of scenarios in which you can find yourself when creating your About page. Maybe you are a blogger who shares your traveling passion, a solopreneur doing ceramics during the weekend, a psychologist running private sessions, or perhaps you have a small photo studio where you offer various creative services.

At Pixelgrade, we spend a lot of time skimming through websites of all kinds. I took those thousands of hours and used our experience to showcase five big particular team structures and sizes in which you might find yourself when writing the About page.

Read further to learn how to adjust the communication approach and support the message with a suitable visual representation. This way, you get the chance to put that fantastic story at work and grab the right kind of visitors.

Please remember that all the examples below are made using Rosa2 since it’s our most versatile product. You don’t need coding or design skills to make it happen, promise!

Let’s take one situation at a time and walk you through everything you need to know to create this particular page with ease and a bit of fun.

Quick navigation:

About page for yourself

In other words, you’re alone, doing stuff by yourself. You can be an illustrator, a designer, a photographer, a videographer, a copywriter, a psychologist, you name it. You work as a solopreneur; you are responsible for your products, services, pricing, marketing, and so on. Jack of all trades, if you want.

In this particular case, the About page of your website demands hosting a story. Being the solo brain in charge of everything makes room for personality and creativity.

Don’t shy away from being personal in how you present your narrative. We live in a world where we’re exhausted by how similar the websites look and feel. Make sure you stand out from the crowd through a powerful story.

Don’t overreact, don’t show off, and, most importantly, don’t mislead your readers. Offer them details that make sense depending on the goal of your website. You don’t need to name everything you do to make a big fuss—coherence and consistency beat quantity and oversharing.

You can create such a page with Rosa2, our best-selling Wordpress theme since its launch. It’s easy to use, it comes with all the bells and whistles, and it guides you through the process of obtaining a result that makes you proud.

Here’s an example of how you can pack that story on the website:

Design example for an About page that puts you in the spotlight

About page for co-founders

If you find yourself in this situation, then it’s time to put together a shared story that strikes a chord. In the end, what made you kick off together? How do you fit? What are your complementary skills, and how do you make the most out of them? What are the values that keep the engine in motion?

Please bear in mind that answering the above questions should not exclude being personal and authentic. Not at all. You can still express your uniqueness through a story without putting your partner in the shadows.

One straightforward way to achieve a great result is to present yourself individually (put a name on the face) and then add some details that are relevant for both of you (a red thread). This is how the idea of a team walks into the spotlight.

Most of the companies made by two founders are pretty sterile. They are presented as a stand-alone scenario, where each of them is treated individually. But what about the commonalities? What you plan to achieve together is valuable for visitors to know. Treating the About page as a gateway towards shared identity can enhance the experience and make it memorable.

Here’s one way it can look:

Design example for an About page that features two company founders

About page for small teams

When expanding the team to three+ (and counting) members, you need to be a bit more strategic when presenting your squad. While the personal details still work and bring relevant information, it’s time to step up and name clearly who does what.

For instance, if you’re in an architecture studio, you might all be architects from the office. This does not mean that you do the same work, nor have a 100% overlap in skills and knowledge. One single person pays the salaries and the rent at the end of the day, right?

Display the roles or responsibilities in a way that’s easy to grasp for the visitor. People need to understand by the blink of an eye who does what, who leads who, who’s going to answer their questions.

If you present your squad without any hierarchy, it’s easy to produce confusion, even a lack of professionalism. The goal is not to put some people on a pedestal but to explain their roles behind the curtain.

It will save time and energy, especially if you create a contact page to direct visitors towards an outcome. If someone is writing about a new project, the person in the first contact line should take it from there. On the other hand, if someone reaches out for a summer internship, maybe it’s a different guy or gal who should respond at the end of the chain.

Design example for an About page for a small team

About page for your team and collaborators

This is usually true when you have a core team and a few steady collaborators. To keep the above example alive, I’ll add that collaborators should not be treated as second-class citizens, especially if you have long-term bonds and aim to keep nurturing them. Make this message crystal clear because it says something about how good you are at relationship-building. Hopefully, you already have this skill set in place.

You can keep the positioning of the core team sharp, draw a detailed profile, and add some flavor by listing the collaborators in a way that makes sense for your particular industry. One way to do it is by filling them into categories, such as marketing / operations / HR.

Regardless of how you operationalize, make sure you avoid being too creative. Before showing your outstanding copywriting or design skills, information has one crucial goal to achieve: clarity. When describing your marketing collaborations, save some energy and focus on what they do and what’s your approach to promoting products and services.

Design example for an About page that features collaborators next to team members

About page for dedicated departments

Reaching this point implies a few different things. On the one hand, it means that you have internal processes that make this flow of working run. On the other hand, it could imply that you want to direct your visitors and potential clients to the best people to help solve specific problems.

Having dedicated departments does not mean that you need 100 folks on your payroll. It can be eight souls, as we are, at Pixelgrade. We’re distributed in different areas, depending on our skills and job responsibilities.

For instance, even though our customer support zone comprises two people, it’s essential to mark it accordingly. In the end, Alin and Alex are in the tranches, replying to our customers’ requests, directing them to the best solution, going the extra mile to find better alternatives, and such. 

It’s easier for clients to make mental anchors directly to the people they are working with. It also helps them develop stronger relationships along the way. We have dozens of examples of customers who reached out to our guys and shared all kinds of stuff outside the professional area, from how things are going on their side of the world in terms of the pandemic to all sorts of travel tips and stories.

Design example for an About page designed to showcase different departments
🚨

I wrote a stand-alone article on the storytelling challenges when creating your About page. If you have a hard time putting together a narrative that gets the job done (answers your visitor’s questions), make sure you give it a go.


The About page is a piece of the entire digital puzzle. It’s important to craft it in a way that showcases your current version of the story. If you’re a one-person show, then don’t pretend you’re a small company because people will soon realize and feel betrayed. Harmonize everything to your reality, and once it changes, make sure you update the page and the overall website, too. 

We need more such pages that are built with care towards the visitors. Less shamelessly self-promo that lacks meaning, and more authentic narratives that awake feelings and emotions. These are the hardest to forget or pass unnoticed, trust me.

Does Rosa 2 sound interesting?

Take a look and discover all the features packed into this versatile WordPress theme 👇

View Rosa 2

The post About page examples for different team structures appeared first on Pixelgrade.

]]>
https://pixelgrade.com/upstairs/create-about-page/feed/ 0
Creating a customer review system for your site https://pixelgrade.com/upstairs/creating-a-customer-review-system-for-your-site/ https://pixelgrade.com/upstairs/creating-a-customer-review-system-for-your-site/#respond Thu, 30 Apr 2020 05:00:00 +0000 https://pixelgrade.com/?p=94566 Discover how we collect authentic reviews from our customers and learn how you can do that too.

The post Creating a customer review system for your site appeared first on Pixelgrade.

]]>
To put one’s skin in the game is something we highly respect and value. Even though we’re a small team, we strive to share our thoughts after getting our hands dirty. This humbleness is in sync with our inner why. Learn how we created an online customer review system that collects valuable feedback and how you can adjust it to your own needs and goals.

Transparency and honesty are always at the forefront of our activity. These two are the bedrock for all the interactions we have with our customers (both actual and upcoming). This means we are constantly exposing ourselves to their feedback, assuming our mistakes publicly, facing reality, no matter how honeyed or harsh. Their lessons have always helped us improve our products and services.

This article is a collective effort of George and Oana. We aim to provide as much value as possible by combining our particular perspectives toward customer reviews.

Here’s what we’re going to cover in this article:


These past years, we’ve tried many ways to get feedback about our customers’ experience. We went from using the standard 5-stars model to encourage them to write public reviews on social media. We switched from measuring the success rate of our customer support conversations to running video calls and even meeting with them in real life.

Each one of these actions was valuable in its own way — definitely better than none. However, through constant iteration, we are confident we reached a nice balance between the effort needed to ask for reviews and the quality of the input we receive.

Today, we’ve managed to elevate the dialogue and transparency toward our customers to a brand new level. We created a review system that does not allow us to cheat in any way — at least not without being caught. It is public, contextual, and unfiltered — we don’t shy away from those 1-star reviews. In other words, it’s our genuine way to show how much we care about our customers’ insights. Only by actively listening can we continue to do meaningful work. 

Knowing the risks from the start, and committing to them, shaves off the “illusion of perfection” and it will only set the right expectations for the experience to come.

What’s the cost of all this effort? Well, the answer is straightforward and in alignment with our values. We are eager to climb a steep learning curve and grow. We are far from the whatever-works kind of attitude.

Therefore, such forthright reviews act as a vector of force, which pushes us steadily to do better work. Customer feedback has often proved a goldmine of insights and, without it, our products wouldn’t be where they are today — gracefully competing in a global market.

Customer testimonials, reviews, feedback: what’s the difference?

With every endeavor that we encounter in life, we need to find a way to balance how we imagine things are and how they are in reality. For that purpose, getting feedback on your work, be it a service or a product, is paramount to constantly improving your work and making sure you’re still on the road to your desired destination.

In the context of “user feedback,” you might have heard various terms that sit under the same umbrella: customer interviews, user surveys, live chat, ratings, reviews, testimonials, user testing, on-site activity analytics.

While we tested most of them, in this article we’re going to cover the “review systems”: what they are, how they work, when and how to ask for reviews.

What is a review system?

A review system is a method for empowering your customers to share their opinions and experiences about your product or service while organizing and displaying the end result publicly. By leveraging this content, you will be able to improve your product, increase sales, and build trust in your brand.

The term “review” is often mixed and confused with “testimonial.” That’s why we find it useful to make a short detour and share my input – it’s important for the rest of this article to have a common understanding of the term.

From testimonials to reviews

We think testimonials showcase how some users (not all) make good use of the value provided by a service or a product. They emphasize that value proposition and employ an external perspective (with a face) to back them up.

Testimonials are helpful to read, portray a feeling of reality, and are mostly enthusiastic, short, efficient, cherry-picked, and widely used as marketing tools due to their entanglement with your emotions.

I’m not saying that they are false. No, they should be true — just expect them to focus exclusively on the good sides of what you will get. There are always flaws, hopefully negligible, and nasty sides that you want to know beforehand. For this, enter the reviews.

Reviews deliver the customer’s whole perspective: both the good and the bad, the macro and the micro, the beauty, and the beast. They are not only about rephrasing your product’s strongest points but also about showing weaker sides that a future client should understand and take into consideration when making the decision.

Albeit counter-intuitive, that’s helpful both for you and your prospective customer: knowing the risks from the start, and committing to them, shaves off the “illusion of perfection” and it will only set the right expectations for the experience to come. Thus, both parties start on the right footing, more likely to build a long and fruitful collaboration.

We are inherently flawed and broken beings. Perfection is beyond us. […] No one is normal: the only people we can think of as normal are those we don’t yet know very well.

Accepting Imperfections (The School of Life)

It’s invaluable to have a wide range of review types, varying from the so-called “bad” 1-star reviews to the “ideal” 5-stars ones, each accompanied by valid reasons and genuine feelings. This heterogeneous group of opinions will help you portray an authentic reality in front of your viewers, build trust and relatedness; we are all inherently flawed up to a certain level, but only a few of us dare to accept it publicly.

How to ask for reviews to get the right response?

You might be accustomed to the dynamics of getting feedback in person. Regardless if it’s after a public presentation or after writing a long-form article, you usually ask a straightforward question such as “How did my performance make you feel?” or “What did you like the most?”

The person answering will share his thoughts, good, bad, most often, a mix between the two, you thank them for taking the time to provide it, and move on, hopefully, thinking about what you can do better next time. At least that’s the core intention.

It’s easier for us to do this in person since we were exposed to it early on in our school days when teachers and colleagues regularly shared their feedback with us, besides grades. Once we make the switch to the digital world, we often shave off a few layers from this conversation and stick to “How many stars do I get for my performance” and “If you think so, please provide some details about this.” The difference between the two is that in-person, you get real insights and look for profound thoughts, but online, on the other hand, you’re barely scratching the surface.

It’s somehow funny to see how many people are missing opportunities that are common sense in a real-life context.

We need to learn to bring more behaviors from the offline world in the crazy digital environment. At the same time, we should get rid of all kinds of shortcuts that we all-too-eagerly internalize due to technology, instant-gratification meter, and lack of accountability. We can do a better job!


Before giving you a helping hand and walking you through what you should ask your customers, here is a glimpse of the actual user story we had in mind when we designed our latest review system:

👨‍💻

User story

  1. Before purchasing one of our products, our prospective customer has a set of “needs,” among which “trust” is one of the most valuable currencies.
  2. The customer reads through reviews to find potential drawbacks that he’s willing to take on: risks. To help uncover those risks, we will:
    • Help current customers talk more about their experience and what they managed to achieve through our products (not about the product itself).
    • Ask questions to capture meta-data about the reviewer (e.g., ratings based on various attributes like “Ease of use” or “Value for money), so their review will be transparent for other users.

Let’s dig deeper and see what to ask for in a review. Although most of the guidelines are suitable for all kinds of businesses, what follows is tailored to our needs, so feel free to question our approach and take whatever fits your scenario. 

What to ask for in a review?

Think about the kind of feedback persons in a couple give one another, constantly. This type of “reviews” helps uncover areas where both partners need to work on and improve. With honest and cordial communication, they can have a fulfilled, happy, and balanced relationship. The more specific you are when you share your thoughts with your loved one, the better. 

In the end, you take part in such a commitment not because the other one helps with chores around the house, but mainly because only by having this healthy bond you can fulfill needs like having a family, a home, a strong feeling of belongingness.

When it comes to businesses, bear in mind that you need to get exhaustive reviews from different perspectives. To achieve this level of engagement, you need to give them the right instructions and enough space to express what’s on their mind.

Asking for their “name” and an “overall rating” is only the baseline from where you should start. 

And instead of having an empty “comments” field, why wouldn’t you make use of an open-ended question? Additionally, you can add further instructions, set the right expectations, and walk the user through what you’re looking for. Here is an example of how we do it:

✏️

How would you describe the overall experience of being our customer and working with our products?

This is where you can go in-depth and freely express your thoughts about what you liked or disliked about us and our products. Your remarks are a goldmine because they help other people decide whether to use a product from Pixelgrade.

We know that a bit of guidance helps, so here are a few questions to walk you through:

1. What specifically made you buy this product?
2. Which downsides come first to your mind?
3. How would you describe us to a friend?

You might be prone to think that’s enough, and it could be if you’re just starting out or want to settle for less. Both are okay as long as you are satisfied. At Pixelgrade, excellence is one of our core values, and that’s why we always go a step further (or a few more), so let’s move the needle together.

By going a bit more in-depth, you can help potential buyers better relate to those reviews by providing more specific details about the person that already purchased from you.

We’ve split our reviews into subcategories, thus reaching two goals in one fell swoop:

  1. Help visitors relate more with previous customers and their particular experience and
  2. We gain an in-depth understanding of our users and use that to make decisions.

Below are a few attributes we measure to learn more about customers and their experience with us:

  • Level of experience: there is a difference between a 5-stars review from someone new to the industry and a 5-stars review from someone that tried hundreds of similar products or services over the years, with plenty of domain-specific knowledge and experience worth sharing.
  • Ease of use: understand if they figured out how the product works by themselves, or if they needed an entire army to come to the rescue.
  • Value for money: shows if it paid off to spend their money on our product or service.
  • Customizations: measures if the level of flexibility is sufficient for their needs and if they had creative freedom.
  • Help and Support: gauges if the assistance received was gratifying or left the impression that nobody hears them.

The information is collected within a five-level Likert-type scale. The ends of the range can be from Simple to Complicated or from Poor to Great. We strongly suggest you use the same five-level scale, mark the range endpoints clearly, and you should be safe.


A few ways to get reviews from your customers

1. Manually using the classic email

Before investing in a complex system that requires time and energy, I suggest you start gathering reviews using an agile and clean tactic: sending emails. It’s the most convenient way to collect the same level of information. It also feels very natural for customers.

On top of that, email comes with a huge benefit: it is a separate environment that is focused on one thing: your message. People can take their time to reply instead of hurrying up to tap that “Publish” button as they’ve been trained to do on social media.

Therefore, at this stage, the system is not important. Your focus should be on writing down the right questions rather than building a grand cathedral. Craft questions that offer your customers a way to express their input without trying to lead them to a pre-defined answer. Avoid closed ones a.k.a. those where the receiver is encouraged to answer monosyllabic, often with a ‘’yes’’ or ‘’no.’’

It’s wiser to leave them enough room to share all kinds of details and write in-depth than cutting it short. Questions matter quite a lot, so make sure you pay attention to them. Don’t overdo it because you have the chance to iterate along the way and improve on them.

Just throwing the questions in an email is not enough though. It’s like seeing if the spaghetti will stick to the wall. You should take responsibility and follow-up with your customers. If they did not answer, maybe they did not have the time. Or maybe they missed your email. Or perhaps they did not understand what you want from them. Try to find out instead of assuming they don’t care to answer.

At the same time, just like in a relationship, avoid being needy and asking for a lot of attention, energy, or validation. Give a friendly reminder, reinforce why they should contribute, and take it from there.

This way, you act like an adult who is in charge of his emotions, not like a kid who constantly needs all kinds of reassurances: intellectual, emotional, and so on. 

2. Semi-automatically with the help of online tools

In case you need to speed up the process and automize parts of it, you can always choose from the available options out there. Google Forms or Typeform are two of the tools that can help you get the job done. Both are easy to use, come with specific analytics, allow you to download the results and take a closer look.

At some point, we used them too, and they were perfect when we needed to ask for reviews from our customers. We combined Google Forms with a bit of manual work to mark who answered our email, who didn’t, when we should follow-up, and with whom. It can be done, trust us.

It’s far better to start encouraging your customers to write down reviews about your products and services than to wait for the polished version of an entire system. If today you do not know about the people who are spending their money on your offering, don’t postpone it anymore and put together an online form.

People who do not answer due to the way or shape the question came through might not be relevant for the community you want to build around your brand. If their major blocker to share their review is the UX of a tool, well, maybe they are not interested. It’s okay, move on. No business out there gets 100% response rate anyway.

3. Automatically by building a custom system

Now, if you feel you reached a point where you want to take the leap and leverage your relationship with your customers, you can start thinking about a custom system. It could be the cherry on top. Bare in mind that you need reliable resources for that, but who knows, maybe the way we did it ourselves turns out to be scalable and accessible for you too.

Throughout our history, we used to manually send six questions to each client, centralize the answers in a document, and publish them manually onto our site. 

We wanted to take this process to a new level, and, since we were confident enough that we can automate part of it, we developed a multi-step review process fully integrated into our website. We also make sure to answer each review publicly in an attempt to keep everything transparent. From time-to-time, we still send feedback requests via email because we want to keep the dialogue alive and kicking. 

Below are the four steps that we use to guide the customers in the review writing process:

Writing a review following a multi-step survey system

When is the best time to ask your customers to write a review?

It might sound stupid or way too obvious, but here’s the thing: to get something, you need to ask first. You might be surprised to see how many times people don’t clearly state what they want, but act like the other one should have known and behaved accordingly, regardless.

To expect people to read your mind and know your needs doesn’t apply here either. You have limited control over whether the user will write you a review or not, but there are specific signals that you can use to increase your chances.

A rule of thumb is to step in and say “Hi! How did I do?” just after the performance took place. That’s not after you sold the ticket — it’s right after the curtain falls and the show is over. That’s the moment when the experience is still fresh in the user’s mind, and you can get an honest reply.

On the other hand, too early could mean that there isn’t enough information collected for the user to have a well-formed opinion; too late, and the experience fades away while increasing the effort to remember meaningful details.


At Pixelgrade, we prompt for a review after the customer installed a product update and whenever we manage to solve a customer support request. This means that we provided the right solution, and the client can move on.

While both tactics pull on an emotional trigger (reciprocity?), the later worked well in getting more positive reviews. It’s mainly psychological since the customer felt happy and grateful after he got the solution, and the experience makes him put together constructive messages.


The process of displaying reviews

“There is no such thing as a history of unwritten ideas. An idea kept private is as good as the one you never had,” says Sönke Ahrens. Nowadays, this belief is suitable for all kinds of information that we think gain in value if we hold them just for ourselves. In this case, we’re referring to reviews

It’s as essential to collect reviews, as it is to show them publicly. Otherwise, all the efforts are in vain; so is your chance to improve whatever you are doing.

Where to showcase customer reviews?

Considering that over 80% of consumers read online reviews before making a decision, it’s worthwhile to invest your efforts in displaying and spreading the word about them.

The most obvious place is the product page, where you should show a list of all the reviews that you have available. After that, you can feature them on your homepage, and occasionally share those that make you proud on social media.

However, the less obvious way to leverage reviews is by sharing them inside your team. We’ve learned that they are useful because they allow for small moments of celebration and boost morale. Give it a try!

How to display customer reviews in a way that builds trust?

Too often, the “form follows function” paradigm stops at the former, probably going towards another famous quote about “less is more.” In this case, it is not desirable. That’s why way too many reviews look right at a glance but lack the substance to make them truly believable. 

Less is more, but, when it comes to reviews, we recommend you go with the “function.”

The most apparent cases are those 5-stars reviews you might have come across, full of appraisals and enthusiasm, but that leave out the author’s name or any external references like the review date, customer photo and location, and so on — anything that could make them real.

I’m not saying all of them are “fake,” although most are, just that they lack the minimum level of cues to let the reader build some trust.

An example of a so-called “fake” review

We know that you’re way above that level, but it’s useful to set a baseline and see how far you can go from here.

How can you do better? Considering that you asked the right questions at the start of this process, you now have enough information that you can use to showcase an authentic opinion.

“Intuitively, most people do not expect much from simple ideas. They rather assume that impressive results must have equally impressively complicated means.

The contemporaries of Henry Ford did not understand why something as simple as the conveyor belt should be that revolutionary. What difference does it make to let the cars move from worker to worker instead of letting the workers walk from car to car? I would not be surprised if some of them even thought of Ford as a bit simpleminded and overly enthusiastic about a rather minor change in work organization.

It is only in hindsight that the scale of the advantages of this small tweak became obvious to everyone.”

Sönke Ahrens about the Niklas Luhmann’s “secret”

Your main goal is to display the gathered information within a cohesive layout and easy-to-read manner. We argue that you need a pixel-perfect visual system before putting your reviews online. 

You can use basic HTML markup, and write the content of the review manually: use pure text, emphasize the names with “bold,” and use emojis for stars or other attributes.

Linda Zadelaar, Architect from the Netherlands   ·   April 27, 2020

⭐️⭐️⭐️⭐️⭐️ for Design

“As a visual person, I couldn’t resist Pixelgrade’s design-oriented themes. Their unique aesthetics make them really special and stand out from the crowd.”

3/5 ease of use   ·   5/5 value for money   ·   4/5 support

It gets the job done 10x more effectively than most of the review systems “enhanced” with a dynamic carousel and shadows for avatars. Sure, if you have the resources to go further, you can add some enhancements to better match your site’s branding. But before you think about a search or filtering system, make sure to add all the pieces of information that you have captured earlier, and it’s good enough.

What’s the anatomy of a review?

Now that you have the foundation of your reviews in place, you can dive into shaping their visual design.

Hopefully, over time, you will collect more than a handful of reviews, each of them showing a slightly different, but valuable, perspective about your work. The downside is that this quickly transforms into information overload and makes it harder for people to grasp.

The solution that we propose aims to add a little bit more hierarchy and emphasis to the main elements (e.g., author, rating) while reducing the visibility of the ones less significant (e.g., date). This will help the user quickly scan the list of reviews, find the details that they are interested in, and extract the necessary data to decide whether to buy your service or product right away, or wait a little more.

The anatomy of a review

You might notice that we display quite a handful of data (over 10 items for each review). We choose to have this level of detail because we believe people are complex, and, naturally, customers and the way they use a product or service are guaranteed to be even more so. 

To be able to relate to another person and their experience, you need to know a little bit about them and, hopefully, you will glimpse something meaningful to you before making a decision (e.g., value for money). Therefore, seeing the profession could be more important than the actual name — unless it’s Natalie Portman; then, nothing else matters.


Ground rules for a review system

Here’s the thing: employ such a system if you are genuinely ready to accept both the good and the bad (criticism included) and are eager to do something with all the information you capture. Without this attitude, you are just playing around and wasting precious time and resources.

We’re all messing it up sometimes in real life, and we don’t have a “Delete” button to cover it up.

So, with that in mind, we’ve drafted a couple of simple, yet efficient, rules for you to follow. Frequently, we miss them because we are high on the promise of what these reviews could do for our sales. However, as is the case with relationships, we need to be honest and accept the whole dynamic, regardless of how it evolves over time. We don’t pretend we don’t see what we don’t like, nor do we overemphasize what suits us better.

1. Publish everything

Needless to say that none of us is perfect, even if we all, sometimes unconsciously, strive to portray an ideal image onto others. No matter the number of stars or type of feedback, you have a moral obligation to publish them as-they-are and make them available to interested people. Hiding critical reviews from your website does nothing else than escalate customer frustrations and channel their voice to other places (e.g., personal blogs, social media), places where you lack any control whatsoever.

2. Be honest about it

Create a policy page (or moderation guideline) with the rules upon which you will accept or discard submitted reviews. For instance, you may allow reviews only from people who actually used your product, thus keeping self-promo messages at bay. Moreover, you may not agree with any inflammatory language or harassment.  

As long as you set these expectations from the start and make them available, you are covered and get the chance to start on the right footing.

📝

If you want an example of a “Review Moderation Policy”, here is our short and straightforward one.

3. Respond to reviews

It’s part of the promise to get back to people who have written a review and reply to them. It is also an opportunity to reinforce some of your values and beliefs. In the end, it’s a two-way street. 

For us, it implies showing gratitude to the people who took their time to write a review and taking responsibility by responding to all of them, especially to the bad ones. We don’t sugarcoat anything, and we undertake the whole process.

Response example to a harsh review

4. Pack insights into actions

Gathering information for the sake of it it’s just a waste of time. We, too, were in the scenario of capturing data with the hope that it will shed light on what to do next. However, most of the time, it just brought a lot of pressure and suppressed our gut instincts.

We try to keep an open mind toward the reviews we are receiving and take specific actions that make us and our work better. It can be an update for a product, some fine-tuning of the microcopy on our website, or it can be a different approach in customer support.


Customer reviews require constant work

Relationships are complicated. Today, even more so than ever. Still, they are not impossible, nor are they a reason to drain yourself of energy and emotions. However, they require involvement, frankness, kindness, and a lot of active listening.

The same applies when you are creating bonds with your customers. If you want relationships, not purchases, if you aim to create a playground where both of you learn and help each other, if you understand that today the most meaningful liaisons are the ones based on values, you need to level up the game.

“By some mysterious mental mechanism, people fail to realize that the main thing you learn from a professor is how to be a professor and similar to an inspirational speaker or life coach. “

Nassim Taleb, Skin in the Game

Now it’s your turn! We encourage you to show up and start your journey. We might have given you a few helpful pointers to up your chances of reaching your destination, but it’s your adventure. You alone will have to discover, and overcome, its unique challenges, while, at the same time, you are far better suited to build upon its unique advantages. We’re confident you are going to make it happen!

We have the same thorough approach when building WordPress themes. Browse our portfolio and see if something catches your eye.

Browse our themes

The post Creating a customer review system for your site appeared first on Pixelgrade.

]]>
https://pixelgrade.com/upstairs/creating-a-customer-review-system-for-your-site/feed/ 0
Creating your website’s footer – from a sitemap to a smart layout https://pixelgrade.com/upstairs/design-site-footer-like-we-did/ https://pixelgrade.com/upstairs/design-site-footer-like-we-did/#respond Mon, 30 Mar 2020 06:14:00 +0000 https://pixelgrade.com/?p=93546 Discover how we designed our website footer and learn how you can improve yours by going through a thoughtful process.

The post Creating your website’s footer – from a sitemap to a smart layout appeared first on Pixelgrade.

]]>
We practice what we preach. We’ve always done that. It’s part of who we are, both as a company and as individuals. We genuinely believe in putting the skin in the game. That’s what we’re doing now too. We’re going to walk you through the process of (re)designing our website footer: why and how we did it, and most importantly, how you can do it too.

The web is full of so-called education articles. They are often labeled as case-studies, blueprints that help you follow some steps to achieve a particular goal. My opinion is that most of them lack meaning. They are empty in terms of value.

While doing my research for designing a website footer, I read thousands of words and remain with mostly nothing. Bold messages that shout out loud, full of emptiness. I thought that it must be a better way, a better alternative, one that fits our company’s culture.

We have three core values that stay at the forefront of everything we do at Pixelgrade. Excellence, gratitude, and care. We endorse them in each activity, no matter how big or small. They also drive the way we make decisions.

For this article, in particular, I want to help you save time, energy, and mental space but skipping the abundance of useless information that I found and teach you some ground rules on how to design your website footer. 

What follows is not a mash-up of data tailored to fit search engine’s ranking needs nor any other algorithms. It’s our hands-on experience on how we actually did this at Pixelgrade, and I promise to walk you through the entire process.

For the sake of transparency and clarity, I am not going to talk too much about design as aesthetics; on the contrary, I dare to move the needle and take the conversation into a strategy and planning area first. Frequently, the designer-as-decorator out there miss this part and focus way too much on pretty pixels and external validation.

In case you want to read only a specific passage, here is the quick navigation:

Let’s dive in!


Framing the concept of the website Footer

I will kick-off with a shortlist of comments to give my input on some frequently asked questions and to make sure we are on the same wavelength on this matter. Here I go.

What is a website footer, and what’s its role?

The website footer area is a section placed at the bottom of every page on a website. It provides users an easy way to access specific areas of a site, convey a sense of trust in your company service or give visitors a second chance to take the desired action (e.g., view a product demo or sign up for your mailing list). The footer should accomplish specific goals, it’s not placed there out of the blue.

Change the narrative of designing your website and draft the footer at the same time you plan the header.

Why do you need a footer on your website?

The hierarchical structure of a website can hinder the path to other information about your company, be it internal pages or external links to your social profiles. In addition to the header area that could handle only a small amount of data, the footer gives you enough room to lay down everything you need, while still keeping the advantage of being present on every page.

Besides, the footer is often the place where visitors look first to find links that leads them to important information, such as Contact, FAQ, or Privacy. Think about the “Medical Kit” from a rented car — you know it should be in the rear trunk, right?

When is a website footer poorly made?

Footers are by-design at the end of a website, and many people falsely believe that not so many visitors reach them. Designers are usually focusing their effort and energy on the first part of the page and work to get it as good as possible (remember “above the fold” concept that’s still haunting us?).

Consequently, little effort and motivation are remaining on the table when the designers land at the end of the page. What happens is that they start making rash decisions that usually spoil their good overall intentions.

How could a website footer be better built?

By changing the narrative of designing your website and draft the footer at the same time you plan the header. It might sound obvious that way; however, the reality reveals that few people do that. 

Because those two elements are strictly related to the information architecture that you’re establishing throughout your website, by grasping them at once, you will draw better decisions in organizing your content and make it more accessible to your visitors.


Now that we both have a very much alike idea on what is a good footer, next I will present you some techniques that I used throughout the building process, techniques that you can apply in your own way to your own process.


Phase #1 — Planning the Footer

Before we start making any wireframes or specific visual decisions and get stuck on unnecessary details, I suggest to take a step back and start the creative process with a solid planning phase. It’s not a playful time, but I think you will enjoy it stronger because it’s more of a design-thinking approach to make sure you came out with the right decision for this project.

For Pixelgrade.com, we decided to change the footer once we noticed that the entire site went on a different path, and this area remained behind. To be more precise, we observed that:

  1. There were new sections on the site that were not accessible for the readers (such as the free themes or the affiliates pages).
  2. There were sections on the actual footer that was no longer relevant and suitable for our marketing and communication strategy (the newsletter form, for instance).

So, what better way to show you how to plan your footer than a pilgrimage through our process? Read further to find out more what that means.

1. Create a Sitemap for your website

Start with a brainstorming session with your team to lay out the whole site structure and arrange each item in a series of columns so you can have a good overview. It’s important to get different perspectives and let the mind wander — there are always blind spots that you do not see by yourself. Gather different input from people who cover various business needs within your team and lay them on the table.

Tip: While most of the items from this list will have a direct correlation to a page from your site, it’s not necessary nor possible to do that for each of them. Instead, try to wrap them under a higher scope and place it under a label (e.g., Social Presence will include all the links relevant to your business).

In the following screenshot, I captured the new ideas that popped-up, such as writing down our mission and links to our Transparency Reports. Both are core for what we do at Pixelgrade and how we like to run this company. We wanted them to be on the spotlight not because they sound smart, but because they are key factors from our DNA.

A sitemap for the Pixelgrade.com site where we cover all the areas that we know.

2. Organize the list vertically by a purpose

Now it’s the time to take an in-depth look at your website and put on your user shoes. It’s something you need to do regularly, otherwise, you will get trapped in all kinds of biases, which will guide you towards making poor decisions.

So, ask yourself: “What are the questions that visitors have when browsing our website?” Considering your goal, think of both broad and specific questions. Here are a few:

  • What do you have useful to me? A: Your product or service
  • Who are your people? A: About page or a testimonials
  • How can I reach you? A: Contact page
  • Why do you do what you do? A: About page or a manifesto
  • How long have you been in business? A: About page or a dedicate page with a history timeline
  • Is there something that I can get before committing my money? A: Free resources

You can get a feeling of how we compiled the answers to these questions in the screenshot below:

This could be a moment where you realize that your website lacks more than a footer. It might have some trouble in explaining your offer, you might notice some misalignments, or there is information available that it doesn’t make sense to be listed anymore. 

Don’t worry too much, it’s better to find such gaps in due time rather than keeping it hidden in all sorts of nooks and crannies of your website. 

Keep reading, and you will have a chance to take the first step in cleaning up your space and get a more explicit structure of where you want to go next. 

3. Organize the list horizontally by Header and Footer

Now you have a chance to communicate your intent and put the most important pages at the top of your website (header), and the next at the bottom (footer). To do that, keep the vertical lists in place and reorder the items to prioritize between only two levels of significance:

  • Header: the primary level of important act as a place for your global navigation; you can also include here submenus. 
  • Footer: the second level contains the rest of the items that are of interest to your user, but might not be present in other areas.

Take a look at the screenshot to have a better understanding of how we manage it:

4. Decide what you will let go

As you already are well aware that not everything should be packed in the header, the same principle applies to the footer, which is the subsequent level of organizing your content.

If you notice that there are too many links that you need to add to the footer, I would suggest to prioritize them and limit their number. Even if you think that adding all those links you will make the site accessible for people, it will cripple their attention, and they might not even observe the essential anchors that you want them to see. 

As a rule of thumb, the first level of header navigation should have a maximum of 7 items, and while the footer space could accommodate more items, I would suggest not to exceed three times the number of items placed in the header, up to 21 items. 

Introduce a new horizontal section called “Others” to drop all the remaining items that you will decide whether to link them through internal pages or get rid of them altogether.

We decreased the number of links from the footer by dropping some extra sections that are not relevant today.

Phase #2 — Shaping the Footer

Now that we have a well thought out plan in place, we can dive into the shaping of the visual design.

1. A smart layout solution 

The first question that arises is “How do I lay out all the elements that I have?” Of course, it’s a legit concern, whether if you are a designer or not. I will show you the groundwork that I ended up using and put together all the elements and how it could make perfect sense for your site too.

While there might be an abundance of elements that you need to put in the footer, I suggest a simple set of constraints to limit your options and make things easier to figure it out.

It starts as a set of two broad sections:

  1. Main Content and Navigation Links: The first row is for the main content and the navigation links.
  2. Copyright and Credits: The second row is for the copyright text and entities that you need to add credits for.

Then the first row is split into two uneven columns as follows:

  1. Central information: The first column contains specific details about your project and something that users should pay more attention to. It could be your mission, a quote that inspires you, or a newsletter form.
  2. Utility links: The second column is a division of sub-columns and its purpose is for the utility links that descend from your header structure to expose lower-level subcategories. It supports up to three sub-columns, but it works beautifully if it has only one. The less, the better. 

For Pixelgrade.com, in the left column, we chose to highlight our mission and, to build more trust, we added a link to our “Transparency Reports” category from the blog. 

2. The power of constraints 

This layout creates a hierarchical distribution of information and leads the user to scan and navigate the entire area easily. It also helps you prioritize (again) the information and raise the visibility of what you’re trying to convey first.

It’s a flexible system that works beautifully for most of the situations, from simple personal blogs to complicated business sites. Based on this structure and the content that you need to put there, the footer can take a lot of tension and adapt to your needs. See below its versatility on adapting to various level of content and intentions: 

The versatility of the footer layout.

3. Make it memorable

We believe in adding a pinch of “human touch” whenever it would make sense to do the same in a real-life situation. In the end, why should all the rules in the real world be different when it comes to applying them on the web? In the end, we address human beings on both sides.

A way that we addressed this authenticity is by welcoming users with “Good morning, {name}!” through their “My Account” section. It may not mean much, but we would have done the same if we would have met them in the real world.

Reaching the end of a long (and exhausting) page, paying attention to a footer, and trying to figure out the entire website structure is a small grateful moment that we feel it should be celebrated. We choose to do that by wishing “Enjoy the rest of your {day}!” but we might change it to a message that better reflects our values.

When I’m thinking about #gratitude the message could go like “Thanks for taking the time to reach that far!” or referring to #caring with the following message “We know it was hard to arrive here. Back to top easy.”  There are a bunch of ways to let your personality shine and initiate a more genuine liaison with your visitors.

If you decide to add a similar flavor, remember to keep it short and in the same tone as the rest of the website. Even if just a few people notice it, their experience will be memorable.


I hope this article brings you valuable insights that you will consider putting in practice on your website or the ones you are creating for different people out there. I tried to make all the information swallowable but also friendly and meaningful. 

🏋️

As I mentioned at the beginning, we do practice what we preach across the board. To help our customers start on the right foot and give them a head start, we created a similar footer setup within all our LT WordPress themes.

As with many other decisions that we’ve been taking throughout our digital products, I assume that you already know you are in good hands with us. You just need to bring your content, and we will place it within a coherent and beautiful layout. Make it shine!

The post Creating your website’s footer – from a sitemap to a smart layout appeared first on Pixelgrade.

]]>
https://pixelgrade.com/upstairs/design-site-footer-like-we-did/feed/ 0
How to choose the right colors when creating a website? https://pixelgrade.com/upstairs/choose-colors-for-website/ https://pixelgrade.com/upstairs/choose-colors-for-website/#respond Tue, 24 Sep 2019 14:20:00 +0000 https://pixelgrade.com/?p=29714 Learn more about to wisely choose colors when building an outstanding website.

The post How to choose the right colors when creating a website? appeared first on Pixelgrade.

]]>
We are all psychologically affected by colors. Beyond the influence of our various moods and behaviors, there is much more below the surface to unravel. A lot has to do with us as humans and our past experiences with colors. Therefore, we need to learn to use them wisely when creating a website.


Quick navigation:

When building a website, no matter the reason: for showcasing our work, for telling stories about our passions, for presenting the NGOs we’re part of, there is one particular question that arises at some point.

Will the colors I choose be perceived by my audience the way I understand them?

Or put in a more cheeky question: are you feeling the same color as I’m feeling? To be on the same page as your audience, let’s take a look on how humans choose colors that pleases them and then see how you can get the best out of them for your digital presence.

I know that there are plenty of so-called solutions out there when it comes to choosing the right color palettes for your website. However, I dare to say that most of them are unreliable, taken out of the context, and quite superficial in terms of the outcome you will get.

Read further to take the first step in understanding the psychology of colors, and its impact on both our perceptions and the way we interact(online and offline as well).


How to chose the right colors when you create a website?

Let’s start with short psychological explanation to be on the same wavelength and make the most out of it.

First of all, color preferences tend to change as people age, most of them based especially on interactions and experiences that involve a certain color.

For instance, during childhood, you have little memories that could build on our perception of color – you are a blank canvas, so to speak. What else could you rely on more than on your body, to be more exact, your eyes? Not much. 

Therefore, the young you is more attracted by colors that stimulate your eyes. Explaining it in a more nerdy way, that might have to do with color receptors(cones) in our eyes: warm colors, from red to yellow, and tints of green are triggering stronger signals because of these cones’ sensitivity and distribution.

The idea is that the more experience-based feedback that a person receives about a particular color that is associated with a positive experience, the more the person will tend to like that color.

Psychology Today

Second of all, if it were only to take into consideration the physical effects that light has on people, we would end up liking the same colors – but we’re more complex than that, and that’s where psychology kicks in. In the end, the beauty lies in these differences, and we can take advantage of that when creating a website, but not only.

As you grow old, memories and experiences start adding up and shaping your personality. Imagine all the things you’ve been through and how they impacted your inner-why. From the first love to the first job, from that holiday at the end of the world, to the weird yet delicious food you ate and kicked all your senses, all these are now part of who you are.

Therefore, while living these experiences, it is near impossible not to deal with color, and the context in which they appear (pleasant or distasteful) is essential in modeling your preferences.

With other words, color is not just a matter of choice, its implications are far more important, and you should be aware of them because it will help you amplify or damage a digital experience entirely.

Let me guide you through several examples and share more about how colors define your perception and the lens you see the world.

Ready to move next?

Let’s assume you were raised near the sea and you remember yourself playing next to the water. In this specific case, you are definitely more prone to like blue because of the recurrent pleasant memories it built up in you. There were dozens of moments where you enjoyed the water, spend time in it, and created an emotional attachment.

On the other hand, if you interacted with blue in a different medium, let’s say an extended stay in the hospital, and there were blue lights around, it might not be in your top preferences if the reason you were there wasn’t a fortunate one. 

Our brain is wired in a way that wants to keep you safe and far away from the bad memories that caused you all kinds of anxieties, dramas, frustrations, etc.

Thus, we might as well say that your preferred color is a summary of some experiences that you enjoyed.

Photographers, for example, are able to convey a lot of feelings through color and the way they work them together. A good photographer though does not rely on color alone – composition, candid pictures, lighting and shadows, backgrounds all play a crucial role in photography. 

More so, given that they know that colors can get perceived differently you’ll find that most photography themes actually feature monochrome shots, to bring out the best qualities of the artist without requiring the color to have a direct impact.

Did you ever hear a photographer saying that somebody’s photos has a lot of green or brown in them? I did. They are not delusional people; they just have a different perspective on colors and can see them beyond what’s visible.

All this information is not an opinion made overnight, and it is covered by data, plenty of discussions with our customers and designers. Read further to learn how to choose colors wisely.


How to mix colors in a way that makes sense for the digital field?

Some people know their favorite color from the start, and they’re happy with that – easy-peasy for them. Maybe they do not have the best arguments to support their choice, but at least they are consistent. They stick to those colors in everything that defines them, even though that does not mean that they overuse it just for the sake of showing of. 

Others might need a reversed approach: how do I describe myself, and what colors are associated with my traits?

As you can notice, this approach is quite challenging since it’s harder to be more in touch with yourself and able to understand your choices on a more profound level.

However, there are solutions out there. One would be color dictionaries: a list of colors and their meanings – go through all of them, read their descriptions, and stop at the one that fits you. Write down, why do you think it matches you. Be genuine and sincere and see if it really sounds like you or you are trying to fool yourself.

This may not be far from what’s true to yourself, but seem flawed to me because of the following reasons:

  • They are still written by people – people that also have their own unique, different experiences about moods like calm, energizing, powerful, passionate, joyful, secure. They might overlap with yours, but slight nuances can shift the perspective.
  • They are based much more on how our body reacts to certain colors – and ignore an essential factor: each individual’s past experiences that shape color perception and can sometimes overwrite physical reactions. In a way, this is covering up the uncertainty of color interpretation and the risk that the author might be slightly biased when creating the color dictionary.  

So, instead of looking outwards to what other people are writing about colors, why not go inwards and see what is actually cooking inside you

Find those experiences that you found enjoyable, then search for some innocent and straightforward cues in your memories: objects, landscapes, people, scenes. Of course, it’s a subjective approach, full of possible flaws. 

At the same time, it’s far more authentic than copycatting others and relying only on what specialists say. 

These themes easily evoke discussions without end, since verbal reactions to the associations with color differ vastly from person to person.

Josef Albers, Interaction of Color

We worked quite hard in this area and developed a customization tool named Style Manager. It is an intuitive interface directly integrated into your Dashboard that helpsyou choose between different color palettes and fonts or simply create your own.

A sneak peek from Style Manger’s interface in Rosa2, our best selling WordPress theme

We put our best design knowledge to create this advanced system in a way that helps you achieve visual consistency across the website, but also offers you some freedom to match your branding requirements.

However, we limited the options quite a lot because, from our eight years of developing WordPress themes and helping a community of 60,000 people to create outstanding websites, we noticed so many useless flaws people make. 

Therefore, we put together a list of constraints that make sense for our customers and facilitate them to make fewer mistakes and achieve better results.

Here’s what Bruno, a food blogger and videographer told us about Style Manager:

I like that Pixelgrade already suggests combo of colors and variation about the intensity. Because my project organically changes together with my content and taste, this tool is exactly what I need to achieve the best result in a short time keeping control of all the features (border, fonts, background, page sections etc).

Bruno, blogger at HyGveg

Choosing colors when creating a website should never be a random option. Further, I’m going into what you should consider when having this mission to achieve.


Two reasons why is it important to know we perceive colors differently

As argued until now, you associate colors to pleasant emotions that experiences feed you. What about the others? They surely have their own, different moments tied to specific feelings. That means that color perception could also be slightly changed (recall the example with the sea, and the hospital mentioned earlier in the article).

Then how can you be sure that you’re feeling the same color as your audience? Is there any guarantee that you will get the cues of my website that I am bubbly and energetic just because I use orange and pink? Yes and no. Let me tell you why.

As abyssal as the gap between you and your visitors seems, there are still common grounds in our color perception systems. If it weren’t for these, we might as well roam around ignoring colors and interacting with our environments based on our other senses. That’s not the case.

Here are two fundamental arguments to keep in mind:

1. The physics of our eyes is, to some extent, the same for most of us 

The optics behind our eyes is rock-solid science that humans “speak,” excepting those who suffer from color vision deficiencies (in which case we’ll have to find other ways through which we can express ourselves and be understood). 

Up to a point, red will still trigger a more intense impulse in your system. These similarities help since with a website you are going to attract different people’s attention, so it’s nice to know that we still have things in common, such as the raw data about how our eyes work.

2. Our experiences won’t ever perfectly match, but they can overlap 

Even if we like to think that every place we dwell in has it’s own spirit and uniqueness, we can find elements and events around us that are common with other places other people live in. 

The green of the woods might make us both feel energetic if we’re outdoorsy people, but it doesn’t have to be the same forest you roamed through while a teenager. You’ll still have a base audience that is valuable to you because the experiences you both value also have some typical colors attached to them.

So, as much as each of our color preferences are modelled by what you experience through your life, you can still bridge the (not so big actually) gap between us and the others.

Are you ready to put in practice all the above and bring your website to the next level in the digital field? Let’s do it.


Exercise: how to figure it out which colors fit your website

A fun way to pick a color that suits you is to put your memories on the table, just like photographs: your favorite outfit, your favorite place to relax, a screenshot from a movie that moved you, a place you liked during childhood.


From the photographs, I take to my favorite shoes and my grandma’s carpet which I adore since I was little: pink and yellow are the colors that tingle my heart. – Ilinca Roman

Take actual pictures of them or even draw them. Put them together on a table or open them all at once on your computer screen. 

Extract at most three colors (to keep it simple), isolate them from the photos. Look at them and ask yourself questions as:

  • Would you want to see these colors around every day?
  • Would you wear them for a month?
  • Would you like those colors in your house or surroundings?

Catch yourself saying “yes” too many times, and you have a winner. If not, search on, play around, keep discovering.

Now let’s sum up everything you learned about colors and their importance when creating a website that will shine out there:

  1. As social beings, we are in a constant search for approval from our peers, and the color is one way we send signals, then wait to see if anyone“hears” us as we are. Yet again, it seems that we can’t have it all because of how we build our color preference systems.
  2. It would be too hard and energy-consuming to find the color combination that goes straight to the feeling you want to convey to all the people that will interact with your website. Just imagine interviewing them all and asking, “What color makes you feel empowered?”. The list of colors you’ll get will be diverse, but in that list, you’ll also surely find the one that makes you feel empowered.
  3. Take the “shortcut,” be true to yourself, and pick the one that hits your chord first and see afterward with whom it resonates? In the end, we enjoy having around people that are on the same wavelength as us, and we get the best synergy from these types of connections. 
  4. As for reaching a much broader audience, it is much of an innocent gamble that we play in the realm of colors, even if we want it or not.

I encourage you to always start from your inner why, your intrinsic motivation, and build up from there.

Choose the colors that make sense for who you are, what you want to achieve with your digital presence, and make sure you do that consistently. In the end, visual coherence is something that we all love and appreciate since it only touches pleasant emotions, right?

The post How to choose the right colors when creating a website? appeared first on Pixelgrade.

]]>
https://pixelgrade.com/upstairs/choose-colors-for-website/feed/ 0
Why choose a theme that looks good with WooCommerce https://pixelgrade.com/upstairs/why-choose-a-theme-that-looks-good-with-woocommerce/ https://pixelgrade.com/upstairs/why-choose-a-theme-that-looks-good-with-woocommerce/#respond Thu, 28 Mar 2019 08:37:54 +0000 https://pixelgrade.com/?p=45193 Discover how to choose the right WordPress theme for WooCommerce to both build trust with your audience and be in alignment with your brand's personality.

The post Why choose a theme that looks good with WooCommerce appeared first on Pixelgrade.

]]>
In this day and age it’s not that hard to set up your own online store. The challenge lies in choosing the best tools that can help you sell your digital or physical goods online while also maintaining your design and branding across your website.

There are many options to choose from when it comes to eCommerce solutions. Every one of them has its own pros and cons with regards to setup, price, features and customisations but you could narrow the list down if you had a clear set a requirements.

However, with WordPress now powering more than 30% of websites you might want to cap on the hype and take advantage of all the effort being made in developing, maintaining and supporting the platform.

If you are already familiar with WordPress or if you’re just starting up and are not too sure what your needs are, you might want to take this route as there are a lot of resources on the web and a great community that can help you put together your online store.


Conveniently, even in the WordPress ecosystem there are quite a few plugins to choose from to power up your online store. We should again take a look at the numbers.

With more than four million active installations, and a total market share of 20% – 30% WooCommerce comes out as the go-to solution for WordPress users.

Some of the best things about this plugin are the fact that even though it is free it has great support and documentation, it supports both digital and physical products out of the box and that there is a great collection of both free and paid extensions and themes to tailor the perfect customer experience.

Also, WooCommerce has a great onboarding process that can get your shop up and running in no time. Setting up the store is actually the easy part. The plugin also comes with a nice layout and design, and even with a nice set of settings you can customise to your own needs, but that’s about it.

At this point your store is just one of the other WooCommerce websites on the Internet that all look the same.


How you can stand out from the crowd

It does the job, don’t get me wrong. If you already have a WordPress website, you will be able to install WooCommerce, set up your products, payment methods and start selling pretty fast.

However, even though everything would be working just fine at this stage, your main website and the store section may look from two different worlds.

Looking after the right WordPress theme for your online store is more than just a fashion choice.

It is the theme’s job to style the website in a consistent manner and if the theme you’re using doesn’t have a built-in custom integration for WooCommerce, you’re missing out.

Felt theme with minor layout adjustments to accomodate products
Felt theme with minor layout adjustments to accomodate products

There are many ways in which theme developers may choose to make their theme WooCommerce ready. At bare minimum they would make some minor adjustments to the online store page and take care that all the customisation options offered by WooCommerce work as intended.

On top of that, they can make sure that the layout and style of the shop pages matches the rest of the website and they can add to the customisation options the plugin already offers.

At the other end of the spectrum there are the themes developed in a shop-first manner that may or may not overlook some of the blogging features, or even add a set of additional features for very specific scenarios.

The fact is that it doesn’t really matter if the actual store is the entire experience you need, or if it is just one section of your website. It requires to have personality and stand out in order to draw attention that would eventually convert into sales.

Offering them a seamless experience from both a design and a functional point of view should be your top priority.

Having a strong and consistent branding helps you build trust in your audience and also makes you more visible and even memorable. The confidence your audience has in your brand becomes even more relevant when we talk about online shopping.

Felt theme with custom WooCommerce integration
Felt theme with custom WooCommerce integration

What we have done to offer a top-notch experience

This is why even though we’ve constantly worked on tailoring and improving various aspects of the online shopping experience that WooCommerce offers, we’ve always taken great care into making sure that the eCommerce section of our products works, looks and feels like an integrated part of the website each and every time we labeled them as WooCommerce ready.

We take great pride in the fact that we developed Style Manager and we’ve implemented it in most of our themes. It is a tool that puts constraints in place in order to enforce a consistent aspect to the website across the board, including the WooCommerce integration.

We’ve tried to alleviate the user of as many design decision as possible and to offer him a more fail-safe solution by drastically reducing the noise and the granularity of our customization sections.

Felt theme with Style Manager custom WooCommerce integration
Felt theme with Style Manager custom WooCommerce integration

This allows users to change the look and feel of their website to match their style or their brand at a global level, without taking away any of their freedoms.


Choosing the setup for your online shop will always be a matter of personal preference regardless of the fact that we’re talking about what platform, what plugin or what theme you will pick eventually.

However, if we’re talking about WooCommerce and WordPress themes, the huge number of choices available and the shiny features some may claim they provide can make you lose sight of what’s important for you. Just make sure you set yourself up for success.

The post Why choose a theme that looks good with WooCommerce appeared first on Pixelgrade.

]]>
https://pixelgrade.com/upstairs/why-choose-a-theme-that-looks-good-with-woocommerce/feed/ 0
The importance of colors and personality for growing your blog https://pixelgrade.com/upstairs/the-importance-of-colors/ https://pixelgrade.com/upstairs/the-importance-of-colors/#respond Sun, 22 Jul 2018 14:22:51 +0000 https://pixelgrade.com/?p=28402 Colors are an expression of our personality, and they have the power to influence your audience feelings and behaviors.

The post The importance of colors and personality for growing your blog appeared first on Pixelgrade.

]]>
Colors are an emotional expression of our personality. They hold power to influence your audience’s feelings and behaviors directly. They are a vehicle for meaning and sense, thus playing an essential role in your website beyond just aesthetics.

The right colors help convey your personality while creating an emotional connection with your audience and gather the right people around you. In contrast, the wrong colors can mislead people about who you are and deter the ones that you would like to attract.

In the book Designing for Emotion, Aarron Walter, former Director of User Experience at MailChimp, encourages everyone to “harness the power of psychology to create positive, long-lasting memories of your website in your audience’s minds.” So, why not start using colors to express your unique personality and begin to shape your personal brand?


Colors Are an Expression of Your Personality

In The Attraction Paradigm study, the psychologist Donn Byrne showed the impact of similarity on our relationships and concluded that “the greater the similarity between two persons, the greater the attraction between them.”

Through our personality, we express a whole range of emotions and people who resonate tend to stick close to us while the rest stay away. Our personality resides everywhere, and plays a major role in our social circles, both offline and online — through our website or other media platforms.

Harley Davidson riders are a group of like-minded people, brought together to form a tribe that shares the same passion. — Bill Ray (1965) / Getty Images

On our personal blogs, we all start to express those emotions mainly through our writing style. The tone of voice we use conveys who we are and how we feel when we draft a piece of content — it could be the joy of recalling a childhood memory or the fear that struck us in a life-threatening situation.

Things like the rich golden yellow of the yolk from a broken egg, or the color of tea brimming in a teacup, are not merely colors, rather they are perceived as so.

Kenya Hara, White

Through our language, we’ve all learned to associate colors with words, and therefore link emotions with those words. Even if each color is perceived slightly differently from person to person depending on culture or gender (think pink or blue?), a word like yellow could induce the feeling of happiness, while red could surface a memory of a dangerous situation.


Benefits of Expressing Your Personality Through Colors

Once we identify a new color, our brain instantly produces an emotional response that triggers a series of thoughts and memories. Our brains are hard-wired to identify and respond to color, and you can harness this by using colors throughout your site to funnel those responses towards reflecting your personality.

People will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Maya Angelou

Colors give your readers a special feeling, and they can be enough to make a design feel distinctive and not go unnoticed. Let’s see some of the perks that you get when using (the right) colors in your blog’s design:

1. Distinguish you from your competitors

If you want to stand out from the crowd, colors could help you cut through the noise. Using black text on a white background is easy, and dull, and ordinary, and default. Pick your favorite colors and use them across your blog to express your personality traits, to show that you’re unique and different from others, that you have something meaningful to say.

The bold colors used in the Bloomberg redesign are a reflection of their avant-gardism approach of pushing the limits of how to tell a story online.

Colors can be more than enough to make your website feel different and encourage your audience to remember you.

⭐️

Tip: Make a statement and show the primary qualities of your personality by using one or two more saturated, vibrant colors.

2. Establish an emotional connection with your audience

We like to think that we’re rational human beings but much of our decision-making is influenced by emotions. As a consequence, we tend to pay little attention to boring things. An experience deprived of feelings, one that doesn’t strike a chord with us, will quickly fade away from memory.

Ingrid Fetell Lee uses her blog “The Aesthetics of Joy” to empower people to find more happiness in their daily life. By choosing a bright, colorful palette, she successfully connects her joyful message to the readers’ emotions.

Rather than choosing an ordinary (and boring) color scheme that is likely to be forgotten once you leave the website, pay attention to details and put in the effort to create one that is consistently in tune with your personality. Your readers will remember that emotional experience, and they will add your brand to their long-term memory and grow in loyalty.

⭐️

Tip: While trying to create a bold palette, adding loads of colors isn’t always the best solution. If you feel adventurous though, try to slightly mute each one or allow for enough whitespace to have them breathe.

3. Grow a consistent audience around your personality

Most of us tend to be attracted to people who are similar to ourselves (even if Disney likes to think that opposites attract – it’s just a myth). That is why we strive to be part of communities that hold the same views and values.

Having a blog with a distinct personality will help you retain those you want to reach and attract, and build an audience you can truly relate with.

The subtle use of orange colors and oval shapes on Seth Godin‘s blog is strong enough to communicate his friendly and inviting personality while building a tribe around him.

Start factoring your personality into the design, use colors that reflect who you are, and you will be better suited to stir up that all-important emotional response in people like you. This way you can captivate and inspire readers that will stick around longer, promote your brand whenever they can, and become one of your most powerful marketing channels.

⭐️

Tip: A monochromatic color palette centered around a single accent color is easier to get right and it can help associate your brand with a specific, memorable color.


Be Yourself and You Will Be Remarkable

Seth Godin wrote that “if you’re remarkable, it’s likely that some people won’t like you.” When expressing your personality through colors, expect that not everyone will like the results — and that’s fine! If you want your design to please everyone, you will end up pleasing no one. If some people hate it that’s a good signal you are engaging with your audience on an emotional level — keep going that way!


🕵️‍♀️

Interested in learning more? Check out How to choose the right colors when creating a website?

The post The importance of colors and personality for growing your blog appeared first on Pixelgrade.

]]>
https://pixelgrade.com/upstairs/the-importance-of-colors/feed/ 0