Website Parts

Key components to a business, a website, and a plan for success.

Business Planning and Research

Analysis of the Competition

What are other people already doing for this industry, and how are they doing it? You don't want to reinvent the wheel, but consider the possibility your competitors don't have everything figured out.

User Personas & Stories

Understanding of the ideal customer's demographics and preferences, down to creating descriptions of fake people and their motivations and desires, matching existing and/or desired user data.

User Feedback

Do you have existing users, who can give (or have already given) important feedback on their experiences? Document this feedback for insights on how to proceed.

Dollars and Cents

What kind of time, effort, and resources can you afford to invest to take a chance on your idea? Hundreds of dollars, and tens of hours? Tens of thousands of dollars, and hundreds of hours? What are the risks of failure, and the potential gains of success? Set a budget.

Marketing Planning and Research

Keyword Analysis

Build and plan your key important words, phrases, and headlines, according to your business type, your product or service offering, and your user demographic.

SEO Analysis of Content and Keywords

Aim to get placed high on Google Search. The rest of your content needs to be tuned to focus on words and phrases which will help your search rankings, and your advertising performance. Tools such as Moz or SEMRush are useful at this stage.

Content Planning

Build an ideal structure for providing value and information to potential clients through words, images, audio, video, and helpful resources.

Mission Definition

Why did you start this, in the first place? What motivates you? What's your background? Who are you, and how does that apply to helping the world through your business?

Content Review

How does your current content match up against the ideal plan?

Automation

Can we use tools and software to remove human labor hours and people-based delays, while keeping communications personal and personable?

Website Performance Planning

User Flows

Consider the steps your user demographics will be taking along the path of your content/resources. How do we optimize that path, for maximum value for the client and the business? Plan for acquisition route, such as Google search, social share visit, your site/page being linked in a text, visits through referral partners, recommended articles on the start page of a web broswer, and visits through email newsletter links.

Metrics and Goals

What goals are you trying to achieve? How do you plan for your users to achieve your goals? What would you consider "success," and what would be "failure?"

Red Routes

Identify the key user journeys across the User Flows, which will turn into goals completed, and eliminate obstacles and barriers.

Communication

Information Architecture

Figure out a structure for the information, so it's easy for the goals to be achieved, and not overwhelming to the user. That's stuff like page order, page titles, link locations, and ranked order of content on a given view (page).

Content Creation

Write articles. Write landing page sales copy. Write and optimize your mission statement. Record audio/podcasts. Plan and record your videos (marketing videos, product explainer videos, testimonial videos...). Take product photos, or find service photos on a Stock website like Adobe Stock.

Language

Is your content framed in a way to compliment your business goals and your user demographics? The culture and language of your target audience should be mirrored or considered. This is your Brand Personality. Make sure your demographic understands you, and the context of your business and your product.

Accessiblity

For anyone with different skills or limited devices, how are we helping them achieve the goals? Consider the blind, who have to navigate using screen-reading tools. Consider the deaf, who can't hear your video, but can read subtitles. Consider those who need clarity and simplicity to understand your concept, or descriptions on buttons to understand their actions.

A Little Love

Sustainability

We're all sharing a giant dirt spaceship, let's keep it clean! While considering content, functions, and features, plan to reduce the resources we use. Reinforce greener behaviors. Promote best practices for sustanability.

Ethics

Is your product secure, private, and honest? Slow down and plan for ethical design and code.

Incusiviness

Our own views and backgrounds skew our decisions and designs. Get feedback from others with different views to remove your biases from your design process. Design for everyone.

Informed Consent

While we'll probably need to track user actions to optimize the product, how are we conveying that information to the users? Get consent for potentially-undesired monitoring or data sharing, and clarify your product's tracking and data-sharing policies in a Terms and Conditions document and a Privacy Policy. Even consider 100% line-item opt-in of all tracking and data sharing, such as the standards in the GDPR.

Design

Style Guidelines

Plan the visual style framework for your brand. Are you elegant, or bubbly? Pristine, or frighetning? Minimal, or brutal? Moody, or playful? Sunny, or gloomy? Warm, or cool?

User Interface Elements

Create your reusable elements and patterns, including buttons, links, headers, footers, form fields, pop-ups, shadows, and more. Start with individual components, and build to whole pages.

Gestures

How will people interact with your website? Swiping? Pinching? Dragging? Maybe they'll zoom, or rotate, or shake. What about someone with a two-handed phone, vs. a one-handed phone? Or maybe a left-handed person and a right-handed person need to be considered. You can't just "hover" items for desktop users, because you have to consider touch-only users. Does content need to fly in or out based on scroll-position on the website? What if someone prefers to use keyboard arrows, or the scroll bar, to navigate a website, as opposed to a mouse scroll-wheel, trackpad, or touch?

Responsiveness

We're beyond the days of mobile-responsiveness being an option. By default, we need to consider handheld devices above all else for nearly every interaction. But don't limit yourself to a modern smartphone. Consider smart watches, with their new web view features. Consider your TV, where one might see your website after following a YouTube ad prompt. Often, your site will be moved from one device to another by the same user. Is important information about their view being moved along with the link? Many people will discover your information through a maps search, or even through a voice-only experience such as Alexa, Siri, or Okay Google.

Implement Code / Designs

Type Code

Start executing on the code structure. Begin to write the novel of code.

Test Code

Is it working, or did you forget a semicolon?

Re-work Code

Your initial code may or may not be functional, but you're going to likely want or need to tune it some more.

Document Code

Will other developers be able to comprehend and work within the code, without the current developer being available?

Adjust Plans

Sometimes, great plans need to be changed based on information learned in the coding process.

Penetration-test Code

Is your stuff easy for a script kiddie to get into? Or did you build it well enough, where even if they could get in, there's no valuable user information to glean?

Check Code

Just once more, make sure the code is to your liking and matches the business plans.

Code for Feedback

Waiting Times

Are your users likely to wait more than a small fraction of a second for an action to occur, after they make a tap, click, or gesture? What are you doing to indicate work being done by the machine, or by the server? Should we show a loader/spinner, or for a longer wait, should we show something a little more entertaining and interactive?

Errors

Let's be real; if there's an error, it's probably your/our fault, not the user's. Give clarity and specificity when an error occurs, and if it's on-brand, try being a bit funny. Don't use red error messages or boxes if you can avoid it, red indicates damage or insecurity. Try a softer option, like blue, or maybe go yellow for the worse errors.

Completed Actions

When a user takes an action, give clear, immediate feedback upon success. Try coding your front-end to assume server success, to speed up the process. Trust your server! But be prepared for edge cases where the server isn't working properly.

Finalize Design and Code

Finalise the Layout

You did good with your first implementation of the design, but check back through and try to elevate the design further. Don't accept the first solution! Is that really the best you can do?

Images and Icons

Consider the context of every icon, the culture of your demographics with every image, and the overall layout with these in mind. You might get huge improvements with just small changes.

Fonts and Colors, and their Hierarchy

Big, medium, small. Opaque, translucent, light. Your colors, spacings, sizes, bolds, italics, and other details affect the confidence of the user when ingesting information or taking action. Don't try to be too cheeky with your sizes and colors; they should mean something to your demographic when used in context.

Delight your Users

Micro Copy

Your brand needs to be followed by your content text. Sometimes, adding or removing a single word or phrase here or there can bring your content on brand in a whole new way. Don't ignore the little stuff, like success messages on forms, or button text. Personality helps your brand.

Micro Interactions

Your prduct is made of details. Don't let those details slip through the cracks! Trigger, rules, feeback, loop. How do users interact with your product, and how can you improve that interaction? You might want to toss in some easter eggs.

Transitions

Your system might need motion, but only motions which convey meaning about intention, functionality, and data relationships. Beauty is only part of the picture of motion.

Business Changes

Will we be adjust the product or website at all, at a late stage, based upon business feedback? The less we plan ahead-of-time, the more we'll have to do at this stage.

Analyze It

Browser and Device Testing

Deep test of implemented code and designs across common devices and platforms. Big phones, small phones. Android, iPhone. Mac, Windows. Laptop, desktop. Chrome, Safari, Firefox, Opera, Internet Explorer (ew), Edge. Smartwatches. Audio-only experiences.

Visibility Testing

How does your product appear in Search, SMS, or Facebook Messenger? Try the Open Graph Debugger tool, to make sure every page is configured to display ideally, across commonly-used tools and softwares.

Key Performance Indicators

We already know the goals and the mission, but we really need to measure, now! Code for tracking these metrics, and make sure we're not missing anything.

Splittesting

You've probably heard of AB testing. Don't skip it, but don't take it as the whole gospel. Learn about your users, and improve your KPIs. Plan a short roadmap ahead of time, so your project can be built with AB testing in mind.

Test Post-Launch

Survey users, get a focus group to test the UX, record and monitor user sessions, and do anything you can to test, observe, and fix your product and website.

Monitor

Make sure things are chugging along nicely, and the systems don't experience unexpected downtime or bugs. Make sure the business operations are moving smoothly, and can accommodate necessary user requests in a timely manner. Are salespeople contacting leads within 2 to 5 minutes? Is it time to slap some wrists and keep people in line? The most well-laid plans are worthless if they aren't being followed. How can automation help this process?