The secrets of UI re-design and making your content more visual
ContentCal Product Designer, Becca, runs through her top tips for UI design and how to make brand-changing decisions.
16th June 2021
Engagement with your social media marketing posts and content in general skyrockets when it is published with an image - and a video generates an additional 83% engagement to a standard image. With the knowledge that content marketing success is heavily reliant on how it looks, we made the decision at the end of last year - when we launched our new brand - to ensure the new look and feel of our website and app made the content we wanted to share even easier to consume, and visually represented our brand values.
As a company, we have a number of UI designers on the team who could make this happen and we worked very closely with an agency that could focus full time on the project. But we also understand not all marketing teams or organizations have this luxury, so wanted to share our key learnings and top tips from this project, to help you think about the visual aspects of your content funnel for the best possible results.
So here's a quick overview of what we did, how we did it, and why it will make a difference:
We started by introducing a new set of brand colors to our website, however, this meant our four main UI colors used in-app no longer felt "part of the brand," as they did not match the vibrancy and hue.
As a result, we tweaked our "core" UI palette slightly, so it is softer and a touch deeper. We use this palette for all in-app actions, so it was essential that we didn't change the colors drastically, as they needed to remain recognizable to our users.
Color psychology plays an important role when applying color to any design. We use a traffic light system for processes, like approval workflows and in-app messages. For example, green is used for the Approved post-state because it has connotations of positivity and being "ready to go." We then consistently use blue for core actions, like adding or saving, as it has a neutral and reassuring association in comparison.
Choosing the best font for a brand is vital. Fonts communicate many conscious and sub-conscious messages, so it's essential to find a font style that expresses the desired personality and emotions. A research study informed us that our previous font didn't allow our brand's personality to stand out from the crowd enough.
We chose our new primary font because of its fun and friendly nature: it is a serif font (flicks/strokes appear at the ends of each letter), which adds visual flair. Serif fonts are also stereotypically associated with newspapers, books, and other printed publications, which gives ContentCal a knowledgable and mature look and feel - which is what you want from your social media tools, right?
Using two different fonts in the same design, also referred to as font pairing, is considered a best practice. Pairing a primary font (for headings) with a contrasting secondary font (for subheadings and paragraphs) adds hierarchy to a design; people will recognize a heading when they see one. Using a primary font sparingly also helps to keep a design minimal and distraction-free.
You'll notice that we now use various circular shapes on our website and in our illustrations - we call these shapes morphs. To increase consistency between our brand and our UI, we considered how we could apply this same rounded style to areas inside ContentCal.
Leading companies that produce delightful designs that influence trends, such as Apple, are also using rounded shapes and elements in their UI. You only need to glance at an iPhone or MacBook screen, or the Apple website, to see plenty of curved corners and elegant shapes.
As a result, we increased the roundness of corners across our UI. This change helps make UI elements look smoother and keeps ContentCal looking modern and up-to-date.
While we were reflecting on our design system, we discovered some inconsistencies with our interaction states: it wasn't always 100% clear to see which UI elements could or couldn't be clicked. To resolve this issue, we investigated using shadows to make clickable elements more obvious.
Google is a strong advocate of using shadow in design and has documented the theory behind it in their Material Design guidelines. In short, shadows generally contribute to a greater perception of depth, as they signal how elevated an object is. Shadows can be used to draw attention to a particular element of a design.
All elements that can be interacted with in ContentCal now contain a subtle shadow, which gives them lift, to communicate that they can be selected. Non-interactive elements will remain flat with no shadow. This pattern contributes to a more intuitive design language, as there is now a clear difference between interactive and non-interactive UI.
We also identified a problem with our previous background color: it was very light, which meant we had to use lots of grey outlines to make UI elements stand out on screen. Using too many outlines in this way has a risk of making a design visually over-crowded.
We've now made the background across the app slightly darker, which gives all UI elements more distinction. Doing this also meant that many grey outlines could be removed, which provides the UI with a lot more breathing space.
Making the background darker and removing grey outlines, combined with more rounded corners and interactive shadows, gives ContentCal a whole new foundational look and provides a distraction-free workspace.
Lastly, we recognized issues with our dark mode; it was generally too bright, and colors looked out of balance. This meant the contrast wasn't as ample as it should be, significantly reducing accessibility and usability. It's also known that dark mode can be used as a power-saving method, as a darker screen doesn't need to use as much energy. This made it even more important for us to reduce the brightness.
Rather than using black for dark mode background shades, it's more effective to use darker shades of grey instead. Using grey rather than a true black means a better contrast between the background and the UI elements on top, which will help reduce eye strain and make any white text easier to read. Popular websites such as Twitter and Facebook have implemented their dark modes in this way.
It's also important to pay strong attention to a color palette when designing for dark mode; saturated colors tend to "blend in" to darker backgrounds, decreasing their readability. Because of this, we purposefully desaturated some of our UI colors, so buttons and links are easier to see.
All in all, lots of small, impactful choices go into creating an effective design. Here are my top 3 takeaways for starting a design project:
- When crafting a design that features text, consider using one font for headings, then another font for subheadings and body copy. Using two complementary fonts will inject a natural hierarchy into your design.
- Be sure to research color psychology before choosing a palette for your latest design project. Colors are important for communicating subtle meanings and can be used to engage your audience's emotions.
- Don't be afraid to research or look for inspiration before you start designing. Analyzing the look and feel of your most loved brands or tools could give you the creative spark you need.
Although it seems we've made a lot of changes, this is only the start! We will continually be improving ContentCal's UI to ensure it's providing the best user experience possible. We will also be working on new and exciting features soon, so watch this space!