case study of website design

How to write the perfect web design case study to win more clients

An immersive digital portfolio is the key to landing new clients. Learn how to show off your skills with a winning web design case study.

Design and build a custom portfolio website, visually, within 21 days.

A design portfolio without case studies is like a movie with no dialogue — visually present but lacking the substance needed to convey its full meaning.

Dialogue and case studies both communicate meaning. Without dialogue, audiences struggle to understand a film’s plot, characters, and themes, similar to how clients will struggle to understand the problem you solved, your design process, and the impact of your work without a thorough case study.

When you’re competing against other designers for a project or role, a well-written web design case study sets your portfolio apart , showing potential clients what you’ve done and what you’re capable of.

What is a case study?

A case study is an in-depth investigation into a person or group of people, a situation, event, or a product. A web design case study is a visual and textual analysis of a successful web platform, landing page , website design, or other web-based product. These types of case studies can be physical documents, but they’re often digital: PDFs, infographics, blog posts, or videos. Screenshots are an essential component, as are wireframes and mockups. But a robust web design case study also features detailed written explanations.

These visual and written elements work together to create a comprehensive assessment of the design process from start to finish, including the challenges faced, the solutions implemented, and the results achieved.

5 benefits of web design case studies

Now that we’ve touched on how case studies sell prospective clients on your work, here are a few other benefits of adding web design case studies to your portfolio website:

1. Demonstrate expertise

Case studies are a powerful marketing tool for designers to demonstrate their capabilities to potential clients or employers. A good web design case study showcases your skills and expertise in solving complex design problems.

2. Build credibility

In case studies, designers often include the name of the business, client, or project they’ve worked on, building credibility by providing real-world examples of their past work. You can even add testimonials and reviews to highlight positive feedback directly from those you’ve worked with.

3. Inspire future projects

Examining and analyzing your own work can inspire your next website build — maybe you’ll try one of the layouts that was nixed for this project or center the next design around an element you ended up loving. It also provides guidance and best practices for design projects, setting the bar for innovative design.

4. Encourage personal growth

Writing an investigation of your own design portfolio pieces after completing a project provides an excellent avenue for self-reflection. Reflecting on past projects, the struggles you’ve faced working on them, and what you’ve learned from the process will help you identify your strengths as a designer and areas of improvement to work on.

5. Improve communication

Presentations of your own work don’t just communicate the design process, decisions, and outcomes to clients. They also speak to stakeholders, including clients, team members, and management. A well-written case study illustrates a designer’s ability to effectively communicate complex design ideas and concepts, and writing it will improve your communication skills and offer insight into how effectively you work and collaborate with others.

What makes an effective web design case study?

A web design case study describes the process you took to solve a challenge with a particular web design project. A successful case study features a notable client project, a well-written narrative structure, and an engaging visual design.

Think of it as a story with an identifiable beginning, middle, and end. Throughout the story, show clients your approach to successful web design — the problem, the research you did to prepare for the project, the steps and iterations you completed throughout the process, and the final results you delivered. This narrative structure helps clients understand the project’s evolution and details your design process, making it key to an effective case study.

Case study curation and criteria

We’ve covered the basics of what a good case study looks like. But how do you determine which projects to include? If a project meets all the following criteria, it’s a good candidate for a detailed case study.

Is it relevant to the future projects you hope to explore?

If there’s a type of project you’ve completed in the past that you’d like to avoid in the future, that particular portfolio piece might not be a great option for a case study. You’re not just trying to sell yourself to clients — you’re trying to land jobs you actually want to do.

Does it have a defined initial problem?

Web design projects often arise as a result of a problem. These projects are perfect for case studies because the product design goes beyond appearance and functionality. Here are some of the issues your designs might solve:

• Poor user experience: To create a smooth, enjoyable experience for users, user experience (UX) design focuses on identifying and solving issues that cause frustration, confusion, or difficulty while using an app or a website, such as confusing navigation, misleading icons, or slow load times. Addressing these challenges lets you showcase your understanding of your target audience’s needs and demonstrates your ability to apply your creative and technical skills to solve them.
• Low search engine ranking: Redesigning a website with search engine optimization (SEO) in mind will improve its ranking in the search engine results pages, and you’ll have metrics to include in your case study to quantify the claims you’re making.
• Inconsistent branding: Brand design is a massive part of a company’s identity. A lack of alignment between the logo, colors , and other visual elements of a brand’s identity and its digital assets reflects negatively on the company, leaving customers with more questions than answers about who’s behind the brand. Good web design can bring a sense of cohesion to the company’s digital products, an achievement you can speak to in your case studies.

Does the outcome deliver measurable success?

Good design is subjective, but the best projects for case studies have data to show how successful they are. Search engine ranking is one example. You might also highlight impressive metrics for user engagement (bounce rate, time spent on the site), conversion rate (the percentage of visitors who make a purchase or fill out a form), or web traffic (the number of visitors to the website).

Is the project visually suitable for presentation?

When preparing a web design case study, consider the various formats it can be presented in, such as a video, static webpages, or interactive web content.

Selecting projects that fit your chosen presentation format is essential to showcasing your web design skills. As a web designer, it’s a given that whatever you’re presenting to potential clients needs to use thoughtful, aesthetically pleasing designs.

Design for display

There’s no single right way to present a case study. What’s most important is that your case study tells the story of the journey from an initial problem or idea to a finished product that meets the client’s needs.

A minimalist design will help you achieve this goal. But don’t confuse minimalist with boring. You can (and should) get clever with the presentation. Instead of using basic screenshots, for example, consider exhibiting your work in modern frames with immersive features. Or display screenshots of the product in its natural habitat. Webflow designer Karen Huang uses a digital screen in this user experience case study to feature a screenshot of the user interface (UI) on a smartphone screen just as users would experience it:

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

How do you structure a case study?

The contents of every web design case study will vary, but they should all follow this basic structure:

1. A challenge

Start your case study with an introduction to your client and the problem your design solved. Include details about the project’s context, goals, and constraints. This section sets the stage for the rest of the case study and ensures the readers clearly understand what the project — and your solution — is all about.

2. A solution

Detail your approach to solving the challenge introduced in the previous section. Include information about your research, its methodology, and the data you gathered to develop your solution. Focus on your skills, not diagnostics — this is the place to showcase your intelligent approach, reasoning, and innovative ideas that ultimately resolve the challenge.

For this section, it’s helpful to break each key resolution into separate paragraphs and introduce images in chronological order to detail your design process. Screenshots of wireframes and strategy phases will paint a vivid picture of the project’s journey.

If you face any challenges or roadblocks while designing your solution, discussing them provides insight into your problem-solving skills and shows potential clients how you overcome difficulties. End this section with multiple pictures of the final product, and be sure to include a direct link to the project for potential clients and employers to peruse.

3. The impact

This section is where you’ll highlight metrics and data that back up the project’s success. Leverage metrics, user feedback, or whatever data is available to illustrate how your solution solved your client’s challenges and achieved the project’s goals. You can also include information about the potential longitudinal impact of your work and future opportunities for the project.

4. Key quotes

A case study is a perfect place to share client testimonials and add quotes from team members to help readers learn what the experts behind the project think about the build. Get creative but use quotes sparingly, sprinkling them throughout the case study to support the image or project stage the quote relates to.

Let your work do the talking

At Webflow , we offer the tools to make websites and the tutorials you need to perfect them. Learn how to start a web design business , make an online portfolio , or enhance your skills with a web design certificate with guidance from our blog and educational platform, Webflow University . Draw inspiration from our collection of templates and websites and start building your best site yet with Webflow.

Subscribe to Webflow Inspo

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Related articles

Presenting your web design portfolio: The complete guide for winning new clients

When presenting your portfolio to a potential web design client, focus on sharing your goals, ideas, and thought processes as you worked through the projects.

4 steps to creating an impressive UX design portfolio

Your UX design portfolio helps you impress future employers and attract clients. Here are four crucial steps to creating an outstanding portfolio.

13 tips to make you a better web designer

Helpful advice to help you level up your web design skills

5 SaaS web design trends in 2017

Check out 5 of the most fascinating web design trends from ChartMogul's 2017 study of SaaS landing pages.

How to get web design clients fast: 5 key steps

Not sure how to get web design clients fast? Follow these 5 essential steps to get started.

Show, don’t tell — create sites that do the talking for you

Advice from a seasoned web designer on how to design and build a portfolio site that will dazzle clients.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Transforming the design process at

• Interactions
• Localization
• Figma to Webflow Labs
• DevLink Labs
• Feature index
• Accessibility
• Webflow vs WordPress
• Webflow vs Squarespace
• Webflow vs Shopify
• Webflow vs Contentful
• Webflow vs Sitecore
• Careers We're Hiring
• Webflow Shop
• Accessibility statement
• Terms of Service
• Privacy policy
• Cookie policy
• Cookie preferences
• Freelancers
• Global alliances
• Marketplace
• Libraries Beta
• Hire an Expert
• Made in Webflow
• Become an Expert
• Become a Template Designer
• Become an Affiliate

5 inspiring web design case studies

A good case study makes for a top calling card; check out these examples.

The reality of web design is that once you've finished a project, you hopefully move straight onto the next one. However, every site you deliver is an essential portfolio piece that demonstrates your skills and abilities, and while you'll usually want to link to your recent work on your site, it pays to do the job properly.

Rather than simply grabbing a screenshot of a landing page and a link and adding it to your online portfolio, writing up an engaging case study on your work can be a lot more worthwhile. Case studies don't need to be lengthy essays; they just need to give readers a taste of your process and provide some insight into the challenges you've faced over the course of a web build and how you solved them. 

They're a great way to let potential clients know how you work, and they can also provide inspiration for other designers and developers; here are five of our favourite recent examples. Make sure you also check out our top web design tips .

• How to write engaging case studies for your portfolio

01. Museum of Science and Industry of Chicago

For a really inspiring case study, it's hard to beat DogStudio's extensive piece chronicling its work for the Museum of Science and Industry of Chicago. The museum is a vast and highly respected American institution, and you can't help but get the impression that DogStudio was punching well above its weight when it won the commission to rethink and revamp its web platform, but as this case study reveals, it carried the job off with aplomb.

Packed with revealing wireframes, imagery and animations, it's a fascinating insight into a massive and challenging build that had to cater for more than five million online visitors wanting to do everything from buy tickets through to figuring out where to park and finding information about individual exhibits. 

02. National Geographic: A Bear's-Eye View of Yellowstone

Sometimes it's better to show rather than tell. For this captivating look at Yellowstone National Park as seen by four bears fitted with camera collars and GPS, Hello Monday had a wealth of footage, data and expert analysis to work with. And rather than go into dry details of how it fitted everything together, it keeps things brief in its case study , providing a short outline of the project and deliverables before moving on to an entirely visual essay that demonstrates just how much work went into creating this digital feature.

As well as a good helping of footage and screenshots showcasing what the site's all about, what we really love about this study is a section dedicated to how Hello Monday stamped its own personality on the project, breathing extra life into the feature with animation, watercolour illustrations and pencil-drawn portraits of each bear.

03. Once Upon a Time in… Hollywood

Currently doing big business at the box office, Quentin Tarantino's Once Upon a Time in… Hollywood is a love letter to 1960's cinema that recreates its era with Tarantino's typical attention to detail. And to create an online presence that captured the feel of 1969 Hollywood as well as the film, LA agency Watson went the extra mile to create a digital magazine that feels like it could have come off a newsstand 50 years ago.

In this case study the Watson team explain not only the thinking behind the magazine and its pitch-perfect adverts, but also how they create a physical print run of the mag that got handed out at the premiere and first-night screenings, creating a whole other social buzz as movie fans posted shots of their magazine to prove that they were there. If you're looking for ideas on how to run a strong social campaign, there's some great material here. 

04. British Red Cross

Kota's case study on its recent work with the British Red Cross is a clear and concise piece that provides valuable insight on the challenges – and opportunities – of working on a campaign with an institution with clear-cut brand guidelines that need to be adhered to. In the case of the British Red Cross's OneKindThing campaign, Kota had to create a platform that stood out from previous campaigns while staying within the society's pretty epic brand guidelines.

With a handful of images and a couple of paragraphs, Kota outlines how it managed just that, and also covers some of the technical hurdles that had to be overcome to deliver the finished site. The end result was well worth the effort, as the British Red Cross testimonial at the end of the case study reveals.

05. Stonewall Forever

To mark the 50th anniversary of the Stonewall Riots, an event that helped bring about the Pride movement, Stink Digital partnered with The LGBT Community Center to create Stonewall Forever, an immersive digital experience that features key narratives and previously unheard stories from LGBTQ+ history. 

Stink Digital's case study explains how it built a living monument to 50 years of Pride, based in Christopher Park, New York, but accessible anywhere through a website or AR app, and goes into some detail of the challenges of creating a WebGL monument that consists of over 10,000 individual shards with post-processing effects, but still runs at 60fps, even on low-end devices. 

Beyond the technical challenges, though, this is an absorbing and insightful piece on a project that explores life before, during and after the Stonewall Riots.

Related articles:

• The hottest web design trends of 2019
• How to refine your design portfolio
• Get the perfect website layout in 27 steps

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Get the Creative Bloq Newsletter

Daily design news, reviews, how-tos and more, as picked by the editors.

Jim McCauley is a writer, performer and cat-wrangler who started writing professionally way back in 1995 on PC Format magazine, and has been covering technology-related subjects ever since, whether it's hardware, software or videogames. A chance call in 2005 led to Jim taking charge of Computer Arts' website and developing an interest in the world of graphic design, and eventually led to a move over to the freshly-launched Creative Bloq in 2012. Jim now works as a freelance writer for sites including Creative Bloq, T3 and PetsRadar, specialising in design, technology, wellness and cats, while doing the occasional pantomime and street performance in Bath and designing posters for a local drama group on the side.

Related articles

A Space for Creative Growth

6 Web Design Case Studies We Can Learn From

Convey your thought processes and skills - and show future clients who you are as a designer

• Apr 11, 2019

We all know the importance of having a good online design portfolio. It’s your opportunity to show off your masterpieces to the world, while having full control over all aspects, from the layout, to animations, navigation and more. This way, you can have an impact on the way your work is perceived and experienced by potential clients or employers.

That’s all very well, but when it comes to web design projects, why not simply add a link to the website itself and let your visitors browse freely over there? Sure – you should link to any websites you’ve designed, but there are many ways to effectively showcase your web design projects on your portfolio.

Creating a case study that explains your work process and final results can elevate your projects to a whole other level. It can help your site visitors gain a better understanding of who you are, the way you work, your decision-making processes and more. Just like any other design project, a case study should tell a story. It should take your site visitors on a journey through your process, from color palette choices, to icons created specifically for the project, ‘before and after’ pics and more.

We’ve gathered six designers who have chosen diverse ways to expertly showcase their web design projects on their Wix portfolios. Dive in for some inspiration:

1. Brown Owl Creative for Creative House Group

> Showcasing custom-made icons and full-length screenshots

Multidisciplinary design company, Brown Owl Creative, chose to place a fullscreen gif on the top fold of this project page, instantly setting the tone. Directly beneath, a brief sentence introduces the client they were working with, plus the discipline involved and a link to the final result: the website itself. A generous use of white space helps put the focus on the text.

Scrolling down, you’ll find full-length screenshots of their website design, with a simple non-obtrusive gray border. They’ve also chosen to display a section of the client’s website on a laptop, offering an alternative perspective. Another nice touch is the emphasis they’ve put on three animated icons that are featured on the final site. And let’s not forget some basic UX principles they’ve taken care of: a ‘Back to top’ button and a ‘Next project’ button to ensure fluid navigation.

2. Miki Twersky for Nosta Fragrances

> Merging video screenshots with atmospheric photos

There are many subtle additions to NYC-based designer Miki Twersky’s portfolio that make it such a success. The comic footer, delightfully honest ‘ About ’ page and spacious layout make for a browsing experience that is both smooth and entertaining.

It comes as no surprise that her inner project pages are crafted with just as much care and attention to detail. This web design case study starts with a mood-setting image, followed by a brief explanation of the brand and some additional basic details, such as the date, her roles within the project and any other contributors. A slider invites you to scroll through to view the various stages involved in the logo design process.

Further down, Miki has seamlessly integrated video screenshots of the website, enabling her to choose which aspects of her design to put a spotlight on. The page ends with a few product photos that help strengthen the look-and-feel and tie everything together, while presenting more of her branding work.

3. Adelaide Wang for Humm.ly

> Thorough case study incorporating texts, images and videos

San Francisco-based product designer, Adelaide Wang, definitely knows the ins and outs of creating an intriguing and comprehensive case study. Having worked on many aspects of this project for Humm.ly , a music healthcare platform and app, she was able to share her and her team’s full work process.

The long-scrolling page takes you on a journey through some of the major stages of any design project. It starts by presenting their search for a defined visual identity. It then moves on to the details of the app’s various screens and navigation, putting an emphasis on the accessibility of the website’s design . Lastly, Adelaide presents the website itself on various devices, including a video screenshot of the website on mobile.

A consistent layout is used throughout the page, with titles, subtitles and paragraph text all retaining the same style. Two alternating shades of gray make up the website’s background, creating a clear, but subtle, separation between folds, and ultimately contributing to a successful user experience.

Learn more about how to nail your website’s UX design with these professional examples.

4. Studio&more for Din7

> Presenting color choices, logo design and more

Here’s another example of a detailed web design case study, by graphic design studio, Studio&more. In this project for industrial design company, Din7, they worked on both branding and UX. As a result, they had the material necessary to cover everything from color palette and typography choices, to the development of the company’s logo design, illustration style, website and various applications of the visual identity.

Each section of the case study is numbered and presented with a succinct selection of images. They’ve also used the visual language they came up with for the brand in the background, creating a strong and clearly defined tone of voice. Lastly, the studio has picked out a few of their website design’s screens to showcase separately, drawing attention to them.

5. Ariel Sun for her wedding website

> Telling a story through text and images

NYC-based artist and designer, Ariel Sun, created this web design case study for her own wedding website. There are many ways to write copy for your design portfolio – and here, Ariel’s gone for a friendly and personal tone of voice to provide site visitors with an inviting summary of the project. She also clearly explained what she and her partner’s different roles were in the process, giving everyone the credit they deserve.

Two simple, static screenshots of the website design follow, presenting the most prominent pages of the site. These are accompanied by an illustration of the couple and an image of the wedding invitation, helping us get a feel for the vibe they were going for. All of this is presented in a highly aesthetic way, using a clean grid, plus a fixed menu at the top for comfortable navigation.

6. Liron Ashkenazi for The-Artery

> Including mobile and tablet view, process, and more

Multidisciplinary design director, Liron Ashkenazi, worked with a team of 3D artists, designers and developers to come up with the award-winning design for The-Artery ’s website. Liron’s case study of the project is made up of a selection of beautifully designed screenshot videos, short explanatory titles, the 3D model design process and accompanying text. The layout is concise, while including all the relevant details.

A thin column on the left provides us with background information on the client, The-Artery, as well as a breakdown of the various roles and the people involved. It also includes a list of links where the website has been featured.

Scrolling down the page, you see the development of the 3D animated models that appear on the final website. There’s also an image that showcases the website on three different devices. Incorporating elements from the design outside of the screenshots, makes for an intriguing visual representation of the overall project. The text above and on each image clarifies which page you’re looking at and who’s responsible for which elements, while not distracting from the design itself. Finally, Liron has included the design for a 404 page – a welcome addition, especially when it looks this good.

MORE POSTS LIKE THIS:

Mar 13, 2024

Designer Spotlight with Rui Pu

Mar 5, 2024

Illustrator Spotlight with Irina Selaru

Feb 26, 2024

Feel the Burn: What does it mean to experience creative burnout?

Case Studies

Our work in action.

Explore our web design case studies to see how we craft custom sites that look great, perform well, and drive serious results.

Engaged Sessions

Retail & products.

Blenz needed a fresh new website to reflect their updated branding, and to help customers more easily find their way to online orders, app downloads, and perks.

A new web design with vastly improved structure and navigation help BC Dairy’s different audiences discover their array of tasty content.

Our website redesign helped SISU’s visitors quickly and easily find where to buy their products, while showcasing their wellness blog as a resource.

Travel & Tourism

Tourism cowichan.

Tourism Cowichan needed a new website to get visitors excited about all this earthy, welcoming region has to offer. This project required a strong architecture with emphasis on featured and related content, for easy browsing and content discovery.

Organic Search Traffic

Professional services.

MISIM needed a brand new website to showcase their complex offering and vast experience – and they also needed cohesive brand strategy to make their digital presence stand out.

CRAFT Beer Market

Our tantalizing website redesign helped CRAFT Beer Market achieve huge increases in their search traffic, impressions, and page speeds.

Engineering & Construction

Highline forming.

Highline Forming needed a polished, professional new website with significantly deeper content to help them stand out in a highly competitive industry and region.

This new website was focused on helping SHARE capture their rebrand, expand their offering, and make their content more conversational.

Tourism Prince Rupert

This redesign helped Tourism Prince Rupert earn significantly more search traffic and engagement, while making it easier for their team to manage their ever-evolving content

Technology & Investment

Sandstorm gold royalties.

Sandstorm Gold needed a complete redesign to increase investor appeal. We designed and built multiple new custom features to give the site engaging movement, and help drive content discovery.

Outward Bound Training Academy

Outward Bound’s outdoor training academy had grown too big for their main website, and needed a home of its own. We designed an all-new website to showcase their programs and courses.

Research & Education

MIRA’s high volume of resources had outgrown their old site. They needed a full redesign to drastically reorganize all that content around multiple newly clarified audiences – while meeting high accessibility standards. 

Average Engagement Time

Backpack buddies.

Backpack Buddies needed a full redesign to help their organization raise awareness, and to significantly improve their visual storytelling to create that emotional connection needed to drive donations.

Donation Rate

Bc burn fund.

The BC Burn Fund had a heavily outdated website that was difficult to use, and failed to capture their important programs and services. They needed a massive redesign to help drive awareness, attract donors, and support campaigns – starting with proper brand guidelines.

Bounce Rate

PCRS needed a redesign to make their website much easier to search and browse, to help make their critical services more accessible to vulnerable communities with limited online access.

More Website Users

Lgm financial services.

LGM needed a website redesign to showcase their new products and services, and bring their rebrand to life. Our project helped them drive traffic, boost engagement, and speed up their site.

Health & Wellness

We designed an all-new website for BRIA to launch their new virtual mental healthcare service for women and start building their patient list.

This brand new web design helped Nexii double their search traffic and content views, and drastically increase website visits from their U.S. audience.

Under the Same Sun

Under the Same Sun needed a fresh website that could better convey their impact and tell their story, to help drive awareness and – ultimately – donations.

Our website redesign helped RCBC organize their massive volume of important resource content for multiple competing audiences, while making it easier for their team to keep content up-to-date.

Sandbox Royalties

Sandbox Royalties needed a brand new website to launch their company into the market, and immediately begin to attract investors. It had to be uncomplicated yet highly professional.

Circular Materials

This huge website redesign project required organizing a vast amount of content for multiple audiences into an efficient architecture, building a highly usable backend, enabling tailored user experiences by location, and supporting two languages – all on a tight turnaround.

Pages Viewed Per Session

Lindome structures.

Lindome needed a major website redesign to properly showcase their product library and accessories, to help facilitate lead generation and conversions. We went with a bold, visual design to showcase real life applications of their structures.

Faster Page Loads

Delta-q technologies.

We crafted a new web design for Delta-Q to help them showcase their innovative solutions and capabilities, and deepen their company storytelling, while drastically improving visitor engagement.

Engagement Rate

Horizon copper.

Horizon Copper needed a spacious new website to showcase their brand, while making it easier for investors and the public to find critical information about their asset portfolio.

Kitimat Bound

Our brand new website for Kitimat Bound helped capture the region’s breathtaking natural beauty and entice travellers, as evidenced by the rapid climb in search traffic and engagement each month since launch.

Canada’s Placemaking Community

The all-new website we designed for CHCI’s Placemaking Community find its audience, so the organization can share resources and showcase community projects to make others want to get involved.

Mobile Traffic

Yvr art foundation.

The clean, welcoming new website we designed for the YVR Art Foundation helped them double their traffic and on-page engagement, significantly increasing their reach about opportunities and exhibits.

Western Stevedoring

We crafted a new website structure and design for Western Group and its two divisions. The new sites are straightforward for their customers to use, while broadening their company story.

Equinox Gold

A clean, uncluttered design helped Equinox Gold showcase investor information about their mining portfolio, and while keeping the public informed about their responsible practices.

Conversion Rate

Surrey hospitals foundation.

Our total website redesign for Surrey Hospitals Foundation helped them showcase their rebrand, deepen content about their community impact, and drastically increase website traffic and conversions.

Longer Sessions

Summ foods.

The new website we designed for SUMM! Foods helped them better tell their heartwarming brand story, and to achieve huge improvements in their website engagement.

Able & Howe

Our design project for Able & Howe was focused on helping them reposition their brand, deepen their content, and highlight their unique business approach.

BuilderWorks

Our fresh web design helped BuilderWorks achieve impressive page speeds and a high conversion rate right after launch.

Smart, Savvy + Associates

We crafted a new website to help Smart, Savvy capture their recent rebrand, and to create a more usable experience for their two distinct audiences.

CHBA BC Education

We built a brand-new website for CHBC BC to house their high volume of educational content, driving significantly more organic search content within a few months after launch.

This redesign helped Vivreau dramatically increase search traffic and engagement, while showcasing their product offering and environmental impact.

Braintrust Group

We redesigned Braintrust Group’s website to create a more welcoming, motivating user experience that would improve their conversion rate – and it worked.

We redesigned MRS Lumber’s website to create a much more usable product catalogue, drive more traffic, and to improve sales.

TreeFree Sourcing

Tree Free Sourcing had a tiny website, so we crafted a new design that would help them deepen their content, showcase their B2B offering, and drive sales.

Website Users

Four points insurance.

Four Points Insurance needed to move their commercial offering to its own domain. We designed a new website that earned huge traffic, engagement, and page speeds right after launch. 

Miracon Development

Our ongoing partnership with Miracon resulted in not only a fresh website for their business, but also several sub-sites for their new developments and  massive monthly leaps in traffic and conversions.

This redesign project was about helping Stanscott distinguish their product portfolio from the parent company, and highlight opportunities for potential clients in the Caribbean and beyond.

ISS Language and Career College

As part of our ongoing partnership with ISSofBC, we redesigned the website for their Language & Career College to create a welcoming experience with clear paths to their many language programs and services.

Centre for Brain Health

The UBC Centre for Brain Health creates a massive amount of important content, and it was our job to help them organize it into a well-structured new website.

A Better Life

A Better Life Foundation needed a website redesign so they could better communicate their meaningful work, create community connections, and drive their digital campaigns.

Beacon Group

The new website we designed for Beacon Group involved a total brand reinvention and improved content strategy to showcases their unique approach to consulting

Fraser Valley Conservancy

We crafted a new website for Fraser Valley Conservancy to help them tell their story, clearly convey their impact, and better engage with potential donors.

Spur Communication

Spur Communication had grown way beyond their one-page website, and hired us for a redesign that included deeper content and a custom Shopify theme for an all-new digital downloads store

BC Non-Profit Housing Association

We redesigned the website for the BC Non-Profit Housing Association help make their valuable resources much more easily discoverable, while aligning with a recent rebrand.

Centre for Advancing Health Outcomes

Our website redesign helped CHÉOS boost search traffic and engagement, and drastically improve the organization of their critical health research content.

Naturally:Wood

The new Naturally:Wood website was a huge challenge that we enjoyed: folding two large, resource-heavy sites into one usable structure and rebranded design.

Forestry Innovation Investment

The new website we crafted for Forestry Innovation Initiative helped them significantly improve their page speeds, engagement, and traffic – but most importantly, it made it easier for their team to manage their content.

DeMello Spirituality Center

We redesigned the DeMello’s Spirituality Center’s website to refresh the user experience, and to improve content discoverability.

Avg. Conversion Rate

Northwest bc recruitment.

This project was a joint venture for several communities that needed an engaging and interactive website experience to showcase jobs and regional attractions in Northwest BC.

Search Traffic

The CTN needed a new website to help their underserved audiences access vital resources and information. Our design helped them increase search traffic and engagement, too.

North Vancouver Chamber

This fresh web design helped the North Vancouver Chamber achieve a huge increase in conversion rate, as well as improved on-site engagement.

Marion Scott Gallery

Marion Scott Gallery has showcased contemporary art from Northern Canada since 1975.

One World Education

One World Education helps learners of all ages develop critical thinking and writing skills.

Semios tasked us with a full website redesign for their global expansion, to facilitate improved navigation and deeper content about their expanding capabilities.

Barbican Property Management

Barbican Property Management needed a new website to improve their content and search capabilities for potential tenants browsing hundreds of residential and commercial properties.

BBS Pro needed our help to drastically improve the usability of their technical product catalogue, while increasing traffic, engagement, and page speeds

Conversions

Envisio came to us looking for a a total website overhaul to reflect their visual rebrand. At the same time, they wanted to improve their storytelling, SEO, and conversions.

Binnie’s website redesign was about reflecting their rebrand, deepening their content, and demonstrating their impressive experience and capabilities to both customers and potential recruits.

Adrenaline Tattoo Studios

We crafted a highly visual website for Adrenaline Studios, improving their storytelling content while increasing their search traffic and engagement.

Archetype Glass

Archetype hired us to create a polished new web design to match their premiere products, plus a complex product catalogue and tiered content filtering.

The new website we built for PHS helped them better convey their vital community services for donors – and drove a massive conversion rate increase.

Faster Loads

Bright health.

This redesign was a fun challenge involving a complete rebrand and name change, deepening content while reducing clutter,  and creating micro-sites for products. The new site more than doubled their organic search traffic.

Kenorah’s website redesign was all about better showcasing their breathtaking dream-home projects through a more visual experience, while amplifying their intimate process to help potential clients fully envision the smooth work and results.

RDH Building Science

RDH tasked us with a full website redesign to migrate three sites into one interface, while keeping the content from three blogs  and their services clean and usable for distinct audiences.

Repeat Visitors

Quantum matter institute.

We were thrilled to help the Quantum Matter Institute with a complete redesign of their content structure and site design, to organize a vast volume of content into a usable experience.

One Coffee hired us for a website redesign to reflect their products’ new look, and to deepen their content for improved SEO. We also helped them significantly boost page speeds.

We designed an all-new, strategic website to help Herstasis™hit the market running, raise awareness, attract investors, and build an audience ready to use their product.

Host Defense

Host Defense needed an all-new website to launch their brand in Canada, with a shoppable product catalogue and ample educational resources for existing and potential customers.

Secure IT Systems approached us about a redesign to create a deeper website experience that accurately showcases their capabilities, and feels as professional as their customer care.

CooperTree Analytics

CopperTree needed a fresh web design and structure to make their high volume of technical information easier to digest, while building out stronger areas for their trust and credibility content.

Softlanding

Softlanding’s website redesign was all about improving their complex user experience, especially navigation. At the same time, we improved their conversion rate, engagement, and site speed.

The new website we crafted for Botanica was focused on helping users find content quickly and effortlessly, and communicating their dedication and commitment to wellness while boosting SEO, conversion rate, and mobile performance.

Neighbourhood Small Grants

Neighbourhood Small Grants needed a total website redesign to deliver more customized multilingual audience experiences, and to capture their exciting rebrand.

The Dakeryn group of companies needed a fresh website to add more depth to their content, flesh out their product directory, and build up their sustainability storytelling.

The Sound came to use for a full revamp of their user experience, needing more content for SEO, improved content discovery, and a much stronger and easier-to-manage CMS.

Equinox Gallery

We crafted a new website for Equinox Gallery to recreate the in-person experience through clean, minimal design and new areas for content discovery and virtual viewings.

Longer Mobile Visits

Population Health Research Institute needed a full website redesign to help make their huge volume of critical research content much easier to search and explore.

Tourism New Westminster

Tourism New Westminster serves both tourists and residents, so they needed a total redesign to make all of their local content more visually appealing and browsable to help drive business.

Inclusion BC

Inclusion BC tasked us with designing a highly usable and welcoming new website to help their audience find critical resources and opportunities.

BluEarth Renewables

The fresh website we built for BluEarth Renewables boasts an exceptionally strong information architecture and navigation, with clear paths to key content for each of their many diverse audiences.

Tourism Langley

Tourism Langley wanted a custom web design focused on rich photography, with a powerful user experience tailored to helping people quickly find events, guides, and local tips to get them excited about the township.

Stella Custom Glass Hardware

Stella Custom Glass Hardware needed their new website to be rooted in a quick, intuitive mobile experience, to help their B2B audience find parts and specs while working on job sites.

The Nature Trust of BC

The Nature Trust of British Columbia needed a new web design to better tell their brand story and the value of their work, to help drive conversions.

First Nations Summit

The First Nations Summit needed a brand new website to make information, tools, and resources about the BC treaty process more accessible.

Our years-long partnership with ISSofBC has included two full redesigns of their main site, as well as building separate sites for their services and programs.

Pacific Centre for Reproductive Medicine

Another long-time partner, we’ve worked with PCRM through redesigning and expanding their website as their business has grown to include new locations and services.

Start Your Project

If your website isn't performing well or just doesn't properly represent your business, talk to us. We'll build you a custom solution that works.

Amp Up Your Site!

Sign up to get our latest articles, packed with website tips and more.

• Melanie Lang
• Jul 19, 2013

75 Instructive Design Case Studies

• 20 min read
• Inspiration , Web Design , Graphic Design , Case Studies
• Share on Twitter ,  LinkedIn

About The Author

Former Smashing Editor Melanie completed her degree in Philosophy, Politics and Economics at Otago University, and is now freelancer and part-time politician. … More about Melanie ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

Not only are case studies a great way to explain the design process of an agency, but they also help designers and developers to learn from each other. Seeing how designers work, create, build and play is great, and furthermore, you can learn how to write a great case study yourself and how to use one to spice up your portfolio .

In this overview of useful case studies, we’ve featured studies that have recounted decisions made about particular design elements, as well as studies of full overhauls and their accompanying technical challenges. Most of them provide interesting insights into failures and successes , stories, workflows and design decisions made and rejected.

We must admit that this post is quite a long one, so we’ve decided to divide it into two parts to make it easier for you to navigate. Now you should be well prepared for a couple of late reading sessions over the next weekends!

Illustration, Graphics And Logo Design

“ Illustrator Full Spectrum Spirograph ,” Veerle Pieters Pieters talks about her experimentation process with spirographs, inspired by the work of Andy Gilmore.

“ The Design Process of my Infographic About Women Cycling for Grinta! ,” Veerle Pieters Pieters shares her experience of the design process behind the infographic on women’s cycling that she produced for Grinta magazine.

“ A Systematic Approach to Logo Design ,” Adham Dannaway Icon design can be time-consuming. Dannaway shows how to systematically approach a new logo design.

“ (Re)building a Simplified Firefox Logo ,” Sean Martell Learn how Firefox’s logo was simplified to better fit its extended usage beyond a desktop web browser.

“ Five Details ,” Jon Hicks Jon Hicks shares the design process behind the Five Details Logo, including the design and choice of typography.

“ Iconfinder Logo ,” SoftFacade SoftFacade completely reimagined Iconfinder’s existing identity and came up with a shiny and modern robot character. View the detailed design process.

“The Great Gatsby” Like Minded Studio collaborated on the branding of “The Great Gatsby“. The aim was to develop a bespoke Deco styled logo reflective of the roaring 20s and Fitzgerald’s masterpiece. They also created a display typeface to acompany the main branding. Additionally read more about it following this link.

“ Whitney Graphic Identity ,” Experimental Jetset In this case study of the Whitney Museum of Art’s logo, Experimental Jetset discusses the impact that a responsive logo can have on branding.

“My ‘Tour de France’ posters,” Veerle Pieters Pieters created posters for the 100th edition of the Tour of France. She mainly used the French landscape which she had used for the ‘Tour de France Infographic’ as a starting point.

“ Designing Type Systems ,” Peter Bil’ak To create truly useful designs, typographers need to examine not only how characters relate to each other within a style, but also how different styles relate to each other within a family. Peter Bil’ak discusses how to achieve this.

“ Novel Constructions: The Making of a Typeface ,” Christopher Dunst Dunst shares the process behind the creation of the “Novel” typeface.

“ The Development of the Signage Typeface Wayfinding Sans Pro ,” Ralf Herrmann Herrmann describes the development of the Wayfinding Sans Pro, a signage typeface that can be read from a long distance.

“ The Making of FF Tundra ,” Ludwig Übele Übele shares the process behing making the FF Tundra typeface, which was highly inspired by nature.

“ The Making of Magasin ,” Laura Meseguer Meseguer writes how she created Magasin, a typefaces inspired by fluid handwriting.

“Type Study” series, Adobe Typekit Typekit features a whole series of case studies of typography:

• “ Hi-DPI Web Typography ,” David Demaree
• “ Typographic Hierarchy ,” Frank Chimero
• “ Pairing Typefaces ,” Aura Seltzer
• “ Sizing the Legible Letter ,” Ethan Marcotte
• “ Stereo-Typography ,” Dan Mall
• “ Choosing Fallback Fonts ,” Josh Brewer
• “ Techniques for Using Novelty Fonts ,” Meagan Fisher

“ Social Login Buttons Aren’t Worth It ,” MailChimp Social login buttons are used by many apps today. MailChimp shares its own experience and considerations in using social login buttons.

“Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them.

“iOS Icon Design: A Designer’s Exploration,” iOS icon design is not only difficult, but requires a lot of experimentation. David Killoy shares his experience of designing the icon for his note-taking app Notorious.

“ The Making of Octicons ,” GitHub Octicons is a icon font made by GitHub. Five designers collaborated on the project, and they share how they built Octicons and what they learned along the way.

“ Designing Facebook Home ,” Julie Zhuo On May 8th, the designers behind Facebook Home (Justin Stahl, Francis Luu, Joey Flynn and Mac Tyler) presented a behind-the-scenes look at their work at the Bluxome Street Winery for a small crowd.

Advertising, Promotion And E-Commerce

“ How to Make Your Own App Promo Cards ,” Mike Swanson Swanson was inspired by Starbuck’s promo cards for giving away free apps and decided to make his own for an upcoming event. Learn how you can do one, too!

“ The Art of Launching an App ,” John Casey You’ve made your first app! Now what? This study covers some tactics and lessons learned during one process of launching an app.

“ How to Launch Anything ,” Nathan Barry Barry has launched five products in fewer than nine months. Read about the strategy that helped him generate over $200,000 in revenue from online products, starting from scratch.

“ Selling My E-Book on Amazon ,” Jonathan Snook Several people predicted that 2013 would be the year of self-publishing. Snook shares insight into his eBook sales on Amazon.

“ Increase Online Sales on Your Ecommerce Website ,” Headscape increased sales on Wiltshire Farmfoods’ e-commerce website by over 10,000% in only five years. What makes it even more special, the target audience is over 50 years old. Paul Boag shares his experience.

“ Twitter Promoted Tweets ,” MailChimp MailChimp has made use of Twitter’s promoted tweets and shares insight into this experience.

Redesigning Elements And Features

“ Visual Exploration Behind Signal vs. Noise ,” Mig Reyes 37signals share the process behind making its blog special. This study is about how the company visualized noise and styled its blog categories in a unique way.

“ Reinventing Our Default Profile Pictures ,” Jamie Jamie talks about the process of finding the right default profile pictures for the 37signals website. It’s a great new approach to a very basic element.

“ Login Screen Design: Behind the Scenes ,” Simon Tabor Good UX is not just about the main content, but also about little details such as log-in (and error) pages. GoSquared shares how it made its log-in experience exceptional.

“ Save for Later ,” Brian Groudan All browsers support two functions: searching and revisiting. Groudan worked closely with Mozilla’s user experience researchers and designers to rethink how Firefox could better offer “saving for later” functionality in the browser.

“A Closer Look at Zoom,” FiftyThree FiftyThree shares the design process behind the new zoom feature in its Paper app.

“Reinventing the Investment Calculator ,” Alex Bendiken Drawing from the book Money for Something , Alex Bendiken built a tool that lets users experiment and create a unique investment plan. It’s a UX study in turning a boring financial calculator into something you’d actually want to use.

“ Getting Down to Business ,” Teenhan+Lax The Globe and Mail is Canada’s national newspaper of record. It serves millions of readers everyday with in-depth journalism and informed comment. Learn how Teenhan+Lax helped refresh and enrich the way users experience and engage with the news today.

“ Olympics: User Experience and Design ,” Nick Haley Nick Haley shares the BBC’s design process of delivering the Olympics across desktop, tablet, mobile and connected TV.

“ How We Built the Responsive Olympics Site ,” Matt Clark Matt Clark writes about MSN UK’s approach to delivering the Olympics digitally, from the brief to the finished design.

“ The Anatomy Of A Successful Logo Redesign ,” Belinda Lanks Lanks summarizes how Jessica Hische had freshened up the new logo for MailChimp with a slight facelift. The new logo now looks new and fresh — more refined but just as playful.

“ What I Want Out of Facebook ,” Keenan Cummings Cummings explains why Facebook fails him and what he wants to get out of it that would make it useful for his personal life.

“ In Praise of Lost Time ,” Dan Hill Dan Hill talks about Facebook’s Timeline as an exemplary bit of interaction design that does little to advance the timeline formally. Yet it might alter the nature of human memory itself.

“Designing the new, fully responsive Wired.co.uk article pages,” Javier Ghaemi This article is about redesigning the Wired.co.uk article website to provide a more content-first and immersive experience.

Complete (Re)branding And (Re)design

“How to Approach a Responsive Design,” Tito Bottitta This article shows the design process behind The Boston Globe’s website, one of the most famous examples of responsive designs. Read about how Upstatement approached its first responsive design.

“Responsive Design Case Study,” Matt Berridge This case study outlines the entire process of constructing the South Tees Hospitals’ website, a large responsive design containing over a thousand pages.

“ Rebuilding a University Homepage to Be Responsive. Twice. In Less Than a Year ,” Erik Runyon This slideshow discusses how and why Notre Dame University’s home page was rebuilt twice in less than a year. You will find a recording of the talk below the slides.

“Yes, You Really Can Make Complex Web Apps Responsive,” Daniel Wearne Wearne shares his experience in creating Adioso’s web app, a complex yet accessible project. He covers the framework, responsive mixins, tables and future challenges.

“Designing a New Playground Brand,” Ryan Bannon This case study shows the design process of Playground’s new brand. It covers the logo, overall website and vector animation process, as well as the core values and personality of the company. The extensive study comes in three parts.

“ How House Parties Helped Us Design Potluck ,” Cemre Güngör The team at Potluck describes how it took inspiration from reality to design a “house party on the Internet.”

“ Colorado Identity ,” Berger & Föhr Imagine someone hiring you to define your own identity. Berger & Föhr was hired to help create the new identity and visual brand of Colorado, the place they call home. Have a look at the work and logo they came up with.

“ Building the New Financial Times Web App ,” Wilson Page Page talks about building the Financial Times’ new app, a challenge that many on his team believed to be impossible. He covers device support, fixed-height layouts, truncation, modularization, reusable components, Retina support, native-like scrolling, offline support and the topic of ever-evolving apps.

“ Google Treasure Maps ,” Alex Griendling Griendling writes about the design process behind Google Maps’ treasure mode.

“ Find Your Way to Oz ,” HTML5 Rocks This very detailed case study looks at the “Find Your Way to Oz” demo, a Google Chrome experiment by Disney. It covers sprite sheets, Retina support, 3-D content and more.

“ The Making of the Moscow Metro Map 2.0 ,” Art Lebedev Studio This study is about the design process behind the Moscow Metro map, a complex project that needed to meet the requirements of both Web and print.

“ Skinny Ties and Responsive eCommerce ,” Brendan Falkowski Read and learn how GravDept redesigned Skinny Ties’ creative and technical direction to propel shopping on every device.

“ The Design Thinking Behind the New Disney.com ,” Bobby Solomon Solomon shares the process of creating a Disney website that is flexible enough to showcase the widest range of offerings imaginable — in other words, a website that can do everything.

“Say Hello to the New ISO,” Andy Clarke Clarke and David Roessli redesigned the website of the ISO (International Organization for Standardization) and share their experience.

“ A Responsive Design Case Study ,” David Bushell The redesign of Passenger Focus takes advantage of the Web as an unique medium.

“ BBC News: Responsive Web Design and Mustard ,” Kaelig Deloumeau-Prigent These slides address the core principles and the “cutting the mustard” technique behind the BBC News’ responsive website.

“The Trello Tech Stack,” Brett Kiefer Read the process behind the Trello app, from initial mockup to a solid server and maintainable client.

“ Responsibly Responsive: Developing the Greenbelt Website ,” Rachel Andrew Andrew writes about her front-end design decisions in rebuilding the Greenbelt Festival’s website.

“ The Digital-Physical: On Building Flipboard for iPhone and Finding the Edges of Our Digital Narratives ,” Craig Mod Mod walks through the process of building the Flipboard app for iPhone and of finding the edges of its digital narratives.

“ Page-Flip Effect From 20 Things I Learned ,” Hakim El Hattab This study shows how this team found the best way to achieve the feeling of a real-world book, while leveraging the benefits of the digital realm in areas such as navigation.

“ Six Key Lessons From a Design Legend ,” Kapil Kale The GiftRocket team eventually recruited Mike Kus as a designer. This article shows why that decision took their website to the next level.

“ Breaking The Rules: A UX Case Study ,” Laura Klein Klein shows how she broke all rules to create the great UX for Outright.

“ 7 UX Considerations When Designing Lens Hawk ,” Christian Holst Lens Hawk is a massive DSLR lens database. This article shares seven UX considerations that were made in its design process.

“ The Story of the New Microsoft.com ,” Nishant Kothary Kothary shares his insight into making Microsoft’s new website. Also, check out Trent Walton’s perspective on the redesign .

“Behind the Scenes of the New Kippt,” Gannon Burgett This interview about the work behind the new Kippt app covers the redesign process, the design principles and problems that the team faced, insights into the new era of web app design, and where Kippt will head in the future.

“ Crayola: Free the ‘What If’ ,” Daniel Mall Dan Mall has put together a case study of the creation of the new Crayola application for kids.

“Campus Quad iPhone App,” Soft Facade Soft Facade covers every aspects of the design process behind its Campus Quad app.

“How to Make a Vesper: Design,” Vesper Learn how the Vesper app was designed and made.

“ Betting on a Fully Responsive Web Application ,” 14islands Read about how 14islands took the web app for Kambi, a sports-betting service, to the next level.

“AMMO Rack App Design Critique,” Alexander Komarov An interesting study of the feedback process that improved the AMMO Rack app.

“ Walking Through the Design Process ,” Ian Storm Taylor Taylor walks you through the design process of Segment.io, including the progression of mockups in Photoshop.

“ Music Video ‘Lights’: The Latest WebGL Sensation ,” Carlos Ulloa Interactive studio HelloEnjoy built a mind-blowing 3-D music video for Ellie Goulding’s song “Lights.” Creative director Carlos Ulloa explains why the team chose WebGL and how it created various immersive graphic effects.

“Designing for Designers,” Kyle Meyer Designing for other designers is different than working for regular clients. Kyle Meyer shares his experience.

“ Adapting to a Responsive Design ,” Matt Gibson Cyber-Duck abandoned its separate mobile website and created a new responsive design.

“ Grids, Flexibility and Responsiveness ,” Laura Kalbag Kalbag shares her thoughts on the redesign of her own website, including her choice of typefaces.

“ Making of Typespiration ,” Rafal Tomal Rafal Tomal built Typespiration as a side project. Learn about the process from initial idea to finished WordPress website.

“ Case Studies ,” Fi Design firm Fi has integrated case studies into its portfolio. The studies are very interactive and beautifully designed. Here are four of them:

• “Is This The Future of The Airline Website?”
• “The Story of Ramayana: Brought to Life by Google Chrome”
• “Sony: Connected World”
• “USAToday.com: Redesigning One of America’s Most Popular News Sites”

Content And Storytelling

“ Step-By-Step Landing Page Copywriting ,” Nathan Barry The process of writing great copy for a landing page is covered step by step.

“ The Art Of Storytelling Around An App ,” John Casey This case study is about the art of storytelling in the app “The House That Went on Strike.”

“Rethinking the Case Study,” Christopher Butler Butler explains what case studies are for and what a great one looks like, and he lays out a practical plan for writing one.

“ Retiring The Portfolio Screenshot ,” James Young You’ve probably noticed that portfolios nowadays are packed with detailed analysis, rather than screenshots. Take yours to the next level and learn how to create an amazing portfolio (such as the ones featured in this post).

“Responsibly Leveraging Advanced Web Features,” Ryan Heap Heap tells us about his full responsive redesign of Travois, a consulting firm focused on housing and economic development. The study includes topics such as progressive enhancement, responsive and responsible Web design, SVG, and the HTML5 History API.

“ My Notes on Writing an E-Book ,” Jonathan Snook Several people have suggested that 2013 is the year of self-publishing. Jonathan Snook shares his process of writing and digital publishing.

Technical Challenges And Solutions

“ Beating Borders: The Bane of Responsive Layout ,” Joshua Johnson Responsive design often requires setting widths in percentages. This is easy enough, until borders are thrown into the mix.

“ How We Improved Page Speed by Cleaning CSS, HTML and Images ,” Lara Swanson Page-loading time is a big part of the user experience. Dyn shows how it improved it simply by cleaning up the CSS, HTML and images.

“ Mein Honig – Brand Identity ,” Thomas Lichtblau “My Honey makes people and bees happy. And if they are happy, nature is happy too.” This simple yet beautiful statement belongs to Mein Honig (My Honey), a personal project of Thomas Lichtblau from Austria. Thomas shares fascinating insights about a production, banding and packaging process in which he only used colorless, organic and traditional tools and materials.

“Front-End Performance Case Study: GitHub,” JP Castro Castro analyzes the front-end performance of GitHub and shares his findings.

“ iPad to Windows Store App ,” Bart Claeys and Qixing Zheng This case study helps designers and developers who are familiar with iOS to reimagine their apps using design principles for Windows Store apps. Translate common UI and UX patterns found in iPad apps to Windows 8 apps.

“ Behind the Scenes of Mad Manimation ,” Anthony Calzadilla Here is the process behing the Mad Manimation, an HTML- and CSS-based animation of the introduction to the Mad Men TV show.

“ Embedding Canvas and SVG Charts in Emails ,” Thomas Fuchs Learn how to use embedded canvas and SVG charts in email.

“ Scaling Pinterest From 0 to 10s of Billions of Page Views a Month in Two Years ,” Todd Hoff This case study traces the evolution of Pinterest’s architecture, which was scaling fast, with a lot of incorrect choices made along the way

“ How We Built a Photoshop Extension With HTML, CSS and JS ,” Brian Reavis Creative Market’s extension is a Backbone.js Web app that lives inside of Photoshop. The team can update it without the user having to install an update. How does that work? Read up on it!

“ Batch Processing Millions and Millions of Images ,” Mike Brittain Etsy wanted to redesign a few of its major sections and had to rescale over 135 million images in order to do it.

“ Making 100,000 Stars ,” Michael Chang Chang writes about 100,000 Stars, an experience for Chrome that was built with Three.js and CSS3D.

“ Mastering the Application Cache Manifest for Offline Web Apps and Performance ,” Julien Nicault Nicault, who work on Cinémur, a new social film app, describes how to use AppCache to improve performance and enable offline usage of Web apps

“ Harvey: A Second Face for Your JavaScript ,” Joschka Kintscher Responsive design often requires drastic UI changes. This study shows how to execute parts of your JavaScript depending on the device’s type and screen size.

“ Our First Node.js App: Backbone on the Client and Server ,” Spike Brehm The team at Airbnb has been curious about Node.js for a long time, but used it only for odds and ends. See how they used it on a production-scale project.

“ Making a 60fps Mobile App ,” Paul Lewis Paul Lewis shows you how to make a mobile app that has 60fps at all times, does one thing really well, has offline support and a flat UI.

“ The Making of the Interactive Treehouse Ad ,” Chris Coyier Treehouse is the primary sponsor of CSS-Tricks, and this case study looks at its interactive ad using jQuery.

“ Improve Mobile Support With Server-Side-Enhanced Responsive Design ,” Jon Arne Sæterås This is an analysis of the process of finding the right mix between server-side and client-side logic for adaptive Web design.

“Designing an Instant Interface,” Luke Wroblewski Wroblewski shows how to design the instant interface used for the real-time views, real-time notifications and real-time comments on Bagcheck’s website.

“ Lessons in Website Security Anti-Patterns by Tesco ,” Troy Hunt Hunt looks closely at the many simple security errors Tesco makes, analyzing how he would apply basic security principles to remedy them.

“ Refactoring >14,000 Lines of CSS Into Sass ,” Eugene Fedorenko Beanstalk is a mature product whose CSS grew accordingly to 5 files, 14,211 lines and 290 KB of code. Learn how the team rebuilt its style sheets into something cleaner and easier to maintain.

“Refinder: Test-Driven Development,” Maciej Pasternacki These slides show how test-driven development enabled Gnowsis to reimplement Refinder’s basic data model.

“Managing JavaScript on Responsive Websites,” Jeremy Fields Jeremy Fields of Viget talks about how to manage JavaScript on a website whose interface and functionality changes at different breakpoints.

“ Trimming the Fat ,” Paul Robert Lloyd Lloyd walks through the performance optimizations he made for his website, trimming the page load from 383 to 100 KB. He also shows graphs.

Workflow And Optimization

“ Visual Design Explorations ,” Paul Lloyd Lloyd of Clearleft talks about how to maintain knowledge-sharing and collaboration on a growing team.

“ The Anatomy of an Experience Map ,” Chris Risdon Experience maps are becoming increasingly useful for gaining insight in order to orchestrate service touch points over time and space. This study explains what they are and how to create them.

“The design process of my infographic for the ‘Tour of France’ for Grinta!,” Veerle Pieters Pieters designed an infographic about the Tour of France, and focused mainly on the question, “What does a pro cycling team take with them to the Tour of France?”

“ Turning Small Projects Into Big Profit ,” Jon Savage and Simon Birky Hartmann Ace of Spade discusses how it overhauled its operations and started making a living off of small projects.

“What We’ve Learned About Responsive Design,” Christopher Butler Butler shares what his agency has learned about responsive design, which is to overcome initial fears and focus on what is important.

“The Modular Canvas: A Pragmatic Workflow for Designing Applications,” by Gabriel O’Flaherty-Chan There are some gaps in the way we work; the bigger the project, the more glaring the gaps become. O’Flaherty-Chan looks at a better workflow for designing apps.

“ How We Reduced Our Cancellation Rate by 87.5% ,” Kareem Mayan Kareem Mayan tackles the issue of user cancellations by using a cohort analysis. Learn how he did it.

“ How I Run a Membership Site ,” Justin Tadlock This study looks at how Theme Hybrid handles memberships after registration and payment.

“Post-Implementation, Pre-Launch: A Crucial Checkpoint,” Mindy Wagner Wagner of Viget discusses how to approach the time of post-implementation and pre-launch, a crucial checkpoint that can create a lot of stress for a team.

“ A New Make Mantra: A Statement of Design Intent ,” Mark Boulton Mark Boulton used the CERN redesign project as an occasion to define a new “make” mantra that would help him tackle projects. This single, actionable sentence would guide him through projects.

“ 100 Conversion Optimization Case Studies ,” KISSmetrics Lots of techniques and tactics to optimize your website for better conversions shared by marketers.

Responsive Design

“ Responsive Design and ROI: Observations From the Coalface ,” Chris Berridge Working on the frontline, Berridge share his insights on responsive design and returns on investment.

“ Making Your Site Responsive: Mastering Real-World Constraints ,” Alex Fedorov Listen to how agency Fresh Tilled Soil addressed real-world constraints, such as resources, time and budget, in its responsive design process.

“ Goals, Constraints, and Concept in a Redesign ,” Steven Bradley Some thoughts on the redesign of Vanseo Design.

“ How a Simple Redesign Increased Customer Feedback by 65% ,” James Santilli Customer feedback is the backbone of many Web services. Campaign Monitor analyzed the process behind a simple redesign that increased customer feedback by 65%.

“ More on Apples: Mobile Optimization in Ecommerce ,” Electric Pulp This study analyzes how both mobile and non-mobile conversions went up when Electric Pulp redesigned a website to be responsive.

“How I’m Implementing Responsive Web Design,” Jeff Croft Croft is finally at the point where responsive design feels worth the extra effort. Read about how he got there.

“ Mentoring: The Evaluation ,” Laura Kalbag Freelancers are often offered projects whose budget is below their rate. Laura Kalbag had a fantastic idea on how to transform these kind of projects into a win-win: She decided to mentor a group of students. Such a project would give the students an opportunity to gain valuable experience and help them transition into freelancing, and the client would get good quality work, despite the modest budget. This series of posts describes her experience, from initial idea to launched project.

Further Reading

• Showcase of Case Studies in Design Portfolios
• 15 Impressive Case Studies from Behance
• Improving Smashing Magazine’s Performance: A Case Study
• Powerful Workflow Tips, Tools And Tricks For Web Designers

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

Secrets to Powerful Web Design Case Studies

Share this article

If you don’t know about the power of case studies yet, pay close attention; they are about to become your best friend.

For the most part, case studies are a mainstay of nearly every industry. Companies of all types use case studies to show the world how they helped solve a problem or issue for one specific client.

Remember back in school when the teacher wanted you to show your work? A case study works on the same principle. Some clients want to get a “peek behind the curtain,” and see the processes involved in your work.

They want to see not only how the finished product looks, but also the entire process from start to finish.

• How did you take a client’s problem and develop a solution?
• How long did it take, and what was involved along the way?
• What was your thought process, and what did you do in order to solve a client’s problem or achieve their goals?

These are some of the questions that are typically answered in case studies, and they provide a lot of insight for clients.

Case studies can also take many forms, and may not even be called case studies at all. For example, my website thedeependdesign.com refers to them as “Success Stories.” You can tailor your own phrase, creating something that’s engaging and works for you.

Regardless of titles, a case study tells the story of how you helped one specific client. This is important, because if a future client can identify with a past client – their problem, their goal, whatever it may be – they can see how you might help them in a similar way.

Strangely, very few freelancers seem to use case studies, while larger companies – especially in creative industries – are using them quite extensively. This is a real missed opportunity, but if you stop and think about it, this is great news for you.

If you are one of the only ones in your market to utilize case studies for your business, you can really stand out from the crowd. This will make you and your business that much more attractive to potential clients if you are one of the few people on board with using this technique.

By their nature, case studies also show that you understand and have experience in solving problems. They help show clients that you can take a unique situation, problem, or goal and create a process to help your client get exactly what they want.

Part 1: How to Craft a Compelling Web Design Case Study

Choose your subjects carefully..

The first step toward a great case study is choosing the right subject. If you have the luxury of a lot of past clients to choose from, it’s probably wise to choose an “everyman” client that the majority of your future clients can identify with. Someone that people can understand who has a problem or goal that a lot of other businesses share.

Choosing a client from an obscure or complicated industry that will require lots of explanation will make it more difficult for potential clients to relate. If people can’t relate to your case studies, they’re unlikely to be able to see you solving their problems.

Consumer-facing clients such as restaurants, retail shops or hotels often have easily recognizable goals and make for excellent case studies.

Also, keep in mind your target client base when picking your subject. Make sure you choose a candidate that will appeal to the types of clients you want to attract.

For example, if you happen to be successful in producing web design for the construction industry, try to stick to that area for your case study, or you run the risk of not relating to your bread-and-butter clients.

Being able to identify with the client in the case study is critical because we want the reader to be able to easily project themselves into the client’s shoes. You want them to read it, sit back and think ‘ He did a great job for that guy, and I have similar issues. I bet he could help me too .’

However, if you’re newish business you may not have a long client list and so you won’t be able to be as picky. But that’s okay – everyone starts somewhere, and as you gain more clients, you can write more and more case studies and get pickier as time progresses.

If you happen to be brand new, with no past clients to write a case study on, you can write a case study in real time. This can actually be a good thing, as you’ll be able to write the case study on a client you’re currently helping, and all the details will be fresh in your mind.

Get Writing!

Now that you have your client picked out, it’s time to start crafting. Remember, you want to tell a story from start to finish. Beginning with when your client first came to you:

• What was the problem or goal that drove them to you in the first place
• What did they need you to solve?
• Did they need a logo designed, a press release written, or a brand new website designed?

Talk about any and all prerequisites that came with the project. For instance, a client may come to you wanting a website that can be easily updatable by their own staff, they want to bring in the colors and theme of their existing logo, or be able to collect email addresses.

These prerequisites all amount to limitations on your creativity. This is an excellent thing to show, as it tells future clients that you can operate within the boundaries of what your clients ask for.

You should also include other unspoken considerations that you took into account during the process. This could include industry-standard features that you happened to uncover in your research.

A good example of this would be if a new restaurant wanted you to build a website for them, and you found out during your research phase that most restaurants are using a service called “OpenTable” to take online reservations.

Talk about:

• All elements that were required.
• All elements the client specifically requested.
• Things that you found out on your own.

Include how you took all these things into account as you came up with a solution for the final product. Explain your thought process behind your decisions and show how your decisions influenced and benefited the project and the client.

Quantify whenever you can.

Always include real, accurate numbers whenever you can. It’s one thing to say “ My web design contributed to the construction firm’s success.’ , but it’s much better to say ‘The website I designed for XYZ client gets 10,000 unique visitors a month, with 10% of them converted into sales leads.”

These are quantifiable statistics that future clients can read and easily understand. Visitors don’t have to wonder what it actually means, or think about your statements in an abstract way – it’s real world data that is easily interpreted.

They want to know that if they hire you for a project, that you’ll get them results. And real results are measured in numbers, not in warm fuzzy feelings.

Part 2: How to Present Your Case Studies

One you’ve determined the content for an effective case study, it’s time to focus on the presentation. People aren’t looking to read a 400-page novel about your past clients, so it’s important to present case studies in an easily digestible way and will make people want to read them.

First and foremost, you want to make sure your case studies are formatted correctly for the web, and specifically, for your website. Think about some of the blogs and other websites that present a large amount of information – most of them do an excellent job of being able to present it in such a way that’s easy to navigate and read. They do this by breaking up the content into bite-sized chunks.

Break it Up.

Breaking up paragraphs is an easy way to start. It looks much nicer to the reader’s eye, and it’s easier to read than just one giant wall of text. Too much text looks intimidating, and quite frankly like a chore to read.

Breaking it up into paragraphs makes it look much more accessible, and potential clients can jump around to see which paragraphs interest them the most if they don’t feel like reading the entire page.

Use headers.

Also, use headings and subheadings where appropriate. These allow you to break up your content even further, and also enhance a reader’s ability to scan and find exactly what interests them. For the most part, people aren’t usually going to read the entire case study. People’s reading habits online are actually pretty lazy – so most people are just going to scan the content and read what appeals to them specifically.

Do you have information is your case study that could be formatted as a list? Lists and bullet points are an effective way to make content easy to consume.

Bullet points are particularly well-suited for listing the specific requirements of the project, features you implemented, or statistics about how the project benefitted your client.

Use images.

Always use images wherever you can – show the different stages of the projects alongside your content if at all possible. Anytime you can show rather than tell, it’s a good thing.

If you can show your projects in as many stages as possible, do so. For instance, if you worked on a logo, you might want to show screenshots of your beginning sketches.

Then move on to how you began looking for various colors, show images of the color schemes you may have plugged into your design. Again, case studies are all about telling the story of a project, so do this with images whenever possible.

Speaking of images, ask your client if you can use a picture of them. After all, it’s promoting them and their business too.

The simple addition of a client photograph immediately makes them more “real” to other potential clients. If people can see who you’re talking about, it makes the entire case study more relatable and personable.

Part 3: Position Your Case Studies for Maximum Impact

You know how supermarkets place gum, candy, soda and magazines right at the register? It’s no accident. They know that once you are there, these small, innocuous, low-priced items will seem like a perfectly reasonable add-on to what you are already purchasing. It’s just one last “push” to make an extra sale.

Well, case studies can work in a similar way to your portfolio website.

Since you have gone to all the time and trouble writing a compelling case study and presenting it in an effective way, you’ll want to put it in the best position possible on your portfolio site. As with everything else on your website, location makes a big difference. So where’s the best location for your case studies?

Location 1: A Dedicated Page

The first and most obvious location is on a dedicated “case studies” page, to be included in the main navigation. Clicking the navigation should bring visitors to the main page that will contain all of your case studies.

Even if you start with just one, it can still be a powerful tool. You can then add to them at your own pace as you start building up more and more clients.

On the page itself, you can lay them out however you like, though the layout will often depend on how many case studies you have to work with.

If you have several, you might want to have one featured case study on top that would be called out as such. The featured case study can have a lot of the information on the main page. This is where bullet points or number lists come in handy. Adding an image or two, and an overview of the case study with points that are covered can help draw people in. A link to “read more” allows people to view the entire case study if they want.

Other case studies can be arranged as thumbnails underneath the featured one, where a person can quickly scan the visual images and click on one that appeals to them. A quick link below each thumbnail, perhaps with the client and project name allows a person to click deeper and learn more.

If you are just starting out and have only one case study, you may want to use the same format but put all the information on the main page instead of a call-to-action to learn more. You can write something like “More coming soon” at the bottom of the page, and add more as you accumulate them.

You can make your case studies even more effective by strategically sprinkling them around other areas of the site as well, with links back to the main case studies page. Adding them to other pages can act almost like an “impulse buy” item at a supermarket as I mentioned before; Just that something extra to entice a visitor who might be on the fence about contacting you. So where else would it make sense for you to add studies to your site?

Location 2: On the Sidebar

One effective area is to add studies – or thumbnails of the studies – to the sidebar of your “My Work” page. That way, clients who are looking through your previous work have the option to dig deeper and read a bit more in-depth if they choose to.

And since it’s right there and they’re already looking over your work, most serious clients will click over and, at least, scan the main case studies page.

Location 3: On the Homepage

The homepage is generally the most visited page on a website and yours’ is likely no different. For this reason, it is another great place to put a featured case study. Within the homepage, there are many locations you could add a featured case study.

If you use a large slider, why not design a slide that calls out your featured case study? You can include a great image of the finished project, a simple headline, and a link to click and read the whole story.

Or perhaps you could put several of them a little lower on the page, either side-by-side thumbnails, or you could even design a mini-slider that rotates 3 or 4 case studies, with links of course.

The possibilities are virtually endless. Just be creative and position your case studies in areas of your site where it makes sense, especially in areas that it can enhance the page’s content. Adding them as a call-to-action or “impulse buy” helps add credibility to your site and gets people to stay on your site longer.

Frequently Asked Questions about Powerful Web Design Case Studies

What makes a web design case study powerful.

A powerful web design case study is one that effectively demonstrates the designer’s skills, creativity, and problem-solving abilities. It should clearly outline the project’s objectives, the challenges faced, the solutions implemented, and the results achieved. High-quality visuals, such as screenshots and mockups, are also crucial to help readers visualize the design process and the final product. A compelling narrative that tells the story of the project from start to finish can also make a case study more engaging and memorable.

How can I write a compelling narrative for my web design case study?

Writing a compelling narrative for your web design case study involves telling a story that engages your audience. Start by setting the scene with a brief introduction to the project, including the client, the project’s objectives, and the challenges faced. Then, describe the design process in detail, explaining the decisions you made and why. Finally, present the results achieved and reflect on what you learned from the project. Use clear, concise language and avoid jargon to make your case study accessible to a wide audience.

What kind of visuals should I include in my web design case study?

Visuals are a crucial part of any web design case study. They help readers visualize the design process and the final product. Include screenshots of the website at different stages of the design process, mockups, wireframes, and other design documents. You can also include images of the team working on the project or other behind-the-scenes photos. Make sure all visuals are high-quality and clearly labeled.

How can I showcase my problem-solving skills in my web design case study?

Showcasing your problem-solving skills in your web design case study involves clearly outlining the challenges you faced during the project and explaining how you overcame them. Describe the solutions you implemented, why you chose them, and how they contributed to the project’s success. Use specific examples and provide evidence to support your claims, such as before-and-after screenshots or testimonials from the client.

How can I make my web design case study more engaging?

Making your web design case study more engaging involves using a variety of techniques to keep your audience’s attention. Use a compelling narrative to tell the story of the project, include high-quality visuals to illustrate your points, and use clear, concise language to make your case study easy to read. You can also include interactive elements, such as videos or interactive prototypes, to make your case study more dynamic and engaging.

How can I demonstrate the results achieved in my web design case study?

Demonstrating the results achieved in your web design case study involves providing concrete evidence of the project’s success. This could include metrics such as increased website traffic, improved conversion rates, or positive feedback from the client. Include before-and-after comparisons to show the impact of your design changes, and use testimonials or quotes from the client to provide third-party validation of your work.

How can I reflect on what I learned from the project in my web design case study?

Reflecting on what you learned from the project in your web design case study involves taking a step back and considering the bigger picture. Discuss what went well, what didn’t, and what you would do differently next time. This shows your ability to learn from your experiences and continuously improve your skills and processes. It also provides valuable insights for other designers who may be facing similar challenges.

How can I make my web design case study accessible to a wide audience?

Making your web design case study accessible to a wide audience involves using clear, concise language and avoiding jargon. Explain any technical terms or concepts that your audience may not be familiar with. Also, consider the design of your case study itself. Use a clean, easy-to-read layout, high-contrast colors, and large, legible fonts. Include alt text for images and captions for videos to make your case study accessible to people with visual impairments.

How can I use my web design case study to attract potential clients?

Your web design case study can be a powerful tool for attracting potential clients. It showcases your skills, creativity, and problem-solving abilities, and provides concrete evidence of your ability to deliver successful projects. Make sure your case study is easy to find on your website, and consider sharing it on social media or in your email newsletter. Include a call to action at the end of your case study, inviting potential clients to get in touch with you for more information.

How often should I update my web design case studies?

Updating your web design case studies regularly is important to keep them relevant and showcase your most recent work. Consider updating your case studies every time you complete a significant project, or at least once a year. This shows potential clients that you are active and continuously improving your skills and processes. It also gives you the opportunity to reflect on your work and learn from your experiences.

Wes McDowell is the Principal and Creative Director for The Deep End Design in Chicago. In addition to client work, he has authored several books for freelance designers and co-hosts a popular graphic design podcast called The Deeply Graphic DesignCast .

Using Case Studies to Boost Your Web Design Business

In the world of web design, social proof has the power to captivate visitors and leave a lasting impression on potential clients. Case studies are an impactful medium to showcase your skills, expertise, and successful projects. They provide concrete evidence of your ability to deliver results and solve real-world design challenges. Through case studies, you can demonstrate your value, build trust with potential clients, and earn additional business. 

The benefits of web design case studies

Before diving into the key elements of a case study, it’s important to understand how regularly updating your portfolio can benefit you. The following are benefits of sharing case studies on your website. 

1. Boost SEO

Case studies are relevant and unique content that showcase your web design services. They are also engaging and informative, both of which are considered valuable to search engines . When creating case studies, you share keywords that are relevant to the industry. Search engines then associate those words with your site, potentially increasing its visibility to potential clients. 

2. Improve landings-to-leads ratio

Sharing examples of your work helps clients envision how you could design their project and solve their web design problems. This encourages them to hire you by highlighting your ability to address challenges, understand client needs, and exceed expectations. 

3. Increase your rates

By showcasing successful projects and the positive outcomes achieved for past clients, you quickly reveal your value as a web designer. Paired with evidence of your skill, problem-solving abilities, and authentic approach to design, case studies offer justification for charging a higher rate for services . When a client sees what you're capable of, they may be more willing to make the investment in your services because they can see what they’d be paying for.

4. Communicate your process

Case studies give you the opportunity to share your design process from start to finish. You can outline the various stages of a project, including research, planning, designing, and execution. By explaining your design methodology, you can help potential clients understand your approach and show them actual results.

“ Case studies can help people who have never worked with a designer to understand my process. It onboards them before they even contact me. ”

How to create a web design case study

Web design case studies should be simple and straightforward. Present them in a visually appealing and readable format so potential clients can best grasp the project’s details and understand your capabilities. Most case studies include five key parts:

1. The brief

Once you’ve selected a successful past project, you’ll want to introduce it by sharing the client’s name, industry, and the goal of the website (what you were hired to do). This overview should also include any historical context that offers insight into the background of the project and the problems you were asked to solve. 

2. Your approach

Outline the design process you followed during the project from initial research to final implementation. Describe the steps you took to solve the brief, the different design or development problems you encountered and how you approached solving them, and any moments or challenges that caused you to change directions. You can also include the project’s duration as well as the platform you used to build the website.

Show off the measurable results of your work. This includes improvements to website traffic, conversion rates, user engagement, subscriptions, sales increases, revenue figures, and more. You can also include more qualitative (and authentic) results such as a testimonial from your satisfied client.

4. A visual

Present the final design by sharing screenshots or images that showcase the website’s layout, color scheme, and typography. Explain your thought process behind your design choices, including how they aligned with your client’s brand and goal for the website.

“ A visual element is really important. Make sure screenshots and mockups are included in addition to the ability for users to click through and visit the websites you reference. ”

5. Learnings

Conclude the case study by reflecting on the project and sharing valuable insights and learnings from the experience. This demonstrates your commitment to improving and growing your skills as a web designer.

Check out Squarespace Circle , Squarespace’s program for professional web designers, developers, digital entrepreneurs, and creatives. Along with exclusive content, discounts, and other perks, Circle brings professionals together from all across the globe to exchange advice while connecting with new clients and collaborators.

Arianna Frederick is a content associate at Squarespace. In addition to managing the Circle blog, she develops top-of-funnel content for creative professionals and Circle members.

Highlights from Circle Live: Design Trends 2023

How to use a marketing funnel for your web design business.

New Case Study

How to avoid (and repair) these 3 critical design blunders

Case studies

Design Blunders

Social Proof: Why people's behaviors affect our actions

Social Proof

Adobe: The growing issue with “Free” trials UX

Adobe Trial UX

Letterboxd: How to nail product market fit with clear Jobs‑To‑Be‑Done

Jobs-To-Be-Done

Spotify Wrapped: 6 psychology principles that make it go viral every year

Spotify Wrapped

The psychology of Temu’s casino‑like shopping UX

Temu Onboarding

GoDaddy: How to improve checkout flows ethically

GoDaddy Checkout UX

Framing Effect: Why context affects decisions

Framing effect

The psychology behind highly effective landing pages

Landing page conversion

Apple vs Meta Threads: The Illusion of Privacy

Apple privacy policy

Beehiiv subscription: 5 small UX mistakes that make a BIG difference

Newsletter subscription

The Search War: Bing AI Chat vs. Google

The Psychology Behind Loom's Explosive Growth

Loom onboarding

Episode 1: Can Bing's new AI search challenge Google? 

Bing onboarding

Typeform: How to offboard users the right way

Typeform offboarding

How to increase signup confirmation rates with Sniper Links

Email confirmation UX

Labor Perception Bias: Why faster isn't always better

Labor perception bias

Tech ethics: If cookie consent prompts were honest…

Cookie consent

Amber Alert Redesign: 5 UX Improvements That Could Save Lives

Amber alerts UX

Google: How to increase feature adoption the right way

Google feature adoption

How Linkedin Increased Notification Opt-in Rates by 500%

Linkedin notifications

The Psychology of Advertising: Why this ad made me stop scrolling

Advertising psychology

The Ugly Truth About Net Promoter Score Surveys

Net promoter surveys

The Psychology Behind Amazon's Purchase Experience

Amazon purchase UX

One Simple Psychology Framework To Improve Your Onboarding

Blinkist onboarding

How Blinkist Increased Trial Conversions by 23% (Ethically)

Trial paywall optimization

YouTube’s Attempt To Solve The Paradox of Choice

Youtube retention

Adobe: The Psychology of User Offboarding

Adobe offboarding

Signal: How To Ethically Boost Your Revenues

Signal monetization

Chrome vs Brave: How To Use Ethical Design To Win Customers

Brave onboarding

The Psychology of Clubhouse’s User Retention (...and churn)

Clubhouse retention

The Scary Future Of Instagram

Instagram monetization

The Psychology of Misinformation on Facebook

Facebook misinformation

The Psychology Behind TikTok's Addictive Feed

Tiktok feed psychology

How To Properly Apply Jobs-To-Be-Done To User Onboarding

Headspace onboarding

How To Notify Users Without Being Spammy

Lifecycle emails

User Onboarding: Is HEY Email Worth It?

Hey onboarding

7 Product Team Pitfalls You Should Avoid

Product team pitfalls

How Tinder Converts 8% Of Singles Into Customers In Less Than 15min.

Tinder monetization

Coronavirus Dashboard UX: How Design Impacts Your Perception

COVID dashboard UX

How Morning Brew Grew To 1.5 Million Subs In 5 Years

Morning Brew retention

Uber Eats: How To Ethically Use Scarcity To Increase Sales

Uber Eats retention

Airbnb: How To Reduce Churn With Personalization

Airbnb personalization

6 Ways Mario Kart Tour Triggers You Into Gambling Your Money

Mario Kart monetization

Strava: 7 Strategies To Convert More Freemium Users

Strava monetization

Tesla: How To Grow Through Word-of-Mouth

Tesla charging UX

How Hopper Perfectly Nails Permission Requests UX

Hopper onboarding

9 Ways To Boost SaaS Revenues With A Better Upgrade UX

Zapier monetization

Superhuman's Secret 1-on-1 Onboarding Revealed

Superhuman onboarding

Trello User Onboarding: 7 Tactics To Inspire You

Trello onboarding

5 Deadly Onboarding Mistakes You Should Avoid

Sleepzy onboarding

Duolingo's User Retention: 8 Tactics Tested On 300 Million Users

Duolingo retention

Calm Referral Strategy: Drive Viral Growth With Simple Rewards

Calm referrals

Spotify vs Apple: How Spotify is betting $230M on podcasts to win over Apple users (Ep. 2)

Spotify onboarding

Spotify vs Apple: How Spotify is betting $230M on podcasts to win over Apple users (Ep. 1)

Spotify vs Apple

One Page Case Study Websites

A curated collection of 47 case study websites for inspiration and references. Each review includes a full screenshot of the website design along with noteworthy features. These One Pagers are a great to show users your work in a beautiful long Single Page website, normally pitching your services and social links at the bottom.

Reject Pile

Variable fonts support in Figma

Vertigo Typeface

Pudding Studio

Green Reconstruction of Ukraine

The Steve Jobs Archive

Webflow — Build and style your site exactly how you want ✨

Bleak! We’ve run out One Pagers...

There are no more pages to load

The Fundamentals of Website Redesign – A Case Study

Polished design wireframes are great but don’t reveal the work that goes into research and content organization. See how a thorough approach to early project planning leads to successful website redesign.

By Alex Gurevich

Alex has led a design agency that provided UX/UI design, branding, marketing, and development services for clients in various industries.

PREVIOUSLY AT

It’s not uncommon to finish a website redesign project only to look back and think, “I would have done things differently if I’d known what I know today.”

We’ve all been there. We get excited about a new project, banter with the client, sign contracts, and start mocking up prototypes. Life is looking good, but the project foundations are shaky.

Inevitably, revisions and scope creep start sneaking in as soon as the first design concept is presented, and it’s downhill from there. Communication falls apart, nothing goes as planned, and ultimately, the newly designed website resembles the monstrosity you were hired to fix.

World-class design and user experience doesn’t begin with a pretty mockup—it’s founded on strategic planning and a design vision that focuses on company goals. The primary objective cannot be, “Let’s make a prettier website.”

Website designers are responsible for user experience ( UX ) and user interface ( UI ). It’s our job to make sure that users have an optimal experience interacting with the interfaces we design. This requires thorough planning right from a project’s conception.

This article outlines a dependable process that will help ensure your next website redesign is built on a solid foundation.

The Value of Website Redesign Pre-project Research

To demonstrate the process, let’s walk through the phases of a website redesign completed for Archaeology Southwest , a nonprofit organization that explores and protects archaeological sites in the southwestern United States.

After a preliminary investigation of the client’s field and competition , closely inspect every website asset that’s available. This analysis is billed separately and takes place before a project quote is ever written. Working this way prevents ambiguous or inflated estimates that result when web designers try to account for issues that might crawl to the surface later in a project.

In the case of Archaeology Southwest, I was faced with a site in dire need of attention—mountains and mountains of cluttered content inside an ancient CMS portal. It was bad, so I set out to create order.

Step 1: Become Familiar with the Content

When remodeling a house, it’s important to try and salvage valuable materials before demolition day. The same principle applies to website design . You need to walk through the site page by page and pull out all the content. As designers, we must figure out what content deserves to be a unique post type and what pages are static.

Once this is accomplished, craft a strategy for how to organize everything, but don’t decide what content should stay and what should be removed. Why not?

When dealing with real-world businesses and organizations, there are a number of different people responsible for a site’s content, and the amount of content that exists can be staggering. The best approach is to classify everything first.

I typically start with the main navigation and go page by page. This way, I’ll have the information architecture and the sitemap down before the first client meeting.

Unfortunately, Archaeology Southwest’s site was not typical. Most links were not accessible through top navigation and were hidden within the content. I’d have been in for a nasty surprise if I’d quoted the project based on navigation alone.

By talking to various people on the client’s team, I was able to get a better picture of the project’s scope, and after a meeting with the client, I was able to identify their website focus, workflow, content, and features. From there, we came up with the following core types of content (some new, some existing):

Step 2: Create Focus. Simplify. Organize.

Once all the content is organized into labeled boxes, it’s time to develop the blueprint for a new structure, one that will showcase the content in its best form. But first, we need to create focus.

According to Archaeology Southwest, people visit their website to research information about ongoing projects, learn about upcoming events, and read a monthly magazine. These activities answer the question, “ What do people do on the site?” but do not reveal why people visit the site in the first place.

The “ why ” is the website’s focus. In order to find the focus, look to the organization’s core.

In this case, I identified “location” to be the heart of Archaeology Southwest. Without location, there would be no archaeological sites, no ruins, and certainly no museums or exhibits. Everything in archaeology relates back to location.

With a focus identified, we can simplify and organize. For Archaeology Southwest, I started by breaking the content into categories that were not related to locations, such as team pages and annual reports. After a little tidying, I ended up with this rough map:

The image above represents the two core areas that emerged: Things to Do and Locations . Things to Do (left) covers activities that a visitor to the site can learn about and do. Locations (right) focuses on site content that’s related to specific locations. Why structure it this way?

The idea is that an average user might not know the name of a video or project but will likely know the name of a location. In this way, visitors can find content as it relates to location.

Additionally, each color block in Locations represents a unique post type. From an organizational perspective, exhibits, classes, and online exhibits are all events of a different nature.

In the old Archaeology Southwest site, there were separate static pages for a magazine and an online store where visitors could purchase the magazine. To make purchasing simpler, I integrated a buying option within the magazine template.

The remaining organizational structure was straightforward:

• An “About” page to learn more about the organization
• A direct link to the “Store” page
• A “Donation” page
• A new “Updates” page

The store and donation pages are money makers, so it was essential they be included in the main navigation.

Once the organizational blueprint is complete, it’s time to connect actual content.

Step 3: Get the Client Involved

The sitemap includes page types, but it does not include the mapping of content. Seasoned web designers know that most issues occur when a client starts adding content to their site. To avoid this problem, keep the client looped in from the start.

For Archaeology Southwest, I created a Google Doc that included the sitemap, and I asked the client to map its old content with the new structure.

If something didn’t quite fit, we addressed it later. This is a critical step. Why? Besides getting the client involved in the process, it uncovers issues with structure before implementation begins.

In this case, some of the sitemap menu items were changed, and since the client had multiple donation pages, it made sense to create a unique post type just for that.

Create Visual Structure Through Wireframing

In this step, I begin to give the work a visual structure. To have the system function well and successfully integrate the notion that “everything is related to location,” I created a bidirectional relationship between post types.

Here’s the basic idea: When visitors come to the Archaeology Southwest website and select the Grand Canyon, they will see information about that location, but they will also find information related to projects, events, exhibits, and everything else site administrators mark as location-specific.

Since the link is bidirectional, visitors can also get to the Grand Canyon by visiting a project page. Ultimately, I ended up with this:

The locations index page showcases all locations with the most recent at the top. The search bar is the first thing the user sees upon arriving at the page. The Google map will take up around 80 percent of the screen. This allows users to pick points on the map, and as they scroll or search, the list grid will come into view.

On a single location page, the main body is on the left since it’s the most important information. Related meta information is secondary, so it’s on the right. To achieve a well-balanced layout, it’s crucial to have a distinct hierarchy between the first, second, and third element blocks. This allows the eye to move effortlessly between sections.

In the Archaeology Southwest layout, the user’s eye starts with the header, then moves to the content block, and finally tracks to the right sidebar. Each piece of related content is displayed in order of relevance. For instance, if the user is reading about the Grand Canyon, this content will likely be followed by photos and a map.

Since this is chiefly an educational site, it’s important to have a “Related to This Location” option. However, there isn’t much content that is uniquely associated with each location, so I combined seldom used (but related) content into a single block under the body.

Placing magazine and video thumbs under related content adds additional visual elements and directs users to the “Buy” page. The page is completed by showing related locations. This is a great way to entice users to further explore the site. The next step is to continue this structure for other post types.

Provide the Homepage with a Clear Goal

With a general model for post types in place, I can focus on the homepage. The first step is coming up with the goal for the homepage—this is an important part of UI design. The client’s research showed that many users stumble upon the site without fully understanding what it is. Therefore, an introduction and welcoming text needs to be the first thing users see.

The new core focus revolves around the secondary block of locations. This is followed by everything that’s happening at archaeologysouthwest.org (the current magazine, blog, events, newsletter, and so on). Here is the iteration of the layout process:

With V1 (left), I designed a basic layout that resembles the original homepage. There isn’t much hierarchy. The first thing users see is the featured location, but from there, they will likely get lost in the columns.

For V2 (center), I created a separate column that is easier for the eye to follow. However, it can still be improved. This is where knowledge of the content plays a major role. I know that Archaeology Southwest never has more than two events going on at a time, so it doesn’t make sense to have space for several events on the homepage.

In V3 (right), I focused on the upcoming events. If, for some reason, there are more than two events, the user can click a “More” button and see the rest. I also put additional emphasis on the current magazine since it’s the client’s moneymaker. Users start at the top and work their way down in an F-pattern. The eye flow is:

Featured Location > Welcome > Magazine > Events > News

With a visual wireframe and the site’s structure in place, it’s much easier to solidify features and how things will work. At this point, I have another meeting with client to go over functionality and flow of user interaction, both of which are much clearer at this stage.

Will there still be revisions later down the road? Yes, but they will be tweaks, not entire process changes. Most importantly, there will be no surprises.

Incorporate the Brand Style Guide

Now comes the exciting part—converting the wireframes into something people will use and experience. For this project, I aimed to make written content easy to digest by implementing brand colors and typography .

Experiment with Typography Combinations

Typography is integral to good web design, so we must figure out our type scheme early. Most of the Archaeology Southwest identity uses Univers Condensed Light and Adobe Caslon font. There were no rules for when Adobe Caslon was to be used, but I noticed that it wasn’t utilized as often as Univers.

I conducted a small font study to see what pairings create the best feel for a professional nonprofit organization. However, I also didn’t want my type scheme looking too different from the client’s marketing collateral.

After doing font comparisons, it became clear that Adobe Caslon should be the title font and Univers would be used for subtitles. Setting the main titles in sentence case gives the brand a more personal feel, whereas all caps creates more of a corporate vibe.

Polish the Look and Feel of the Website

I set out to create a light and open experience so that users would feel that Archaeology Southwest is both approachable and highly competent. Based on analytics data, the majority of visitors use desktop browsers (probably because most people visit the site for research). Therefore, my initial focus was designing for desktop users.

When coming from desktops, I wanted visitors to immediately see the featured location, welcome text, and upcoming events followed by part of the magazine title. This way, people first see what the company is about and what they are promoting.

On mobile devices , the priorities are a little different. Since users are accessing information on the go, events are more important, so they are placed higher on the list.

I also updated the donation button in the footer to be more friendly by changing it from a button into a sentence.

Finishing Strong: Mind the Details

There are two reasons that users come to the details page—either they want to learn more about a landmark, or they already know about a location and are looking for additional information (directions, phone numbers, etc). Therefore, it’s important to present both options right away so users don’t have to go searching.

I decided to break the details column out of the content area to give it more weight and make the page more interesting. This helps create compositional hierarchy, so when a visitor comes to the page, they will first see the page title followed by a small gallery of images and then the details column.

This type of design ensures that users will notice the additional details of a location right away. A little extra padding surrounding the column keeps the eyes focused and makes it easier to scan through the information.

The mobile view collapses as one would expect. The content wipes first, and the meta information follows. I placed videos and magazines last on the mobile page since they are least important for mobile users. Other pages follow the same structure to create a consistent flow and experience.

Web Redesign Is Built on a Foundation of Careful Planning

Looking back at the website redesign process, it’s apparent that the majority of time was dedicated to organizing and planning. Only 30 percent of the project was spent designing the site.

Often, when designers show their work, they fail to convey how much time is devoted to the nuts and bolts of communication, leading inexperienced designers to jump straight into mockups. The outcome? Derailed projects and unhappy clients.

Detailed planning must be done in order for a website redesign to be successful. Taking the time to perform pre-project research, become familiar with existing content, and involve the client are crucial steps.

Ultimately, there’s no way around it; the path to amazing website redesigns and professional confidence is paved by a methodical approach to project organization.

Further Reading on the Toptal Blog:

• The True ROI of UX: B2B Redesign Case Studies
• Design’s Driving Forces: A Website Redesign Case Study
• The Best UX Designer Portfolios: Inspiring Case Studies and Examples
• Rebrand Case Study: More Than Just a New Logo
• Why Consider a Website Redesign – Tips and Recommendations

Understanding the basics

What is website design all about.

Website design is focused on arranging written, graphic, and visual content into well organized web pages. The best website design makes this content easy to access, navigate, and understand.

What do you do as a web designer?

Web designers are responsible for the aesthetic, or visual experience, of a website. They work with text, images, and graphics and create informational hierarchy through design elements like scale, balance, color, and shape.

Why do you need a website?

Businesses use websites to provide information, promote services, and sell products. Needs vary, so a well-considered website strategy is an important part of the website planning and design process.

Alex Gurevich

Phoenix, AZ, United States

Member since October 26, 2015

About the author

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Toptal Designers

• Adobe Creative Suite Experts
• Agile Designers
• AI Designers
• Art Direction Experts
• Augmented Reality Designers
• Axure Experts
• Brand Designers
• Creative Directors
• Dashboard Designers
• Digital Product Designers
• E-commerce Website Designers
• Full-Stack Designers
• Information Architecture Experts
• Interactive Designers
• Mobile App Designers
• Mockup Designers
• Presentation Designers
• Prototype Designers
• Prototyping Experts
• SaaS Designers
• Sketch Experts
• Squarespace Designers
• User Flow Designers
• User Research Designers
• Virtual Reality Designers
• Visual Designers
• Wireframing Experts
• View More Freelance Designers

Join the Toptal ® community.

We use essential cookies to make Venngage work. By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.

Manage Cookies

Cookies and similar technologies collect certain information about how you’re using our website. Some of them are essential, and without them you wouldn’t be able to use Venngage. But others are optional, and you get to choose whether we use them or not.

Strictly Necessary Cookies

These cookies are always on, as they’re essential for making Venngage work, and making it safe. Without these cookies, services you’ve asked for can’t be provided.

Show cookie providers

• Google Login

Functionality Cookies

These cookies help us provide enhanced functionality and personalisation, and remember your settings. They may be set by us or by third party providers.

Performance Cookies

These cookies help us analyze how many people are using Venngage, where they come from and how they're using it. If you opt out of these cookies, we can’t get feedback to make Venngage better for you and all our users.

• Google Analytics

Targeting Cookies

These cookies are set by our advertising partners to track your activity and show you relevant Venngage ads on other sites as you browse the internet.

• Google Tag Manager
• Infographics
• Daily Infographics
• Graphic Design
• Graphs and Charts
• Data Visualization
• Human Resources
• Training and Development
• Beginner Guides

Blog Graphic Design

15+ Professional Case Study Examples [Design Tips + Templates]

By Alice Corner , Jan 12, 2023

Have you ever bought something — within the last 10 years or so — without reading its reviews or without a recommendation or prior experience of using it?

If the answer is no — or at least, rarely — you get my point.

Positive reviews matter for selling to regular customers, and for B2B or SaaS businesses, detailed case studies are important too.

Wondering how to craft a compelling case study ? No worries—I’ve got you covered with 15 marketing case study templates , helpful tips, and examples to ensure your case study converts effectively.

Click to jump ahead:

• What is a Case Study?

Business Case Study Examples

Simple case study examples.

• Marketing Case Study Examples

Sales Case Study Examples

• Case Study FAQs

What is a case study?

A case study is an in-depth, detailed analysis of a specific real-world situation. For example, a case study can be about an individual, group, event, organization, or phenomenon. The purpose of a case study is to understand its complexities and gain insights into a particular instance or situation.

In the context of a business, however, case studies take customer success stories and explore how they use your product to help them achieve their business goals.

As well as being valuable marketing tools , case studies are a good way to evaluate your product as it allows you to objectively examine how others are using it.

It’s also a good way to interview your customers about why they work with you.

Related: What is a Case Study? [+6 Types of Case Studies]

Marketing Case Study Template

A marketing case study showcases how your product or services helped potential clients achieve their business goals. You can also create case studies of internal, successful marketing projects. A marketing case study typically includes:

• Company background and history
• The challenge
• How you helped
• Specific actions taken
• Visuals or Data
• Client testimonials

Here’s an example of a marketing case study template:

Whether you’re a B2B or B2C company, business case studies can be a powerful resource to help with your sales, marketing, and even internal departmental awareness.

Business and business management case studies should encompass strategic insights alongside anecdotal and qualitative findings, like in the business case study examples below.

Conduct a B2B case study by researching the company holistically

When it comes to writing a case study, make sure you approach the company holistically and analyze everything from their social media to their sales.

Think about every avenue your product or service has been of use to your case study company, and ask them about the impact this has had on their wider company goals.

In business case study examples like the one above, we can see that the company has been thought about holistically simply by the use of icons.

By combining social media icons with icons that show in-person communication we know that this is a well-researched and thorough case study.

This case study report example could also be used within an annual or end-of-year report.

Highlight the key takeaway from your marketing case study

To create a compelling case study, identify the key takeaways from your research. Use catchy language to sum up this information in a sentence, and present this sentence at the top of your page.

This is “at a glance” information and it allows people to gain a top-level understanding of the content immediately. 

You can use a large, bold, contrasting font to help this information stand out from the page and provide interest.

Learn  how to choose fonts  effectively with our Venngage guide and once you’ve done that.

Upload your fonts and  brand colors  to Venngage using the  My Brand Kit  tool and see them automatically applied to your designs.

The heading is the ideal place to put the most impactful information, as this is the first thing that people will read.

In this example, the stat of “Increase[d] lead quality by 90%” is used as the header. It makes customers want to read more to find out how exactly lead quality was increased by such a massive amount.

If you’re conducting an in-person interview, you could highlight a direct quote or insight provided by your interview subject.

Pick out a catchy sentence or phrase, or the key piece of information your interview subject provided and use that as a way to draw a potential customer in.

Use charts to visualize data in your business case studies

Charts are an excellent way to visualize data and to bring statistics and information to life. Charts make information easier to understand and to illustrate trends or patterns.

Making charts is even easier with Venngage.

In this consulting case study example, we can see that a chart has been used to demonstrate the difference in lead value within the Lead Elves case study.

Adding a chart here helps break up the information and add visual value to the case study. 

Using charts in your case study can also be useful if you’re creating a project management case study.

You could use a Gantt chart or a project timeline to show how you have managed the project successfully.

Use direct quotes to build trust in your marketing case study

To add an extra layer of authenticity you can include a direct quote from your customer within your case study.

According to research from Nielsen , 92% of people will trust a recommendation from a peer and 70% trust recommendations even if they’re from somebody they don’t know.

So if you have a customer or client who can’t stop singing your praises, make sure you get a direct quote from them and include it in your case study.

You can either lift part of the conversation or interview, or you can specifically request a quote. Make sure to ask for permission before using the quote.

This design uses a bright contrasting speech bubble to show that it includes a direct quote, and helps the quote stand out from the rest of the text.

This will help draw the customer’s attention directly to the quote, in turn influencing them to use your product or service.

Less is often more, and this is especially true when it comes to creating designs. Whilst you want to create a professional-looking, well-written and design case study – there’s no need to overcomplicate things.

These simple case study examples show that smart clean designs and informative content can be an effective way to showcase your successes.

Use colors and fonts to create a professional-looking case study

Business case studies shouldn’t be boring. In fact, they should be beautifully and professionally designed.

This means the normal rules of design apply. Use fonts, colors, and icons to create an interesting and visually appealing case study.

In this case study example, we can see how multiple fonts have been used to help differentiate between the headers and content, as well as complementary colors and eye-catching icons.

Marketing case study examples

Marketing case studies are incredibly useful for showing your marketing successes. Every successful marketing campaign relies on influencing a consumer’s behavior, and a great case study can be a great way to spotlight your biggest wins.

In the marketing case study examples below, a variety of designs and techniques to create impactful and effective case studies.

Show off impressive results with a bold marketing case study

Case studies are meant to show off your successes, so make sure you feature your positive results prominently. Using bold and bright colors as well as contrasting shapes, large bold fonts, and simple icons is a great way to highlight your wins.

In well-written case study examples like the one below, the big wins are highlighted on the second page with a bright orange color and are highlighted in circles.

Making the important data stand out is especially important when attracting a prospective customer with marketing case studies.

Use a simple but clear layout in your case study

Using a simple layout in your case study can be incredibly effective, like in the example of a case study below.

Keeping a clean white background, and using slim lines to help separate the sections is an easy way to format your case study.

Making the information clear helps draw attention to the important results, and it helps improve the  accessibility of the design .

Business case study examples like this would sit nicely within a larger report, with a consistent layout throughout.

Use visuals and icons to create an engaging and branded business case study

Nobody wants to read pages and pages of text — and that’s why Venngage wants to help you communicate your ideas visually.

Using icons, graphics, photos, or patterns helps create a much more engaging design. 

With this Blue Cap case study icons, colors, and impactful pattern designs have been used to create an engaging design that catches your eye.

Use a monochromatic color palette to create a professional and clean case study

Let your research shine by using a monochromatic and minimalistic color palette.

By sticking to one color, and leaving lots of blank space you can ensure your design doesn’t distract a potential customer from your case study content.

In this case study on Polygon Media, the design is simple and professional, and the layout allows the prospective customer to follow the flow of information.

The gradient effect on the left-hand column helps break up the white background and adds an interesting visual effect.

Did you know you can generate an accessible color palette with Venngage? Try our free accessible color palette generator today and create a case study that delivers and looks pleasant to the eye:

Add long term goals in your case study

When creating a case study it’s a great idea to look at both the short term and the long term goals of the company to gain the best understanding possible of the insights they provide.

Short-term goals will be what the company or person hopes to achieve in the next few months, and long-term goals are what the company hopes to achieve in the next few years.

Check out this modern pattern design example of a case study below:

In this case study example, the short and long-term goals are clearly distinguished by light blue boxes and placed side by side so that they are easy to compare.

Use a strong introductory paragraph to outline the overall strategy and goals before outlining the specific short-term and long-term goals to help with clarity.

This strategy can also be handy when creating a consulting case study.

Use data to make concrete points about your sales and successes

When conducting any sort of research stats, facts, and figures are like gold dust (aka, really valuable).

Being able to quantify your findings is important to help understand the information fully. Saying sales increased 10% is much more effective than saying sales increased.

While sales dashboards generally tend it make it all about the numbers and charts, in sales case study examples, like this one, the key data and findings can be presented with icons. This contributes to the potential customer’s better understanding of the report.

They can clearly comprehend the information and it shows that the case study has been well researched.

Use emotive, persuasive, or action based language in your marketing case study

Create a compelling case study by using emotive, persuasive and action-based language when customizing your case study template.

In this well-written case study example, we can see that phrases such as “Results that Speak Volumes” and “Drive Sales” have been used.

Using persuasive language like you would in a blog post. It helps inspire potential customers to take action now.

Keep your potential customers in mind when creating a customer case study for marketing

82% of marketers use case studies in their marketing  because it’s such an effective tool to help quickly gain customers’ trust and to showcase the potential of your product.

Why are case studies such an important tool in content marketing?

By writing a case study you’re telling potential customers that they can trust you because you’re showing them that other people do.

Not only that, but if you have a SaaS product, business case studies are a great way to show how other people are effectively using your product in their company.

In this case study, Network is demonstrating how their product has been used by Vortex Co. with great success; instantly showing other potential customers that their tool works and is worth using.

Related: 10+ Case Study Infographic Templates That Convert

Case studies are particularly effective as a sales technique.

A sales case study is like an extended customer testimonial, not only sharing opinions of your product – but showcasing the results you helped your customer achieve.

Make impactful statistics pop in your sales case study

Writing a case study doesn’t mean using text as the only medium for sharing results.

You should use icons to highlight areas of your research that are particularly interesting or relevant, like in this example of a case study:

Icons are a great way to help summarize information quickly and can act as visual cues to help draw the customer’s attention to certain areas of the page.

In some of the business case study examples above, icons are used to represent the impressive areas of growth and are presented in a way that grabs your attention.

Use high contrast shapes and colors to draw attention to key information in your sales case study

Help the key information stand out within your case study by using high contrast shapes and colors.

Use a complementary or contrasting color, or use a shape such as a rectangle or a circle for maximum impact.

This design has used dark blue rectangles to help separate the information and make it easier to read.

Coupled with icons and strong statistics, this information stands out on the page and is easily digestible and retainable for a potential customer.

Case Study Examples Summary

Once you have created your case study, it’s best practice to update your examples on a regular basis to include up-to-date statistics, data, and information.

You should update your business case study examples often if you are sharing them on your website .

It’s also important that your case study sits within your brand guidelines – find out how Venngage’s My Brand Kit tool can help you create consistently branded case study templates.

Case studies are important marketing tools – but they shouldn’t be the only tool in your toolbox. Content marketing is also a valuable way to earn consumer trust.

Case Study FAQ

Why should you write a case study.

Case studies are an effective marketing technique to engage potential customers and help build trust.

By producing case studies featuring your current clients or customers, you are showcasing how your tool or product can be used. You’re also showing that other people endorse your product.

In addition to being a good way to gather positive testimonials from existing customers , business case studies are good educational resources and can be shared amongst your company or team, and used as a reference for future projects.

How should you write a case study?

To create a great case study, you should think strategically. The first step, before starting your case study research, is to think about what you aim to learn or what you aim to prove.

You might be aiming to learn how a company makes sales or develops a new product. If this is the case, base your questions around this.

You can learn more about writing a case study  from our extensive guide.

Related: How to Present a Case Study like a Pro (With Examples)

Some good questions you could ask would be:

• Why do you use our tool or service?
• How often do you use our tool or service?
• What does the process of using our product look like to you?
• If our product didn’t exist, what would you be doing instead?
• What is the number one benefit you’ve found from using our tool?

You might also enjoy:

• 12 Essential Consulting Templates For Marketing, Planning and Branding
• Best Marketing Strategies for Consultants and Freelancers in 2019 [Study + Infographic]

An official website of the United States government Here’s how you know keyboard_arrow_down

An official website of the United States government

The .gov means it’s official. Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

The site is secure. The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Jump to main content

SOaR webinar: Federal Circuit decision case studies impacting design application examination

Are you interested in learning about the impact of recent Federal Circuit decisions on design application examination? If so, join the United States Patent and Trademark Office (USPTO) on Tuesday, April 16, from 11 a.m. to 12:30 p.m. ET for a free virtual webinar on these impacts. This session will focus on three recent Federal Circuit decisions: In re Maatita, Curver Luxembourg v. Home Expressions, and In re SurgiSil.

Register today

The program is part of the USPTO's Stakeholder Offerings and Resources (SOaR) program, a series of courses led by patent experts. We'll cover how you can:

• Determine whether a design meets the enablement and definiteness requirements for a design claim under 35 U.S.C. 112 when only a single view of the design is provided as illustrated by In re Maatita.
• Determine considerations relating to the title of the design application on the claim scope as illustrated by Curver Luxembourg v. Home Expressions.
• Determine how a design claim is limited to the article of manufacture recited in the claim language and depicted in the figure(s) as illustrated by In re SurgiSil.

This training event is free and open to the public, but  advance registration   is required. Once registered, check your email for instructions to join the webinar. Captioning service will be provided. 

The USPTO has been approved for one hour of Continuing Legal Education (CLE) credit in Virginia for this course. 

For more information, email  [email protected] . Captioning service will be provided.

Accessibility accommodation

If you are an individual with a disability and would like to request a reasonable accommodation, please submit your request to the contact information listed above.

Continuing Legal Education (CLE)

If a state is not listed, contact your state bar to see if you can obtain credit in your state.

Additional information about this page

ED summons case: Court grants bail to Delhi CM Arvind Kejriwal

About the Author

The TOI City Desk is an indefatigable team of journalists dedicated to bringing you the pulse of cities from across the nation, all day and all night. Our mission is to curate, report, and deliver city news that matters to readers of The Times of India. With a keen focus on urban life, governance, culture, and local issues, we provide a comprehensive view of the ever-evolving cityscapes. Our team works tirelessly to keep readers informed about the latest developments, ensuring that they are connected to the heartbeat of cities across India, right when it happens. The TOI City Desk is a trusted source for staying in touch with the local stories that shape your world. Read More

Visual Stories

PRISMA 2020 flow diagram [ 19 ]

Study characteristics are shown in Table 2 . The included studies were conducted internationally: in the UK ( n  = 9) [ 27 , 28 , 29 , 30 , 31 , 32 , 33 , 34 , 35 ], Australia ( n  = 7) [ 36 , 37 , 38 , 39 , 40 , 41 , 42 ], Canada ( n  = 5) [ 43 , 44 , 45 , 46 , 47 ], Sweden ( n  = 2) [ 48 , 49 ] and Italy/UK ( n  = 1) [ 50 ]. The majority of the studies were qualitative case studies [ 27 , 28 , 29 , 32 , 33 , 35 , 36 , 38 , 39 , 40 , 41 , 50 ]. Five of these studies collected and presented survey data alongside the narrative data [ 30 , 42 , 43 , 48 , 49 ]. Three papers were qualitative study protocols [ 31 , 37 , 47 ]. One was a patient-led (co-designed) qualitative study [ 46 ], and there were three case study collections [ 34 , 44 , 45 ]. Numbers of participants varied across studies from 7- 156. All three terms co-production [ 28 , 29 , 32 , 33 , 34 , 35 , 50 ], co-design [ 28 , 30 , 31 , 34 , 37 , 38 , 39 , 40 , 41 , 43 , 44 , 48 , 49 ] and co-creation [ 36 , 45 , 47 ], were used to define their knowledge mobilisation approach.

Quality of studies

Eighteen out of the 24 papers were assessed as moderate to high quality. Three papers—two non-peer reviewed casebooks and a study protocol, were assessed as low quality. Another three papers were deemed low-moderate quality and consisted of another casebook, a study protocol and a qualitative case study. The latter was assessed as low quality due to unclear reporting. It is possible that the casebooks and study protocols scored poorly due to the lack of appropriate assessment tools for these types of publications. (see Table 3 ).

Overview of Themes

Overall four themes were identified: 1. Key aspects of ‘co’approaches for knowledge mobilisation. 2. Mechanisms of action. 3. Activities used. 4. Outcomes of ‘co’approaches for knowledge mobilisation. The themes and their sub-themes, along with the relationships between them, are illustrated in Fig.  2 .

Overview of themes: key aspects, mechanisms of action, activities used and outcomes of ‘co’approaches for knowledge mobilisation in health conditions

Key aspects of ‘co’ approaches for knowledge mobilisation

The aspects of ‘co’approaches that authors proposed as important to mobilise knowledge to improve the management of health conditions included: bringing people together as active and equal partners, valuing all knowledge, using a creative approach, and iterative prototyping techniques.

Bringing diverse people together as active and equal partners

Forming collaborations between different stakeholders was considered critical [ 29 , 32 , 36 , 38 , 42 , 47 ]. Authors believed that partnership working led to the sharing of goals [ 35 ], responsibilities and decision making throughout the process [ 27 , 30 , 31 , 44 , 47 , 48 ]. Involving the right people in the ‘co’approach was considered to be central to knowledge mobilisation. For example, one study recognized that :

‘involving all stakeholders can provide richer insights than involving patients or professionals alone’ [ 30 ].

Another proposed that by promoting inclusivity:

‘ meaningful egalitarian partnerships are formed between participants ’ [ 28 ].

Actively engaging stakeholders was identified as important [ 28 , 31 , 35 , 36 , 38 ], where they are:

‘ active agents not merely passive subjects or recipients of services’ [ 29 ].

Valuing all knowledge

Authors acknowledged the existence of disparate types of knowledge in terms of research evidence, experience and opinions. They highlighted the need to include, recognise and understand all knowledge [ 27 , 31 , 32 , 41 , 44 , 49 ] and place equal importance [ 29 ] on evidence-based research knowledge, clinical knowledge and experiential knowledge [ 27 , 28 , 36 , 40 , 47 , 50 ]. Some authors suggested that ‘co’approaches offered an opportunity to generate, share and gain locally generated knowledge and experience from different sources [ 28 , 30 , 36 , 48 ].

‘ Our approach is potentially efficient in making use of all available knowledge (scientific and ‘practical’); and potentially effective in being grounded in the reality and complexity of applied practice’ [ 33 ].

Using a creative approach

Collaborative ways of working, inherent in ‘co’approaches, were deemed to be significantly different to the usual way of doing applied health research [ 29 , 39 ]:

‘the researchers and clinicians in some of the projects found that their experience of working in collaboration on the projects was different to how they had carried out research before (‘game changers’) and opened up new possibilities and capacity’ [ 29 ] .

Design and creative practice were recognised as a means to successfully bring the knowledge, skills, expectations and beliefs of heterogeneous groups of people together [ 28 , 32 , 34 , 50 ]. Encouraging those involved to think and behave in different ways [ 29 , 30 ] enhancing idea generation [ 39 , 41 ].

Maintaining engagement of stakeholders was recognised as difficult. One study found that despite regular project meetings and media awareness campaigns they did not maintain engagement of key stakeholders through to implementation [ 36 ]. In contrast other studies [ 38 , 41 , 44 ] that favoured creative activities, felt that their design and participatory methods helped to engage diverse groups of people with varying goals, feelings and abilities. They perceived that their ‘co’approach helped retain engagement even within those groups who do not traditionally get involved in research [ 34 , 35 , 39 , 50 ]:

‘ The research and development cycle that we employed in this study is an optimal methodology to engage, retain, and work more efficiently with hard-to-reach populations’ [ 39 ].

Innovative, iterative and prototyping techniques

Many of the study authors proposed to use a flexible, iterative process to achieve successful knowledge mobilisation [ 27 , 28 , 30 , 33 , 35 , 44 , 46 ]. For example, the iterative PaCER process in one study allowed learning from participants in each phase to inform the next [ 46 ]. Another felt that flexibility was essential to adapt knowledge to context in a complex dynamic system such as healthcare [ 33 ].

Iterative prototyping, often used in design practice, was adopted in a number of studies [ 28 , 30 , 31 , 34 , 35 , 39 , 40 , 41 ]. Prototyping was considered useful for turning knowledge into practical, tangible objects [ 28 , 34 , 35 ]. For example, one study used quick, easy and cheap, low fidelity prototypes to generate iterative cycles of feedback and development [ 28 ]. In other studies, visual design artefacts such as videos, drawings and sketches were used [ 28 , 31 , 34 , 39 , 40 , 41 , 50 ]. Authors felt that ideas could be quickly communicated in this way in simple, understandable forms making knowledge more accessible [ 28 , 30 , 34 , 50 ].

Expert facilitation of these varied activities was considered to be crucial to their success. The use of independent facilitators was found to be successful [ 34 , 35 , 43 ]. They appeared to reduce anxieties regarding participation and encourage open and honest contributions [ 34 , 43 ]:

‘Having a design facilitator enabled visualisation of thoughts and ideas as they arose. This allowed real time synthesis of occurring knowledge, for example through drawings, which was presented in a form that was easy to understand and which accurately represented participant’s views’ [ 28 ] .

Alternatively training could be given to enable researchers to facilitate these activities successfully [ 30 ].

Mechanisms of action

‘Co’approaches were considered to achieve knowledge mobilisation through a number of mechanisms of action directly related to the key aspects described. Study authors considered that bringing people together as active partners, valuing all forms of knowledge, using a creative approach and iterative prototyping techniques, could facilitate a shared understanding of the problem and identify important needs and how to meet them, thereby balancing power differentials, offering a sense of ownership, and engendering trust and confidence in solutions.

Shared understanding

Authors reported engaging multiple stakeholders in the process could identify wider perspectives and contexts and contribute to a shared understanding of the problems and potential solutions [ 27 , 28 , 30 , 32 , 33 , 38 , 40 , 43 , 46 ].

Using design artefacts to communicate participants’ thoughts and feelings could facilitate the generation of knowledge and develop a mutual understanding of what was important to stakeholders [ 28 , 30 , 34 , 50 ]. The use of personas [ 28 , 30 , 34 , 35 ] and scenarios [ 30 , 34 ] were thought to help distance participants from their own positions and prevent a ‘them and us’ dynamic developing [ 30 ].

‘The persona seemed to be particularly powerful for the professional group and prompted a focus on considering the “whole person” experience that the attendees said they may not have considered otherwise’ [ 30 ] .

This meant that outputs were a consensus between participants, considering all perspectives, rather than the product of situated assumptions, such as what health care professionals think patients want or need [ 30 ].

Identify and meet needs

Authors described that by bringing diverse groups of people together, pooling their ‘creative assets’ [ 29 ], and considering and valuing their different types of knowledge, expertise and perspectives, they could produce outputs that were tailored to everyone’s needs [ 29 , 32 , 38 , 41 , 42 , 46 , 47 , 50 ]. They felt that by including people with lived experience of a health condition in the process they were able to contribute their unique perspectives and ideas [ 29 , 32 , 35 , 48 ] and the research addressed the areas that patients felt were most important [ 36 , 43 ]. This challenged the traditional medical model which assumes the clinician knows best [ 27 , 43 ].

‘because clinical guidelines are often developed using the medical model where clinicians are considered to possess knowledge and expertise over what is best for the patient’ [ 43 ] .

By valuing diverse evidence and knowledge, authors perceived that complex systems and services, such as those in healthcare, could be better understood as no one individual could understand them completely [ 33 , 35 ]. In this way ‘co’approach outputs could attend and align to context [ 28 , 29 , 34 , 38 ] including wider organisational factors [ 29 ]. Authors felt that using creative and iterative prototyping techniques allowed them to challenge and refine ideas into practical concepts that were fit for purpose and more likely to meet stakeholder needs [ 30 , 38 ].

Balancing power and voice

Authors felt that balancing power and voice of those involved aided knowledge mobilisation. Authors felt this was achieved in various ways. Two studies suggested that giving clinicians, patients and the public a more active role in the whole research process meant that they felt valued and had a more equal role [ 29 , 45 ]. In other studies, involving people with lived experience meant their voices were listened to and valued [ 45 , 46 ]. One study used research based theatre to achieve this [ 32 ]:

‘Theatre makers on the panel were able to explain the process of developing research based Theatre and by doing so revealed how the voices of research participants were respected and heard’ [ 32 ] .

A number of studies found that their ‘co’approaches challenged traditional relationships between patients and doctors [ 28 , 34 , 35 , 41 , 50 ] or blurred practice and academic boundaries [ 28 , 33 , 34 , 35 ]:

‘The discussion was not led by power players such as scientists or surgeons that could have used their status to lead the discussion’ [ 50 ] .

Several studies [ 28 , 34 , 35 , 39 , 41 , 50 ] found that the use of creative activities had a positive influence on group dynamics. For example one study felt that their design-led activities enabled participants to:

‘ share and express themselves in an inclusive environment using a common language. ’ [ 28 ].

Another author felt that power hierarchies could be flattened and more voices heard by making ideas tangible [ 34 ]. Creative activities were found to be helpful in engaging people ‘ who might otherwise have struggled to participate’ [ 34 ] and contribute to the process, such as people with verbal communication problems or lower literacy levels [ 34 , 35 ]. Skilled facilitation was recognised as important in order to manage the power asymmetries found in heterogenous groups of people [ 48 ].

Sense of ownership

Authors anticipated that knowledge could be shared and generated by bringing people together to form collaborative partnerships, creating a sense of ownership and common purpose [ 28 , 44 ] that would help reduce the research to practice gap [ 36 ]. Ownership was reinforced by considering context, implementation and by valuing all stakeholder knowledge [ 28 , 29 , 34 ]:

‘These include developing strong cross-sector partnerships with stakeholders to co- create and share emerging knowledge, integrating and utilizing all stakeholders’ relevant expertise and experience and promoting a sense of ownership and common purpose’ [ 44 ] .

Trust and confidence

Authors identified that stakeholders would have more trust and confidence in the final outputs because their needs were identified, a shared understanding was gained, power and voice was attended to and a sense of ownership was achieved [ 28 , 46 ]. A number of authors deemed their outputs to be more credible, relevant, practical, realistic, and trustworthy, because of their ‘co’approach [ 28 , 29 , 33 , 34 , 39 , 40 , 42 , 43 , 46 , 48 ].

‘This experience only confirmed their view that it was important to include representatives of all the relevant professionals in the process of building a model, to make it sufficiently realistic and trustworthy, and to increase the chances of the results being accepted by them and acted upon’ [ 29 ] .

Activities used in ‘co’approaches

Authors used a range of activities, regardless of the term used for their ‘co’approach, in order to achieve the mechanisms of action discussed. It is useful to document these because often researchers rely on research methods when other activities can help to achieve these mechanisms (see Table 4 ). For example a number of studies included creative activities drawn from design, such as drawing and sketching, personas, journey maps and prototyping [ 27 , 28 , 30 , 31 , 34 , 35 , 38 , 39 , 40 , 41 , 48 , 49 , 50 ]. Some used the amalgamation of interview and focus group data to inform their ‘co’approach process [ 42 , 44 , 46 ]. Others were co-production or co-design of a whole research project [ 29 , 44 , 45 , 46 ]. Prioritisation and consensus techniques were common, including nominal group and Delphi techniques [ 27 , 31 , 34 , 37 , 43 , 47 , 48 , 49 ]. One study used a writing committee [ 43 ] and others used meetings and discussion groups [ 27 , 32 , 36 , 37 , 44 , 49 ]. Generally some form of workshop was common.

Achieving outcomes

Few of the included studies measured outcomes. Authors tended to describe the outcomes they believed they were more likely to achieve. These included more relevant research products, more usable knowledge, outputs more likely to be implemented in practice, and improved health.

More accessible, relevant and acceptable knowledge mobilisation products

Two authors perceived that their ‘co’approach helped overcome the problem of research and research findings seeming inaccessible and irrelevant to non-academic audiences [ 28 , 35 ]. Other authors felt their use of visualisations and design artefacts improved the accessibility of knowledge by simplifying complex concepts [ 28 , 30 , 35 , 39 , 50 ]. Making research and its findings more accessible and relevant was considered an important outcome [ 35 , 43 , 47 ].

‘The participation of end users in the design process ensured that the prototype was accessible to individuals of varying literacy levels with a range of cultural differences’ [ 39 ] .

Authors indicated that by using collaborative approaches they could produce more engaging, functional, practical and acceptable products [ 28 , 37 , 39 , 40 , 41 , 42 ]. Findings from user testing of prototype functionalities for an e-mental health management system supported this view [ 39 , 40 , 41 ]. Authors felt that their participatory ‘co’approach could: ‘ help ensure the end product meets everyone’s needs; improve usability; and increase engagement of users’ [ 41 ] and ‘ could result in better products that are more functional in real-life settings’ [ 40 ] .

More usable knowledge products

A number of authors felt their ‘co’approach produced outputs with potential to be useful and useable in practice [ 28 , 29 , 30 , 33 , 34 , 39 , 42 , 43 ]. Several felt that their outputs were more likely to be accepted and therefore more likely to be acted upon and used, leading to successful changes in practice [ 28 , 29 , 33 , 34 , 44 , 45 , 47 , 48 ]. Authors felt that outputs would be fit for purpose in the real world because their ‘co’approach ensured cultural and contextual factors were captured and used to inform their generation [ 28 , 33 , 34 , 40 , 43 , 48 ].

‘Including people with lived experience in guideline development can aid improved understanding of treatment options, greater involvement in health care decision making, and increased satisfaction in primary and secondary health care. This model can be used to to ultimately produce a product that has real‐world utility for patients and their families’ [ 43 ] .

Few studies carried out formal evaluation of their outputs, however data collected in four studies indicated that the process could produce useful and easy to use outputs [ 35 , 42 , 44 , 50 ].

Implementation in practice

Authors proposed that because their research was more relevant, acceptable and usable it was more likely to be implemented in practice. A number of studies provided insights into how their outputs had been implemented and impacted on clinical practice both locally and nationally [ 29 , 33 , 35 , 36 , 44 , 46 ].

“because of our adoption of the Toolbox, our implementing clinicians have assessed chronic pain in over 70% of their pediatric patients who may not have otherwise discussed their chronic pain ’’ [ 44 ].

Two casebooks used the IKT approach to ensure research outputs were more implementable [ 44 , 45 ]. Other studies found that prototypes incorporating culturally and contextually specific information had the potential to aid implementation [ 28 , 34 , 39 , 40 , 41 ]. most of the studies in this review produced outputs that required further refinement before being ready to be implemented [ 48 ].

It was acknowledged that implementation and sustained engagement with outputs was challenging. In order to achieve sustainability and long term impact after research teams departed local champions were required to continue to drive implementation forward [ 36 ].

Improved health

None of the included studies in this systematic review undertook an in depth post implementation evaluation nor did they measure or report on specific health outcomes. Many of the authors aspired to, and in some cases reported, the goal of improving healthcare outcomes and quality of care [ 28 , 30 , 34 , 37 , 43 , 46 , 50 ]. However, these claims were not based on robust evaluation data and evaluation methods were not clearly reported. A number of authors felt improving the relevance [ 40 , 41 , 43 , 46 ], acceptability [ 37 , 40 ] and usability [ 40 , 41 ] of outputs would improve outcomes or quality of care.

‘the development of a codesigned conservative model of care involving patients, clinical staff, members of the public and other stakeholders is more likely to be accepted by both providers and users, resulting in a higher rate of stakeholder satisfaction, continuous improvement and a reduced failure risk’ [ 37 ] .

Other studies demonstrated actual changes in practice as a result of introducing the co-designed outputs. These included improved consistency in clinician assessment and identification of patient problems that were previously missed [ 44 ], changes to clinical pathways [ 29 ], fewer hospital visits and admissions [ 44 ] and a reduction in the number of patients who failed to attend appointments [ 35 ]. Additional positive outcomes such as, patient satisfaction were either shown or perceived to be possible [ 33 , 43 ].

From the 24 included studies authors’ main reasons for choosing a ‘co’approach were: 1. Bringing people together. 2. valuing all knowledge. 3. To produce more relevant research products. 4. To improve health outcomes. These were achieved through several mechanisms, such as identifying and meeting all stakeholders’ needs and enabling trust and confidence in the outputs. However, there was little evidence that these approaches improved health because of the lack of robust evaluation of the interventions produced. Despite this, the findings provide useful insights into how ‘co’approaches might mobilise knowledge in health condition management and they are aligned with the five principles for co-production described by a leading research funder in the UK [ 12 ]. The NIHR [ 12 ] propose the principles of: 1. Sharing power. 2. Including all perspectives and skills. 3. Respecting and valuing all knowledge. 4. Reciprocity and 5. Building and maintaining relationships. Our review builds on these principles by highlighting activities researchers use to achieve them, further key aspects and mechanisms of action, and the relationships between them. For example, sharing of power may be facilitated if the ‘co’approach brings people together as active partners and uses creative activities. Building and maintaining relationships may be promoted by using iterative prototyping techniques. The findings from this review suggest that the process of developing adaptable, visible and tangible outputs helps participants see that their knowledge and ideas have been heard and valued. Participants may have more trust in the process and reciprocity achieved by producing relevant and acceptable outputs that meet everyone’s needs.

Langley et al.’s 2018 ‘collective making’ knowledge mobilisation model [ 70 ] specifically considers the influences of creative practices. The authors propose that their ‘collective making’ ‘co’approach influences the participants involved, the knowledge being mobilised and implementation in a number of ways [ 70 ] similar to the findings in this review. For example, influencing participants through balancing power and voice and enabling articulation of complex concepts; influencing knowledge through accessing, sharing and valuing different types of knowledge; influencing implementation through creating a sense of ownership and trust in the co-created outputs. Our review complements this model and highlights that some researchers believe similar benefits can be gained without the use of creative activities. This review demonstrates that there is no ‘one size fits all’ approach. All three ‘co’approaches, that is co-production, co-design and co-creation, were used in the studies in this review utilising a variety of activities, from research methods such as interviews and focus groups to workshops using creative activities drawn from design.

Strengths and limitations

This is the first systematic review of ‘co’approaches for knowledge mobilisation for the management of health conditions and included a large number of studies. There were however some limitations. First, there was a lack of studies that had formally evaluated the outputs of their ‘co’approach. A review focused explicitly on the effectiveness of interventions for knowledge mobilisation might have identified more relevant literature than our review. Second, the inclusion/exclusion criteria may have excluded some studies. For example, some collaborative and participatory research that could be deemed to sit under the co-production umbrella, such as studies using an IKT approach, were not included because they did not explicitly describe their approach as co-production, co-design or co-creation. The focus of this systematic review was on these three commonly used terms specifically and knowledge mobilsation. Therefore on reflection, we think that this exclusion criterion was necessary in order to make some sense of this diverse and complex field. Third, the elasticity of the term knowledge mobilisation in the healthcare literature meant the inclusion criteria for this term was broader and encompassed other terms such as knowledge exchange and evidence into practice. This meant that there was room for interpretation by the reviewers which may have led to reviewer bias. Fourth, the lack of use of MeSH terms may have reduced the number of search results meaning some potentially relevant papers may have been missed. Finally, the lead reviewer conducted the majority of the screening process and was the author or co-author of some of the included papers. The bias of the first author was minimised to some degree by working closely with a second reviewer and discussions with other authors of the review.

Conclusions and Implications for future research

This systematic review suggests that ‘co’approaches show promise in achieving successful knowledge mobilisation to improve the way health conditions are managed. However, the findings relied heavily on authors’ beliefs, with only some supporting evidence for short term outcomes such as producing acceptable outputs. There is a need for robust evaluation to ascertain the extent to which ‘co’approaches can produce improved health outcomes. A systematic review that evaluates outputs from ‘co’approaches versus those produced using alternative approaches in a diverse range of settings is recommended to assess whether the former are more likely to achieve knowledge mobilisation and improved outcomes.

Finally, undertaking research using ‘co’approaches is no easy task and it is a common criticism within the literature that authors rarely report their activities in detail nor the steps they have taken to adapt their methods to align with the key principles of ‘co’approaches [ 13 ]. The themes diagram in this review is a form of logic model [ 71 ] displaying the pathways through which ‘co’approaches might achieve desired outcomes. This could be used as a framework to help people using ‘co’approaches align their chosen activities to the key aspects and mechanisms, as identified within this review, and the principles of ‘co’approaches articulated elsewhere [ 12 , 70 ]. This will aid transparency in reporting and potentially improve an intervention’s chance of achieving successful knowledge mobilisation.

Availability of data and materials

The datasets used and/or analysed during the current study are available from the corresponding author on reasonable request.

Melville-Richards L, Rycroft-Malone J, Burton C, Wilkinson J. Making authentic: exploring boundary objects and bricolage in knowledge mobilisation through National Health Service-university partnerships. Evidence and Policy. 2019;2:1–23.

Google Scholar  

Powell A, Davies H, Nutley S. Missing in action? The role of the knowledge mobilisation literature in developing knowledge mobilisation practices. Evidence and Policy. 2017;13(2):201–23.

Article   Google Scholar  

Ward V. Why, whose, what and how? A framework for knowledge mobilisers. Evidence and Policy. 2017;13(3):477–97.

Ferlie E, Crilly T, Jashapara A, Peckham A. Knowledge mobilisation in healthcare: A critical review of health sector and generic management literature. Soc Sci Med. 2012;74:1297–304.

Article   PubMed   Google Scholar  

Powell A, Davies HTO, Nutley SM. Facing the challenges of research-informed knowledge mobilization: ‘Practising what we preach’? Public Adm. 2018;96(1):36–52.

National Institute of Health Research. https://www.nihr.ac.uk/about-us/glossary.htm?letter=K&postcategory=-1 . Accessed 2020 Mar 31.

Locock L, Boaz A. Drawing straight lines along blurred boundaries: qualitative research, patient and public involvement in medical research, co-production and co-design. Evidence and Policy. 2019;15(3):409–21.

Greenhalgh T, Jackson C, Shaw S, Janamian T. Achieving Research Impact Through Co-creation in Community-Based Health Services: Literature Review and Case Study. Milbank Q. 2016;94(2):392–429.

Article   PubMed   PubMed Central   Google Scholar  

Brand S, Timmons S. Knowledge sharing to support long-term condition self-management—Patient and health-care professional perspectives. Health Expect. 2021;24:628–37.

Farr M. Critical Social Policy Power dynamics and collaborative mechanisms in co-production and co-design processes. Critical Soc ialPolicy. 2018;38(4):623–44.

Cowdell F, Dyson J, Sykes M, Dam A, Pendleton R. How and how well have older people been engaged in healthcare intervention design, development or delivery using co-methodologies: A scoping review with narrative summary. Health Soc Care Community. 2020;00:1–23.

NIHR INVOLVE. Guidance on co-producing a research project. 2019.

Williams O, Sarre S, Papoulias SC, Knowles S, Robert G, Beresford P, et al. Lost in the shadows: reflections on the dark side of co-production. Health Research Policy and Systems. 2020;18(1):43.

O’Cathain A, Croot L, Sworn K, Duncan E, Rousseau N, Turner K, et al. Taxonomy of approaches to developing interventions to improve health: a systematic methods overview. Pilot Feasibility Studies. 2019;5(1):41.

Pearce T, Maple M, Shakeshaft A, Wayland S, McKay K. What is the co-creation of new knowledge? A content analysis and proposed definition for health interventions. International Jourmal of Environmental Research and Public Health. 2020;17(7):1–18.

CAS   Google Scholar  

Slattery P, Saeri AK, Bragge P. Research co-design in health: a rapid overview of reviews. Health Res Policy Syst. 2020;18(17). https://doi.org/10.1186/s12961-020-0528-9 .

Clarke D, Jones F, Harris R, Robert G. What outcomes are associated with developing and implementing co-produced interventions in acute healthcare settings? A rapid evidence synthesis. BMJ Open. 2017;7:e014650. https://doi.org/10.1136/bmjopen-2016-014650 .

Pluye P, Nha HQ. Combining the Power of Stories and the Power of Numbers: Mixed Methods Research and Mixed Studies Reviews. Annu Rev Public Heal. 2014;35:29–45.

Page MJ, Mckenzie JE, Bossuyt PM, Boutron I, Hoffmann TC, Mulrow CD, et al. The PRISMA 2020 statement: an updated guideline for reporting systematic reviews. BMJ. 2021;372:n160.

Higgins JPT., Thomas J., Chandler J., Cumpston M., Li T., Page MJ. Welch VA, editor. Cochrane handbook for systematic reviews of interventions [Internet]. 2nd ed. Chichester, UK: Wiley Blackwell; 2019. Accessed 2013 Mar 27. Available from: http://www.cochrane.org/handbook/how-cite-version-handbook .

Booth A, Sutton A, Papaioanna D. Systematic Approaches to a successful literaure review. London: SAGE Publications Ltd; 2012.

Moher D, Liberati A, Tetzlaff J, Altman DG. Preferred Reporting Items for Systematic Reviews and Meta-Analyses: The PRISMA Statement. J Clin Epidemiol. 2009;62(10):1006–12.

Aromataris E, Munn Z, editor. Joanna Briggs Institute Reviewer ’ s Manual. The Joanna Briggs Institute. 2017. Available from: https://reviewersmanual.joannabriggs.org/

Swaithes L, Paskins Z, Dziedzic K, Finney A. Factors influencing the implementation of evidence-based guidelines for osteoarthritis in primary care: a systematic review and thematic synthesis. Musculoskeletal Care. 2020;18(2):101–10. https://doi.org/10.1002/msc.1452 . Epub 2020 Jan 30. PMID: 31997576.

Thomas J, Harden A. Methods for the thematic synthesis of qualitative research in systematic reviews. BMC Med Res Methodol. 2008;8(45). https://doi.org/10.1186/1471-2288-8-45 .

Hong Q.N, Pluye P, Bujold M, Wassef M. Convergent and sequential synthesis designs: implications for conducting and reporting systematic reviews of qualitative and quantitative evidence. Syst Rev. 2017;6(61). https://doi.org/10.1186/s13643-017-0454-2 .

Cowdell F, Ahmed T, Layfield C. Knowledge mobilisation: a UK co-creation study to devise strategies to amend lay and practitioner atopic eczema mindlines to improve consultation experiences and self-management practices in primary care. BMJ Open. 2020;10:36520.

Grindell C, Tod A, Bec R, Wolstenholme D, Bhatnagar R, Sivakumar P, et al. Using creative co-design to develop a decision support tool for people with malignant pleural effusion. BMC Med Inform Decis Mak. 2020;20(1)179. https://doi.org/10.1186/s12911-020-01200-3 .

Heaton J, Day J, Britten N, h J, D J, Heaton J, et al. Collaborative research and the co-production of knowledge for practice: an illustrative case study. Implementation Science. 2016;11(1):20.

Knowles S, Hays R, Senra H, Bower P, Locock L, Protheroe J, et al. Empowering people to help speak up about safety in primary care: Using codesign to involve patients and professionals in developing new interventions for patients with multimorbidity. Health Expect. 2018;21:539–48.

Law RJ, Williams L, Langley J, Burton C, Hall B, Hiscock J, Morrison V, Lemmey A, Partridge R, Lovell-Smith C, Gallanders J, Williams N. ‘Function First - Be Active, Stay Independent’ - Promoting physical activity and physical function in people with long-term conditions by primary care: A protocol for a realist synthesis with embedded co-production and co-design. BMJ Open. 2020;10(2): e035686.

Lewando Hundt G, Stuttaford MC, Bryanston C, Harrison C. “Research Usually Sits on Shelves, Through the Play It Was Shared.” Co-producing Knowledge Through Post-show Discussions of Research-Based Theatre. Front Sociol. 2019;4. https://doi.org/10.3389/fsoc.2019.00048 .

Reeve J, Cooper L, Harrington S, Rosbottom P, Watkins J. Developing, delivering and evaluating primary mental health care: The co-production of a new complex intervention. BMC Health Serv Res. 2016;16(1):470.

Wolstenholme D Grindell C, Tod A Bec R. Translating Knowledge into Action Report 2019. Using creative methods to co-design better healthcare experiences. Available from: https://elements.shu.ac.uk/viewobject.html?id=150861&cid=1

Wolstenholme D, Poll R, Tod A. Innovating access to the nurse-led hepatitis C clinic using co-production. J Res Nurs. 2020;25(3):211–24.

Dent E, Hoon E, Kitson A, Newburry J, Harvey G, Gill TK, Belby J. Translating a health service intervention into a rural setting: lessons learned. BMC Health Services Research. 2016;16:62.

Livings R, Naylor JM, Gibson K, Dennis S, Thom J, Mills K, Schabrun SM. Implementation of a community-based, physiotherapy-led, multidisciplinary model of care for the management of knee osteoarthritis: Protocol for a feasibility study. BMJ Open. 2020;10(7):1–8.

Milton cA, Hambleton A, Dowling M, Roberts AE, Davenport T, Hickie I. Technology-enabled reform in a nontraditional mental health service for eating disorders: participatory design study. J Med Internet Res. 2021;23(2):e19532.

Ospina-Pinillos L, Davenport T, Diaz AM, Navarro-Mancilla A, Scott EM, Hickie IB. Using participatory design methodologies to co-design and culturally adapt the Spanish version of the mental health eClinic: Qualitative study. J Med Internet Res. 2019;21(8):1–20.

Ospina-Pinillos L, Davenport TA, Navarro-Mancilla AA, Cheng VWS, Alarcón ACC, Rangel AM, et al. Involving End Users in Adapting a Spanish Version of a Web-Based Mental Health Clinic for Young People in Colombia: Exploratory Study Using Participatory Design Methodologies. JMIR Mental Health. 2020;7(2): e15914.

Ospina-Pinillos L, Davenport TA, Ricci CS, Milton AC, Scott EM, Hickie IB, et al. Developing a Mental Health eClinic to Improve Access to and Quality of Mental Health Care for Young People: Using Participatory Design as Research Methodologies. J Med Internet Res. 2018;20(5): e188.

Yeganeh L, Johnston-Ataata K, Vincent AJ, Flore J, Kokanović R, Teede H, et al. Co-designing an Early Menopause Digital Resource: Model for Interdisciplinary Knowledge Translation. Seminars in Reproductive Medcine. 2021. Available from: http://www.thieme-connect.de/DOI/DOI?10.1055/s-0041-1726273 .

Fonseka TM, Pong JT, Kcomt BScPhm A, Kennedy SH, Parikh S V., Sagar Parikh C V, et al. Collaborating with individuals with lived experience to adapt CANMAT clinical depression guidelines into a patient treatment guide: The CHOICE-D co-design process. J Eval Clin Pract. 2019;26(4):1–11.

Kothari A, McCutcheon C, Graham I, editors. How We Work Together: The Integrated Knowledge Translation Casebook. Volume 1. Vol. 1. Ottawa; 2019. Available from: https://ktpathways.ca/resources/how-we-work-together-integrated-knowledge-translation-research-network-casebook

Kothari A, Mccutcheon C, Boland L, Graham, editors. How We Work Together. The Integrated Knowledge Translation Network Casebook. No.3. 2020. Available from: https://ktpathways.ca/resources/how-we-work-together-integrated-knowledge-translation-research-network-casebook

Miller JL, Teare SR, Marlett N, Shklarov S, Marshall DA. Support for Living a Meaningful Life with Osteoarthritis: A Patient-to-Patient Research Study. Patient. 2016;9(5):457–64.

Thompson AP, MacDonald SE, Wine E, Scott SD. An Evaluation of Parents’ Experiences of Patient Engagement in Research to Develop a Digital Knowledge Translation Tool: Protocol for a Multi-Method Study. JMIR Research Protocols. 2020;9(8): e19108.

Revenäs Å, Hvitfeldt Forsberg H, Granström E, Wannheden C. Co-Designing an eHealth Service for the Co-Care of Parkinson Disease: Explorative Study of Values and Challenges. JMIR Research Protocols. 2018;7(10): e11278.

Wannheden C, Revenäs Å. How people with parkinson’s disease and health care professionals wish to partner in care using ehealth: Co-design study. J Med Internet Res. 2020;22(9):e19195.

Dal Mas F, Biancuzzi H, Massaro M, Miceli L. Adopting a knowledge translation approach in healthcare co-production. A case study. Management Decision. 2020. Available from: https://www.emerald.com/insight/0025-1747.htm

Bryman A. Social Research Methods. 3rd ed. New York: Oxford University Press; 2008.

Liamputtong P. Qualitative Inquiry. In: Handbook of Research Methods in Health Social Sciences. Singapore: Springer; 2019.

Book   Google Scholar  

Maggio LA, Sewell JL, Artino AR. The Literature Review: A Foundation for High-Quality Medical Education Research. J Grad Med Educ. 2016;8(3):297–303.

Jones J, Hunter D. Qualitative Research: Consensus methods for medical and health services research. BMJ. 1995;311(7001):376–80.

Article   CAS   PubMed   PubMed Central   Google Scholar  

Waggoner J, Carline JD, Durning SJ. Is there a consensus on consensus methodology? Descriptions and recommendations for future consensus research. Academic Medcine. 2016;91(5):663–8.

Gallagher M, Hares T, Spencer J, Bradshaw C, Webb I. The nominal group technique: A research tool for general practice? Fam Pract. 1993;10(1):76–81.

Article   CAS   PubMed   Google Scholar  

Kothari A, McCutcheon C, Graham ID, Alvarez G, Beaupre B, Botting I, et al. Defining Integrated Knowledge Translation and Moving Forward: A Response to Recent Commentaries. International Journal of Health Policy Management. 2017;6(5):299.

PubMed   PubMed Central   Google Scholar  

Sanders EBN, Stappers PJ. Probes, toolkits and prototypes: Three approaches to making in codesigning. CoDesign. 2014;10(1):5–14.

LEGO® Serious Play. [accessed 2021 Nov 16]. Available from: https://www.lego.com/en-us/seriousplay

Wengel Y, McIntosh A, Cockburn-Wootten C. A critical consideration of LEGO SERIOUS PLAY methodology for tourism studies. Tourism Geography. 2019;23(2):1–23.

Wikipedia. [accessed 2021 Nov 16]. Available from: https://en.wikipedia.org/wiki/Sketch_(drawing )

Mitchell C, Theron L, Stuart J, Smith A, Campbell Z. Drawings as research method. In: Theron L, Mitchell C, Smith A, Stuart J, editors. Picturing research. Drawings as visual methodology. Rotterdam; 2011. p. 19–36. https://doi.org/10.1007/978-94-6091-596-3_2 .

Sanders EBN, Stappers PJ. Convivial toolbox. Generative research for the front end of design. Amsterdam: BIS Publishers; 2012.

Stickdorn M, Sneider J, editors. This Is Service Design Thinking. Basic- Tools- Cases. Amsterdam: BIS Publishers; 2010.

Hundt GL, Bryanston C, Lowe P, Cross S, Sandall J, Spencer K. Inside, “Inside View”: Reflections on stimulating debate and engagement through a multimedia live theatre production on the dilemmas and issues of pre-natal screening policy and practice. Health Expect. 2011;14(1):1–9.

Collins Dictionary. Available from: https://www.collinsdictionary.com/dictionary/english/blue-sky-thinking

Locock L, Kirkpatrick S, Brading L, Sturmey G, Cornwell J, Churchill N, et al. Involving service users in the qualitative analysis of patient narratives to support healthcare quality improvement. Res Involv Engagem. 2019;5(1). https://doi.org/10.1186/s40900-018-0133-z .

Jungk R, Mullert N. Future workshops : how to create desirable futures. London: Institute for Social Inventions; 1987. p. 126.

Dipex International. [acessed 2021 Aug 1]. Available from: https://dipexinternational.org/

Langley J, Wolstenholme D, Cooke J. “Collective making” as knowledge mobilisation: the contribution of participatory design in the co-creation of knowledge in healthcare. BMC Health Serv Res. 2018;18(1):585.

Mills T, Lawton R, Sheard L. Advancing complexity science in healthcare research: the logic of logic models. BMC Med Res Methodol. 2019;19:55.

Download references

Acknowledgements

The authors would like to thank Angie Rees information specialist at The University of Sheffield for her assistance in developing the search strategy and conducting the literature searches for this systematic review. Also Chris Redford design researcher at Lab4Living, Sheffield Hallam University for his help with figure 2 . Rights of retention statement: For the purpose of open access, the author has applied a Creative Commons Attribution (CC BY) licence to any Author Accepted Manuscript version arising"

This systematic review was completed as part of a University of Sheffield faculty of Medicine, Dentistry & Health, University Post Graduate Research Committee (UPGRC) Scholarship and publication funded by the University of Sheffield Institutional Open Access Fund. 

Author information

Authors and affiliations.

Health and Care Research Unit, School of Health and Related Research (ScHARR), The University of Sheffield, Sheffield, UK

Cheryl Grindell, Liz Croot & Alicia O’Cathain

Clinical Trials Research Unit, School of Health and Related Research (ScHARR), The University of Sheffield, Sheffield, UK

Elizabeth Coates

You can also search for this author in PubMed   Google Scholar

Contributions

Conceptualization: CG, AOC, LC; Review methodology: CG, AOC, LC; Search strategies: CG with review by AOC, LC; Eligibility criteria: CG, AOC, LC; Article screening: CG, EC; Pilot extraction: CG, EC; Data extraction: CG, EC; thematic synthesis: CG with review and refinement by AOC, LC, EC; Writing-original draft preparation: CG, AOC, LC. Writing-review and editing: CG, AOC, LC, EC. All authors read and approved the final manuscript.

Corresponding author

Correspondence to Cheryl Grindell .

Ethics declarations

Ethics approval and consent to participate, consent for publication, competing interests.

The authors declare that they have no competing interest.

Additional information

Publisher's note.

Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Supplementary Information

Additional file 1., rights and permissions.

Open Access This article is licensed under a Creative Commons Attribution 4.0 International License, which permits use, sharing, adaptation, distribution and reproduction in any medium or format, as long as you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons licence, and indicate if changes were made. The images or other third party material in this article are included in the article's Creative Commons licence, unless indicated otherwise in a credit line to the material. If material is not included in the article's Creative Commons licence and your intended use is not permitted by statutory regulation or exceeds the permitted use, you will need to obtain permission directly from the copyright holder. To view a copy of this licence, visit http://creativecommons.org/licenses/by/4.0/ . The Creative Commons Public Domain Dedication waiver ( http://creativecommons.org/publicdomain/zero/1.0/ ) applies to the data made available in this article, unless otherwise stated in a credit line to the data.

Reprints and permissions

About this article

Cite this article.

Grindell, C., Coates, E., Croot, L. et al. The use of co-production, co-design and co-creation to mobilise knowledge in the management of health conditions: a systematic review. BMC Health Serv Res 22 , 877 (2022). https://doi.org/10.1186/s12913-022-08079-y

Download citation

Received : 13 January 2022

Accepted : 12 May 2022

Published : 07 July 2022

DOI : https://doi.org/10.1186/s12913-022-08079-y

Share this article

Anyone you share the following link with will be able to read this content:

Sorry, a shareable link is not currently available for this article.

Provided by the Springer Nature SharedIt content-sharing initiative

• Co-production
• Co-creation
• ‘Co’approaches
• Knowledge mobilisation

BMC Health Services Research

ISSN: 1472-6963

• General enquiries: [email protected]