Three things a luxury brand isn’t (and one thing it always should be).

What we talk about when we talk about luxury.

Luxury brand marketing is a vague concept when you stop to think about it. What does “luxury” even mean? How do you encapsulate it visually? More importantly, in this age of omnichannel branding, how do you convey the value of luxury through a digital experience?

When Bradley Wealth Management, a high-end boutique financial services firm, reached out to The James Agency to refine their brand’s visual and online identity, we took the time to evaluate what constituted a luxury brand experience, and more importantly, what did not.

You’re better off without:

Excess

“Just because you can doesn’t mean you should” is a principle to live by when it comes to luxury branding. White space is your savior, an economy of language keeps your core message clear and high-impact visuals convey the essence of your brand without the need for extra fluff.

Bradley Wealth Management’s original site was overwhelmed with content. Without a clear hierarchy of information, visitors had a hard time engaging with the website. One of the primary goals of the brand refresh was to create an online journey that conveyed the most important details right away in an easy-to-read and elegant manner.

Vagueness

Get specific. Dedicate time to understanding what the most critical elements of your brand are: if you had to boil your company down to five pillars, what would they be? Could they stand on their own? As tempting as it might be to lay out every detail of your organization’s operations on the homepage, highlighting a few crucial elements will perform measurably better than speaking generally about everything.

Bradley Wealth Management made it clear that their priority for the website was to offer the same quality of personalization as they do during their one-on-one consultations. Through goal-based planning, Bradley Wealth differentiates itself by encouraging the life aspirations of their clients. We translated those traits into an engaging web experience with messaging that focuses on the in-depth relationships their team cultivates amongst all their clients.

Inconsistency

“A brand is only as good as its execution across mediums.” Is that an adage? If not, it should be. Make sure you’re providing consistent touchpoints across all platforms so that no matter where potential clients pop up first, they’ll be sure to get an accurate impression.

We were tasked to create the graphic standards and web experience that became the paradigm for all iterations of the Bradley Wealth brand. By developing a clean, bold personality that could be replicated across multiple applications, we created a foundational aesthetic that would gain rapport with their user base.

However, don’t leave home without this:

Flow

A conversion website is essential to keep the user journey as fluid as possible. Eliminate all points of resistance or friction; get to the point and then get to the call to action. Every aspect of the experience should be relevant, and shouldn’t land the user in a dead end. By interlinking webpages and referencing different parts of the brand experience, you’re encouraging your consumer to self-direct through the journey you built for them.

For the web experience, we worked with Bradley Wealth Management to develop a clearly-defined sitemap that would seamlessly lead users from one page to the next, filling them in on all the need-to-know information without winding up stuck. Every page features a call to action that prompts the users toward signing up for the customized planning offered by their financial services team. 

The more you know.

Luxury isn’t just in the looks, but looks matter; it’s not only in the sitemap, but content organization counts. There are various definitions of what comprises a truly high-end experience, but perhaps more important is understanding what to steer clear of in order to retain the respect of your consumers, both past and potential.

WordPress: An Introduction to Gutenberg

Back when it was first introduced in 2003, WordPress was created as a tool for the new phenomenon known as “blogging.” The platform is now used for everything from small and large business websites, to e-commerce and even complex web applications. Many of the web’s most popular websites (including this one) are built using the CMS. According to a recent survey 30% of the web is made up of WordPress websites.

Over the past 15 years, WordPress has undergone a number of major updates—from the introduction of third-party plugins to custom themes. But beginning with the launch of version 5.0, WordPress will see its biggest change yet with the introduction of Gutenberg.

What is Gutenberg?
Gutenberg is the name for the newest version of the WordPress content editor. Named after Johannes Guttenberg, who invented the printing press, Gutenberg will be a reinvention of sorts—completely changing the way users add and update content on their websites.

Why is This a Big Deal?
Since its beginning, the content editing experience has remained largely the same: a field for the title of the page or post, a text editor to add the main content and an area where you can set a featured image.

WordPress Editor

This setup worked well for blogging, but as WordPress grew from a blogging platform to a more complex content management system (CMS) layouts became more and more elaborate. To accommodate the needs of more complex sites, there came solutions like meta boxes or page-builder plugins such as Visual Composer or Beaver Builder.

Page-builder plugins are a popular choice because they give the user a lot of freedom to create and edit content on their site without extensive coding or the help of developers. This is been a large contributor to the increased popularity of drag-and-drop website-builder services like Squarespace and Wix. While Gutenberg isn’t exactly a drag-and-drop editor, there are similarities that many of those users will enjoy.

This new editor follows a growing trend in web development that focuses on reusable content blocks. Currently, even the most common elements we find on a website like sliders or contact forms rely on the need for meta boxes or third-party plugins. Gutenberg aims to simplify the process. Need to add a photo gallery to your blog post? There’s a block for that. Same goes for buttons, cover images and forms. Additionally, if there is block that doesn’t already exist, custom blocks can be created and reused as often as needed.

Gutenberg

Is There Cause for Concern?
With the release of WordPress version 5.0, Gutenberg will become the default editor for WordPress websites. Many developers have concerns that Gutenberg will create issues with backwards compatibility; leaving plugins that are used by millions of websites obsolete and creating work to either update the plugin or find an alternative. WordPress has already given assurances that they are working to address this issue, but it remains to be seen if all the bugs will be worked out before launch.

Backwards compatibility is just one of many concerns the WordPress community has expressed. Gutenberg has been available as a public beta since January 2017 and its team of developers have been actively working with the WordPress community to address concerns and fix bugs before its wide release. Currently, however, Gutenberg has a rating of just 2.3 out of 5 stars on its official repository with many reviewers citing concerns about the user interface and the amount of time and technical knowledge necessary to create custom content blocks.

At the time of writing this post, WordPress is currently at version 4.9.8, which means that Gutenberg could be rolled into WordPress core before the end of 2018. As is often the case with new technology, change can be difficult. Many long-time users will be required to learn a new tool and a new approach to a familiar product. Regardless of how painful the initial rollout might be, Gutenberg will definitely be a good first step in creating a much more user-friendly content editor, while also allowing WordPress to keep up with the growing trend of website-builders.

7 Quick fixes to optimize a cluttered website for conversions

The fact that you are here shows you have already taken a big step in the process to fix your website design or landing page. Recognizing you have a busy, cluttered, non-optimized website is the first step to fixing the problem. Now, what should you do about it? Start by reviewing your page or site and asking yourself the following questions:

  1. What is the goal of the website or page?
    First thing’s first; to optimize your website, you need to know what you are optimizing it. What is are you trying to achieve? Write it down. Every decision you make going forward should be decided with this website goal in mind. Ask yourself, does this help us accomplish our goal of xxxxx? Your goal should be as specific as you can make it. It should not just be “increase sales” or “capture more leads”. A good goal provides context. An example of an effective lead goal is: Increase the number of email addresses of our primary target audience of male students 18-21.
  2. Is that paragraph necessary?
    Once your goal has been determined, start reviewing the content on your page and deciding if it is necessary to achieve your goal. Is the information needed to convince a potential customer to fill out the form? Or is it on the page because someone within your company would like it mentioned? Too much information can confuse a website visitor and sidetrack them from completing the intended goal.
  3. Is it logical?
    Your website should lead visitors down a path that is logical and answer their questions along the way. They should be able to quickly find the information they need. If they are confused by the website navigation or page layouts they are more likely to leave the website for another easier-to-use site.
  4. Is it easily skimmed?
    Research shows the majority of website visitors skim the content on the page. Headlines, sub-headlines, lists and bullets are great ways to break up the content and make it easier for your customer to quickly find the information they need. This makes them more likely to make the decision to convert.
  5. Is there a cohesive system to the colors?
    Having a clear color system allows your customers to quickly consciously or subconsciously understand the order of the page. The more organized and familiar the page, the easier for the brain to understand what to do next. Whether they notice it or not, an example is if green buttons always move the customer forward through the process. A system like this causes the mind to start looking for the next green button to continue moving forward.
  6. How many fonts are on the page?
    Similar to the color system mentioned above, having a clear order to the type on the page also helps simplify the content and make it easier to skim. Streamlining the headlines with a standard font, font size and color quickly simplifies and organizes the page.
  7. Can the user find all the information they need to make a decision or do they need to contact you?
    In some industries, the best way to increase leads is to provide the visitor just enough information to be interested and feel confident enough to reach out to you—but not enough that they can do all their research without ever giving you their information. Depending on your business model and industry, you may need to provide more information so the customer can compare you to competitors. Going back to your main goal determined at the beginning, put yourself in your potential customers’ shoes. What information do they need? What is extra information they don’t need to convert?

Conclusion

When in doubt think: simpler is better. Too many fonts, colors, content and photos can distract the potential customer and keep them from converting. Just because there is space on the page for something doesn’t mean it should be there. Not sure where to start? Hire an expert to help organize and reorganize your pages to increase conversions.

How To Make a Rich Media Ad In Google Web Designer

In my first Google Web Designer post, we went through a basic introduction into the program as well as the step-by-step process for creating a simple animated ad. This time we are going to get a little more in-depth and walk through the creation of an expandable display ad.

Moving away from standard display advertising, Rich Media ads allow more opportunity for creativity, an enhanced experience and more consumer interaction. Consumers are exposed to a large volume of images and commercials every day, and it is important to have creative that will grab attention. One way to do this is to utilize the click-to-expand design. Activated only by the user clicking (not hovering) this option can expand up to 728px x 270px. Although expandable ads are priced on a cost-per-click basis, this only applies if the user clicks through to the landing page, not if they only expand the display. This provides a lot of opportunity for increased brand awareness.

First, you will need to design the creative for your ad. I went over this process in detail in the first GWD post, so if you need a refresher check it out! Remember, for this ad you will be designing for two different sizes. These sizes are referred to as the “invitation state” and the “expanded state.” The invitation state can be any of the following dimensions:

  • 120×600
  • 160×600
  • 200×200
  • 250×250
  • 300×250
  • 300×600
  • 336×280
  • 468×60
  • 728×90

Corresponding with the invitation state dimensions, the expanded state dimensions are:

  • 240×600
  • 320×600
  • 400×200
  • 500×250
  • 600×250
  • 672×280
  • 468×180
  • 728×270

After you have designed the ad and saved the files out as .SVGs, you’re ready to set up your ad. For this tutorial, I will be using a 200×200 invitation state and 400×200 expanded state.

1. When you’re ready, open GWD and select the “Expandable” ad type on the left side of the window. Then you will need to name your ad and select the folder where it will be saved. The environment should be set to DoubleClick. Next, set your invitation state size and your expanded state size.

2. GWD will automatically open to the invitation state portion of the ad, with a tap-area element already placed. Import the creative for the invitation size and center it on the stage. Send the artwork to the back so that it is behind the tap area event. In the bottom left corner of the screen you will see a button, that allows you to toggle back and forth between the invitation state and the expanded state. The expanded ad will automatically have a tap-to-close area in the top right corner. Next, ad the artwork to the stage and send it to the back.

3. Now, we will add a “background exit tap area” to the stage that will allow the user to click to the landing page. This element is under the “component” drop-down menu on the right side. Using the “properties” drop-down menu, adjust the size and alignment of the background exit tap area. You also will need to give the element a unique name like, “backgroundExit.”Then toggle the “events” menu down and click the “+” button in the bottom left corner. Select the “backgroundExit” element, then select “tap area” and “touch click.” Select “Double click component” and then “Exit.” The receiver is “gwd-ad.” Finally you will need to give it an exit identifier (I used “bgExit”) and paste in the desired URL. Now, you can preview your ad using the preview button in the top right corner of GWD. Once your ad is complete, you will be ready publish it!

Google Web Designer allows endless opportunities to get creative with Rich Media ads. For an added challenge, try adding in video to your expanded ad! Comment and let us know if you have any questions or additional tips!

How to Choose the Right CMS For Your Website

As the saying goes, content is king. When managing your website, it’s important to choose an appropriate Content Management System (or CMS) that will allow you to easily add that killer content to your blog or website. But CMSs are used for far more than just adding blogs to your website these days, and because of that, it’s important to choose the right one for your business.

One of the most commonly used CMSs out there is WordPress. In addition to powering the website you’re currently on, WordPress is used by 27% of all websites on the Internet. And for good reason, too. WordPress is an extremely powerful CMS that can easily be adapted to meet just about any business need. While it is often the go-to for most developers, WordPress isn’t the only option in the tool box anymore.

There are thousands of CMSs available today. Some are built for ease of use like Wix or Squarespace. Others are built to meet more specific needs, like Magento for e-commerce.

So, given the vast number of options, how do you go about choosing the right one? Here are some important factors to consider when choosing the perfect CMS for your business.

Business Needs

Choosing the right CMS for your website is best determined by your business’ needs. Will your site be a brochure website that may not be updated very often? Is your website the e-commerce portion of your retail business? Will your website be a blog that is focused on a niche market?

Your answers to the above questions will be the most important determining factors for which CMS you should use. Magento is often considered the best CMS available today for e-commerce and has an impressive list of companies that use it, such as Coca-Cola and Burger King. However, Magento may not be the easiest CMS to use based on the level of experience of the person updating your site.

Depending which CMS you choose, there may be a licensing fee that you have to pay per website or on a monthly basis. While these options are more costly, they often come with added benefits such as additional functionality, support and, because the software is proprietary, it is less vulnerable to attacks. CMSs that are built on open source software, like WordPress, are free to use, but it is up to the user to customize and secure your site.

Usability

Who will primarily use the website and how easy will it be for that person to update and add new content to the site? Will you be updating the site yourself or will it be necessary to hire an experienced developer to make daily, weekly or monthly updates? As mentioned above, Magento is an extremely powerful CMS for e-commerce but there are other options available that are more user friendly. Shopify, another e-commerce CMS, may not be as robust as Magento but it features a fairly intuitive user interface that makes updates simple.

If your website is more content-focused and updated frequently, you may want to go with a CMS that is tailored to sharing information. While WordPress was built originally with blogging in mind, blog posts are rarely just text and images anymore. More likely, you’ll want to include a call to action or a slider in your blog post. While WordPress has plugins that can handle this scenario, they often require coding knowledge or a professional to set up the template. Other CMSs like CraftCMS have most of those external plugins built in and available right out of the box.

Often, CMSs make live demos available on their websites so potential users can get a feel for the CMS. This presents a good opportunity to make an assessment on usability.

Customization

Plugins are yet another factor to consider when choosing your CMS. Even the best CMS may not have options readily available for all scenarios, so an external plugin would be needed to meet such a requirement. Perhaps you want to pull in your Instagram feed, connect your newsletter signup form to your MailChimp account or pull in real estate listings from an external API. Whatever the case, you’ll need to make sure your CMS can handle that request, either natively or through the use of third-party plugins.

In addition to plugins, you also want to be able to customize the look of your site. If you listen to podcasts you have probably heard of Squarespace, a popular CMS that offers a drag and drop user interface to easily customize the look of your site. While this is great if you don’t have any coding knowledge, drag and drop editors are often very limiting and add unnecessary code, ultimately slowing down your site. Most other CMSs such as WordPress, Drupal or Joomla are very customizable, but may require a professional to create.

Support

No matter which CMS you end up going with, you will more than likely run into a problem that doesn’t have an easy solution. Choosing a CMS that has a large community around it may help with that problem. WordPress, for example, has a huge eco-system built around it with websites devoted to troubleshooting issues, meet ups, conferences, as well as a large number of theme and plugin creators. This can make fixing issues a lot easier.

Other CMSs may not have quite as large a following but still have a support system in place in case you run into issues. Wix, another drag and drop based CMS, has a dedicated support center that can help troubleshoot any issues that can unexpectedly pop up.

Security

Given the number of high profile data breaches that have been in the news recently, having a secure website is extremely important; particularly if your website collects users’ personal data or credit card information. Most CMSs receive regular updates with security in mind. Additionally, there are third-party plugins available to help make your site more secure.

If this is a primary concern, then take all necessary precautions to ensure your site is as secure as possible. For e-commerce, Magento is perhaps your best bet. Unfortunately nothing is 100% secure, and in addition to your CMS, you should work with your hosting company to help boost security even more.

Choosing the right CMS comes down to your specific needs. While most CMSs available today are extremely flexible and customizable, it is worth taking time to explore the different options. You’ll most likely have your website for years to come, and picking the right CMS can ensure that it will both stand out from the crowd and be easy to manage.

Easily Move Your WordPress Website

Moving a WordPress website from one host to another is not as simple as moving a static website. Luckily, there are tools available to help with the migration.

In this tutorial, we show you how to migrate your WordPress website with the Duplicator plugin.

This plugin works for transferring a live website from one host to another or to launch a WordPress website that has been developed locally on a computer.

Megan Leese | Senior Web Developer

How to Design a Mobile Friendly Website

Designing for Mobile

With Google reporting that the number of mobile users has surpassed desktop users in the United States and nine other major countries, having a mobile friendly website is more important than ever. The mobile browsing experience is very different than that on a laptop or desktop computer. Understanding these differences will help you design a superior site and accomplish your website goals.

Responsive versus Mobile

When designing and developing a mobile friendly website there are two main ways to go about it: 1) You can build a separate smaller mobile website or 2) You can code your full desktop website to be responsive. A responsive website is a website that is built on a fluid grid to resize based on the size of the screen it’s being viewed on. You must know your business and identify which option is best for your target users.

Examples of successful separate mobile websites:

Examples of successful TJA designed responsive websites:

There are pros and cons to mobile and responsive websites. For most sites, The James Agency recommends building a responsive website. Responsive websites’ fluid grid systems make them more “future proof” for the ever-changing technology and screen sizes. With the rise in the number of mobile users, many expect to be able to view all content on their mobile device and are frustrated by smaller mobile sites. From a company and time management prospective, responsive websites are easier to maintain. Instead of updating content on two websites (the mobile site and desktop site) you only need to make edits in one place and it will display for all website visitors.

Tips for a well-designed mobile site:

1. Know your audience and their browsing behavior patterns

There are two main types of mobile users: users looking for specific information and users that are casually browsing. The users looking for information have a task in mind and want to get from point A to B as quickly as possible. Creating a pathway for them to get to the information as fast as possible helps this type of user to complete their task. Calls to action are important with this demographic since “80 percent of online shoppers admit that mobile purchases are impulse-driven and that they’re more likely to purchase from and interact with a brand that offers an engaging mobile experience.” (Huffington post)

The other main type of mobile user is an information gatherer. Information gatherers are often casually browsing through the Internet looking for information on a given topic. This user wants to be able to access the information as easily as possible and will leave your site quickly if they cannot find what they are looking for.

Identifying what type of website visitor your website is catering to will help you map out your website content and navigation to create the best mobile browsing experience.

2. Keep the design simple

Cut the clutter on mobile design. Trade small detailed design elements for larger simple features and easily digestible bites of information. Mobile websites have much less space to work with and simplified sites can better utilize the space available without sacrificing legibility. Simple designs load faster and help the user accomplish their website goals fast and easily by using the least amount of data.

With responsive websites, not all functionality needs to be accessible on the mobile version of the website. When designing how the site will look on mobile screens look through every element and ask yourself these three questions:

  1. Is this necessary?
  2. Does this enhance the design of the page?
  3. Does this function on a touch screen?

If you answer no to more than two of the questions above, hide or remove it from your mobile layout. Some common website functionalities, including pop-ups and hover elements, do no work well on mobile. Pop-ups are successful on desktop computers because they have space to open an element larger on the screen. With a small screen there is no room to open an enlarged element. Often with the pop-up border, the content within the pop-up is the same size or smaller than before it was opened. Without a mouse, all hover states must be accessed differently.

organos mobile website

 3. Font size

Content on a mobile website should be simple and easy to read. Ensuring all the text is large enough to read on a small screen, and has enough contrast, can make a significant difference in how the website visitor interacts with your website. All fonts vary in “x” height but Google recommends the base font size for mobile text to be at least 16px.

4. Large buttons / Click space

Easy to click buttons and links are key in a mobile website. Don’t frustrate users by making links and buttons small and hard to click on you mobile website. Plan for people to have make mistakes when trying to click on specific links and buttons. Mobile and tablet users do not have a mouse that can click on small spaces. Having multiple small text links close together is difficult to click and can cause the user to move on to an easier site to accomplish their goals.

 5. Navigation

There are two common mobile navigation styles typically used in mobile web design. The first is a dropdown menu. When using dropdown navigation, you need to make sure you have large enough click space allowing for ease of use. We recommend dropdown navigations with only one to two levels in the vertical dropdown menu. The second is “hamburger” navigation. This is the small three-line icon that opens a menu on click. Hamburger navigation is a great option for larger websites with multiple levels of page navigation. Either method is successful when implemented correctly.

TW Lewis Dropdown Navigation Example

Capital Place Hamburger Navigation Example

6. Load time

Mobile users are mobile. They may be connected to a free low-speed WiFi or cellular service. Users get frustrated by slow loading pages and will likely go to a faster site. Every second counts when it comes to website load time. Kissmetrics reports that 47% of mobile web browsers expect a website to load in less than two seconds. 40% of users will abandon a site if it takes more than three seconds to load.

Designing a mobile friendly website is more important than ever. Take your time to think about how you interact with websites on your phone and design your website with that in mind.

Megan Leese | Senior Web Developer

So…you’re going to build a website.

What makes a good website?

1. Informative.

What is this? Why am I here? What can I do here?

2. Goal Oriented.

Before the website is created, the keys stakeholders in the project need to clearly define the goals of the website.

For example:

  • Increase awareness
  • Generate email leads
  • Purchase a product or service
  • Visit a location
  • Etc.

Once the goals are defined, there needs to be a way to determine if the goal has been met.

For example:

  • Website tracking
  • Goal number of emails lead generated a month
  • Track revenue / foot traffic increases

***A website is only successful if it accomplishes the stakeholders goals.

3. Engaging.

A good website is engaging. Visitors should want to read the information and interact with the website. All content and images should be relevant and interesting to the website’s target demographic.

4. Usable.

The site needs to help the user accomplish their goals. They need to be able to easily navigate the website and find the information they are looking for. 

5. Pretty.

Lastly, aesthetics are important. A well designed website will help the information be communicated, forward the website goals, engage the user and help them find the information they are looking for. A poorly designed website can frustrate a user and cause them to leave the site for a competitor.

Megan Leese | Web Developer

So…you're going to build a website.

What makes a good website?

1. Informative.

What is this? Why am I here? What can I do here?

2. Goal Oriented.

Before the website is created, the keys stakeholders in the project need to clearly define the goals of the website.

For example:

  • Increase awareness
  • Generate email leads
  • Purchase a product or service
  • Visit a location
  • Etc.

Once the goals are defined, there needs to be a way to determine if the goal has been met.

For example:

  • Website tracking
  • Goal number of emails lead generated a month
  • Track revenue / foot traffic increases

***A website is only successful if it accomplishes the stakeholders goals.

3. Engaging.

A good website is engaging. Visitors should want to read the information and interact with the website. All content and images should be relevant and interesting to the website’s target demographic.

4. Usable.

The site needs to help the user accomplish their goals. They need to be able to easily navigate the website and find the information they are looking for. 

5. Pretty.

Lastly, aesthetics are important. A well designed website will help the information be communicated, forward the website goals, engage the user and help them find the information they are looking for. A poorly designed website can frustrate a user and cause them to leave the site for a competitor.

Megan Leese | Web Developer

©2020 The James Agency. All rights reserved. Privacy Policy