Website design audit
www.­bhwomen­.org

Website design audit
www.bhwomen.org

8 critical

9 typical

21 correct

Basic parameters

1. Website loading speed

Loading speed is one of the most important indicators of site quality today that affects search engine rankings and conversion.

Desktop

Website loading speed on desktop
In short, your website should load as fast as possible.

Mobile

Website loading speed on desktop
In short, your website should load as fast as possible.

Recommendations:

Optimize images, JavaScript, CSS

2. Mobile friendly

In recent years, more and more users are choosing mobile devices to find information, and it is very important to be mobile-friendly.

Adaptive

Your page is not mobile-friendly
Google rewards mobile-friendly sites and punishes the not-so-friendly.
Your page is not mobile-friendly
Google rewards mobile-friendly sites and punishes the not-so-friendly.

Recommendations:

The site looks nice on a mobile phone, but the Google test shows that it is not mobile-friendly.
Perhaps, the site has some errors. Developers expertise is required.

3. Unambiguity and clarity

Looking at the first screen of the site, the user should immediately understand what the site is about and how it will be useful to him.

Unambiguity and clarity

Web page message is unclear
The picture is great. Unfortunately, it’s not clear from the homepage what the company actually does.

Recommendations:

The first screen should give the user some hints so that they could get the right impression on the website’s content and mission. One of the possible solutions is set out below.

 Web page message is clear
That’s how UX may fix this.

4. Navigation

  • The navigation is in its usual place and is clear.
  • The logo is clickable and leads to the main page.
  • The main menu item in which the user is located is highlighted.
  • 404 page handler.
  • No clickable breadcrumbs.

Recommendations:

Create breadcrumbs. This makes it easier for the user to navigate.

  • The site has a favicon.
  • The site has instant scrolling up on long pages.
  • The site header takes up too much usable space.
Wrong website header height
A website header is one of the most valuable areas of your website.

Recommendations:

The height of the website header should be on average from 60 to 120 pixels.
For example, as given below.

Right website header height
That’s why it’s essential to use it wisely.
  • The size of clickable elements is optimal.

5. Uniformity of interface and forms

  • Site structure (header, footer, main menu) is the same on all pages.

6. Readability

  • The text is contrasting.
  • Headings and subheadings break the text into meaningful blocks.
  • The text alternates with images.

Recommendations:

Break up long text with images, headings, and subheadings.
This will improve the readability of your texts.

Design

1. Functionality

  • There are no unnecessary elements on the site.
  • There is not enough white space on the site.
Not enough white space on the site
White space (also called negative space) is the area between the elements on a web page.
Not enough white space on the site
It makes information easier to digest.

Recommendations:

There should be enough “air” on the website, that is, empty space.
It makes content stand out and allows users to focus on it.
One of the solutions may be the following:

Enough white space on the site
The sweet spot to aim for line spacing is between 130-150% of the font size.

2. Composition and accents

  • The accents on the site are placed correctly.
  • Elements on the site are contrasting.
  • The site uses no more than three colors.
  • The text on the button tells about the action that will be performed on click.
  • The site is not using the grid correctly.
How to use grid correctly
A grid is a system for organizing the content on the page and creating alignment and order.
How to use grid correctly
It forms the basic structure or skeleton of your user interface, so when there’s an error in its usage, the user experience suffers.

Recommendations:

Use the grid correctly in order to create horizontal harmony and keep your website pages design clean and neat. That’s how it works:

How to use grid correctly
Use website grids correctly to make design decisions and create a good user experience.

3. Uniformity

  • Indentation values, headings and text sizes are formatted uniformly.

4. Typography

  • The text is divided into paragraphs up to 10 lines.
  • The optimal size for body text is 16–20 px.
  • The string length is about 130 characters long, including spaces.

Recommendations:

The recommended line length is 40-80 characters.

  • The site uses no more than three fonts.
  • The rules of using caps typed text.

Recommendations:

Using only uppercase characters makes it difficult to read. Use a larger space between capital letters. A value of 10% is fine.

Space between capital letters
The amount of letter spacing in a text affects legibility.

5. Communication with clients

  • A clear and understandable call to action.

Recommendations:

We recommend to place main call to action in the header or first screen.

Clear call to action
A clear call to action nobody could resist is what UX audit may offer.
  • Simple communication channel.
  • All calls to action on the pages are visually noticeable.
  • Contact details are easily accessible.
  • The calendar of events is not very clear.
Calendar of events is not clear
An unclear calendar of events is one of the barriers you create for users to reach your business.

Recommendations:

We recommend making the days of events more visible. For example, as given below.

Calendar of events is clear
Make your business accessible at each step.
  • The contacts section is very big and does not fit on the screen.
Too big contacts section
Contact form is one of the sensitive customer touchpoints.

Recommendations:

Make the contacts section more compact and noticeable. E-mail addresses should be interactive. One of the solutions may be the following:

Contacts section is optimized
It’s essential to make contact form compact and noticeable.

Other pages

  • About us page. This page has the same mistakes.

Recommendations:

Align the blocks to the grid. Decrease the line length. Dilute large text with pictures.
Reduce the size of the blocks with profiles, they look gigantic.
For example, as shown below on the right.

  • Contact us page.

Recommendations:

Align the blocks to the grid. E-mail addresses should be interactive. We recommend the following structure below on the right.

Conclusion

Here are the changes that PieSoft designers team highly recommend you to conduct in order to turn your website into the strongest provider of your company’s vision and mission statement.

PieSoft UX audit for Business Women of Bosnia and Herzegovina
PieSoft UX audit for Business Women of Bosnia and Herzegovina

First impression first

Since it takes half a blink to make a first impression, it’s very important for the first screen of the website to deliver in short and simple way the idea of:

  • What it was created for (quick message to a specific target audience about your mission).
  • What the visitor should do (main call(s) to action in the site header / first screen).
  • And don’t forget to shrink the header of the site to acceptable size to give your site a facelift, with minimal effort.

Need for speed

Improve your site loading speed rate – and you’d be impressed how many visitors you’ve been losing before.

Breadcrumb not to get lost

The navigation on your website should be improved by adding clickable breadcrumbs to allow the users to keep track and maintain awareness of their location.

Breath of fresh air

Your site needs a fresh, spacious and harmonious environment for your idea to function and communicate successfully. To reach this you need:

  • Improve your typography.
  • Align site blocks to the grid.
  • Add photos and pictures to the text, divide it into meaningful blocks.
  • Give more white space to the pages.

Communication is the key

Great, the user has got your message. Now it’s important not to lose track. To this end, redesign the contact section and the calendar of events to make them clearer and more user-friendly.

PieSoft web developers’ expertise may be needed

The website looks great on our UX designer’s mobile device though, responsive testing shows it’s not mobile friendly. We recommend you to consult web developers to avoid further problems.

Not sure whether your website is up to date and user friendly, but not ready to cooperate with us? No problems, Get PieSoft Express UX Audit For Free. That won’t cost you a penny, but may be a priceless advice on how make you website work for you.

Work with us

We are open to new challenging tasks and we'd love to learn more about your project.

Let's talk