Need to design an “info-heavy” website? — Focus on Typography

Have you ever come across a website that was so crowded with letters that it obstructed you from focusing on anything? You might have even wondered what compelled the creators to design such an interface.

‍

I was faced with such questions as well when I first saw the mobile website for 10times.

‍

A little background, 10times is one of the world’s leading B2B event discovery and networking platform. It is a consumer product with a pretty niche target audience of only professionals. Being a B2B product, 10times followed something like this when it came to web design:

‍

‍

In order to satisfy 76% bracket, EVERY bit of information was upfront. With everything showcased, the website was bound to be overloaded with content (predominantly text).

‍

But why so much text you ask?

Just like any social media platform, all the images on 10times are uploaded by their users. Unlike Facebook and Instagram, 10times users focus more on business advertising and marketing. Therefore, all the pictures were mainly logos and banners about events which sacrifice aesthetic appeal for maximum information.

‍

‍

To summarise, the platform barely housed pictorial content and even if it did, the quality was pretty poor. Yet, I was tasked to make it visually appealing and reduce the visual clutter. Challenge Accepted!

‍

My 4 fold Approach

With no images to break the visual mundanity of the layout, I turned to the one arsenal I could manipulate for the needed results; Typography.

‍

Top Technique 1:

Since my colour palette was limited to muted tones of greys (apart from the orange and blue), I emphasised important pieces of information using varied weights of Roboto. For example, you may want to highlight an important venue or date of an event. Using a medium or bold weight will give your words that extra emphasis without compromising on the type size.

‍

‍

‍

Impact it had:

• A large font family allowed me to maintain consistency in the design by using the same typeface for different functions.
• The practice helped prioritize content by creating a visual hierarchy. For example, The pages became easily scannable by using heavier weights for headings/subheadings and lighter weights for body text and tertiary details.

‍

Top Technique 2:

Using both upper and lower cases in the UI. I used all caps for certain CTA’s that were more secondary in nature.

‍

A word of caution when working with all caps; not to use it too heavily in the UI, unless you want SHOUTY CAPITALS. Not only can it make the design loud, uppercase is harder to read as compared to lowercase. Meaning it does not take kindly to long sentences.

‍

‍

Impact it had:

• The design was a collection of various cards that had their own priority in the overall layout. Depending on the hierarchy of each card, their respective content (headings/bylines/CTA’s) had to be given a suitable share in the spotlight.
• Thus, by using a combination of upper and lowercase, I was able to create a good balance between primary, secondary and tertiary content. Especially in areas where there was limited space, using capital letter links gave the right delicate contrast between body text and the CTA’s.

‍

Top Technique 3:

Due to the limited sizes of the cards, I added varied leadings (the space between 2 lines) between headings, subheadings, body texts and so on.

‍

‍

‍

Impact it had:

• Applying the right spacing between lines facilitated an easy categorisation of content into sensible and relatable chunks.
• Grouping content made room for tertiary personalized details that would delight the user. Example: A detail like “3 connections are attending this event” adds motivation for the user to attend and reconnect with his peers.

‍

Top Technique 4:

When designing content heavy sites one mustn't forget designing for empty states. In my case, “empty states” meant lack of data. The solution I applied was designing adaptable cards that would modify depending on the data available.

‍

‍

Impact it had:

To avoid blank and empty patches, I designed cards that could transform their overall sizes as per the volume of text. Variable cards helped maintained the design consistency and much needed neatness.

Hi Everyone! I’m a UX designer at GDD currently based in Noida. I love exploring aspects of tech and design to create meaningful and utilitarian products.

‍