the ultimate web design - kiwi creative
TRANSCRIPT
T H E U L T I M A T E
for Tech Companies
WEB DESIGNG U I D E
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET2
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Let’s say your boss drops by your desk and casually says, “Hey, let’s redesign our website!” What comes to mind?
Do thoughts of 60-hour work weeks and never-ending rounds of revisions immediately run
through your head? Or are you giddy at the chance to restructure your sitemap, optimize
content and implement new design trends?
Whatever your personality type, we know you’ll find value in this in-depth, step-by-step look at
how tech companies should approach a web design project.
Planning for SuccessHave you heard the saying “by failing to prepare, you are
preparing to fail”? That 100% applies to tech companies
undertaking a website redesign or development project.
It may sound more fun to open up Photoshop and start
designing right away, but you’ve got a lot of prep work to
ensure the project goes smoothly.
Understand Your Goals
Why do you want to redo your tech website? Because it looks outdated? That’s a
good reason, but dig deeper…
Are you really just frustrated that your website doesn’t look as cool as newer sites? Or, do you
think the content and design of your website is negatively affecting user experience, which in
turn, is hurting your sales pipeline?
Why are we asking? Because the websites that we build for tech companies generally fall into
one of two categories:
“BY FA I LI N G TO P R E PA R E , YOU
ARE P R E PA R I N G TO FA I L”
vs
Brochureware Lead Generation
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET3
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Understand Your User
Odds are you already have a formalized buyer persona, but does it address
website-specific behavior during the buyer’s journey? If your current website only
has a generic form on the contact page, then the answer is “no.”
Don’t feel bad, you’re definitely not alone: one study even found that 70% of small business
websites don’t display a clear call-to-action on their homepage!
Here are some general ways that help nurture website visitors down the sales funnel:
• Awareness Stage: Blog post embeds on service pages, a resource library of downloadable
content, lead flow pop-up to sign up for email updates
• Consideration Stage: A podcast library, live chat availability, long-form content offers
• Decision Stage: Demo registration CTA in the site nav, or a self-service calendar to book a
time to talk with a sales rep
Which of these would resonate with your specific buyer? Make sure those tactics end up in
the final version of your new website.
If you’re looking to develop a beautifully designed site to validate your business, that’s totally
fine. We call these “brochureware” sites because they’re essentially an online version of your
printed sales materials. Recognizing that this is what you’re looking for upfront will save you
from wasting resources and money on something fancier than you need.
However, most technology companies these days want their website to be a 24/7 lead
generating machine. And knowing that upfront will help you focus on building a website that
will support your specific sales and marketing goals—whether that’s driving organic traffic to
your blog or getting more people to register for a demo of your software.
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET4
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
So, why do we like WordPress so much?
• It’s pretty easy to use: With a bit of training,
you’ll be able to navigate the CMS with ease.
• It’s well documented: Ever get stuck? There
are hundreds of support sites that will give
you the answer.
• It’s affordable: You’ll never pay a monthly fee
to WordPress. (But, yes...you’ll still pony up a
small bit for add-ons like premium plugins
and services like hosting, etc.).
• It’s open source: You can host wherever you
like, the code isn’t top-secret and you may
even find free source code to implement
cool features or functionality.
Evaluate Technology
There are seemingly endless options for a website CMS (content management
system): WordPress, Joomla, Drupal, Magento, Concrete 5, Kentico, Umbraco,
dotCMS, HubSpot…the list goes on and on.
Confused by the options? Here are some things to think about when deciding which CMS you should go with:
• Do you want the freedom to host wherever you want?
• Will your website require a particular type of server platform, like Windows or Linux?
• Do you want an open source or closed source platform?
• Do you want a popular CMS that most developers are familiar with developing in?
• Are you okay with a “home grown” solution specific to an individual agency?
• Are you okay with paying yearly subscription charges?
• Do you have time to keep up-to-date with security updates yourself?
• Do you want a bunch of fancy functionality best achieved by using plugins?
In our experience, most small- to mid-sized tech companies fare best with WordPress. (That’s
what we use to build most of our clients’ websites.) In fact, WordPress runs just over 29% of all
sites that use a CMS.
CRM Systems
ERP SystemsHRM Systems
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET5
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
The only real WordPress objection we’ve heard from companies is concern about security.
However, these same companies usually admit that they’re hosting on a cheap server and
haven’t kept their plugins up-to-date. So, with just a bit of monthly maintenance to keep things
updated, WordPress is no more or less secure than other CMS platforms.
Beyond your CMS, you’ll also want to determine what outside technology platforms your
website should integrate with. For example, are you going to use an all-in-one marketing
automation software, like HubSpot? Or should data push through to other platforms, like
MailChimp or Salesforce? Some of these integrations are simple, but others can be pretty
complex. Make sure you’ve allotted appropriate time and budget to make everything work like
a seamless, well-oiled machine.
Evaluate Skills + Resource Availability
Your tech company has a dozen software engineers—they should be able to code
a website…right?
Not necessarily. Making a website technically function and making it a lead generating
marketing machine are two very different things.
As you’ll see below, building a website is a multi-step process that requires many different
skill sets. Unless this is your only priority and you have a robust internal marketing team, you’ll
probably want to outsource part (or all) of your website design project.
Here are some available options if your internal skills and/or capacity is lacking:
Buy an off-the-shelf theme: There are plenty of websites out there where you can buy a nice looking, off-the-shelf
website template. If your budget is tight and you need a brochureware website, this
could be a good fix. But beware of bloated code and plugin incompatibilities behind the
scenes that could cause your website to run slow or even break in the future.
Hire a freelancer: Freelancers are an affordable way to get a semi-customized website.
Since many freelancers specialize in a single skill (UI/UX vs. development vs. business
intelligence), you need to be okay with managing multiple resources. Plus, freelancer
oftentimes have “day jobs.” So, be prepared to be patient since they might respond on a
delayed timeline and during off hours.
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET6
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Hire an offshore company: You probably already get daily spam emails from SEO gurus
on the other side of the world or offshore development companies offering to fix your
website. Pros: cheap. Cons: language barriers, quality of work, time difference…the list
goes on and on.
Hire an agency: A full-service agency will employ all of the experts you need to build a
lead generating website under one roof. But, just because they’re doing the bulk of the
work doesn’t mean you can check out of the process. Client feedback is crucial in an
agency relationship. Though an agency might be the costliest of all options, you also get
what you pay for.
Determine Budget + Timeline
Once you’ve figured out all of the above options, it’s time to get serious about two
difficult conversations that happen with all website projects: budget and timeline.
In general, with an agency, a traditional tech website could cost between $25-55K+ and take
3-6+ months to build. If that’s inline with your expectations, agencies will be more than happy
to spec out a unique plan and price quote for your project. But if that gives you a heart
attack, consider one of the other options above or start budgeting to work with an agency
in the future.
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET7
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
The Website ProcessWhew...with the prep work completed, it’s finally time to get started!
As a side note, we’re going to assume you’re working with an agency to build a WordPress
website in these following examples. Because, well...it’s what we do on a daily basis.
Sitemap
Is your current site 12 pages? Or 1,893 pages? In general, today’s websites are
trending smaller, but the answer for “How large should my website be?” is literally
“Whatever it takes to be valuable for your user!”
Look to your site’s page performance in Google Analytics for proof.
Are people reading every press release that you diligently post online? No? Remove and
redirect in your new site. (And, spend your time and energy on what they do read.)
Speaking of...are visitors spending huge amounts of time on your blog? That’s a keeper, even
if it’s a time-consuming task to write new content every month.
Once you have a general idea of the pages that will be on your new website, it’s time to
arrange them into a proper sitemap, which usually looks like a family tree. Top level pages will
be in your header navigation (keep it to 4-7 short items), children pages will live below those,
and so forth.
Don’t forget to include “footer” pages, like a sitemap, terms and conditions, privacy policy
or “header” pages, like a link to tech support or a link to login to a client portal.
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET8
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Wireframes
Once your sitemap is complete, it’s time to assign each page to a set of templates
that will get designed then developed in WordPress. Tech websites generally have
between 8 and 12 templates which represent unique page layout options.
Sure, you could get away with fewer templates, but if all of your inside pages have you entering
content into a big free-for-all area, styling and consistency throughout your site become
a huge issue, not to mention little visual interest or even confusion for your user.
Here are some popular page layout templates that technology websites often use:
• Homepage: self explanatory!
• Top Level: everything in the header nav
• Second Level: children pages of top level pages
• Standard Sub: generic interior page
• Contact: special space for a contact form, map
• Team Landing: headshots of all team members
• Team Listing: individual bios for each team member
• Blog Landing: excerpts from all blog posts
• Blog Listing: full individual blog posts
• Career Landing: listing of all open job titles
• Career Listing: full individual job description, form to apply
• Clients/Partners/Awards: logo grid
• Full Width: no sidebar/breadcrumb nav for sitemap, terms/conditions, etc.
• Landing Page: marketing-specific squeeze page that includes a form to collect email
addresses in exchange for content offers or other assets
Once you know which template each page in your sitemap will use, it’s time to get sketching!
A whiteboard is a good place to start, but a marketing agency will use online software, like
Balsamiq or Slickplan, which, later, make wireframes easy to translate into design mockups.
It’s important to note that these wireframes will not look like a finished design: they’ll use boxes
as image placeholders and ugly “Lorem Ipsum” text for copy placeholders. Don’t focus on the aesthetics, because that’s all going to change during the design phase. But, do focus on how
the content for the page will meet the goals you defined way back in the planning stage.
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET9
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Technical Requirements
To make sure your website functions exactly as promised, writing up a “technical
requirements” document for the designer and developer is a must-have step in the
website design process. What areas of the website will be editable vs. static? What
categories should be used in the blog? What should happen when users hover on a button? A
good technical requirements doc will tell you.
Let’s use the infamous contact form as an example. While it seems simple enough, there are
actually many options to consider! So, make sure there are no surprises at launch by answering
these types of questions before development starts:
• What form fields will be needed?
• What form fields are required vs. optional?
• What should the submission button say…“submit” or something more compelling?
• After submission, should the form be replaced with an inline thank you message? What
should that say?
• Should the user get an email confirmation that their message has been received?
• Which staff members need to get notified that someone has filled out a form?
• Should the form data also push data to a CRM?
In fairness, a well-written technical requirements doc might be slightly above the head of a
non-technical person, but your agency should explain anything that doesn’t make sense.
For example, if your sitemap goes several levels deep, consider adding breadcrumb navigation
to your wireframes. If you’re trying to drive people to sign up for a free demo, leave space in
your wireframes for a sidebar graphic.
Remember: if it doesn’t show up on the wireframes, it’s not going to be in your final website!
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET10
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Website Design
Now’s the time to worry about the “pretty” stuff, like colors, fonts and
photography. Did your wireframes feature rectangular CTA buttons? In the final
design, they may actually have rounded corners. Maybe your main navigation
bar was mocked up in all caps, but the designer decides that initial caps is a better aesthetic
decision that more closely suit your brand.
In other words, a talented graphic designer will always follow the spirit of the wireframes, but
also insert their own creative flair to make sure the website looks appealing and on-brand.
On that note, it takes innate talent and years of training to be a truly excellent UX/UI designer
who improves website experiences through design…like, way more so than we can explain
in one page on our website. But, because 88% of online consumers often don’t return to a
site after a bad experience, here are a handful of top UX tips we always keep in mind when
designing websites:
1. Make navigation logical - 76% of consumers say the most important factor in a website’s design is “the website makes it easy for me to find what I want.” Intuitive site navigation should guide users directly to the information they expect to see
2. Manage focus - use visual contrast (like CTA buttons of contrasting color or captions of smaller, lighter font) to guide users to focus on the most important elements of your page
3. Think mobile - Make sure your design is responsive and uses scrolling and swiping functionality, mobile “hamburger” menus, and content large enough so pinching and zooming isn’t necessary.
4. Design for skimmability - Visitors scroll through only about 50% of an article page, and read less than 20% of the text. Break up page text with elements like highlighted words, short blocks of copy and relevant, attention-grabbing headlines.
5. Use relevant graphics - whether photos, icons or CTAs, graphics should convey meaning for the content they’re supporting—and should NOT look like ads.
6. White space is your friend - The relationship between UI elements is defined the space that either separates them or indicates that they’re directly related.
76% O F C O N S U M E R S S AY T H E M O S T
I M P O R TA N T F A C T O R I N A W E B S I T E ’ S D E S I G N I S “ TH E
W E B S ITE M A K E S IT E ASY F O R M E TO F I N D W H AT
I WA NT.”
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET11
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Copywriting
While one study found that 94% of website first impressions are related to design,
users won’t stay very long on your page if the copy isn’t equally as compelling.
So, how exactly do you encourage online engagement through copywriting?
Here are a few of our favorite pointers for tech companies:
• Use subheads, bullet points and sidebars: the earlier a visitor is in the buyer’s journey,
the less likely they are to read long-form copy
• Talk about how you solve problems: people don’t buy products, they buy solutions
• Use compelling verbs: a button that says “submit” is boring; a button that says “get
in touch” or “start the conversation” is unique
• Limit technical jargon: users might not know all of your industry lingo, especially acronyms
• Show, don’t tell: client testimonials and case studies give credibility
• Have a personality: don’t be afraid to let your unique brand voice show through your copy
Website Development
Now it’s time for the technical stuff: website development. At the risk of
oversimplifying the process, this involves setting up a sandbox server, installing
WordPress, building page layouts from the wireframes, styling the layouts to
match the design mockups and…the list of development tasks is extensive and as unique as
each client. (That’s why this it’s the longest and priciest phase of a website design project.)
Yes, building a website from scratch takes mad tech skills. And, unfortunately, we can’t teach
you to code in one web page either. But, one of the best perks of WordPress is the abundance
of free or low-cost plugins available that can expand the functionality of your website.
Here are some of the most popular plugins we recommend for tech websites:
• SEO: Yoast
• Multi-Lingual: WPML
• eCommerce: WooCommerce
• Security: WordFence
• Maintenance: UpDraft Plus and WP Optimize
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET12
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
• Performance: W3 Total Cache
• Forms: Contact Form 7 or Gravity Forms
• Image Optimization: WP Smush
• Development: Advanced Custom Fields
While the above plugins are robust, well-supported and secure, that’s not always the case.
Be sure the plugins you choose have an abundance of positive reviews and release frequent
updates. And use them sparingly: the more plugins you install, the more likely they are to affect
site performance or conflict with each other down the road.
Content Migration
Assuming the agency is writing copy and coding the site simultaneously (a common
time-saving process), your developer will use a lot of placeholder text on dev site.
Before launch, you’ll obviously want to replace this with “real” copy as well as
“real” photography or graphics. But who will be assigned to do this admittedly tedious work?
Be clear as to whether you plan to take on this responsibility—or if you plan to assign to the
agency—especially if you’re handling the copywriting yourself.
The good news? Since you probably won’t be rewriting all of your old blog posts, many
platforms will let you export existing posts to a .csv file, which can then be uploaded straight
to WordPress…with one caveat, of course. Often times, featured images can’t be pulled over.
Decide upfront if it’s worth the effort to find a workaround, if you can live without them, or
if you’ll manually re-upload as you have time.
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET13
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Search Engine Optimization (SEO)
Back in the day, SEO was a shady practice involving keyword stuffing and other
“black hat” ways to trick Google. Nowadays, Google is too smart to fall for those
tricks. (In fact, they’ll penalize you for old school tactics, like duplicate content
or buying backlinks.)
Ranking higher in Google, or any SERP (search engine results page) for that matter, involves
creating a quality experience for your user, not just for the search engine. And while there is
no “magic formula” that guarantees you SEO success, here are a few of the items we prioritize
when developing a website:
301 redirects: Odds are, the pages on your old website won’t match up exactly to the
pages on your new website. To avoid visitors stumbling across the dreaded 404 error
page (which happens when they’ve clicked on a link to a page that doesn’t or no longer
exists), be sure to use a tool like Screaming Frog to make sure you have redirects in
place for any broken page links.
Metadata: The SEMrush Ranking Factors 2.0 study suggests that Google’s algorithms
are getting so good at understanding context and synonyms that keywords are
becoming less important as a ranking factor. That said, don’t get lazy and use the same
meta description on each page. Even if your visitors pay little attention to the page title,
meta description or url structure, follow the same rules that HubSpot recommends
when writing on-page copy: think about humans first and search engines second.
Page load speed: Nearly half of web users expect a site to load in under two seconds,
which is why Google likes pages that aren’t bogged down with bloated code. Assuming
you’re already on a quality hosting server, be sure your images are optimized and your
code is minified.
Behind-the-scenes tasks: There are a handful of technical SEO tasks that the end user
may never notice, but are still important. Examples include submitting an XML sitemap
to Google and setting up a Robots.txt file.
As a disclaimer, even if you follow all of the above best practices, you can’t launch a new
website and expect it to be an overnight success. True SEO results come out of continual
improvements to your website over time, both from adding relevant content and tweaking
what’s already there.
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET14
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Testing
Your developer should test your website in the most recent versions of web
browsers on Mac, PC, Android and iOS devices to make sure it functions
as expected.
What your developer won’t do, however, is guarantee that your site will look awesome in older
versions or “retired” web browsers, such as Internet Explorer or Netscape. And while that might
negatively impact a small portion of your visitors, much of the technology used on modern
sites simply isn’t compatible with outdated web browsers. And, as a technology company
yourself, we bet you appreciate that fact.
Launch
Finally, it’s time to go live! At this stage, there are a lot of technical tasks that need
to happen behind the scenes. Your web developer and your internal IT team should
coordinate to make sure everything goes smoothly. Once the site is “live,” some
users may see your new site instantly, while others may see your old site temporarily until their
ISP flushes their DNS cache. Don’t worry...although not ideal, this is normal (and could possibly
take up to 12 hours to resolve.)
Training
The beauty of WordPress, or any other CMS for that matter, is that it allows for
easy updates to your website without having to know code. And while the core of
your website is probably pretty similar to others (and thus has lots of great resource
documentation online), customized training will be valuable for the areas of your website that
were developed just for you.
Whether that’s reviewing how to post a new job or switching out a CTA in the sidebar, your
developer should take an hour (if not two or three) to show you how to work the “behind the
scenes” of your new WordPress website. Ask all the questions you want!
COPYRIGHT ©2018 K IWI CREATIVE . ALL R IGHTS RESERVED. KIWICRE ATIVE . N ET15
T H E U L T I M A T E
for Tech CompaniesWEB DESIGN GUIDE
Measure + Tweak
Phew…you’ve finally relaunched your website. It’s time to sit back and watch the
leads role in, right? Wrong. (Duh.)
As with all marketing, website design is part art and part science. So even if your site follows
all of the industry best practices, your metrics will likely reveal that there are areas for
improvement.
On that note, what are realistic metrics for a tech website anyway? As a standard disclaimer,
you probably already know the answer is “it depends” and you should aim to simply improve
upon your own past performance. But in general, here are some stats lead generation sites
should shoot for:
• Bounce rate between 30%-50% (HubSpot)
• CTA CTR around 7% (Capterra)
• Time on page over 40 seconds
Getting Started with Web DesignReady to get started with a web design project?
We can help.
Kiwi Creative is a HubSpot Gold Agency Partner that specializes in working with B2B software
and technology customers. And, hopefully, after reading this web page, you can tell that we
know our stuff.
We’re a small, but talented, team of strategists, writers, designers, analysts, technologists and
developers…all ready to help in-house marketing managers at tech companies with branding,
inbound marketing, sales enablement and, of course, web design.
Want to chat about an upcoming project?
Click here to schedule a time that’s convenient for you.