Home » design

Tag: design

Using WordPress the wrong way

I have been using WordPress the wrong way, and I have just realized it. 

I often wondered why anyone would want a website built with WebFlow or with SquareSpace when WordPress gives you the power to customize everything you want.

The answer is so simple and evident that it is a little embarrassing that I have not seen it before.

Most people don’t want that power. 

Most people want a website that will help them get closer to their business or personal goals. And if you are not a web developer, those goals do not include customizing every aspect of your site. 

I have watched a video presentation with a project hand-over where the client could only add new items on their site: new beer flavors. I am looking at this, and I am thinking: “wow, that customer is powerless. He is so limited in what he can do with the site. For every little change, he will need to hire the developer again.” 

But I was wrong. The client was not into doing minor changes on the site. He wanted a professional website that he could be proud of, and he only wanted to add more beer flavors. Being so limited in what he could do also meant there was no way he could make a mistake or break the site. He could relax into doing what was important to him. 

When delivering a website built in WordPress, it may not be a good idea to hand over the admin account. The administrator account can feel overwhelming with all the buttons available, and it is also very easy to break the site. 

What you should do instead is to create custom post types, custom fields, and custom capabilities and then set up an account that can only work with those and hand over only that account. This way, the client cannot break the site, and they can only customize and update the items they need to. 

Of course, you have to discuss a maintenance plan for the cases where admin access is needed, but that is a different discussion.

Would you be offended not to have administrative access to your site? Or would you be relieved? 

Design is Not Everything

When building a website, you may think that all you need is the web design, which is all you may be willing to buy.  

And this is understandable because it is what you see and what your customers see. 

It is also why page builders like Divi and Elementor are so popular with WordPress. You can quickly and visually set up how your website will look. 

But once traffic this your site and the business takes off, you realize other things are just as important if not more important than design:

  1. Is the site functional? Does it do what it is supposed to do for the user? Is the sales process working smoothly? Does the contact form send you all the messages? 
  2. Is it fast? With the Google update in May 2021, site speed is a factor in their ranking system, which means that slow sites will get a penalty and fast sites will get a boost. But that is not all. From a user experience point of view, if they have to wait 10 seconds for the cart page to load, they will abandon the purchase process. 
  3. Is it clear? This item is where design can shine when it focuses on clarity first and aesthetics seconds. It doesn’t matter if your site is beautiful if your users have no clue how to navigate it or what they should do on the page that just loaded. 
  4. Is it responsive? Does it work perfectly on mobile? Today’s data suggest that you should develop the site on a mobile view first and then check the desktop view. 
  5. Does it handle well spikes in traffic? You don’t want to have your site crash in the middle of a successful marketing campaign. 
  6. Is it secure? Is your customers’ data safe? Is your site well insulated against hacking attempts? Are you using the best security practices?
  7. Do you have a recovery plan in place? What happens in case of a hardware failure? Or if you get kicked out by the hosting company?

If you still think your site needs a stellar design to bring in revenue, look at Google.com or Amazon.com. Most designers would argue they can do a much better job. But how many can create a much better revenue stream? Or handle that level of traffic? 

I suggest you start your website by investing in a solid foundation, don’t just buy a “pretty picture” of a website.  

Developers like us do things like this…

Developers like us use version control because we understand the value of being able to roll back.

Developers like us do backups because we understand our customer’s need for safety and insurance.

Developers like us have a process because that is key for delivering quality results consistently.

Developers like us ask questions because we understand the pitfalls that come with assumptions.

Developers like us understand business because the perfect solution, delivered too late, is no solution.

Developers like us are good communicators because we don’t expect the client to navigate technical jargon.

Developers like us are honest, simply because honesty is good for business.

Developers like us own our mistakes because it is the way to build trust and get hired again.

Developers like us don’t hide bad news because it shows care for the client to let them know you will not meet the deadline. It gives them time to plan accordingly.

Developers like us value privacy because the client needs to know their private data is safe in your hands.

Developers like us are generous because helping others along the way makes things better.

Developers like us are flexible because it is not always possible for the client to adapt to our workflow.

Developers like us are more expensive because we always deliver more than we got paid for.

Developers like us minimize risk because they understand the client has their reputation to consider when she places it in our hands when we deliver a solution.

Developers like us work fast because we don’t reinvent the wheel and use the best practices available in the field.

Developers like us never stop learning because we know first hand how fast the software world changes.

Developers like us future proof their code because it is never safe to assume how it will be used later on.

Developers like us prioritize customer needs because the final product is for them, not for us.

 

Note: this is a manifesto based on Seth Godin’s idea of “Tribes”: people like us do things like this.

Resilient Web Design

The things that stood the test of time had a solid clear foundation than we could later build or improve upon. They strived to make the least amount of assumptions. This approach allowed for future ideas that no one would be able to predict, to still connect with the solid base. 

Resilient Web Design strives to provide just that: a set of guiding principles to create web designs that will still work even if we don’t know how the screen of the future will look like. 

We used to have small desktop screens, then bigger ones, and now huge ones. Then all of a sudden, in came the mobile devices, then tablet devices. 

We are clueless

You have to embrace the idea that you have no clue what kind of screen size will be used to consume your content. 

And this is what Resilient Web Design is all about. 

You no longer design for a specific target screen size and “(kind of) fix it” for the rest. 

Your first media query is no media query. Your HTML content is responsive by default, with no need for CSS. This responsiveness has always been there, but the power of this feature is only now becoming evident. 

We have been designing the web “backward” making arbitrary assumptions about the browser’s viewport size. This way of design is the bias we have been dragging around from the design on paper, and it is so ingrained that we don’t see it. The new reality is that you can no longer know ahead of time the width and the height of the canvas used to present your content. 

That can be scary, but also freeing. And as a creative, it is a problem that can be solved by design and that, I imagine, should excite you!

For a long time, I thought that because browsers are so forgiving with the HTML and CSS syntax, they encouraged poor code and allowed both developers and designs not to use standards. I wanted the browser to cry foul and reject any page that errors in the code. This behavior would force the creators of that page to fix it! And “get it right!” 

I see now that browsers being so forgiving allowed for massive innovation and flexibility. By being lax with errors, old browsers would not choke on new features being added later on in the future. This approach has allowed the web to grow as innovative and fast as we see today. And perhaps we should adopt a similar mindset in all the systems we design. Like Poste’s Law:

“Be conservative in what you send; be liberal in what you accept.”

Converting your content into a web app, which requires Javascript, may also not be a good idea, as it departs from the lax treatment of errors. If your Jave Script code does not load or execute for any of the many reasons, your users will look at a blank page. 

The solution that Resilient Web Design proposed to this is “Progressive enhancement.”

With this concept you provide a minimum viable experience, that you will build upon (enhance) using feature detection (NOT browser detection) and the lax way that browsers treat new code, to improve the experience that the end-user is having. 

Using feature detection means that your design will NOT look the same for everyone. I cringe and this thought, but relinquishing control enables everyone to consume the content, and enables some to take advantage of brand new browsers and features. It is a win-win situation. You don’t design for IE6 only because some of your userbases may still be using. Yet, at the same time, you don’t ignore that audience by assuming that everyone is running the latest version of your favorite browser. 

“If a website looks the same on a ten‐year old browser as it does in the newest devices, then it probably isn’t taking advantage of the great flexibility that the web offers.” (Resilient Web Design)

If this way of thinking inspires you, then you should read: Resilient Web Design and deeply ponder how you can implement the principles in that book into your systems. If you already used this in your design, I’d love to see it applied. Please post a link in the comments.

What does the client want?

Some time ago…

Some time ago, the conversation with a potential client would be something along the lines of:

“How can I help you?”

“I want a website to sell my products.”

“OK, great, this is a price and you’ll have in a month.”

A month later…

I’d show her the site, and the reaction would be: “Well, this is not even close to what I had in mind…”

I had to change the game and ask more questions 🙂

“What colors do you like?”

“Red and blue.”

“Great, and font wise?”

“I want something elegant, precise!” 

“For images?”

“Oh, something joyful and warm…”

“Excellent! This is the price; you will have the site in a month”.

A month later…

I’d show her the site, and the feedback is: “This red is not red enough, and now I realize the red and blue are a bad combination! Can we try yellow instead of blue? And the font is too girly for what I have a mind. We are going to need new images as well. The top one is ugly, and the rest don’t match the brant at all.”

Oh, the frustration.

At some point, I’ve spent two weeks back and forth, trying to nail down the shade of blue. That was a waste of my time and the client’s time!

I had come to believe that the clients don’t know how to communicate (I had a much shorter description for this). I had resolved that I would never even discuss with someone who could not write a technical specification that we can agree on, and that I could deliver. 

This decision blocked many customers, but more importantly, blocked important learning. 

The Breakthrough 

I was watching a video from Chris Do. He’s a designer who also teaches business, and I admire his style. To me, it feels like he is talking to me specifically. The kind of decisions you need to make in design apply in software and for anyone who uses creativity to solve a problem. But I digress. 

Back to the video. 

He was taking questions from the audience, and someone asked: “How do you deal with clients who don’t know how to communicate what they want?” Ah! The golden questions! I had the same struggle. I perked up, waiting for the knowledge to be bestowed on me. 

Chris looked into the camera, and you could tell that the question was really testing his patience. Hm… And he said: “How many times do I have to tell you that the good-communication is on you! It is your responsibility to help your client articulate her problem and then discover if you can help her.”

All the pieces began to fall into place in my mind. I suddenly understood that in blaming the client, I was not only asking the wrong questions, but I was not developing a critical communication skill. 

In the present time…

When a client wants to work with me, they better be ready for a ton of questions :). As someone jokingly said, they need to feel like they’ve been to the shrink after the first discovery session. 

Here is how the conversation might look like:

“I want a site that can help me sell my products.”

“Sure, that is something that I specialize in, but out of curiosity, what problem are you trying to solve?”

“Well, I need to increase my revenue, obviously”

“OK, that makes sense. How do you know that having a website is the best way to solve this problem?”

“I don’t know… everybody does it… what other options are there?”

“I am glad you ask. Before I can answer that, I’d need to know more about your business. It’s OK if I ask you a few questions?”

“OK…”

“At the moment, how do you generate your revenue…”

And this would go on for a while. 

In the end, what I need to know is:

– what is the biggest problem that this customer is facing 

– how can I help them discover this problem if they don’t know it

– how can I help them articulate their underlying needs 

– in the end, are we a good fit? Can I help her with what she really needs? Can she afford me? Do we like each other well enough to work together for a few weeks or months? 

And by the end, the client would also need to know

– how do I work

– can she trust me

– what is my price range

– what kind of a solution can she expect

– is hiring me the right choice for her

In Conclusion

Make sure you correctly diagnose the problem before you prescribe a solution. If the solution you’re thinking of is not the right one, you need to find out as soon as possible, not at the end of the process.

If you found value in this article, let me know in the comments below or on Facebook. This feedback will help me understand what to focus on in the following posts. 

Go create the New Paradigm today!

User Feedback – why is it important?

There is something that I noticed while designing web apps and user experiences. The client sometimes has particular requests about what font to use, what images and colors, and how the interactions should happen.

And if I probe why do they want things to be done like that, I most of the time get the answer that this is how they like it.

In a way, it makes sense. It is your site, your brand, and it should represent what you stand for and show your brand’s personality.

But when you are offering a service, and you want to help your visitors achieve something, you need to put their needs above your desire to have the website a specific way.

Your visitors expect to read your site easily. They expect a button to look like a button. And a clickable link to obviously be a clickable link. It would help if you found a balance between being familiar and being unique. If you go all the way on the “unique” side, your visitors will be very confused by your offer and wander someplace else. So this very distinct design is not really serving your customers, is it?

What is a better way to go about this?

You can ask your visitors for feedback and listen to what they have to say. If they find it challenging to make use of your offer, you need to change that, even if it’s something you like a lot about your web site.

You also need to ask more people, not just one. How many more? It depends on the size of your business, but the more you can ask, the more reliable the data becomes. And then, you can build a design that both showcases your brand and what is unique about it but also serves your customers in a way that they expect and understand.

I know this is not always easy. I’ve been guilty of this approach myself, many, many times in the past. I was blinded by how “elegant” I thought my solution was that I disregarded the feedback that showed it was not working for my potential customers.

If your web presence is just a way to express yourself, your art, your ideas, then it’s OK to break the rules and do something “crazy.” Just know that serves your need to express and bee seen. But if you want to provide a service, the marketplace will quickly teach you a lesson, when very few people engage with your content, because it is too hard, or too different.

In today’s world, it is easy to create a website where you can have both worlds: customer-centered and another that is “self-expression” centered. And they can both work together and support each other. But now your audience has a choice. Do they want to explore the new, edgy thing, or they want to benefit from the offer that will serve them quickly?

In conclusion: ask for feedback from your user! And be grateful for the feedback you get, especially if it’s “not good,” because it points you to things you can change that may lead to dramatic improvement of engagement with your offerings.  

The Power of Using APIs

Many years ago, I had set up my very first website. It was a Sudoku generator based on a selected difficulty level.

To promote the website, I wanted to have a newsletter so I could email my subscribers a daily puzzle to print out.

At the time, I was using AWeber as my newsletter service.

I was very annoyed with the fact that to capture the email of my visitors I would have to send them to a new AWeber page where they would fill out a form, and then instruct them to go to their email to click the confirmation link, and that would get then to a confirmation page on AWeber, and then finally back to my website.

Those were way too many clicks to get yourself a printable sudoku puzzle!

What I wanted, was a way to plug into the AWeber service, and communicate with them, on my visitors’ behalf, while the visitors were staying on my website. What I wanted was an API, which is short for Application Programming Interface.

They did not offer that at the time, so I decided to simulate one by using a “fake browser” to make it “as if” the user has opened their page instead of my mine.

I was very proud of my solution, and it worked very well for about ten days until my account was banned for violation of terms of service.

Today they do offer an API, so I don’t have to resort to “shady tactics” to keep the users on my page.

I use this little story to make it evident why APIs are so powerful. I am all about automation and integration and the APIs make all this possible in a way that is reliable and makes sense and does not violate any agreements 🙂

I don’t think it makes sense to create an online service in today’s world and not to develop an API for it. Interconnectivity and interoperability increase the rate of adoption of your service. And you open it up to be used in ways that you may not even have imagined before and if you connect it, for example, to a platform like Zappier.

In conclusion, I feel that all software development is moving towards building APIs that will talk to each other. Even the front-end of websites will be a templating API making requests to a back end API.

This change will bring about dramatic shifts it what software developers do and will open the doors for non-developers to be even more expressive and sophisticated in their creations. Add AI to this mix, and we can only guess at the limits 🙂

Conversions versus Beauty

As a designer, or even as a client, you are thinking of starting a new project, and you need to begin your UI design. 

And you’re thinking: it has to be modern, it has to be beautiful, it has to be exciting, it has to evoke these feelings and then from the infinite number of possibilities you need to choose something that will be your design. 

This can be daunting, and it may not actually serve you. And I confess I had made this mistake in the past a lot! I would learn new fancy ways to do something, and then I would use it everywhere because, drum rolls, I knew how! That is an excellent way to learn and practice your craft, but it is a terrible way to think about design. 

When I began working in projects that had a real business behind them, it became evident that once the design was done, other questions would come to the fore:

– how many visitors do we have

– out of those, how many became leads (subscribers)?

– out of those, how many purchased a product? 

– and out of those, how many become huge fans or joined the mastermind groups? 

These questions have something in common. They are not about esthetics, they are about numbers, and specifically about conversion rates: how much of X turned into Y? 

Now I start all the projects with these questions before even considering the design!

Who is supposed to use this website, and what for? And once I have an answer, what kind of action do I want my audience to take when they interact with my site? How will I measure that? And how do I maximize that? 

The answers to these questions will limit my design choices. And that is a good thing because fewer choices increase the chance of making the “right choice!”. If you go too crazy with your design, users will not be able to relate to it. If you are the same, then why should a client choose you? You need to find the sweet spot! Something that the potential customers can relate to, but that is also customized to serve their needs. 

This means you will need to choose specific fonts, certain colors, and image themes that will be dictated by your target audience and not by what you think “is beautiful.” 

If you are a designer and you need to make a choice, ask yourself: will this bring me closer to my conversion goals or not (pretty comes second).

And if you are a client, be very careful when you ask for a change because your brother does not like the colors, or you don’t like green. If you build something to serve an audience, then their preferences matter over yours. 

Of course, every decision you make can be wrong. You can make informed assumptions about your audience, read the studies about how color influences people and how the font face can make you look serious or playful, but you can still be wrong and not meet the conversion rates you were aiming for. This does not mean you have failed, it means you need to adapt.

An excellent way to adapt is to use A/B testing. I am still studying this concept myself, and it looks like a powerful way to reach “DDD” which is Data-Driven Design, versus “Beauty Driven Design” (which is a polite way to say “Guess Driven Design”). 

My challenge with A/B testing so far is that you need to have a broad test audience to be able to safely conclude that one variant of the test is definitely better than the other and by how much. If you’re into statistics, you’ll love this, and you can do the math yourself! If you are not, choose your testing tool wisely to avoid running meaningless tests with results that are not actually relevant. 

A case study is the website PenguinMagic. When I first looked at it, my design eye judged it as ugly and imaged someone lost their money paying for that. But I have learned that this “ugly design” converts for the people it is addressed to. Believe it or not, this is a multi-million dollar business. They made the clear choice of conversions over beauty!

How about your web project? Do you have goals for it? Are they conversion goals or “being pretty” goals? 

And finally, if you can recommend a useful A/B testing resource, I’d love to read more about it. 

Using Visual Builders for your website

I used to hate visual builders!

They looked great on the demo page, but as soon as you would like to do something somewhat different and custom, you would end up fighting with all the constraints put in place.

Because of this issue, I would almost always design my pages from scratch in HTML code and CSS style. Oh, the power and flexibility!

In recent projects, I have been forced to use visual builders because the end client wanted to be able to update the design themselves later on. They insisted that it had to be easy, so I had to go the visual builder way.

What I have learned is that the builders have come a long way since I have first looked at them, and they offer great flexibility within the constraints of their design.

And the constraints are a good thing. It keeps your look consistent and makes it a breeze to create layouts for various screen sizes. That is always a big challenge when writing code from scratch without any design system in place that limits your choices but maximizes compatibility.

The Builder I like the most so far is the one that comes with DIVI, the WordPress theme. Once you get to know it, you can build exciting layouts pretty fast.

There is a problem I have with it, though. That is performance. And sometimes, the output code seems to be unnecessarily complicated, making the size of your page bigger than it needs to be.

So there is always a trade-off.

How do I choose between one or another?

For large projects, I prefer to create my custom template and design systems for the performance and flexibility benefits.

And for smaller projects, I will use DIVI or something similar to create the design faster and visually.

We go back to the saying: use the right tool for the job 🙂

A gorgeous website is different from a GOOD website

Can over-designing things become a problem?

We like pretty things. I get that.

We like the restaurant to be clean and inviting. Easy to understand.

But where do you draw the line? Where do you find a balance between pretty and functional?

I struggle with finding this balance my work. I want to use data to make a decision and not just my gut feeling.

I am a computer nerd. I design software, I write code, and I take pride in my work. But I am often faced with this dilemma:

Should I invest more in software design or graphic design when working on a project?

Nobody will use a pretty app that is not working.

I think we can all agree on that.

At the other extreme, some people will use an ugly app because it solves a big problem reliably.

But I want to do better and find some middle ground.

Good software design improves stability and performance. Makes maintenance easier, thus reducing the costs.

Good graphic design makes the user experience more comfortable. Reduces the learning curve and makes your application more widespread.

So how do you split your budget? Is it 50/50? Or should you focus more on performance, for example?

The more I think about this, the more I realize that your target audience is the one that will dictate what your focus should be.

If you have software that helps people to solve a big problem, probably nobody will care that it is ugly, not intuitive, and incredibly awkward to use. If they are desperate for a solution, they will accept one, no matter how it is delivered.

On the other hand, if you are talking about a game with bubbles… well those need to be some pretty bubbles to keep the audience engaged. In the case of games, you are not after a solution; you are after an “experience of play.”

How does this apply to websites?

I guess if your offer solves a significant problem, you can be forgiven if your site’s design is still from the 90s. But if there is a lot of competition, then a good design may help you stand out.

And this word “may” is where the problem comes in for me. How can I quantify it in terms of a website goal? It is intuitive to think that a good design will increase sales, but you also need to know how much? You need to have some idea of how close you will get to your end goal, so you know how much you are willing to invest in that good design.

Designers are very excited to make things pretty, to make them pop, to make them unique. And I understand that. You are making art, and you want it to be beautiful. But is it really useful?

I fall into this trap myself with software when I over-design something just for the pleasure of creating a “perfect design.” But in the end, that does not benefit the client all that much. There are so many examples with people doing very well, by using poorly designed tools.

They’re also amazing designs, both software, and graphic, that nobody uses.

To help make this decision more comfortable (and profitable), I’d like to know a way to quantify the benefits of excellent graphic design. Any thoughts?