Understanding Website Development

Understanding Website Development:

Building any type of website is a huge undertaking. As marketers, you may understand buzzwords like CMS, WordPress, Shopify or Javascript but that doesn’t mean you truly understand the process it takes to build-out a site. Web development can be costly, and should for the right result, but that doesn’t mean you should overpay.  Instead, you need insight on how to keep your project on budget and on time. I’ve worked to build dozens of digital experiences, which has helped me become well-versed in the process of building sites both simple and complex. My experiences  working with in-house developers and forming partnerships with specialized development agencies, I’ve developed a unique perspective from a project management point-of-view from both the client and agency side. These perspectives has enabled me to build stronger ties with clients and deliver better values for both parties. This section of the guide is designed to help you make informed decisions about proper website development for optimal user experience,   while offering advice on technology and tips to ensure you stay on budget.

Before you select a website development firm, it’s important to understand the agencies workflow. Usually, pricing is directly tied into the firm’s process and will reflect the output that you will receive. If you want to build a digital experience that wows your users, it’s important to select a partner that will listen to your ideas, make suggestions based on their experiences, the technology available and, of course, walk you through the process and how it’s expected to play-out. You should never be in the dark about the workflow process. Rather, your partnership with a web development firm should be highly collaborative. They take your ideas and turn them into action. If your idea isn’t plausible to actionate, then that should be a constructive discussion that results in something that is actionable.  At my agency, Mission Disrupt (shameless plug), we focus on custom build-outs.Generally, our clients want unique experiences that are tailored to the user’s needs, and for that reason, I’m going to focus on the approach we use. This approach takes no shortcuts and will give you a comprehensive overview of what you can expect during the website development phase. p If you’re really interested, check-out this nine-minute documentary our team made about the process of building  a wow-worthy user experience.

Goals + Feature Expectation:

Rebuilding a website shouldn’t just be a design overhaul. Instead, you should have  defined goals, a method to the madness if you will, that justify all aspects of the design. Before starting your  project, you need to be aware of and communicate the pain points of your current site, as well as specific goals and  expectations of what the new site will achieve. These goals may range from increased conversion rates, sales and lower bounce rates, to a higher average of order volume, etc. You can pair the goals with other objectives, such as creating a more seamless navigation or better ways to cross-sell your products.  

Besides goals, it’s important to set expectations on features. Don’t assume a web development agency will look at your current site and know every feature you have built-out or integrated. Instead, come prepared with an integration list that states current features and what pages they can be found on. By having a wishlist of new features the agency can also better gauge their scope of work, eliminating any surprise charges down the road. I also recommend leaving  room in your budget for any new features that the agency may pitch upon the first discovery meeting that you have.

User Research + Discovery:

With a clear understanding of goals and features, this is the step where a tremendous amount of value should be added by an agency, but this is also the step that is most commonly skipped. Knowledge of best practices is something you should expect from an agency, but knowledge of YOUR users is a vital piece of information that needs to be intensely researched. When our team conducts user research, we start-off with a kick-off meeting with clients, that reviews  goals, pain-points and learning all we can about their customers. We then do our own research by deploying user surveys that asks questions to identify areas of improvement, uncover new integration opportunities and helps us understand website users’ objectives on the site. Most of these surveys are done digitally via website, but I find it helpful to incentivize one-on-one conversations with users by offering gift cards or promo cards in exchange for an interview about their experience.

Although surveys are a great way to understand users’ wants and needs, they don’t always paint the full picture of how users are behaving across devices. This is critical for understanding your audience, especially when your goal is to increase conversion rates. To account for this behavior, I recommend using heatmaps, which shows you the most actively clicked and scrolled-through areas of your site. To give you an understanding of how this is helpful, for our client MB Stone Care, we deployed a heatmap on their homepage. We found that 65% of  users never scrolled below the fold of the page (this is the lowest point of the page you can see on your browser), and users rarely clicked on their sliders to see  other promotions offered. Instead, we saw that users immediately went to the navigation bar to look for products. The result of this research was that we would design a scroll-less homepage where shop categories and product promos would appear above the fold, making the user navigation experience seamless.

Another powerful tool that should be used during user research is anonymous screen recordings of your users’ website sessions. This gives you video recordings of exactly how users are seeing and using the website.  I find this to be a great tool for identifying bugs or subpar experiences that can be improved upon. From this data, you can begin to develop user personas and categorizing users into groups, which can then be used by a User Experience/User Interface Designer to build a wireframe of how  users will flow through the website.  

Wireframing/Sitemap:  

Simply put, wireframing is the process of creating a low fidelity model of how users will interact with your new site, the “blueprint” so to speak. This step is critical to visualizing each small interaction that will take place on your site, including pop-ups, checkouts and error screens. Not only will it help the agency and  client team to understand how the site will be built-out, but will again help with keeping your project budget within scope, ensuring that no extra pages or features will be needed along the way.

User Experience/User Interface Design:

User Experience/User Interface (UX/UI) design is the practice of taking the research we talked about and designing a new layout based on the findings. Make no mistake, this is not traditional “graphic design”. This is a cross between both strategy & design that will solve the problems your users have with your current website experience and will help you meet the goals you set. For that reason, I need to offer a tidbit of advice for all you client-side marketers out there: it’s essential that you listen to the direction that the UX/UI designer sets forward, what you think “looks pretty” could have a devastating effect on the overall experience.  This may result in unmet goals, even while providing an aesthetic experience. This doesn’t mean your vision can’t be met, but I urge you to instead work with the project manager and UX/UI designer directly to address any concerns you may have. By collaborating, rather than demanding, you can reach a happy medium and ensure you reach the best results possible.

Another big point to cover is that we live in a mobile-first world. That being said, be sure to implement these seven mobile best practices.

Development Stage:

After website design is complete, the development and programming of the website begins. This is broken up into two categories: front-end development & backend development. Front end development involves website visuals, which is what your audience sees.  The backend is what powers system integration and allows for all of the features you requested (like e-commerce, event management, memberships, etc). Together, these form a working website, bringing all of your research, design features and technology capabilities to life.  

Your website will be composed with thousands of lines of code. For that reason, you’ll want to make sure the developer is carefully documenting their activity. I highly recommend that you inquire about website documentation before this process begins. This way, in the event that another developer takes over, they will understand where to look when editing codes. I can’t tell you how often we are given sites to edit with little to no documentation. Not only is this frustrating for agency developers, but it becomes costly to the client and a situation that nobody wants to be in when starting a business relationship.

Performance, such as website speed, is also tied to  development. With your developer, establish that you want the website to be as “lightweight” as possible to ensure optimal speed.. We know speed is directly tied into conversion rates, with Google reporting “one-second delay in mobile load times can impact mobile conversions by up to 20%”. That means limiting the amount of reliance on third-party plugins to perform tasks that can be easily developed (like third party scripts). To note, I’m not talking about the third-party plugins I mentioned earlier in this book, but rather plugins that accomplish tasks like “inserting Google Analytics” or drag-and-drop slider plugins. Another downside of relying on third-party plugins is the reliability of plugin support and if it will be compatible with future versions of your CMS. Another way to keep speed as fast as possible is to make sure all images are loosely compressed, which will ensure they take up the least amount of space possible while maintaining image quality. Your developer should discuss these sorts of details with you so that users have a smooth website experience on various interfaces, including computer, mobile and tablet.

With any stage of the website, it’s important to “stick with the plan” to keep-up with the timeline and stay on budget with your site. It’s an agency’s  job to keep you, as the client, happy, but as the client, you should understand that change requests have an impact on this timeline.

So that you get an idea of how changes affect workflow, I’ll explain common requests that seem simple, but can actually cause projects to fall off scope. Styling or formatting changes are generally quick (30 minutes to an hour), because font color,  font size, button color and page color are controlled by a global stylesheet, so that when changes are made in one location they are also applied every element within that stylesheet. For example, I may get request that my website’s ‘products’ button be a different color than other links in the navigation. The developer will go the stylesheet, change the button color in the code and wa-lah, my ‘products’ button is now pink and that change is reflected on all pages of my website. However, when I see projects go over budget, it’s often due to too many random change requests like these that cost time, and thus, money. To stay on-budget, keep a detailed list of changes to give to your developer at one time to streamline the change process.

Last but not least remember that time needs to be spent on Quality Assurance. This should begin once website development is considered complete pending a Q/A review. As the point of contact on the project, you’ll want to make sure that the development team has a Q/A process in place. I recommend having an excel spreadsheet our Project manager/bug tracker program like Jira to keep your process as organized as possible. When talking about bugs be sure to spare no details, documenting the exact problem with video or screenshots. This will ensure the Q/A process is as fast as possible.

The average custom site build out will take between 7-8 weeks but once heavier integrations are requested that number starts to increase.

Having a comprehensive understanding of both the user experience and development process allows you to communicate expectations with company stakeholders better. Remember that choosing the right development partner, one that has procedures in place will allow you as the marketer to focus more on your job will trusting another expert to do their job!