In the second of our two part series, we provide tips on website development after you have selected a firm to work with.
1. Don’t skimp on the strategy phase of your website redesign.
A good website firm will have a defined process for determining what you want and need from your new website. This helps them understand your organization and your desired outcomes so that they can give you the best advice on how to achieve these goals. We did a lot of the leg work for this phase before we had even selected a firm to design our website. We knew that we needed to reorganize our existing content as well as add a lot of new functionality and resources. We had many brainstorming sessions internally where we identified our “wish list” of things that we wanted to incorporate and how we wanted that to look. We had documented this process and were able to provide it to our firm for their review and feedback.
Even though we had done all of this preparation ahead of time, our firm’s fresh perspective and expert advice was very helpful. Their questions help us really flesh out our ideas and pinpoint exactly what we wanted. They provide us recommendations from both a technical and strategy perspective, and they were sure to be conscious of our budget and, ultimately, the ease of use of the site. While this step can be time-consuming, it’s critical to laying the foundation for a strong final product.
2. Recognize that a strong sitemap and high-quality wireframes will make your website better and save you time and money.
Before we could even begin thinking about the look and feel of our website (which is really the fun part of the website redesign process!), we knew we needed to establish a clear and logical structure for the site. Our first step was to create a sitemap with advice from our design firm. This is where you put together an outline of your website that includes each individual page and identifies the hierarchy of where those pages fall within the site.
For some groups, it may be helpful to complete a physical exercise to determine all of the pages for your site and how they should be organized. For example, you could use index cards and write topics for individual pages on each card. After you have brainstormed all of your topics, see if you can group those topics together under different headings. Once you feel like you’ve captured everything and are pleased with how information is grouped together, you’ve completed your sitemap.
After we finalized our sitemap, we moved on to the wireframe process. This process involves the design firm presenting options for laying out information and showing us how it would appear on each page. This is done without any of the visual elements like graphics or specific fonts. Instead, the wireframes include placeholders for photos, text, hyperlinks, and any other essential elements that make up a webpage. This allowed us to get a sense of what the website would look like without getting caught up in the aesthetics of the site.
Make sure to request wireframes for any custom designed pages on your website. Many of your pages may have the same layout, but you will likely have some that are unique. For example, we built an Interactive Resource Library for our new website that allows users to sort and filter documents. This required a custom wireframe because the layout of this page was unlike any other page. Your home page will also have a designated wireframe. For standard landing pages that are used across your website, your firm will develop one wireframe that will be used for these pages.
The wireframe process is your opportunity to tweak exactly how the information on your page will be laid out, so make sure you are completely satisfied with the final product. It is much faster, easier, and less expensive to make changes to a wireframe than it is to make changes to a final webpage that is live on your site.
In both of these steps, it’s important to think of your website from your user’s perspective. It’s easy to get tunnel vision and forget that most of your uses will not be as familiar with your subject matter or your site. If you constantly think about your site through the lens of someone who is unfamiliar with you and your organization, you will be more successful in developing a user-friendly finished site.
3. Consider all other materials (logos, brochures, flyers, etc.) when choosing the visual design of your website.
We knew we wanted a clean and modern look, as well as a design that would tie strongly to our existing brand. We wanted to strike a balance between maintaining white space on the website while still having interesting visual elements and plenty of information on each page.
These design decisions worked for us because they were in line with our existing designs for event flyers, email distributions, our logo, and our professionally-printed collateral. Unless you are rebranding your entire organization while you are redesigning your website, it makes sense to try to match the look and feel of your existing materials.
While most of our website has a consistent visual design, we had a few distinct landing pages for the site that were custom designed differently from the typical internal page design. We actually mocked up several of these pages by hand so that we would be sure that we were conveying our ideas accurately.
Don’t be afraid to give specific feedback to your design firm, whether that’s through examples from other websites or hand drawings on the back of a napkin. We spent some time discussing options with our firm for those pages, and they gave us a few different designs to choose from. We are very pleased with how these unique pages turned out.
4. Once you move into the development phase, keep in touch with your website firm.
The development process, in a way, is the easiest phase from the client perspective. We put a lot of effort into the strategy, wireframe, and design phases, and then we got to sit back while our website firm did all of the development work! During this phase, the firm was implementing all of the technical components and actually building the website.
Midway through the development process, we met with our firm to make sure that we were all on the same page and that we were pleased with their progress so far. Once the development was completed, it was our turn to go through the website and identify any technical problems or things that needed to be fixed. This process is called the QA (quality assurance) phase. We kept a running list of issues and changes, and the firm addressed them one by one.
Once all of our changes were made and we were happy with the final product, we went live with our new site.
5. Don’t forget about the content of your website; that’s what your users are coming to your site to see!
While all of the phases of the website redesign are going on, it’s easy to forget about the content of your site. Not only do you have to develop all of the content for your site, you also have to load all of the content for your site. Some firms will migrate your existing content from your old site, but others will recommend that you enter all of your content into your new content management system so that you become familiar with how the interface works.
Using our sitemap, we set up a spreadsheet that listed all of the pages on our website. Where possible, we identified which pages from our existing website would match up with pages on our new website and made a note of this in the spreadsheet. We then briefly outlined what new or additional content we would like to add to each page. We also identified what links or documents we wanted to include on each page. After going through this exercise, we felt like we had a good grasp of the scope of creating content for the site.
We then divided up the content between different members of the team. We created a Word document where each person could input their content. This made it easy to see our progress and for us to work collaboratively. Every week, we had a brief meeting to check in and discuss any questions that had come up during the content creation process. This kept us on track to meet our deadline.
Once we were comfortable with the content for our individual sections, we each went through and provided edits on the other sections. After editing all of the content, we were ready to start putting the content into our website.
Our website firm provided excellent training on how to navigate the backend of the website and had set everything up in a way that was very intuitive for the website administrator on our end. Even so, it took us a few weeks to get all of our content loaded. We were not just loading text, but also images and documents. Each image or document requires a description before it is uploaded to the site. We also tagged our documents with relevant key words so that people could easily search for them.
While all of the content creation was intensive, it was a great opportunity to review our messaging and to make sure that we were giving our clients the information they needed. We significantly increased the amount of information on our site, which is certainly helpful to our users. By having an organized approach to updating our content, we made the process as smooth as it could have been.
6. Remember that a great website is always changing and evolving.
Hopefully, you will be able to incorporate all of your wish list items into your redesign, but always keep a running list of ideas for future enhancements, even if they are very ambitious. From a content perspective, realize that a great website redesign is a lost opportunity if you fail to keep the content on the site up to date, so have a plan in place to keep things fresh and exciting once you launch.
We hope these tips will be helpful if you choose to undertake a website redesign. Please feel free to reach out to us if you have individual questions on any of these topics.