website

design guide

if your website isn’t built to convert—it won’t

WHAT ’ S COVERED OUR EXPERTS

why your website design matters | 01

Trish Lessard
establishing business goals before a CEO,
20+ years of experience
website redesign | 02
trish
the cost of a website | 03

when do you need a website refresh | 04

Kim Wilcox
your website design options | 05 Senior Strategist,
20+ years of experience
website design elements | 06
kim
using analytics to improve your website | 07

the future of web design | 08

Ryan VonBergen
Creative Director,
10+ years of experience

ryan
Spend time up front defining what success looks like for
your business and develop goals related to your website.
Considering the look and feel, as well as the strategy
and website architecture, will result in a website that
resonates with your users and converts at a higher rate.”

KIM WILCOX,
SENIOR STRATEGIST
01
why your website
design matters
A well-designed website plays an important role in increasing your business revenue. Think about
it: if your user is frustrated and unable to find what they’re looking for on your website, it’s a
simple click back to Google and they’ll move on to the next website to try to find a solution to their
problem.

Crafting a website experience centered around your buyers’ journey ensures visitors understand
who you are as a company, what you do, and what you can offer them. It also makes it easier for
them to make a purchase or get in contact with you.

Designing for the User

Experience
The interactions you have with prospects in such a way that it trigger’s the user’s instinct
(whether it’s through an app, website, or as a to push when they aren’t supposed to, it
customer service rep) all contribute to the creates a jarring user experience.
overall user experience. To provide a positive
A website is no different. It is essential that
user experience your website needs to
your design elements intuitively navigate
be intuitive.
users through your site, ultimately guiding
For example, have you ever noticed someone them further along their journey to becoming
trying to push on a door to open it when they a customer.
are supposed to pull? If the handle is designed

1
The Difference
Between UX and UI
UX and UI are often used interchangeably, but
although they are related, they have distinct
differences. Ask yourself some questions
to evaluated how your UI is
While UX (user experience) refers to the
impacting your end user
overall experience that a user is having while
visiting your website, UI (user interface) refers
to the individual elements that make up your SOME THINGS TO CONSIDER:
website: the site pages, buttons, iconography,
1. Are you making it easy for them
different visual elements, and how they all link to get answers to their questions?
together.
2. Is it clear what users will get or
Usability is a critical piece of the overall where they will go when they click
customer experience and helps define your on a button?
customers relationship with your brand.
3 . Are you providing enough
contrast in your links and buttons
to direct a user to take the next
step?

2
Designing for Mobile
vs. Desktop
Companies that don’t consider mobile users experience down to a small screen, mobile-first
when designing their website will likely see design is proactive, and begins with considering
fewer, shorter visits and lower engagement the limitations of the smaller screen.
rates as a result of the longer load times and
limited functionality that mobile users will
experience.

For most companies, building a website using

responsive design is the answer. When a
website is built with responsive design, you’re
providing an optimal viewing experience for all
users, no matter what type of device they are
using.

But if a majority of your visitors are using

mobile devices to browse your site, then you
might want to consider a mobile-first
approach. Instead of reacting to issues that
result from trying to scale a large screen

3
02
establishing business
goals before a
website redesign
Before you dive into redesigning your website, it’s important to define your business goals for a
number of reasons. First and foremost, your goals are going to be a catalyst for how the site is
redesigned. Everything from how the site is architected and what information your pages will
present, to the visuals you include is dictated by your business goals and objectives.

Six months or a year down the road, you’re going to try to determine if your website redesign
was successful; if you don’t know what goals you were trying to achieve in the first place, how will
you know if you’ve achieved success? If your main goal is to attract talent, your website would
look much different than if your business goal is to generate leads. That’s why it’s important to
understand who is using your website, why they’re using your website, and what your website is
meant to do, so you can keep all of your efforts focused on those specific goals.

Designing a Website for Your

Industry/Organization
Looking at specific industries and different types of companies, there can be nuances in how you
go about redesigning a site. With each industry comes specific goals and challenges to address.
A non-profit website, for example, will look and feel much different than a for-profit B2B company
would (which is also entirely different than a B2C organization).

4
Your industry and brand standards can inform decisions on design, functionality, the voice you use
in your web copy, and so much more. While the goals of different organizations and industries vary,
the best place to start is identifying who your ideal customers are and creating a user experience
with their buyer’s journey in mind.

Why You Need Buyer

Personas
Buyer personas are based on the ideal Your website design and content should be
customers that you want to attract, or in some planned around what they’re looking for,
cases, the buyers you want to stay away from. anticipating what their pain points are, and
positioning your company in a way that best
So, everything about your website should be
addresses their challenges.
designed around your personas to create
a user experience that caters to their Properly defining your buyer personas is key
buyer’s journey. to ensure you create a site that resonates with
your potential customers and helps achieve
You should consider how your customers
your business goals.
consume information and which kind of
information helps them make decisions
(testimonials, statistics, case studies, etc.)

5
03
the cost of a
website
How Much Does a
Website Cost?
The cost of building a website can vary greatly, marketing, you will likely want to rely on a full-
depending on your hosting platform, how service web design company.
much you are doing yourself, and many other
Completely custom website development
factors. For example, if you are going to take
can cost $10,000 to $100,000 (or more) and
a DIY approach, you can expect to pay as
could include a brand refresh, photography,
little as $50 to $500 per year with a platform
videography, copywriting, and more.
like WordPress or SquareSpace. Professional
designers can charge hundreds to thousands
depending on if they’re designing the website
from scratch or using an existing template
or theme. beware of free
templates
But beware of free templates—remember
nothing on the Internet is ever truly free. Nothing on the
If you’re looking for a site that is built for internet is ever truly f ree.
marketing automation platforms, or inbound

7
How Much Does it Cost for
Website Hosting?
There are many free platforms you can use
to host your website; however, when you
consider the security of your hosting platform
and potentially having to involve another
company or developer to perform updates and
maintennance, the costs can add up quickly.

With the HubSpot CMS, there is a monthly fee

(generally paid annually), but you also get
24/7 support and an entire marketing suite to
help propel your business forward. Marketing
automation suites such as HubSpot do a whole
lot more than just host your website—you will
have access to data, client information, and
automated marketing all under one roof.

8
04
when do you need
a website refresh
At Media Junction, we like to say that a website is never truly done. You should always be
improving different aspects of your site using tools—such as heat maps and A/B testing—to adjust
the experience based on your users’ behavior.

For some companies, that isn’t realistic, so they start to consider a website design update every
few years. But it really comes down to one thing: when your website stops producing results
and achieving your business goals, it’s time for a refresh. If you’re not generating enough leads
to achieve revenue goals, something needs to change. Whether that’s minor changes and
improvements or an entirely new website design, talking to an agency can help narrow down
your options.

time for a
refresh
If you’re not generating
enough leads to achieve revenue
goals, something needs to change.
It’s time for a refresh.

10
05
your website
design options
Hiring an Agency vs. Designing
In-House
There are many benefits to hiring an agency to redesign your website versus doing it in-house. First
and foremost, when hiring a professional agency, you’re getting an entire team:

STRATEGISTS DESIGNERS
They will help you understand Both creative and technically
your goals from both an SEO inclined, they understand making
perspective as well as UX/UI to websites both functional and
address design and architecture. aesthetically appealing.

CONTENT SPECIALISTS DEVELOPERS

Writing compelling copy is quite They are experts in their field who
literally their job; they know the will help build your site and present
language and best practices to your content in the best light for a
produce results. great user experience.

12
The experts at an agency have gone through website redesigns many, many times. They’ve refined
the process and can help guide you through it for a successful launch. This doesn’t mean you
should be hands-off in the process—you know your business best. Your agency partner should
leverage your expertise and knowledge of your buyers, industry, and your own internal processes to
create the best possible product for your consumers.

Many companies enjoy partnering with agencies for a fresh, outsider’s perspective. When you’re
too close to your own brand, it can be difficult to see things from a bird’s-eye view. An agency can
help you better understand how your business goals line up with your customer’s stage in their
buyer’s journey.

Choosing a CMS
Platform
There are countless platforms you can use to WordPress is open-source, and it’s very
build and host your website, HubSpot and easy to expand the functionality and build
WordPress being among them. Considering out what you’re looking for without a lot of
what you’re hoping to achieve is key in technical knowledge. You can integrate a
choosing which platform to use; having number of plugins, and you have easy access
established goals will assist you in choosing to a server-side environment. However, all of
one that best suits your needs. these extra tools and plugins are written by

13
different developers, so when adding them editor to create something visual is not always
onto your website, you can run into conflicts— intuitive or easy. HubSpot, gives users a visual
or worse yet, vulnerabilities—which put your editor, showing you a preview of the page
site at risk. as you’re editing and adding content. Users
also have the ability to test the responsive
The beauty of HubSpot is that it’s a
experience of a page and optimize it for search
proprietary platform, resulting in a more
engines.
secure environment. Beyond just the website
platform, HubSpot has so many other
integrated tools and a complete automated
marketing solution that works in tandem Templates vs. Flexible
with the hosting platform. Everything Layouts
from managing your social media, to email
The choice to use a premade template versus
marketing and analytics is at your fingertips—
a custom, flexible layout will depend on many
without the conflicting code issues that may
factors, such as, your business type, target
come with WordPress plugins.
audience, and your specific needs.
One of the most noticeable ways the HubSpot
If you are on a tight budget, a pre-made
and WordPress platforms differ is in the editing
template might be the way to go in the short
process for the user. With WordPress, you edit
term, but you will likely be giving up flexibility
pages in the admin panel with a number of
to expand or easily change out content areas.
rich text editors, so it feels like you’re using
Building your website with templates can be
Microsoft Word or Google Docs. Using a text

14
an easier option, especially if you’re unfamiliar On the other hand, creating a custom
with the technical side of editing website website with flexible layouts can be more
code. The page is already laid out for you in a costly upfront, but in the long run may end
complete package—all you have to do is insert up costing less. Depending on the company
your content. The biggest downside of using you hire, it may take a bit longer to design
a premade template is that you will generally and build your website, but you’ll be able to
only be able to customize a few things (such customize the layout of your pages. This will
as background color or logo/header images). create a high-quality presentation and user
Also the layout may not be adaptable to experience for your website visitors. If you want
changes, so what you see is what you get your website to grow along with your business,
(WYSIWYG). you will want to choose a custom web design
with flexible functionality.

PRO TIP

If you do decide to go the template route, you should choose a template f rom a web
design agency rather than choosing a template f rom your CMS platform’s inventory.
That way, you will have people available who can help customize the template and
troubleshoot any issue you may encounter.

15
06
website design
options
CSS
Cascading Style Sheets, which most people know as CSS, handles the look and feel of a web page.
Using CSS, you can control the color of the text, font styles, paragraph spacing, how columns are
sized and laid out, background images or colors, layout designs, variations in display for different
devices and screen sizes, and a variety of other effects. The beauty of CSS is that you can write the
code once to define a style for each HTML element and apply it to as many pages as you want. Less
code means faster page load speeds.

Fonts
When most people think about web design, they’re primarily focused on imagery and how the pieces
interact on the page; however, your font choice matters just as much as complex graphic design when
communicating with your visitors. Using web fonts cleverly can help convey your brand’s message by
drawing the reader’s attention to a specific element or differentiating between types of content.

Your font choice, combined with size and line spacing, has a huge impact on your website’s usability. It
could mean the difference between content that encourages reading and interaction, or users clicking
away from your site because it’s unreadable. Deciding on the best font for your website comes down to
your user experience, the story you’re telling, and the response you’re trying to evoke.

17
Graphic Formats
There are plenty of image file types to choose from as you are building out your website, but the
wrong format could mean a blurred web image, a giant download, or a missing graphic in an email.
Using the right format for the job means your design will come out picture-perfect and just how
you intended. Some of the most common graphic formats for the Internet include:

JPEG GIF
Web and print photos Animation and transparency
and quick previews in limited colors

PNG SVG
Transparency with Scalable graphics with support
millions of colors for interactivity and animation

18
Content
One of the biggest mistakes companies make is not dedicating enough time to website content.
Quality content is what sets your website apart and draws customers to your brand. The content on
your website should target your audience, engage them, and persuade them to take action. Make
sure your web content addresses your visitor’s needs and explains how you not only address their
pain points, but also how you’re different from your competitors—as they say: “content is king.”

Video
If you’re not building a website with video in mind, you’re only using a fraction of the tools available
to you. No matter how you look at it, video is an integral communication tool. In fact, within the next
year, video traffic is slated to account for 80% of all consumer internet traffic.

If you’re thinking about how you want to feature video on your site, start by thinking about how
your video content will support your overall business strategies. Some companies find success in
producing product overview videos, while others use video as a chance to share their brand’s story.
Every company has a story and a message to share, so let your audience experience your passion
for what you do. Whatever video you end up making, it’s crucial that your use of video actually adds
value to the page.

19
07
using analytics
to improve your
website
A website is never done. There is always opportunity for improvement, and the best way to know
how a website is performing is to review the data. Analyzing your data can paint a better picture of
your visitor trends and provide insight.

Using tools like HubSpot and Google Analytics gives you a peek into your customer’s habits and
helps you understand their buyer’s journey. Sources of site traffic, your peak visit days/times,
the devices visitors are using, and a number of other data points are available through the use
of analytics tools. Once they’re on the site, you need to make sure your content is optimized for
conversion.

Iterative Design
(Growth-Driven Design)
Iterative design is the belief that your digital presence is a living document. Following the iterative
design methodology, you should be regularly updating and improving your website, rather than
building it once and forgetting about it until your next redesign. The iterative design process is a
continuous cycle of prototyping, testing, and making adjustments and refinements.

Using A/B testing as part of iterative design can be incredibly beneficial to understanding your
users and honing in on the best possible user experience. Things like button placement, colors,

21
fonts, and even the verbiage of your headline or CTA can have a drastic impact on your conversion
rates. A/B testing creates a variation and gives you the data on how each version performed. Which
version was most effective? What’s getting you the most qualified leads? Keep that version and
move on to the next test.

A/B testing is
beneficial
It is continually
experimenting to findout the best
way to engage with your users.

22
Heat Maps
Heat maps record what people do with their where they stop reading, and where they are
cursor while visiting your site, which can be bouncing away from your site.
beneficial in giving you insights into your
This data gives you information about what
visitors’ behaviors. The idea is that people look
your visitors are looking for and how you can
where they hover, so a heat map shows how
best rearrange your content to meet their
users read a web page. Some maps will also
needs. For example, if you notice visitors are
record where visitors click or scroll.
trying to click on things that aren’t links (like
By using heat map software like Hotjar, you an image or sentence), you might consider
can understand how users are visiting your hyperlinking that component to additional
site, where they focus their attention, where content.
people might be encountering friction,

23
08
the future of web
design
Technology is going to continue to evolve. So it goes without saying that the way we build and
design websites will change to meet the growing needs of users (and their devices). This has
already started to come into play with the advent of “smart content” that tracks visitors to your site
and displays the content that is most relevant to them.

Future web design has to consider user experience and personalization—almost to the point
of curating the experience for each individual user. We need to understand why users are on
a website and what they are looking for, then craft an experience that helps them quickly and
intuitively find information.

Machine Learning and

Artificial Intelligence
Artificial intelligence and virtual (or
augmented) reality are already impacting
website design, and that influence will only
increase as these technologies evolve. The rise
of machine learning and AI-enabled software
has the potential to drastically revolutionize
how customers interact with companies.

25
Chatbots have made waves as the first With the addition of bots and AI, designers
point of contact for a customer reaching will be able to plan out user experiences more
out to an organization. They analyze the than ever before.
needs of a customer based on prior natural
Web design has come a long way in the last
language interaction (i.e., product inquiry,
decade, but with the help of machine learning
troubleshooting, or sales) and will resolve all
and AI, designers can take web design to a
issues that are within its capabilities or direct
whole new level to offer the best possible
the customer to a live representative.
experience to users.

26
the agency team
you’ll love
WHAT ’ S NEXT ?

Have more questions?

We offer a free website

re-design consultation quote.
Grab a time on our calendar that works best for you!

let’s talk
 1021 Bandana Blvd E

STE 214, St Paul. MN 55108-5111

651.426.8669

www.mediajunction.com

©2019 Media Junction® is a custom web design and inbound marketing agency based in Saint Paul, Minnesota, and is a registered trademark
of Site Solutions, Inc., Minneapolis, Minnesota. All custom web designs are the virtual assets of Media Junction® and our respective clients.
Duplication and/or reproduction of our work and/or content is prohibited and should not be used without written consent.