Case Study Website Redesign Proposal

Redesigning your organization’s website is no easy task.

It’s a big undertaking with many stakeholders, and lots of moving parts (design, development, content, migration, SEO, etc). In other words, a lot can go wrong and the website redesign can go off the rails.

For our returning readers (thanks for coming back to see us!), you may have noticed that we just launched a new brand, website, and blog design a few weeks ago.

The major improvements to our corporate website for our readers and users include:

  • Mobile-optimized site templates – All pages on our corporate website are optimized for mobile phones for easy accessibility.
  • Consolidated Learning Center – We moved our online guides and ebooks into one area so you can easily browse and find the right resources.
  • Updated information architecture – Info about the our online fundraising platform can be found easier through landing pages and an updated feature overview.

From start to finish, this process took 6 months, 3 months longer than initially planned. We made several mistakes during our website redesign process that ended up wasting thousands of dollars as well.

Read our guide to making the most of your fundraising website to learn how you can create a website that will blow away your campaign goals.

To help you avoid the amazing amount of frustration that we encountered, here are the top lessons we learned on our website redesign process.

Note: For this website redesign, we sourced out the project to several freelancers. These tips are most applicable for outsourced projects.

Watch for red flags during the proposal process

In September 2015, we hired the wrong person for our website redesign. Our prospective designer had a great portfolio and social media following to match.

We did some diligence through references and came up with a reasonable timeline. In short, we thought we had our bases covered. However, during the proposal process, there were big red flags that occurred that we chose to ignore because of his design skills.

After a few initial conversations, our prospective freelancer dropped off the radar and couldn’t be reached. He eventually apologized for his lack of communication, but this type of behavior occurred repeatedly throughout the project.

We learned that your potential developer will be on their best behavior during the proposal process, so pay close attention to how they interact with you—that’s likely the best you can expect to be treated throughout the project. Questions you should ask before you hire someone for your website redesign are:

  • How quickly does the freelancer or agency reply to your sales inquiry or questions?
  • Do their references reply to you and give glowing reviews?
  • Do their modes and frequency of communication meet your expectations?

We learned these tips the hard way, and ended up having to drop our freelancer a few months later after he became unresponsive during the project and did not produce work in the given timeline.

So trust your instincts, if any red flags for you go up during the proposal process, watch out! Most likely, you should find someone else to work with.

Match payment periods to milestones

The initial deposit for our freelancer was 50% of the contract value of the project, and then a final payment of remaining balance once the new corporate website was developed.

Essentially, our project was scoped to only have two milestones and two payment periods. It wasn’t tied to performance or key milestones in the project.

Because of this, timelines weren’t followed and recouping the initial deposit caused a lot of frustration as well as losses we had to absorb as a company.

We eventually found another freelancer to hire and our experience with him was superb!

The milestones that we followed the second time around included:

  • Discovery – In this stage, we figured out what the needs were and conducted general wireframing. We placed a 40% deposit at the start of this stage.
  • Design – The look and feel of our website was put together. We paid 30% of our contract value at the finalized completion of this stage.
  • Development – The design was coded into our CMS and functionality added per our requirements. The final 30% was paid at the delivery of the website.

With this approach, we were able to comfortably see the stages of the website redesign project and make payment once the stages were complete. This aligned our interests with the freelancer.

Here’s another rough timeline you can follow.

Use Dribbble to find designers

Until now, we’ve done all the design and development for CauseVox in-house, so finding a freelancer for a website redesign project was something new to us.

Two productive channels that we looked at to find a designer for this project were referrals and Dribbble.

Referrals

We asked around our professional and personal networks for someone that would be a good fit. Although many people sent over referrals, the referrals we received weren’t a great fit for what we wanted to do.

Dribbble

Dribbble is a website that designers post their work to. You can easily browse their work and get a good feel of what the designer can produce.

Since we knew what we generally wanted, we were able to create a shortlist of designers that we wanted to work with by browsing Dribbble and finding a designer’s work that matched what we were looking for. From there, we reached out to them to start the evaluation and proposal process.

Shortlisting designers took about 3 hours. Reaching and starting conversations took about 4 hours.

Overall, we found that using Dribbble was more productive than other channels because you can see the designer’s work without having the ask for it. In addition, you can see which designers are “for hire” and available for jobs.

Give ownership to a core team

We’ve seen a lot of well intentioned ideas turn bad because there are too many cooks in the kitchen. It’s tempting to try to include everyone’s feedback, but if possible avoid “design by committee” (of if you’re a nonprofit, design by the Board of Directors), especially if they have no experience in design or websites.

Give ownership of the project to a handful of people so that you can reign in scope while also providing consistent and clear direction for your designer and developers.

For our website refresh, we had our CTO and CEO (me!) coordinate and collaborate with the designer. We see our website as our storefront, so having key leadership take charge of it is a key priority.

Provide detailed feedback

During this website project, we used several tools to help deliver feedback. Giving feedback by email would be a mess so we wanted a systematic and efficient way to track feedback. Here are some of the tools that we used:

  • Invision – This is a free online collaboration tool used by designers. It’s a great way to see mock-ups and attach comments to designs.
  • Google Docs – We used Google Docs to keep track of feedback revisions and change requests.
  • Skitch – This is a screenshot tool that allows you to attach comments and easily share it.
  • Skype – We used this for screen sharing so our designer could show us his work-in-progress designs.

Using these tools allowed us to efficiently see progress as well as keep track of our feedback to our designer . This helped us move quickly and in the right direction.

Add migration time in your plan

After starting the second go at our website redesign in November, we aimed for a release date 3 months later. We were excited to hit our timeline in February and were eager to  release it a week later.

Unfortunately for us that plan didn’t account for migration.

Major migration items for you to consider include:

  • Loading new content – Adding and revising copy and images on your new website.
  • Importing blog posts – Importing old pages and blog posts to your new website. Making sure that everything displays properly.
  • Technical integrations – Adding newsletter sign up boxes, analytic tools, and other items to the new website.
  • DNS considerations – If you’re moving to another host as we did, you’ll want to account for this so you don’t incur any downtime.
  • SEO – Make sure your new website pages have the right optimizations so you don’t get a drop in traffic.

All in all, these tasks took an additional four weeks to complete as there were revisions that needed to happen internally.

Even though we had a rough start and ended up wasting  a few months of time, our second time around was seamless.

Learn from our mistakes so you can launch a website refresh the right way!


One of the toughest challenges designers face when pitching prospective clients is winning over their trust and confidence. If your prospective clients haven’t worked with you in the past,  they’ll likely have hesitations about handing over their hard-earned cash to a stranger. To win their confidence (and close the deal!), you’ll need to take some extra steps to reassure them that your design work will not only be a success aesthetically, but that it will also help them achieve their business objectives.

One of the greatest tools in a designer’s arsenal for overcoming this unique obstacle is the case study.

Case studies are narratives that reveal what you are capable of as a designer. They allow you to walk prospective clients through the contextual details of your existing project work so you can outline your creative strategy from conception to completion. They are the perfect tool for boosting the quality of proposals and adding credibility to your portfolio website.

The best case studies move beyond intuition-based explanations and document the rationale behind the design, UX, and visual decisions. They offer a more humanized perspective into the design process that, ultimately, makes a business case for your work. This leaves you in a better position to prove your value (and price) to even the most skeptical client.

You might also like:How to Create a Compelling Web Design Portfolio

First things first: Plan for your case study ahead of time

Before we take a deep dive into the kind of content that makes a great case study, I want to stress the importance of creating a case study for each project you work on.

While this may seem like a lot of extra work, you can facilitate the writing process by taking the time to proactively think about how you will document your projects and their successes before you begin working. That way, you’re guaranteed to end the project with strong documentation that reflects your thinking, iterations, and key results as accurately as possible.

With that out of the way, let’s take a look at the five core elements that should be included in any case study.

You might also like:The Ultimate Guide to Finding Web Design Clients.

The 5 core elements of a web design case study

1. The Overview

Think of your Overview section as the executive summary of your case study. It’s the Cole’s Notes version of the document, and allows your prospects to quickly understand the highlights of your past work without reading the entire thing. This section should include the core takeaways from all other sections including the main problem, an overview of the solution, and key results.

While the Overview will be your least detailed part of the case study, it is probably your most important. Only the most meticulous clients will take the time to read through your entire case study; the majority of them will just quickly skim through in order get the gist. Because of this, drafting a complete and well-articulated overview should be your top priority.

An overview section can be as simple as this example by Work & Co.

Pro Tip: Write your Overview section once the rest of your case study is finished. That way you can simply scan over the main points of each section and summarize them into a one or two paragraph synopsis.

2. The Context and Challenge

The second section of your case study — commonly referred to as the Context and the Challenge —  is designed to provide your prospective client with a detailed description of the context that led to the creation of the project. If it’s well-written, the reader will leave with a solid understanding of the environmental factors and problems that you were hired to solve as a designer.

This section can be distilled into three main elements:

1. Project background and description — The contextual information for the project including timelines, budgetary constraints, and the overarching purpose of the job.

2. The problem — The “why?” and the focal point for the project. Your case study needs to clearly explain the problem that led to the onset of the project. For example, if you were working on an ecommerce project then your problem could be something similar to:

“Interest for company X’s core product was growing internationally at an unprecedented scale. This led to severe logistical and distribution problems that could not be fixed by physical retail solutions alone.”

3. Project goals and objectives — Every website you work on should have tangible goals and objectives associated with the project’s problem. Are you trying to drive more traffic to the site overall? Optimize product pages for higher conversions? Reduce cart abandon rates? No matter what your objectives are, try your best to include any quantifiable metrics that were known at the onset of the project.

A simple, yet descriptive, “challenge” in Super Top Secret’s case study

Pro Tip: The core elements of The Challenge are often presented to you in the project Request for Proposal or creative brief. If you are working on a more personal level with your client, however, try capturing this information in conversation. This will become the basis of your brief and, eventually, your case study too.

3. The Process and Insight

The purpose of this section is to elaborate on your design process, creative concept, and insight that led to your design decisions. It’s also an opportunity for you to walk your prospective client through the research, workflow, and iterations of your design work.

When writing content for this section, you want to illustrate how you got from The Challenge to The Solution. Make sure the flow of information is logical and that it culminates with a core insight about your client’s audience, business, or industry. These insights can stem from your client’s unique selling properties and key differentiators, or from their audience’s behavioural and consumption habits.

To ensure your reader conclusively arrives at these insights as well, you’re going to need to thoroughly document your research. Include any details about A/B tests, user research interviews, and key brainstorming takeaways that led you to uncover those crucial pieces of information.

A simple version of a “process section” from nurun’s case study

Pro Tip: Finding a core truth about your client’s audience can be one of the toughest challenges as a designer. If you’re lucky, your client might already have substantial research about their customers. Use their knowledge and this research to help you craft an insight. Otherwise, try employing tactics like A/B testing and user research to help guide your design decisions.

4. The Solution

The Solution is where you get to show off your skill and style as a designer. It’s your chance to feature any and all samples of your work — from videos, landing pages, custom integrations, and anything else you created for the project.

To really get the most from this section, be sure to include written descriptions about your design work. Take the time to explain in detail your site’s defining features like its UX, navigation structure, content strategy, or unique mobile attributes. If you put the effort into crafting descriptions that complement your visual assets, your readers will feel much more confident in your decisions as a designer.

A sample highlighting animated design elements from This Also’s case study

Pro Tip: Remember, the medium is the message. Don’t limit yourself to screenshots alone. Incorporate interactive elements - animations, video, transitions, or anything else - that accurately represent your design work to really wow your prospects.

5. The Results

For most business owners, it’s all about the numbers. That’s why this section is crucial for an effectively written case study.

The Results section will cover the qualitative and quantitative success metrics from your project. While the type of metrics you report on can vary from one project to another, they should directly address the objectives you established in The Context and Challenge section. Having these results in hand will allow you to show your prospects that your work had a direct influence on your client meeting their goals. If you can do this, you’ll help them feel more comfortable putting their business (and their money) into your hands.

In addition to, or in lieu of, quantifiable metrics, consider including one to three testimonials in this section. These testimonials are another great tactic for boosting the confidence of your prospects. Since the source of these reviews come from outside your business, prospects are more likely to trust them as a reputable reference. When including your testimonials, however, keep them short and sweet. They can be as simple as one or two sentences, so long as they illustrate your previous client’s satisfaction with your work.

A nice mix of qualitative and quantitative results from Simon Pan’s case study

Pro Tip: Be sure to collect testimonials from your clients near the tail-end of your project. Ask them to speak about your process, creative thinking, and the quality of the final product. Just make sure you get their approval to publish them!

5 examples of creative web design case studies

Although case studies should include a lot of important and somewhat formulaic information, they are still an expression of your unique personality and style. This means you have all the liberty in the world to get creative with their format and presentation. To give you some inspiration, here are five examples of creative web design case studies that we loved reading.

Aerolab — Xapo

Fantasy Interactive — Airlines Project

Michael Evensen — Soundcloud App

Robin Noguier — Allocine

Super Top Secret — University of Oregon

Do you have any case studies that you’re proud of? Share them in the comments below.

About the Author

Simon is a coffee lover, former agency digital strategist, and Shopify Partners' Growth Marketing Manager. When he isn’t hustling at the Shopify HQ, you can most likely find him dining at restaurants across the city or brushing up on the latest design trends.

Follow @SimonHeats

EmailPinterestFacebookFacebookLinkedIn

Let’s grow your freelance or agency business.

Get design inspiration, practical takeaways and free resources to help you find and delight clients.

Thanks for subscribing

You’ll start receiving free tips and resources soon. In the meantime, find out how Shopify’s Partner Program can help you grow your business.

Learn more

Let’s grow your freelance or agency business.

Get design inspiration, practical takeaways and free resources to help you find and delight clients.

No charge. Unsubscribe anytime.

Thanks for subscribing

You’ll start receiving free tips and resources soon. In the meantime, find out how Shopify’s Partner Program can help you grow your business.

Learn more

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *