Welcome to the New Marketing to Convert Blog!

I have now moved to a self-hosted blog from wordpress.com and want to share my experience with moving the site. The main difficulties were:

  • Comparing hosting providers for WP blogs and identifying important features that should be included in the offer.
  • Coming up with a domain name for the blog. I had to analyze the broad spectrum of topics represented on this blog and came up with Marketing to Convert as something conveying the essence and the purpose behind the articles.
  • Finding suitable and GDPR-compatible plugins for analytics, cookies, etc.
  • Finding how to re-implement the functionality of the previous blog (e.g. the WordPress following button is now implemented through the email subscription widget).
  • Fine-tuning the theme and the layout (I stayed with the same theme as on allaroundmarketing.wordpress.com, however, this still looked different on a self-hosted blog). I chose this theme because of good color contrast and the overall sleek and stylish look, however, I am still not 100% satisfied with the font readability.
  • Setting up additional functionality, such as social sharing buttons, etc.
  • Selecting a suitable SEO-Plugin (I went with Yoast first, however, I did not like its functionality and selected Rank Math instead).
  • Updating connected Social Media accounts, including my personal accounts.

There are still some tasks that remain open, such as changing the blog logo and further exploring the additional functionality now available. I am also still thinking about how to handle the existing (old) blog and make the transition as smooth as possible (e.g. checking for backlinks, handling subscriptions, etc.). There is also a lot of SEO optimization to be done both for the articles and for the blog as a whole. However, at this point, I am satisfied with the first results and motivated to work further on improving the visibility of the new website.

 

Usability Testing: Recap Webmontag Bonn

This post is a recap of Webmontag Bonn (October 21, 2019) that was dedicated to usability testing topics. The speaker explained Think Aloud method in detail. This presentation was followed by a discussion on website usability and accessibility.

This post is a recap of Webmontag Bonn (October 21, 2019) that was dedicated to usability testing topics.

It started with a talk by the organizer, Lina D., that introduced general concepts of usability testing. Normally, it includes figuring out how intuitive a UI is, how users handle their tasks within a UI and what improvements can be possibly made. Some common methods include prototyping, benchmarking, case studies with personas, interviews, eye-tracking, etc. The speaker went into detail regarding the Think Aloud method. This method has the following parts:

  • A prototype is built (can be also done on existing software or even on a paper prototype)
  • A use case is written (i.e. a task that a user has to fulfill);
  • Users are invited for a short interview;
  • During ice-breaker, the tester tries to define what customer type the user belongs to;
  • A task is presented to the user. They have to complete the task while commenting on their actions;
  • The test completes with a short feedback round;
  • The whole test lasts about 20 minutes

The talk was followed by a lively discussion about the presented method and also about general usability problems. One question was how to select test participants, especially in the case of a very narrow target group. For example, you can try to reach them in person through industry events, etc. My suggestion was to launch the software and get feedback by analyzing analytics data or making online surveys (though from my experience a lot of people use this survey instead of customer service chat). Somebody also suggested recruiting the participants for one-on-one tests by displaying banners within the software.

There was also a lengthy discussion on accessibility. In the public sector in Germany, there exist accessibility catalogs that constitute minimum requirements for the software to be accepted. However, without proper accessibility testing, such catalogs are only partially helpful. It was noted that a lot of times users with a disability have a completely different workflow interacting with a software or a website.

The last topic that was brought up in the large discussion round was about how to onboard users to new software. For example, through instructional videos, FAQs, pop-up windows within the user interface (UI), or an overlay with explanations of different elements on the first login.

After this, the discussions of the Webmontag continued in smaller groups accompanied by pizza and cold drinks.

Share this post

It Starts with a Z: Visual Hierarchy in Banner Design

Visual hierarchy defines the arrangement or presentation of elements on a screen by importance. More important elements are supposed to draw the attention of a website visitor first. UX designers use a variety of methods to assign visual hierarchy to design elements (also see my post on UX design principles). In this post, I will explain how UX design principle of visual hierarchy applies to designing website banners.

  • Color contrast
    • Light colors (less important elements) vs dark colors (more important elements)
    • Unsaturated colors (less important elements) to colors with high saturation (more important elements)
    • Use of complementary colors to highlight an important element (e.g. a red button on a blue background)
  • Shape (e.g. grouping important elements by placing them close to each other (proximity) or putting a boundary around them)
  • Size (more important elements are larger than less important ones)
  • Perspective (foreground vs background), also figure-ground relationship

For a banner, a common pattern for organizing content is called ‘Z-pattern’. It can be explained as follows: the eye movement starts in the upper left-hand corner, then the focus shifts to the right (where normally teaser text is placed), then moves to the left-hand side (e.g. with a visual) and then goes to the right-hand corner, mostly to a CTA.

Below we will look at how these principles are utilized in banners on websites of several skincare companies.

The first banner (LUSH) does not follow the Z-pattern, but arranges the information vertically and centered. This works for headlines, however, if the text was longer, aligning it to the left would achieve better readability. We also see that the color of the teaser text and the CTA are low contrast compared to the background, so they can barely be read. The navigation bar, however, achieves a high contrast compared to the banner. The text (especially the sub-headline and the CTA) is relatively small compared to the background elements, thus, there is no contrast by size.  Shape or perspective are also not used. When visiting the page, the user would notice the background and the navigation bar first.

banner lush

The next banner is by The Body Shop. We can see the Z-pattern being used in this banner, with the CTA placed in the bottom left corner. The teaser text has good contrast in color (white on a dark purple background) and in size. We can also see that the products’ visual and the text elements are arranged in groups that allows for better visual separation (proximity principle). However, the CTA has lower contrast in color and size than the headline, it is also not separated from the text by a boundary but only underlined (as with hyperlinks).

bodyshop banner

The next banner by Yves Rocher also incorporates the  Z-pattern. Red is used as complementary color to green to highlight more important elements on the screen. The visual hierarchy is supported by grouping the elements of the visual and the text against the background. The background is also less saturated than the visual and the text. Additionally, important parts are highlighted by a boundary (marketing claim: Limited Edition and the CTA)  by color contrast (CTA and price) and by size (price).  The text is also aligned to the left, which allows for better readability. However, the header is designed in pale yellow, the same as background elements, which makes it stand out less.

yvesrocher

The last banner I would like to have a look at is L’Occitaine, also with the Z-pattern. A good point in the design of this banner is that the text and the CTA are not only grouped together and surrounded by a boundary but are also put against a white background, different to that of the visual. CTA in yellow, however, has middle contrast to the background. The teaser text is rather long and is aligned to the center, which makes it more difficult to read. Although yellow is the main branding color of L’Occitaine, it is perceived by the brain as a signal color and its overuse in the design as well as in visuals causes the page to look a bit “busy”.

loccitaine banner

In this post, we have had a look at how visual hierarchy can be realized in banner design. We saw that not only corporate identity, design guidelines or aesthetics play a role, but also UX/UI factors, that is how users perceive the banner and get motivated to take a desired action.

Share this post