BEFORE/AFTER CONCEPTS

Transformed Through Design

In these "Before and After" concept examples we realigned the viewer's impression through design while using the site's existing textual content.

Before

Example 1 - Before
Dated design

The layout is basic and does not showcase the company's products or advantages to the customer.

Broken content

The site provides a message that a chart is missing. Missing images or broken links create a poor user experience and can reflect negatively on the company's reputation.

Content cutoff

The site's fluid layout adjusts to desktop and tablet but on the phone, the main content gets cutoff.

After

Example 1 - After
Branding

To reinforce the brand, the logo was moved from under the left navigation to the top of the page. A rich navy was chosen to give the site a sense of trust.

Images

Adding images to a website can increase the sense of trust. Facial characteristics are more positively received than images with no facial features.

Optimized phone experience

With the use of responsive design, the layout adjusts to different screen widths: desktop, tablet and phone.

Before

Example 2 - Before
Narrow layout

The narrow left-justified layout creates a large area of white space to the right on today's wide screen displays. This large area of space makes the site look small and unimportant. Most modern sites use a wider centered-justified layout that help fill the screen.

Cluttered Content

The main message of what the company does or stands for is lost on the home page. The content appears as one long paragraph which gives the user a sense of being overwhelmed.

Small screen navigation

Small navigation on the desktop can translate into difficult to access elements on a small screen device.

After

Example 2 - After
Call to action

Having an effective call to action is an important part of any website. By creating a "We manage well-diversified portfolios..." message with a "Learn more" button, the message is helping direct customers to an important key feature of this business.

Imagery

Imagery is one of the most powerful tools in visual design and here we added an image of people to reinforce trust.

Multi-device experience

With a fluid responsive design, the site and it's navigation adjusts to many devices.

Before

Example 3 - Before
Dark imagery, lost message

The top half of the homepage is taken up by a large, dark image that contains hard to read text. The purpose and message of what the company does best is lost in the bottom half of the home page.

Old copyright, old content

Sites usually update their copyright date every year, this site's date is four years old. The old copyright implies that the site is not up to date and that it is not a priority for the company.

Industry speak

The site uses an abbreviation for one of its products in the main navigation. Abbreviations or industry speak can alienate potential customers who are unfamiliar with the company's products.

After

Example 3 - After
Distinct action

A distinct call to action was created on the homepage based on what the company does best. This helps potential customers quickly understand what the company does and where they can find out more information.

Product showcases

The site's two products are showcased more prominently on the home page so potential customers can easily locate them to find more information.

Improved experience

Through the power of responsive design the user is presented with optimized content for their device, leading to an overall better user experience.

Have a question?Contact Us