Design Review: Low Carb USA
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.
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:
- My Account > Access Content | Affiliate Program |
- Contact
- Search
For the main links:
- About Us (include Clinical Guideline/Science (SMHP) under this, also include another contact link)
- Events
- Provider Directory
- Coaching & Training
- Resources & News > News | Videos | Papers | Articles | Great Books
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
This 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.
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 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.
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.
An example of 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.
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:
