X

More Information

Learn more about our company, our services, and how we can help.

Thank you! We'll be in touch shortly.
You can close this module now.
Oops! Something went wrong while submitting the form.
No marketing emails. Promise. ✌

How We Do It

Side-by-side

An example of how we approach design

As an example of how we approach redesigning a site, we'll use a prototype we put together recently for The Knowledge Society. TKS contacted Chainlift curious about "cleaning up" their website's UI to make it more responsive. This page shows how we went about it.

Table of Contents

Navigation

After

Click or tap to enlarge

Animation issues

  • Menu appears instantly, but the links fade in from below, giving the impression that the animation is unfinished

Drop shadow doesn't match shape of menu

  • Drop shadow implies a circular shape instead of a square one
  • Mismatch in shape reads as unfinished

Sharp Edges

  • Human Interface, Material Design, and Bootstrap UI have gotten most users accustomed to rounded edges on card shapes
  • As a result, sharp edges now signify low effort put into site

Corrected dropdown animation

  • All font classes and tags have been rescaled by a factor of 1.25em to ensure clear hierarchy between sections
  • Reduced H1 font size 1.25x in order to keep hero section text above the fold on breakpoints below 1280px
  • Links now animate in with menu instead of independently

Added Hover Interactions

  • Added hover interactions which highlight the active nav link with a slightly lighter carbon gray background

Fixed Sharp Edges

  • Added rounded edges to mirror the modern UI standards most users expect, and adding them to the nav links as well demonstrates attention to detail

Corrected Drop Shadow

  • Made drop shadow much more subtle; high contrast black-on-white eliminates the need for it

The Basics

After

Click or tap to enlarge

Margins not uniform

  • Margins for containers within the same section should all take up the same width of the viewport
  • The section with dropdown modules is in the same section but has different margins
  • This implies the cards are more important than the dropdown content

Important information hidden in dropdown menus

  • "The Basics" implies this is top-level information that most users will want to see right away
  • Putting content beneath these dropdown modules makes it hard for users to find what they're looking for

Unclear Headers

  • Headings are semantically accurate but colloquially clunky
  • It's not clear what will happen if the user clicks one of these. They may think they'll take them to another page and avoid clicking them entirely

Standardized margins

  • Ensured that margins of containers within the same sections aligned uniformly

Brought information out of dropdown menus

  • Did away with the drop downs entirely and placed the content in plain view on the page
  • Applied new typography rules to ensure clean reading

Renamed Headings

  • Replaced "The Basics" with "The Facts"
  • Renamed subheadings to more accurately label their content

The Basics (Cont)

After

Click or tap to enlarge

Columns narrower than rows

  • Causes feeling of imbalance
  • Unclear which one is "correct"

Not all cards have the same shadow

  • Shadow on the top left has a darker, wider shadow, which implies it's higher than the other 5
  • However, its shadow doesn't cast onto any of the other cards, creating a contradiction

Shadows unnecessary here

  • Elevation is meant to imply either that an element is "currently selected," or it's more important than other content
  • If everything's elevated, there's no hierarchy, and therefore no reason to use elevation
  • Shadows overlapping looks like a dirty screen

Icon problems

  • When used as if emojis, these icons are too small to read well at small sizes
  • The design language varies between icons from very simple to very detailed

Uniform columns and rows

  • Gaps are now equally sized at 2em each

Removed Shadows

  • All cards are now equally "important" in terms of visual hierarchy
  • No more shadow overlap leads to cleaner look

Updated Iconography

  • Custom icons replace the emoji ones which are all taken from the same design library: Google's Material Design
  • Custom colors are more saturated and help icons stand out more
  • Placement above headlines makes headlines stand out more
  • Less detailed icons are easier to see at small sizes

Students Love TKS

After

Click or tap to enlarge

Not enough space

  • Testimonials are not given enough space to breathe, which makes them more difficult to read (ideally, body text should never be more narrow than 45 characters)
  • Hearts take up valuable vertical space while adding no semantic value

Unclear Hierarchy

  • Student names fall lower in the hierarchy than their quotes, which is almost always true except in the case of quoting a major historical figure or a celebrity, where the name carries most of the weight
  • Subtitle being same size as the body text makes it unclear which to read first

Unnecessary Drop Shadows

  • White-on-white elements should never leave drop shadows unless used to demonstrate an actively-selected element, and even then, it's discouraged
  • The elevated card should always be lighter than the background, otherwise the illusion of a shadow is broken
  • If all cards are equally important, none should be highlighted over another

Improved clarity

  • Removed 5th card
  • Added quotation mark icons to make purpose of section immediately clear
  • Removed hearts from each card entirely; since they're the same for each quote, they're merely decorative and serve no semantic purpose
  • Put actual quotation marks around the quotes themselves
  • Reduced column gaps to 1em 

More room to breathe

  • Reduced the card text wrap to 1em to give quotes more room
  • Reduced quote font size to 0.9em
  • Added bottom margin to student name

Resolved hierarchy issues

  • Put quotation first & student name second, because the quotation is the focus
  • Reduced student name font size to "Caption"

Improved Responsiveness

  • On extremely small desktop displays (iPad pro, Surface 2, Older Galaxy Tabs), display only 4 cards instead of 5p
  • All other breakpoints use a 1em gutter
  • Set school logos to use a forced 16x9 aspect ratio, so they can be swapped out easily without having to manually resize the images
  • Changed to horizontal layout

What You'll Be Doing

After

Click or tap to enlarge

Grammatical Errors

As a general rule of thumb, list items should not have periods unless they are complete sentences, although even then, many argue you should omit them anyway

Duration of each card unclear

The calendar icon in front of "September" indicates to the user that this section is a calendar, but since there are more than 10 tiles, it's not immediately obvious how "long" each card is supposed to be

Inconsistent Spacing

Padding in bullet lists varies

Reformatted List

  • Added "overlines" to each card to signify the passage of time on each one
  • Added bottom text to the “no session” slide for SEO and accessibility (should never assume that text in an image can be read)

Improved Spacing

  • Reduced letter spacing on card titles to match fonts elsewhere on the site
  • Rounded the edges on card images
  • Removed shadows from images

Combined With TKS Sessions Video

  • Put the TKS Sessions video here along with the corresponding testimonial because they belong to the same content topic
  • Added more spacing around the “view full schedule” button to make it stand out more; this section is very content-dense so it’s important the button not get lost in the noise

An In-Person Space to Grow, Build, and Hack

After

Click or tap to enlarge

Unclear this is its own section

  • Container follows directly from the previous one, making it unclear this information is covering a new point

Lightboxes unclear 

  • Lack of hover interaction on lightbox images makes it unclear they can be expanded
  • Lightbox images are not grouped together, so the user has to close the enlarged photo in order to open a new one

Unbalanced Title Space

  • Title too small for the surrounding area
  • Unclear if it's connected to the text on the right
  • The left/right arrangement only works if the section title is significantly, as in 4x larger or more, otherwise it feels imbalance and a bit confusing. You most commonly see this in print media where the layout’s size never changes. But to keep it responsive, it’s better to format it this way

More Organized

  • Grouped lightboxes together 
  • Moved into a new container, so that it’s clearer this is a new section instead of a continuation of the previous one
  • Increased the heading size to match other heading sizes, to indicate more clearly this is its own section
  • Combined section text into 1 block instead of two
  • Broke up the body text into a subtitle + paragraph; makes it easier to read quickly‍

Lightbox Adjustments

  • Added a fade-on-hover to lightboxes to indicate that they’re interactive

Added Maps Module

  • Immediately clear that it's interactive (note: static image used for mockup)
  • Easier to see than the address link

Modernized Layout

  • Anchored the text block to the bottom of the grid cell for added whitespace and a more “modern” look 
  • This technique is often used in magazine layouts

A Global Community

After

Click or tap to enlarge

Too much space between the heading and video

  • Unclear that the video is related to the same topic
  • Users usually expect a video title to be beneath the video, not above it

Insufficient content to warrant its own section

  • More content needed in order to require a container of its own‍

Video hidden behind a lightbox

  • Play button implies the video will start playing, not open a lightbox
  • Unnecessary step that lengthens the process of playing the video

Combined with previous section

  • This creates an interesting mosaic layout that affords the component the appropriate amount of space

Brought video out from lightbox module

  • YouTube branding is good for UX here because it's an interface most users trust and feel familiar with already
  • Reduces number of steps in the process

You Will Work With Leading Companies and Startups

After

Click or tap to enlarge

Unnecessary Drop Shadows

  • White-on-white elements should never leave drop shadows unless used to demonstrate an actively-selected element, and even then, it's discouraged
  • The elevated card should always be lighter than the background, otherwise the illusion of a shadow is broken
  • If all cards are equally important, none should be highlighted over another

Cards too long

  • Long and thin cards don't give the body text a comfortable paragraph shape
  • Unequal content length causes significant asymmetry

Changed business name to the default "card heading" style

  • This creates an interesting mosaic layout that affords the component the appropriate amount of space
  • Reformatted cards to use horizontal layout
  • Breaks up repetitive card layouts
  • Uses less space
  • Easier to read

Condensed content

  • Consulting With Real Companies On Real Challenges video added to this section with same format as the other video from “TKS sessions”, but with a reversed layout to create more variety

Meet the Directors

After

Click or tap to enlarge

Split layout

  • Both directors are equally important, so it's vital to have both displayed side-by-side

Can't highlight or interact with text

  • The slider plugin module makes it impossible for the user to highlight the content of the slide

Condensed layout

  • Placed both directors on the page
  • Emphasized description over quote
  • Used a horizontal layout for the top of the cards to mirror the “profile” page structure made status quo by most social media apps. I.e. we’re conditioned to expect photo + name horizontally to indicate “this is info about a person,” which differentiates it from the testimonial cards

Responsiveness Improvements

  • Made photos auto-size to a range between 30 and 40% of the container width to always remain proportional no matter which screen size

Combined Content

  • Placed youtube video directly on page and pulled title/desc from the video on YT

Mentorship

After

Click or tap to enlarge

Animation Issues

  • The bio photos are in a slider controlled by a timer
  • The user cannot control the timer, nor the slides

Missing visual cues

  • When you hover over a bubble, the person's name appears
  • But there is no indication to the user this functionality exists

Simplified Layout

  • Displayed as a simple grid
  • Put names and company names properly outside the module instead of embedded on the image
  • Made accompanying CTA its own module

Cost and Tuition Support

After

Click or tap to enlarge

No Hierarchy

  • Elements are scattered across the spread with no particular order
  • Unclear what to read first
  • Some elements appear interactive, but aren't

Established Hierarchy

  • Reformatted monthly payment heading and price to be on the same card. Elevated the card, because it’s more important information
  • Opted for small headings here due to information density: overlines use an accent color to make sections stand out while allowing the larger text to stay reserved for the more important data
  • Put stats under video so that people will read them after reading the financial aid section
  • Changed statistics color to blue so that they wouldn’t appear to be actionable (because all green elements so far are actionable)

Reworked Language

  • Rephrased “up to 100% of tuition covered” to “100% of tuition may be covered” to allow numbers to display on top as a single block
  • Combined all body text into single paragraph

FAQ

After

Click or tap to enlarge

FAQ Modules Disorganized

  • The active item still has an outline separating the question from its answer
  • There's little visual indication that the active question (in blue) is related to its expanded answer

Issues with hierarchy

  • Questions are smaller than answers
  • All caps text takes longer to read because it encourages the user to read each letter individually

Restyled FAQ Modules

  • No more outlines
  • Active question turns blue
  • Makes it more obvious which question is currently selected

Established Visual Hierarchy

  • Makes it more obvious which question is currently selected
  • Moved X to left side to make it look more like a typical outline structure
  • Changed typeface for questions to sentence case, Poppins, Subtitle 1