Design Review: Low Carb USA

September 21, 2020
Design
LinkedInTwitterFacebookEmail
This post is part of a post series called Design Series
  1. Design Review: Autozone
  2. Design Review: Low Carb USA
  3. Design Review Special Halloween Post: Spirit Halloween
  4. Design Review: Patreon

Low Carb USA is a community for doctors, scientists, and the average person with a focus on addressing the obesity and metabolic health crisis. This year, their conference typically held in San Diego, went all digital because of COVID-19. Since this is a website focused on science and health guidelines, it’s a bit more technical than the average website online. But just because it deals with things like “Prof. Tim Noakes – The Effect of PUFAs on Metabolic Health: Ep 54” doesn’t mean we can’t also have great design.

Jump to Image of the Entire Site (bottom of post).

Header Design

We start off with a strong header. They went with the classic design structure with a top bar on top, logo, links, and hero image with call to action.

header of the low carb usa website

The strong statement clarifies who they are and what they’re about, and the CTA is getting people to do the #1 goal of the website – see the upcoming conferences.

Overall, this design is a pretty safe start to the site. Adding just a little more space overall would provide a more open and less “cramped” look. As would adjusting the link structure – there are simply too many links visible. And all those links have dropdowns! Design is how the site looks, but it’s also the site architecture; they should take another look at how to organize the site into bigger buckets for less links.

At first blush, I would consider grouping the top bar links like this (keep in mind, I’m logged into this site):

Top Bar:
Left: Upgrade Membership (this is a primary CTA for those already with memberships)
Right:

For the main links:

This takes the main links down from 7 to 5, but I would argue includes or categorizes all the necessary information in appropriate locations.

The Ugly

list of education resourcesThis standard design header is followed with the worst designed section  of the site. The first title provides another great summary of what they do, and the line and arrow are honestly great. But the rest of the section is just text in the center of the page.

Instead, separating these out into columns, preferably with an image or icon with each, would encourage the user to actually read these sections.

redesign into columns

Basic Designs to Follow

The rest of page contrasts between basic design (recent posts and other page links), beautiful modern design (upcoming conferences), and bad design (logos).

The basic design sections wouldn’t be that difficult to fix. Widen them a bit so they’re closer to full width, increase the line height on the titles, adjust the images so they aren’t blurry, and add a little spacing in between the columns. Take a look at the difference this makes in the before and after below (the width is the same in both pictures):

the before picturesame text, better spacing, and layout

The conferences section is beautiful. Perhaps more spacing on the title, but other than that, a gorgeous application of blue on the photos and great overall design.

display the conferences

And finally, the logos. Logos are hard, especially in the grid format. Your best bet is to try to make them all the same width, and center them vertically. It can be difficult to do unless you take each logo and put them into a square canvas. Alternatively, you could add them to a slider, with arrows on the right and left to cycle through.

logos

An example of logos in a grid:

example logos in a grid

The Footer

And finally, we finish off the page with the footer. The red bar used here makes it into a bit of an awkward footer. I’d replace that with a slight background color throughout.

the before footer

the after footer

Ignore the image background color being white; you should, of course, make that transparent.

Summary

This site has so much great information on it that it really deserves just a little more love on the design side. Just a few small changes can drastically improve not only the overall look, but the user’s ease of navigation and likelihood of engaging with the information.

See the full website below with the original design:

Original Entire Page

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>