Articles

Is Change Positive for Web Designers?

As a web designer, you’re constantly being bombarded with messages that tell you to acquire new skills, try new tools, and keep on hustling.

But if you’re constantly changing things up, does it do the opposite of what you originally set out to do? In other words, if you always have to start over, is it possible to ever really achieve anything?

I think it ultimately depends on why you’re making the change.

When Change Is the Right Move for Web Designers

One of the reasons I despise New Year’s resolutions is because it’s change for the sake of change:

It’s a new year, so it’s time to get all hyped up about this one thing I need to change about myself!

There’s a reason why so many resolutions fail by February. When you force a change, it’s really hard to stay invested in it, especially if it’s something you’ve chosen to do because everyone else has.

Change should be driven by necessity.

That said, when it comes time to make changes as a web designer, is it ever really necessary? Or are you learning new skills, trying new tools, or switching up your client list simply because it’s what you believe you have to do?

It’s important to be open to change, but you should only invest your time, money, or effort when it’s the absolute right move for you. Here are some ways you’ll know when that’s the case:

Learn New Skills To…

…Round Out the Basics

If you’re a new designer and there are gaps in your education and training (and I don’t mean formally, just in general), then there’s no reason to hesitate in spending time to acquire those skills.

This doesn’t just go for basic skills as a web designer or as a coder. This also goes for skills you need to become a successful freelancer.

…Add Evergreen Skills to Future-Proof Your Position

As you move up in your career, you’ll eventually find other skills worth learning. Just make sure they’ll help you move the needle.

The best way to do that is to focus on acquiring evergreen skills that’ll always be useful to you, no matter what stage you’re at in your career or how the design landscape changes. They should also go beyond the average skill set of a designer, so they help you stand out further from the pack.

… Create a Better Situation for Yourself

The web is constantly evolving, which means that your responsibilities and skills as a web designer will have to change in order to adapt. Whenever one of these shake-ups occurs, you should either be ready to master the needed skill right away or, better yet, have been working on it beforehand.

Take, Google’s mobile-first indexing, for instance. It announced it was going to be making this shift years before website rankings were impacted. Designers had plenty of time to not only learn what was needed to design for the mobile-first web, but to get all their existing clients’ sites in shape for it.

Adopt New Tools When…

…Your Existing Ones Are Slowing You Down

If you’re doing a lot of things from-scratch (like writing emails to clients or creating contracts), that’s a good sign your toolbox needs some improvement.

As a web designer, you should be focused on creating, not on the tedious details involved in running a business or communicating with clients. That’s just not a good use of your time. A lot of this stuff can easily be automated with tools and templates.

…You’re Turning Down Business

In some cases, it’s the right thing to say “no” to prospective clients — like when they’re a bad fit or can’t afford your rates. However, there are other times when you desperately want to be able to say “yes”, but you don’t have the capacity for the job or you’re unable to cover the full scope of what they need.

This is where new tools come in handy. For instance, let’s say you’ve been approached by a ecommerce company that not only wants you to build a new store, but also needs it fully optimized for search (it’s not the first time this has happened either). Rather than turn something like that down, you may find that the addition of an SEO tool to your toolbox is all you need to be able to say “yes”.

…You Have Extra Room in Your Budget

Obviously, you don’t want to throw away money on a bunch of tools simply because a ton of people are talking about them. But you’ll eventually get to a point where the tools that served you well in the first year of business need to be replaced.

If you get to a point where you have extra time to experiment and there’s room in your budget for upgraded tools, go ahead and assess what you currently have and test out replacement solutions that will help you work better, faster, and smarter.

Look for New Business Opportunities If…

…You’re Not Doing Well

“Well” here is subjective. For instance:

  • If you’re not doing well financially, you probably need to look for more clients;
  • If you’re not doing well in terms of how you get along with clients, you should explore a niche that’s a better fit;
  • If you’re not happy with your job because burnout and stress have overtaken your life, then you might consider exploring other avenues of work.

When something has been amiss for awhile, the last thing you should do is lean into it and hope it gets better.

…The Web is Changing

Notice a trend here? Each of these changes (skills, tools, and now business opportunities) is often driven by the fact that the web is always changing. And as the web changes, you have to be ready to evolve.

In terms of business opportunities, what you’ll realistically need to do is look for new kinds of design work as technologies make your job obsolete. Take website builders like Wix or Shopify, for example. As business owners and entrepreneurs take it upon themselves to build their own websites, more and more web designers will need to find other kinds of clients and jobs to take on.

…You Want to Diversify Your Income

This is something many web designers are doing already as they’ve discovered how beneficial it is to have predictable recurring revenue streams.

But even if you’ve already found one way to diversify and stabilize your income (like by offering website maintenance services), you may become interested in exploring other opportunities along the way. If you have the capacity to pursue them, then go for it.

Is Change a Good Idea?

As you can see, change can be a very good thing for a web designer, their business, and their clients. However, there should be a very good reason for the change and you need to prepare yourself for how it’s going to impact what you’re doing now before implementing it. No amount of change can happen without some level of sacrifice.

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

Case Study: 8 Design Tips That Increased My Ecommerce Conversions By 42% 

When it comes to increasing sales for your ecommerce store, there are 3 levers you can pull: You can increase your average order value; You can increase the amount of traffic to your site; You can increase your conversion rate.

While all of the above are important, the cheapest, most effective way to grow your sales is by improving your conversion rate.

For most online stores, low conversion rates are typically the result of a poor design or a bad user experience. Your visitors may not resonate with the look and feel of your website or they may have problems finding the information they need in order to make a purchase.

In this post, I will walk you through the exact steps I took to increase my desktop conversion rate by 46% and my mobile conversion rate by 39% with my last site redesign. I will also show you how you can apply these same design principles to optimize the conversion rate for your own online store.

Even if your ecommerce business is already performing well, this post will help you achieve even better results.

What Is Considered A Good Ecommerce Conversion Rate? 

Monitoring your conversion rate is crucial to building a profitable ecommerce business. And most analytics tools can help you measure this data out of the box.

Your conversion rate is calculated by simply dividing the number of desired actions by the number of website visitors in a given period. For example, if your website is getting 50 conversions for every 5,000 visitors, your conversion rate is 1%.

Depending on the specific type of online business you run, your conversions may include online sales, email signups, add to carts, or any other KPI you wish to measure. But in the case of an ecommerce store, your primary focus should be your purchase conversion rate.

On average, ecommerce stores have a purchase conversion rate of 1% – 2%. What’s more, experts say a good conversion rate is anywhere from 2% to 5%. This should be your baseline as you measure your online store’s success.

The Conversion Results of My Last Site Redesign

Before we dive into the nitty gritty details of how I improved my conversion rate, here are my overall results and exactly how I conducted my experiment.

First off, I run Bumblebee Linens, an ecommerce store that sells handkerchiefs online.

Because my site gets a ton of traffic from content pages that do not directly convert to sales, I measured my conversion rate based on my most predictable traffic sources.

As a result, all of my conversion data was taken from targeted PPC ad traffic sources like Google Shopping and Google Adwords. After all, my Google ads traffic is very steady and always converts at a consistent percentage.

Before I redesigned my site, the conversion rate for my ecommerce store hovered at around 3% which is above average. But the look and feel of the site was dated and desperately needed a refresh. Overall, the entire redesign took approximately 7 weeks and cost me roughly $1840.

Here are the conversion results from my updated design compared to the original:

  • Desktop conversion rates increased by 46%
  • Mobile conversion rates increased by 26% 
  • Tablet conversion rates increased by 32% 

The remainder of this post will highlight the specific elements of the redesign that contributed to these increases. (Note: I made all of my redesign changes live simultaneously so it’s difficult to determine which specific optimization contributed the most gains.)

8 Ecommerce Design Tips To Optimize Your Conversion Rate

If your ecommerce store is not performing as well as it should, there are many aspects of the user experience that could be negatively impacting sales. Even a seemingly innocuous design choice like your font size or the color of your buttons can have a significant impact on your overall conversion rate.

If you want to systematically improve the conversion rate for your ecommerce store, you should follow these 8 design steps.

1. Use A Consistent and Complementary Color Scheme 

Use color.adobe.com to choose complementary colors when redesigning your website.

A well chosen color scheme can instantly attract a customer’s attention, evoke emotion, and drive users to take action. After all, how a customer feels about your website can be the deciding factor between completing checkout or bouncing from your shop.

A well designed ecommerce store should utilize at least 3 complementary colors that are consistently applied across every page of your website.

If you don’t have a good eye for color, you can use a free tool like color.adobe.com which will help you mix and match different colors that go well together.

For my site redesign, I wanted a modern feel so I chose teal, hot pink, and yellow for my color palette.

I also assigned each color a specific purpose on my site:

  • Teal was applied to give the site a bright, overall color for a young and hip feel;
  • Yellow was used to draw attention to marketing elements like free shipping and special offers;
  • Hot Pink was used for all action buttons on the site.

Overall, every single page of your ecommerce store should have 1 main call to action (using a bright color like hot pink) that guides a customer closer towards checkout.

For example on my front page, the hot pink button “Shop Our Personalized Collection” pops out of the page and catches a user’s attention right away. We want visitors to shop our personalized collection because our personalized products are the highest margin products in our store.

2. Simplify Your Navigation 

Is your menu too complicated? Is your navbar taking up too much screen real estate?

A good rule of thumb for an ecommerce store is to minimize the number of clicks for a customer to add to cart. As a result, you should avoid nesting your product categories in more than 1 level of hierarchy.

If you have too many categories in your shop to display all at once, choose your best selling categories for your main menu and lump your less trafficked categories in a separate tab.

For my store, I decided to use a top-level, hover style drop-down menu as shown in the photo below.

Top-level navigation is one way to organize and display your product categories.

My old design utilized left hand style navigation which took up too much screen real estate. And freeing up the extra space allowed me to blow up my category and product images by 300%. With my new navigation menu, every visitor can add to cart in just three clicks: One click to find a product category; One click to view the product description; One click to add to cart.

Once you’ve designed your menu, pretend that you are a customer and try to shop on your site. Is the content easy to read? Do the important elements pop out? Can you find the information you need right away? Analyzing your site from a customer’s perspective will help you improve your users’ shopping experience.

3. Display Trust Factors On Every Page 

Free shipping, easy returns, and trust are crucial to driving conversions. 

Trust is the most important value you must establish with your customer.

Unless you’re Amazon or a big box store, people have likely never heard of your brand and you have to reassure them that it’s safe to buy from your store.

Due to Amazon’s influence in the ecommerce space, most customers look for 3 things when shopping at an online boutique for the first time:

  • Fast and free shipping;
  • Easy returns;
  • A way to reach customer support.

Displaying your phone number and email address is very important! Adding your store hours also helps to make your site look legit to new visitors. If you don’t have a recognizable brand, customers will want to know that they can reach a real human in case of problems or questions.

In the above image, you’ll notice that I placed my trust factors in the header, so they can be seen above the fold on every single page. We’ve also been featured on the Today show and a bunch of magazines. So I made sure to display this social proof on the bottom of every page.

Don’t hesitate to flaunt your achievements to reinforce trust. 

In addition, customer testimonials provide social proof and credibility to your website. As a result, it’s important to regularly reach out to happy customers for testimonials and endorsements. On our redesigned site, you’ll find the testimonials section right below our press mentions.

Testimonials lend social proof and credibility to your website.

Remember, to generate conversions as an unknown store or brand, you first have to gain your customers’ trust. Make it easy for them to contact you or get a full refund if anything goes wrong with their purchase. By showing a genuine concern for customer satisfaction, you’ll be able to build a solid reputation over time.

4. Emphasize Your Unique Value Proposition

Users spend an average of 5.59 seconds looking at your website’s written content. And in those 5.59 seconds, you must capture their interest or else they’ll bounce from your page. Right off the bat, you must convey to a user exactly what you sell and why they should buy from your store over a competitor.

What’s more, every single page on your site should communicate your unique value proposition. A unique value proposition is a concise statement that describes what makes your business special and outlines what your store does better than anyone else. The best way to show off your unique value proposition is to use an eye-catching image alongside compelling copy.

For example, here’s the first thing a user sees on my home page above the fold:

Right away, a user is shown a large image of one of our best selling personalized handkerchiefs. And right beside that image is a clear and concise value proposition, followed by a call to action to shop in our store.

Displaying your value proposition should not be limited to your home page. We also include our unique value proposition on every category page as well. Overall, you should include your value proposition on every landing page on your website.

5. Optimize The Visual Hierarchy Of Your Product Pages 

Every page on your site should have a single objective. And for your product pages, your goal is to get a customer to add to cart.

When designing a product page, you must apply a logical visual hierarchy to your design. A visual hierarchy is the order in which a user processes information on a page and in the case of a product page, there must be a clear path to your add to cart button with as few distractions as possible.

Here’s a screenshot of my old product page:

As you can see, my old product page is overwhelming. All of the design elements try to grab your attention at the same time and there are many different calls to action that blend together. To improve my product descriptions, I freshened up the color scheme and enlarged my product image by 266%. I also changed the placement of the buttons in a more logical flow.

Here’s what the redesigned product page looks like today:

By adjusting the size, color, contrast, and alignment of the page elements, I now force the customer to process my product information in a set path that leads directly to my primary call to action. For example, the hot pink color draws attention to the “Add to Cart” button over the “Reviews” button. Also, by applying a blue text color and teal background, I reassure customers that shopping with us is safe and risk free.

Overall, rearranging the design elements this way nearly doubled my add to cart percentage.

6. Simplify Your Checkout Process 

With our old site design, we would regularly receive feedback from confused customers who weren’t sure if they needed an account to purchase our products.

Here’s what our old checkout page looked like:

As you can see, there are too many choices. After all, a customer doesn’t need 3 ways to checkout and the choices are a little overwhelming.

Here’s what the checkout page looks like now:

Instead of offering 3 separate options for checkout, I consolidated them all into one and added a separate Paypal option (more on this later). First off, less than 6% of customers create an account so there was no reason to offer account creation as a separate option. Furthermore, displaying a login form was causing more headaches than it was worth because the majority of customers don’t even have an account. As a result, I decided to hide the form altogether by default.

Overall, when you are designing your checkout process, keep these optimization principles in mind.

Principle #1: Remove all unnecessary elements from the page. Don’t make the customer think and hide all elements that are not frequently used.

Principle #2: Display trust logos to assure customers of a secure checkout. In the image above, you’ll find trust logos on the right-hand side of the checkout page.

7. Optimize The Checkout Process For Mobile Users

4 out of 10 mobile users abandon their carts if they have a hard time entering their personal information. People don’t like entering their contact and credit card information using a tiny keyboard. What’s more, small buttons and too many form fields drive away mobile users. 79% of smartphone users shop online with their mobile devices, which is why you should optimize for mobile.

These days, a responsive design is par for the course but you can still screw things up if you are not careful. Here’s what my checkout process looks like on a desktop:

And here’s how the checkout page looks on a mobile device:

On mobile, the user’s cart contents are collapsed so it doesn’t occupy the entire screen. Overall, here were the mobile optimizations I made to checkout:

Optimization #1: Keep Your Checkout Form Short And Sweet

A mobile user should be able to tap buttons on your checkout page without accidentally hitting another option. Also, the buttons should be large enough to tap on a mobile device.

Given the smaller screen size of a mobile phone, keep your checkout form short and sweet with no extraneous options. Also, make sure you turn off autocorrect for your form fields. Otherwise, your phone’s autocorrect feature may frustrate users when they try to enter their address. In fact, we once had a customer get so frustrated trying to type in their city on their iPhone that they called us up and complained in frustration.

To fix this, you simply need to add the following tag to all of your text input fields.

<input type="text" name="name" autocorrect="off">

And to reduce frustration, you should also turn off auto-capitalization and auto-complete by adding auto-capitalization=”off” and auto-complete=”off” to all of your forms as well:

<input type="text" name="name" autocorrect="off" auto-capitalization="off" auto-complete="off">

In addition, for phone number entry, you should always display a numeric keypad as opposed to a regular keyboard:

Optimization #2: Automatically Import Your Customer Data If Possible

The less information mobile users have to enter in, the better. Payment options like Paypal Express and Amazon Payments can simplify the checkout process. These third-party payment processors automatically fill out a customer’s billing and shipping information which reduces typing and increases conversion rates.

To offer a more convenient checkout, I implemented PayPal One Touch, which alone increased my mobile conversion rates by 31%.

Here’s a quick tip when implementing Paypal: Make sure you display the Paypal button early in the checkout process before a user has entered in their information. Otherwise, it defeats the purpose of importing their information! In the first step of my checkout process, I explain each payment option in depth.

These simple changes made a huge difference in my conversion rate. And the number of PayPal users on my site nearly doubled from 13% to 23%!

8. Add A Sense Of Urgency

Most customers like to window shop and the best way to get a visitor to take action is to create a sense of urgency.

Whenever I run a sale, a big yellow countdown timer is displayed on every page of the website.

Note: It’s important to note that we only utilize this timer when there is actually a sale going on. Otherwise, you risk desensitizing your customers or losing trust.

In addition, I also display a countdown timer on the checkout page to create a sense of urgency to complete the payment process:

These extra design elements force a customer to take action sooner rather than later.

Final thoughts

Optimizing your conversion rate is an ongoing process. And testing your results is the only way to track your improvement.

Never go with your gut and always listen to the data. After all, sometimes an ugly site can out-convert a beautiful one.

Regardless, the design tips I demonstrated above will give you a solid foundation to start with. From there, you can further improve your website and optimize your conversion rate through repeated testing and tweaks. Good luck!

Source


Source de l’article sur Webdesignerdepot

How to Improve Largest Contentful Paint (LCP) and SEO

Contentful; Webster’s Dictionary defines “contentful” as… not found. Clearly someone made up this word, but that is not necessarily a bad thing.

The world of user experience metrics is moving quickly, so new terminology is needed. Largest Contentful Paint (LCP) is one of a number of metrics measuring the render time of content on a web page.

What is Largest Contentful Paint?

Google defines LCP as “the render time of the largest content element visible within the viewport.” For what we are talking about in this blog, we will consider “content” to be an image, typically a JPEG or PNG file. In most cases, “largest” points to a hero image that is “above the fold” and is one of the first images people will notice when loading the page. Applying optimization to this largest content is critical to improving LCP.

It is probably more instructive to view LCP relative to other metrics. For example, First Contentful Paint (FCP) and Visually Complete book end LCP.

Each metric has its pros and cons, but LCP is a happy medium. LCP marks when web page loading starts to have a substantial impact on user experience.

In Google’s opinion, to provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. Poor values are anything greater than 4 seconds.

How Does Largest Contentful Paint Impact Lighthouse Scores and SEO?

LCP is now part of several “Core Web Vitals” scores that Google will measure in its ranking algorithm. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

In the case of the overall Google Lighthouse score, LCP represents 25% weighting on the performance score of Lighthouse version 6.0. This makes LCP the most important Core Web Vitals metric in determining the performance score.

While Google has indicated that content is still the most important factor in SEO ranking, a better user experience (as measured by Core Web Vitals) will generate higher rankings in a crowded field. If there are many websites competing for the top search engine spots, then Largest Contentful Paint will play a critical factor in rankings.

How to Improve Largest Contentful Paint

Now that you know that LCP is important, what can you do to improve it by making content load faster? Google provides a number of suggestions, but the most effective technique is to optimize content for the device requesting it.

For example, a website includes an 800kb JPEG image that is intended for high resolution desktops. On a smartphone, that would be optimized down to less than 100kb, with no perceptible impact on quality. LCP can improve by more than 60% — or several seconds — through this single optimization.

Find Savings in Largest Contentful Paint by using Image Speed Test

Image Speed Test is a great tool offered by ImageEngine.io that provides an analysis of LCP improvement opportunities. Just paste in the URL of the web page you are interested in optimizing, and the test will show you:

  • Image Payload Reduction
  • Speed Index
  • Largest Contentful Paint
  • Page Load Time (Visually Complete)

It also provides a video of the web page loading with and without optimizations. Finally, it analyses each image to provide an estimate of payload savings. In this case, the “largest content” on the page is this image. With optimizations, the image payload is reduced by 94%. That delivers a huge improvement in LCP.

How Does ImageEngine Improve LCP

ImageEngine is an image content delivery network (CDN) service that makes image optimization simple. Basically, for each image on the page, the image CDN will:

  1. Detect the device model requesting the web page;
  2. Optimize the image in terms of size, compression, image format;
  3. Deliver via a CDN edge server that is geographically closest to the user.

ImageEngine improves web performance for every image on the page, including the largest. You can learn more about ImageEngine here, and also sign up for a free trial.

Best Practices: Preconnect

In addition to using an image CDN like ImageEngine, a few other best practices can improve LCP. Using the resource hints to provide a preconnect for your content can streamline the download process.

For example, putting the following link statement in the HTML will accelerate the download process. The link statement will make the browser connect to the third party as early as possible so that download can start sooner. ImageEngine’s optimizations make each image download smaller and faster, but preconnect save time in the connection phase.

Best Practices: Minimize Blocking JavaScript and CSS

When JavaScript or CSS is “blocking” it means that the browser needs to parse and execute CSS and JavaScript in order to paint the final state of the page in the viewport.

Any website today relies heavily on both JavaScript and CSS, which means that it is almost impossible to avoid some render blocking resources. On a general note: be careful with what kind of CSS and JavaScript is referenced inside the <head> element. Make sure that only the strictly necessary resources are loaded in <head>. The rest can be deferred or loaded asynchronously.

When looking to improve the LCP specifically, there are some practices worth looking into more deeply.

Inline Critical CSS

It is not an easy task, but if the browser can avoid making a request to get the CSS needed to render the critical part of the page – usually the “above the fold” part – the LCP is likely to occur earlier. Also you will avoid content shifting around and maybe even a Flash of Unstyled Content (FOUC).

The critical CSS — the CSS needed by the browser to set up the structure and important styles of the part of the page shown above the fold — should in-inlined. This inlined CSS may also refer to background images, which of course should also be served by an Image CDN.

Do Not Use JavaScript to (lazy) Load Images

Many modern browsers natively support lazy loading, without the use of JavaScript. Because images usually are heavily involved in the performance of LCP, it is best practice to leave image loading to the browser and avoid adding JavaScript in order to lazy load images.

Lazy loading driven by JavaScript will add additional latency if the browser first has to load and parse JavaScript, then wait for it to execute, and then render images. This practice will also break the pre-parser in the browser.

If an image CDN is used to optimize images, then the benefits of lazy loading become much smaller. Especially large hero images that are above the fold have a large impact on LCP and will not benefit from being lazy loaded with JavaScript. It is best not to make JavaScript a blocking issue for rendering images, but rather rely on the browser’s own ability to select which images should be lazy loaded.

 

[– This is a sponsored post on behalf of ImageEngine –]

Source


Source de l’article sur Webdesignerdepot