case study of website design

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.

Get the Creative Bloq Newsletter

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

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

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

Discover Case study websites built by the Webflow community

• Marketplace
• Hire designers
• Become an Affiliate
• Terms of Service
• Privacy policy
• Cookie policy
• Cookie preferences

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.

Pacific Public Health Foundation

PPHF’s resource and campaign content had become difficult to navigate. They needed a full website redesign to improve site architecture and content discoverability – and on a short timeline.

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.

Learn How People Design Digital Products

Get curated UX case studies in your inbox bi-weekly. Trusted by designers from companies like Apple, Google and Spotify. It's 100% free.

Get curated UX case studies in your inbox weekly. Trusted by designers from companies like Apple, Google and Spotify. It's 100% free.

Inside Ueno Agency Case Study Process

Best of 2018, ux design case studies.

Celebrating Designers Openly Sharing Their Process.

Adapting an Outcome-Centric Mindset

Stop Trying to Fit in With Your Portfolio

Latest ux case studies, how spotify organises work.

Spotify recently adopted Figma as their main design and prototyping tool. In this case study they openly share their reasoning behind it, how they went about it (including challenges), and their experience from the entire switch.

Designing a video creation platform

Sascha, currently a design lead at Any.Do, shares his process for designing a video creation platform for Promo.com. Also worth checking out his other case studies, which include a VR Gallery for Daydream app.

Applying user research to a small e-commerce website

Because of the situation we're in, e-commerce is booming right now, and I thought it might be useful to cover ta few case studies on the subject. In this one, Tiago shares his initial process for redesigning an e-commerce site for a small Portuguese shirt tailor. Although the case study is a few years old, his methods are evergreen and to the point.

The Current State of Checkout UX

During Baymard's 9 years of large-scale checkout usability testing, they have consistently found the checkout design and flow to frequently be the sole cause for users abandoning their cart during the checkout flow. In this report, Baymard shares all their research findings and 18 common pitfalls to avoid in the UX of checkout.

Democratizing access to bike maps

Cristiano shares his process for designing an open platform to democratize access to bike maps of Brazilian cities.

Grab your .design domain name (before it's gone)

20 Questions UX Designers Should Prep Before a Job Interview

21 inspiring ux designer resumes and why they work.

Top 20 UX Designer Portfolio Websites in 2020

Solutions to google design exercise; pet adoption.

Curated UX design case studies. Delivered to 28.000+ members.

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 .

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

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
• Template Lists
• Graphic Design
• Graphs and Charts
• Data Visualization
• Human Resources
• 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]

11 Inspiring UX Case Studies That Every Designer Should Study

A UX case study is a sort of detailed overview of a designer's work. They are often part of a UX designer's portfolio and showcase the designer's skill in managing tasks and problems. From a recruiter's perspective, such a UX portfolio shows the skill, insights, knowledge, and talent of the designer.

Therefore, UX case studies play an important role in the recruitment and demand for designers.

What Makes a Powerful Case Study

Building a UX case study includes showing the design process through compelling stories. They will use plain language to demonstrate how they handled key design issues, offering a comprehensive view of their process. Well done case studies often include:

• A  problem statement and solutions with real applications.
• Relevant numbers, data, or testimonials to demonstrate the work and efforts.
• A story that directly connects the problem to the solution.

Any competent UX professional will know that creating a stunning UX case study is about the little details.

11 Best UX Case Studies for Designers

The best way to understand what a good case study looks like is to go over other examples. Each of these UX case study examples shows a designer's insights, basic skills, and other designers' lessons learned through their experience.

1. Promo.com web editor

For this video-creation platform , UX designer Sascha was brought on to revamp v2.0, adding new features that could work alongside the existing UX design. The point was to work on interface details that would help create a user friendly platform, and that users could find simple enough to use.

User personas mapped by the UX designer revealed the most common confusion to be the process of inserting particular features into the video, such as subtitles. The designer's goal, therefore, was to create a platform with improved editor controls.

The designer then used a common text-editor layout to include top and side navigation bars that made it easy to access and implement text editing.

Key Learnings from Promo.com

This case study focuses on addressing a particular problem that customers were currently facing. Its main theme is to show a problem, and how the product designer addressed this problem. Its strength points include:

• clearly highlighting the problem (i.e. inaccessible and limited video-text editor options)
• conduction research to understand the nature of the problem and the kind of solutions customers want
• implementing research insights into the redesign to create a platform that actively served customer needs

2. Productivity tracker app

The main concept behind this UX case study is to address a pre-existing problem through the design of the app. Immediately from the start, the study highlights a common pain point among users: that of a lack of productivity due to device usage.

This UX case study example addressed some of the main problems within existing productivity apps included:a poor UI and UX that made navigation difficult

• a poorly-built information architecture
• limited functions on the mobile application

Key Learnings from the Productivity app case study

The case study highlights the simple design process that was then used to build the app. Wireframes were created, a moldboard developed, and finally, individual pages of the app were designed in line with the initial goals.

3. Postmates Unlimited

This case study clearly identifies the improvements made to the Postmates app in a simple overview before jumping into greater detail. The redesign goal, which it achieved, was to improve the experience and other interface details of the app.

The problems identified included:

• usability that led to high support ticket volume.
• technical app infrastructure issues that prevented scalability.
• lack of efficient product management, such as batching orders.

A UX research course can help understand the kind of research needed for a case study. The app redesign involved bringing couriers in and running usability testing on improvements. The final model, therefore, had input from real users on what worked and what caused issues.

Key Learnings from Postmates

The Postmates redesign works as a great UX case study for the simple way it approaches problem-solving. Following an overview of the work, it addresses the problems faced by users of the app. It then establishes research processes and highlights how changes were made to reduce these issues.

4. TV Guide

Addressing the fragmentation of content across channels, this case study sought to redesign how people consume media. The key problems identified included:

• the overabundance of content across various TV and streaming platforms
• the difficulty in discovering and managing content across all platforms

To deliver on the key goals of content personalization, smart recommendations, and offering cross-platform content search, the design process included conducting interviews, surveys, and checking customer reviews.

The design of TV Guide enables users to get custom recommendations sourced from friends' and family's watchlists.

Key Learnings from TV Guide

Like previous UX design case studies, this one tackled the issue head-on. Describing the research process, it goes into detail regarding the approach used by the UX designers to create the app. It takes readers on a journey, from identifying pain points, to testing solutions, and implementing the final version.

5. The FlexBox Inspector

Designer Victoria discusses how she developed the investigator tool for the Mozilla Firefox browser. Surveys into understanding the problems with the existing CSS Flexbox tool revealed a need for a user-friendly design. Interviews with a senior designer and other designers helped developers understand the features design-focused tools ought to have. A feature analysis revealed what most users look for in such tools.

The final result of the development process was a design that incorporated several new features, including:

• a new layout
• color-coded design
• multiple entry points to make workflow management efficient

Key Learnings from the Flexbox

This UX design case study starts with a clear goal, then addresses multiple user needs. It clearly defines the design process behind each feature developed by the time, and the reasoning for including that feature. To give a complete picture, it also discusses why certain features or processes were excluded.

6. The Current State of Checkouts

This Baymard UX design case study looks into the checkout process in over 70 e-commerce websites. Through competitive analysis, it isolates problem points in the UX design, which, if addressed, could improve the customer's checkout process.

The study found at least 31 common issues that were easily preventable. The study was designed and conducted on a large scale, over 12 years, to incorporate changing design patterns into the review.

Recommendations based on findings include:

• prominent guest checkout option
• simple password requirements
• specific delivery period
• price comparison tool for shipping vs store pickup

Key Learnings from Checkout Case Study

Each identified issue is backed up by data and research to highlight its importance. Further research backs up each recommendation made within the case study, with usability testing to support the idea. As far as UX case studies go, this one provides practical insight into an existing, widely used e-commerce feature, and offers practical solutions.

7. New York Times App

Using a creative illustration website, the designers proposed a landing page feature "Timely" that could counter the problems faced by the NYT app . Its major issues included too much irrelevant content, low usage, and undesirable coverage of content.

The goal behind Timely was to improve user incentives, build long-term loyalty, and encourage reading. Design mapping for the app covered:

• identifying the problem
• understanding audience needs
• creating wireframes
• designing and prototyping

The end result was an app that could help readers get notifications regarding news of interest at convenient moments (at breakfast, before bed). This encouraged interaction and improved readability with short-form articles.

Key Learnings from NYT App

The UX case study proposes a problem solution that works with an existing information architecture, instead adding custom graphics to the mobile app. It leads from a simple problem statement to discuss the project that could address these issues without changing was customers already loved.

UX case studies focused on redesign include the FitBit redesign, which started off by understanding personas and what users expect from a fitness tracker. Developing use cases and personas, Guerilla usability testing was employed to assess pain points.

These pain points were then ranked based on their importance to users and to app performance. They were addressed through:

• Highlighting essential parts and features of the app
• Changing easily missed icons to more recognizable icons
• relabelling tracking options to guide users better to its usage

Key Learnings from Fitbit

While the case study maps user experiences and offers solutions, it does not begin with an intensive research-based approach. The prototype is successful in testing, but problem factors are not identified with research-based statistics, meaning key factors could have been ignored.

9. Rating System UX

The designer behind the rating system UX redesign sought to solve issues with the 5-star rating system. Highlighted issues included:

• the lack of subjective accuracy of a 5-point rating system
• the issue of calculating the average of a zero-star rating
• average ratings are misleading

Better alternatives include:

• 5-star emoticon rating that relates the user experience
• Like/dislike buttons that make approval/disapproval simple

The final design incorporated both these styles to make full use of the rating system.

Key Learnings from Rating System UX

The UX case study stemmed from insight into the limitations of the existing rating system. The new design addressed old issues and incorporated better efficiencies.

The Intuit redesign was focused on making content readable, more engaging, and accessible. Looking into product personalization, the content was found to be lacking aesthetic value, as well as being hard to find. The goal was to create content that was easy to find, clear, and consistent.

The implemented solutions included:

• increased readability with increased body text and header spacing
• table of contents on the sidebar for easier navigation
• visible and prominent search bar
• illustrations and designs for pretty visuals

Key Learnings from Intuit

The Intuit case study approaches the problem from a practical point of view. It begins with isolating problems with the interface, in particular with the content. This is an example of a case study that breaks down problems into broader categories, and solves each problem with a practical solution.

This UX case study about a social platform tackles a commonly-faced problem from existing platforms. It addresses the issue of recognizing non-monetary user engagement, to help creators identify their user base.

The case study addresses the problem statement and establishes the design process (building wireframes and prototypes) as well as conducting user testing. The final result is to develop "Discover" pages, engaging layouts, and animated interactions to increase usability.

Key Learnings from Jambb

The study goes into detail regarding problem identification, then moves on to propose solutions that take into account the perspective of all stakeholders involved. It then explains why each design decision was made, and proves its efficacy through testing and prototyping.

Key Takeaways

Developing good UX case studies examples is as much about the details you include as the ones you leave out. Going over UX courses can give you a better understanding of what your case study should look like. A good case study should provide an overview of the problem, include numbers and statistics, and offer practical solutions that directly address the problem. The above-discussed UX case studies provide a good example of the dos and don'ts of a well-structured UX design case study that should be part of every UX portfolio .

Additional Resources

Check out these resources to learn more about UX case studies:

8 UX Case Studies to Read

UX Design Case Study

Frequently Asked Questions

Upskill your design team effectively.

Equip your design team with the best-in-class design training that sticks.

Do you know your design team skill level? Send them this quick test & see where their skills stand among 300K+ designers worldwide.

Level up your design career

Get step-by-step guide how to build or advance your UX design career.

Do you know your design skills level? Take a quick test & see where you stand among 300K+ designers worldwide.

Continue reading

The impact of ux design on application success: exploring costs and trends, 7 top ux careers & specialisations: skills, paths & opportunities, 15 figma plugins to boost your design workflow, cookie settings 🍪.

• Interactive UX learning for all levels
• 20+ UX courses and career paths
• Personalized learning & practice

Design-first companies are training their design teams. Are you?

• Measure & identify team skill gaps
• Tailor learning for your team’s needs
• Unlock extensive learning library
• Visualize team growth over time
• Retain your designers

• Content Marketing

How to write a case study for your website

Published on: 11 May 2020

Last modified on: 24 April 2023

Team Hallam

Case studies are an essential part of any business’ marketing collateral. But creating a really good one takes more than just putting pen to paper and hoping for the best. Learn why they are important, and how to write a case study for your website that not only packs a punch, but drives results.

What is a case study? 

A case study is a way of demonstrating how your business’s helped a person or client overcome a particular challenge. It clearly lays out how your products or services were used to solve a problem, and the results.  It’s important to note that a case study isn’t a press release or a sales pitch (at least, not directly), it’s about showcasing your work and framing it in the context of helping others. In short, it’s not about you, but your customer. 

Why are case studies important? 

Case studies can often get overlooked when it comes to producing marketing material. After all, they’re not exactly the most glamorous form of content to produce, and blog posts can seem more appealing. So why invest in case studies at all? Haven’t we moved on to other things?  The truth is that case studies are, and continue to be, incredibly effective. They help to attract new customers, cement trust and increase conversions.  It’s the storytelling nature of the format that boosts its effectiveness, and that’s what case studies allow you to do – tell a story about your brand and how you’ve helped others. The story you draft paints a picture, stimulates emotions, and gives your business greater selling power. Storytelling, by using your customer’s voice in a data-backed piece, is an invaluable sales tool – and that’s why case studies continue to work so well. 

What makes a good case study? 

There are a number of things a good case study should include. Here are the core things you should consider when you are preparing to write a case study for your website, and you can use these as a sort of checklist when creating your draft.

A compelling subject matter 

Not every piece of work is worthy of a case study. Choose your best projects and accomplishments, where the client has been happy with what’s been achieved and you have clear results to show for it.  It doesn’t matter the size or scope of the work, either. It could have been a one-off, short campaign or a full website redesign over the course of several months. What matters is the impact you had.  And then it needs a good angle. Is there anything particularly different or unique about the problem you’ve solved? Anything different that you did as a business? Don’t use details that don’t support the purpose, but think about just why it was so successful. 

Industry-specific

Demonstrable problem-solving

Case studies are solution-centric, so you need to show yours at work. An effective one will clearly demonstrate how you took a problem and solved it using your expertise, products or services. There needs to be a before and after – a story.  

Solid evidence 

Quotes and testimonials 

Presented well 

Last but by no means least, your case study needs to presented in an engaging, easily digestible way.  This includes good formatting and a clear structure (which we’ll get to in a moment) but also the visual elements to it. You may want to enlist the help of a designer to really present it in the most user-friendly way. Depending on time and budget, you could even create a short video to help illustrate the story.  Of course, all the usual things for writing for the web still apply: headings and subheading, bullet points and lists should all be included. Make it as easy as possible for the scanners and skimmers out there to read and engage with it. 

How to write your case study

As we said previously, it’s not simply a case of putting pen to paper. The key to writing a successful case study is nailing its structure. It has to read well, and it has to tell that all-important story that captures your audience.  Thankfully, there’s a tried-and-tested method of doing this which we adhere to. To help your writing flow nicely, we recommend structuring it into the following sections:

1. The headline 

2. The client

Open with a short introduction to the client – who they are, their background and industry. You can base it on what they say on their company website or LinkedIn profile.

3. The challenge

Explain over a paragraph or two the challenges your client was facing and wanting to overcome. There could be just one, or a few different pain points. 

4. The solution (and your approach to it) 

Now for what you actually did. Talk about how your products or services helped solve that problem. Get into the specifics, and also explain your thinking and decision-making throughout the process.

5. The results

This is where you lay out It’s always better to use real numbers, not just vague statements like ‘more than doubled their traffic’. Really hammer it home by pulling out the big guns!

6. The testimonial 

Finish up with a quote from your customer, ideally stating how their business has been improved or how happy they are with the service received. It doesn’t need to be lengthy, but it should be genuine. And be sure to use their own words, rather than trying to make it sound typically corporate. 

Case studies: your next steps

So there you have it – our complete guide on how to write a case study for your website that captures your audience and hopefully converts them. Of course, no two case studies are ever the same (and nor should they be), but if you stick to a structure you can  Above all, the three fundamental elements are:

• What was the problem?
• What solution did you provide?
• What proven results can you showcase?

Have you just learned something new?

Then join the 80,000 people who read our expert articles every month.

• First name *
• Last name *
• Email address *

By signing up to this form I agree, that Hallam may store my data and may contact me using the email address I have provided with promotional emails about products, special offers, and other information which may be of interest. Please also read our privacy policy . You can revoke your consent at any time

• Name This field is for validation purposes and should be left unchanged.

Get content like this in your inbox, weekly.

More trending content.

How to write great blog posts that engage readers and drive traffic

Email Marketing

How to write killer marketing emails

Business growth

Marketing tips

16 case study examples (+ 3 templates to make your own)

I like to think of case studies as a business's version of a resume. It highlights what the business can do, lends credibility to its offer, and contains only the positive bullet points that paint it in the best light possible.

Imagine if the guy running your favorite taco truck followed you home so that he could "really dig into how that burrito changed your life." I see the value in the practice. People naturally prefer a tried-and-true burrito just as they prefer tried-and-true products or services.

To help you showcase your success and flesh out your burrito questionnaire, I've put together some case study examples and key takeaways.

What is a case study?

A case study is an in-depth analysis of how your business, product, or service has helped past clients. It can be a document, a webpage, or a slide deck that showcases measurable, real-life results.

For example, if you're a SaaS company, you can analyze your customers' results after a few months of using your product to measure its effectiveness. You can then turn this analysis into a case study that further proves to potential customers what your product can do and how it can help them overcome their challenges.

It changes the narrative from "I promise that we can do X and Y for you" to "Here's what we've done for businesses like yours, and we can do it for you, too."

16 case study examples 

While most case studies follow the same structure, quite a few try to break the mold and create something unique. Some businesses lean heavily on design and presentation, while others pursue a detailed, stat-oriented approach. Some businesses try to mix both.

There's no set formula to follow, but I've found that the best case studies utilize impactful design to engage readers and leverage statistics and case details to drive the point home. A case study typically highlights the companies, the challenges, the solution, and the results. The examples below will help inspire you to do it, too.

1. .css-1l9i3yq-Link[class][class][class][class][class]{all:unset;box-sizing:border-box;-webkit-text-fill-color:currentColor;cursor:pointer;}.css-1l9i3yq-Link[class][class][class][class][class]{all:unset;box-sizing:border-box;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;outline-offset:1px;-webkit-text-fill-color:currentColor;outline:1px solid transparent;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='ocean']{color:#3d4592;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='ocean']:hover{color:#2b2358;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='ocean']:focus{color:#3d4592;outline-color:#3d4592;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='white']{color:#fffdf9;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='white']:hover{color:#a8a5a0;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='white']:focus{color:#fffdf9;outline-color:#fffdf9;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='primary']{color:#3d4592;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='primary']:hover{color:#2b2358;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='primary']:focus{color:#3d4592;outline-color:#3d4592;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='secondary']{color:#fffdf9;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='secondary']:hover{color:#a8a5a0;}.css-1l9i3yq-Link[class][class][class][class][class][data-color='secondary']:focus{color:#fffdf9;outline-color:#fffdf9;}.css-1l9i3yq-Link[class][class][class][class][class][data-weight='inherit']{font-weight:inherit;}.css-1l9i3yq-Link[class][class][class][class][class][data-weight='normal']{font-weight:400;}.css-1l9i3yq-Link[class][class][class][class][class][data-weight='bold']{font-weight:700;} Volcanica Coffee and AdRoll

People love a good farm-to-table coffee story, and boy am I one of them. But I've shared this case study with you for more reasons than my love of coffee. I enjoyed this study because it was written as though it was a letter.

In this case study, the founder of Volcanica Coffee talks about the journey from founding the company to personally struggling with learning and applying digital marketing to finding and enlisting AdRoll's services.

It felt more authentic, less about AdRoll showcasing their worth and more like a testimonial from a grateful and appreciative client. After the story, the case study wraps up with successes, milestones, and achievements. Note that quite a few percentages are prominently displayed at the top, providing supporting evidence that backs up an inspiring story.

Takeaway: Highlight your goals and measurable results to draw the reader in and provide concise, easily digestible information.

2. Taylor Guitars and Airtable

This Airtable case study on Taylor Guitars comes as close as one can to an optimal structure. It features a video that represents the artistic nature of the client, highlighting key achievements and dissecting each element of Airtable's influence.

It also supplements each section with a testimonial or quote from the client, using their insights as a catalyst for the case study's narrative. For example, the case study quotes the social media manager and project manager's insights regarding team-wide communication and access before explaining in greater detail.

Takeaway: Highlight pain points your business solves for its client, and explore that influence in greater detail.

3. EndeavourX and Figma

My favorite part of Figma's case study is highlighting why EndeavourX chose its solution. You'll notice an entire section on what Figma does for teams and then specifically for EndeavourX.

It also places a heavy emphasis on numbers and stats. The study, as brief as it is, still manages to pack in a lot of compelling statistics about what's possible with Figma.

Takeaway: Showcase the "how" and "why" of your product's differentiators and how they benefit your customers.

4. ActiveCampaign and Zapier

Zapier's case study leans heavily on design, using graphics to present statistics and goals in a manner that not only remains consistent with the branding but also actively pushes it forward, drawing users' eyes to the information most important to them. 

The graphics, emphasis on branding elements, and cause/effect style tell the story without requiring long, drawn-out copy that risks boring readers. Instead, the cause and effect are concisely portrayed alongside the client company's information for a brief and easily scannable case study.

Takeaway: Lean on design to call attention to the most important elements of your case study, and make sure it stays consistent with your branding.

5. Ironclad and OpenAI

In true OpenAI fashion, this case study is a block of text. There's a distinct lack of imagery, but the study features a narrated video walking readers through the product.

The lack of imagery and color may not be the most inviting, but utilizing video format is commendable. It helps thoroughly communicate how OpenAI supported Ironclad in a way that allows the user to sit back, relax, listen, and be impressed. 

Takeaway: Get creative with the media you implement in your case study. Videos can be a very powerful addition when a case study requires more detailed storytelling.

6. Shopify and GitHub

GitHub's case study on Shopify is a light read. It addresses client pain points and discusses the different aspects its product considers and improves for clients. It touches on workflow issues, internal systems, automation, and security. It does a great job of representing what one company can do with GitHub.

To drive the point home, the case study features colorful quote callouts from the Shopify team, sharing their insights and perspectives on the partnership, the key issues, and how they were addressed.

Takeaway: Leverage quotes to boost the authoritativeness and trustworthiness of your case study. 

7 . Audible and Contentful

Contentful's case study on Audible features almost every element a case study should. It includes not one but two videos and clearly outlines the challenge, solution, and outcome before diving deeper into what Contentful did for Audible. The language is simple, and the writing is heavy with quotes and personal insights.

This case study is a uniquely original experience. The fact that the companies in question are perhaps two of the most creative brands out there may be the reason. I expected nothing short of a detailed analysis, a compelling story, and video content. 

Takeaway: Inject some brand voice into the case study, and create assets that tell the story for you.

8 . Zoom and Asana

Asana's case study on Zoom is longer than the average piece and features detailed data on Zoom's growth since 2020. Instead of relying on imagery and graphics, it features several quotes and testimonials. 

It's designed to be direct, informative, and promotional. At some point, the case study reads more like a feature list. There were a few sections that felt a tad too promotional for my liking, but to each their own burrito.

Takeaway: Maintain a balance between promotional and informative. You want to showcase the high-level goals your product helped achieve without losing the reader.

9 . Hickies and Mailchimp

I've always been a fan of Mailchimp's comic-like branding, and this case study does an excellent job of sticking to their tradition of making information easy to understand, casual, and inviting.

It features a short video that briefly covers Hickies as a company and Mailchimp's efforts to serve its needs for customer relationships and education processes. Overall, this case study is a concise overview of the partnership that manages to convey success data and tell a story at the same time. What sets it apart is that it does so in a uniquely colorful and brand-consistent manner.

Takeaway: Be concise to provide as much value in as little text as possible.

10. NVIDIA and Workday

The gaming industry is notoriously difficult to recruit for, as it requires a very specific set of skills and experience. This case study focuses on how Workday was able to help fill that recruitment gap for NVIDIA, one of the biggest names in the gaming world.

Though it doesn't feature videos or graphics, this case study stood out to me in how it structures information like "key products used" to give readers insight into which tools helped achieve these results.

Takeaway: If your company offers multiple products or services, outline exactly which ones were involved in your case study, so readers can assess each tool.

11. KFC and Contentful

I'm personally not a big KFC fan, but that's only because I refuse to eat out of a bucket. My aversion to the bucket format aside, Contentful follows its consistent case study format in this one, outlining challenges, solutions, and outcomes before diving into the nitty-gritty details of the project.

Say what you will about KFC, but their primary product (chicken) does present a unique opportunity for wordplay like "Continuing to march to the beat of a digital-first drum(stick)" or "Delivering deep-fried goodness to every channel."

Takeaway: Inject humor into your case study if there's room for it and if it fits your brand. 

12. Intuit and Twilio

Twilio does an excellent job of delivering achievements at the very beginning of the case study and going into detail in this two-minute read. While there aren't many graphics, the way quotes from the Intuit team are implemented adds a certain flair to the study and breaks up the sections nicely.

It's simple, concise, and manages to fit a lot of information in easily digestible sections.

Takeaway: Make sure each section is long enough to inform but brief enough to avoid boring readers. Break down information for each section, and don't go into so much detail that you lose the reader halfway through.

13. Spotify and Salesforce

Salesforce created a video that accurately summarizes the key points of the case study. Beyond that, the page itself is very light on content, and sections are as short as one paragraph.

I especially like how information is broken down into "What you need to know," "Why it matters," and "What the difference looks like." I'm not ashamed of being spoon-fed information. When it's structured so well and so simply, it makes for an entertaining read.

Takeaway: Invest in videos that capture and promote your partnership with your case study subject. Video content plays a promotional role that extends beyond the case study in social media and marketing initiatives .

14. Benchling and Airtable

Benchling is an impressive entity in its own right. Biotech R&D and health care nuances go right over my head. But the research and digging I've been doing in the name of these burritos (case studies) revealed that these products are immensely complex. 

And that's precisely why this case study deserves a read—it succeeds at explaining a complex project that readers outside the industry wouldn't know much about.

Takeaway: Simplify complex information, and walk readers through the company's operations and how your business helped streamline them.

15. Chipotle and Hubble

The concision of this case study is refreshing. It features two sections—the challenge and the solution—all in 316 words. This goes to show that your case study doesn't necessarily need to be a four-figure investment with video shoots and studio time. 

Sometimes, the message is simple and short enough to convey in a handful of paragraphs.

Takeaway: Consider what you should include instead of what you can include. Assess the time, resources, and effort you're able and willing to invest in a case study, and choose which elements you want to include from there.

16. Hudl and Zapier

I may be biased, but I'm a big fan of seeing metrics and achievements represented in branded graphics. It can be a jarring experience to navigate a website, then visit a case study page and feel as though you've gone to a completely different website.

The Zapier format provides nuggets of high-level insights, milestones, and achievements, as well as the challenge, solution, and results. My favorite part of this case study is how it's supplemented with a blog post detailing how Hudl uses Zapier automation to build a seamless user experience.

The case study is essentially the summary, and the blog article is the detailed analysis that provides context beyond X achievement or Y goal.

Takeaway: Keep your case study concise and informative. Create other resources to provide context under your blog, media or press, and product pages.

3 case study templates

Now that you've had your fill of case studies (if that's possible), I've got just what you need: an infinite number of case studies, which you can create yourself with these case study templates.

Case study template 1

If you've got a quick hit of stats you want to show off, try this template. The opening section gives space for a short summary and three visually appealing stats you can highlight, followed by a headline and body where you can break the case study down more thoroughly. This one's pretty simple, with only sections for solutions and results, but you can easily continue the formatting to add more sections as needed.

Case study template 2

For a case study template with a little more detail, use this one. Opening with a striking cover page for a quick overview, this one goes on to include context, stakeholders, challenges, multiple quote callouts, and quick-hit stats. 

Case study template 3

Whether you want a little structural variation or just like a nice dark green, this template has similar components to the last template but is designed to help tell a story. Move from the client overview through a description of your company before getting to the details of how you fixed said company's problems.

Tips for writing a case study

Examples are all well and good, but you don't learn how to make a burrito just by watching tutorials on YouTube without knowing what any of the ingredients are. You could , but it probably wouldn't be all that good.

Writing a good case study comes down to a mix of creativity, branding, and the capacity to invest in the project. With those details in mind, here are some case study tips to follow:

Have an objective: Define your objective by identifying the challenge, solution, and results. Assess your work with the client and focus on the most prominent wins. You're speaking to multiple businesses and industries through the case study, so make sure you know what you want to say to them.

Focus on persuasive data: Growth percentages and measurable results are your best friends. Extract your most compelling data and highlight it in your case study.

Use eye-grabbing graphics: Branded design goes a long way in accurately representing your brand and retaining readers as they review the study. Leverage unique and eye-catching graphics to keep readers engaged. 

Simplify data presentation: Some industries are more complex than others, and sometimes, data can be difficult to understand at a glance. Make sure you present your data in the simplest way possible. Make it concise, informative, and easy to understand.

Use automation to drive results for your case study

A case study example is a source of inspiration you can leverage to determine how to best position your brand's work. Find your unique angle, and refine it over time to help your business stand out. Ask anyone: the best burrito in town doesn't just appear at the number one spot. They find their angle (usually the house sauce) and leverage it to stand out.

In fact, with the right technology, it can be refined to work better . Explore how Zapier's automation features can help drive results for your case study by making your case study a part of a developed workflow that creates a user journey through your website, your case studies, and into the pipeline.

Case study FAQ

Got your case study template? Great—it's time to gather the team for an awkward semi-vague data collection task. While you do that, here are some case study quick answers for you to skim through while you contemplate what to call your team meeting.

What is an example of a case study?

An example of a case study is when a software company analyzes its results from a client project and creates a webpage, presentation, or document that focuses on high-level results, challenges, and solutions in an attempt to showcase effectiveness and promote the software.

How do you write a case study?

To write a good case study, you should have an objective, identify persuasive and compelling data, leverage graphics, and simplify data. Case studies typically include an analysis of the challenge, solution, and results of the partnership.

What is the format of a case study?

While case studies don't have a set format, they're often portrayed as reports or essays that inform readers about the partnership and its results. 

Related reading:

How Hudl uses automation to create a seamless user experience

How to make your case studies high-stakes—and why it matters

How experts write case studies that convert, not bore

Get productivity tips delivered straight to your inbox

We’ll email you 1-3 times per week—and never share your information.

Hachem Ramki

Hachem is a writer and digital marketer from Montreal. After graduating with a degree in English, Hachem spent seven years traveling around the world before moving to Canada. When he's not writing, he enjoys Basketball, Dungeons and Dragons, and playing music for friends and family.

• Content marketing

Related articles

10 examples of ethos in advertising to inspire your next campaign

10 examples of ethos in advertising to...

17 testimonial advertising examples to inspire your next campaign

17 testimonial advertising examples to...

B2B email marketing: Proven strategies and examples

B2B email marketing: Proven strategies and...

10 social media advertising examples to inspire your next campaign

10 social media advertising examples to...

Improve your productivity automatically. Use Zapier to get your apps working together.

Web Design Case Study: THT. Website Design for Engineering Service

Welcome to take a glance at one of our recent projects, created at the crossroads of the practical and creative, design and engineering. In this case study, we unveil the story of website design for THT, the company making electronics that breathe life into innovative products.

Client and Project

THT is a USA-based team that offers electrical engineering and firmware development and services that span from proof-of-concept prototyping to designs for mass production. As they describe themselves, they are committed to producing reliable technology that performs at the highest standard, with honest, well-organized, clearly documented, and trustworthy work. They back clients who they believe in and whose goals they can achieve.

The THT team approached us with a request for a website design to amplify their online presence, highlight the service’s benefits, tell about the projects that had already been accomplished, and enhance communication with their customers. We also implemented the website on Webflow .

Website Design

The general visual and interaction design for the THT website is based on the following points:

• the solid visual hierarchy that makes the web pages highly scannable and allows website visitors to quickly get into the essence of the service
• simple, elegant, and readable typography corresponding to the theme and not distracting visitors with decorative elements
• the deep dark color palette and the balanced usage of stylish gradients
• well-arranged content, allowing for quick skimming and uniting different sections into the integral user experience
• effective and consistent graphics performance and custom visual elements for the original presentation
• smooth, catchy web motion effects

Altogether, those factors do their best to make the website present the essence and benefits of the service, engage visitors, and create a quick and strong emotional connection.

The typography choice fell on Alliance, the sans serif typeface flexible for various goals and providing good legibility in both short and large texts.

And here’s a glance at the colors used for the website: deep, eye-pleasing, and providing a good background for various visuals and text blocks.

The home page of the website presents an overview of the services the company provides and the portfolio of completed projects. The hero section features a prominent custom illustration our team made to set the topic and activate instant visual connection to the theme of electronics, devices, and digital technologies even before the visitor reads the text. The image is supported with the blog tagline, a short, concise text block unveiling the main idea of the company activity, and a noticeable call-to-action button for those who want to connect the team right from the point.

Scrolling the page down, visitors can learn more about what the company can help with; all the services are well-organized in a clear, digestible list supported with neat line graphics. The following Portfolio section shows the cards with project previews. All preview cards are endowed with special custom illustrations in one style, which helps to reach visual consistency and integrity.

And here’s how web animation helps make the experience even more dynamic and impressive on the home page of the THT website.

This is a glance at the particular project page in the portfolio. It echoes the visual style set on the home page, with neatly arranged, hierarchic text blocks, illustrative and photo content, and supportive line graphics.

And here’s an example of the page presenting the tool dealing with different data. For the design here, we had to consider various types of infographics and stats that would look clear and consistent.

Another interesting design point to mention is the animation of the interactions with the tabs of different projects, imitating a sort of curtain moving up and opening an extensive preview of the project.

In the structure of the company website, a contact page is usually quite simple. Still, it has great importance as it sets the direct communication with the potential customer, so it’s crucial not to overdesign it to make the page fast to load, informative, and functional. That’s also the idea behind the contact page for the THT website: a contact form is added to the page to let the visitor quickly send the message right from there, or they could choose from other convenient methods like writing an email, giving a call, or arranging an online meeting.

All website pages are adapted to the efficient mobile experience to make the design work at its full and let the brand communicate successfully on any device.

After that our team implemented all the design solutions with Webflow, which ensured that designers monitored the slightest details of the development process.

New design case studies from tubik team are coming soon. Stay tuned!

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches to some of the design projects.

Glup. Delivery App Branding and UX Design

Decriminalize Poverty. Storytelling Web Design on Social Issue

MOVA Brewery. Ecommerce Website Design for Beer Producer

HP23. Website and 3D Animation for Prostheses Producer

Magma Math. Web Design for Educational Platform

Nonconventional Show. Website Design for Podcast

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

Crezco. Brand Identity and UI/UX Design for Fintech Service

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

Otozen. Mobile App Design for Safe Driving

Originally written for  Tubik Blog , graphic and video content by  tubik

Want to get emails about new posts?

Check your inbox or spam folder to confirm your subscription.

• Get started Get started for free

Figma design

Design and prototype in one place

Collaborate with a digital whiteboard

Translate designs into code

Get the desktop, mobile, and font installer apps

See the latest features and releases

• Prototyping
• Design systems
• Wireframing
• Online whiteboard
• Team meetings
• Strategic planning
• Brainstorming
• Diagramming
• Product development
• Web development
• Design handoff
• Product managers

Organizations

Config 2024

Register to attend in person or online — June 26–27

Creator fund

Build and sell what you love

User groups

Join a local Friends of Figma group

Learn best practices at virtual events

Customer stories

Read about leading product teams

Stories about bringing new ideas to life

Get started

• Developer docs
• Best practices
• Reports & insights
• Resource library
• Help center

Figma Case study templates

Present your project in pre-built editable templates to get you started.

UX Case study template

UX Case Study Template made to help UX Designers create and organize their case study without any struggle.

Case study presentation template

Case study presentation to frame key insights and outcomes.

Long form research case study template with customizable styles.

Design presentation deck

Modern design deck template with multiple sections.

Visual portfolio template

Modern visual portfolio template with 12 column grid and light and dark themes.

Behance Presentation Template

Case study template with multiple components, visual styles and frame sizes.

Case study template

Case study template with pastel style coloring.

Holistic Case Study Template

Case study presentation template complete with project overview, wireframes and key journey insights.

Case study presentation layout for interview

Case study template with multiple app UI screens.

Portfolio UI - Web & Mobile

A portfolio UI for designers and developers which has 4 unique pages includes blog, case study.

Apple device mockups

Complete Apple device mockup screens for iPhone, Mac, iPad and Apple Watch.

Explore 1,000+ templates on the Figma community

Explore even more templates, widgets, and plugins—all built by the Figma community.

Case Study: Gabriel Contassot’s Portfolio — 2024

A look into the making of Gabriel’s 2024 portfolio website, complementing minimal design choices with subtle animations.

From our sponsor: Leverage AI for dynamic, custom website builds with ease.

Working with Gabriel on his new portfolio has been a great experience. He initiated the project with a minimalist yet well-conceived design, incorporating animation ideas and maintaining an open-minded approach. This flexibility fostered extensive experimentation throughout the development process, which, in my experience, yields the best outcomes.

The core of the website features a two-page “loop,” transitioning from a main gallery on the homepage to a detailed project view. The objective was to ensure cohesive animations and provide striking, colorful transitions when navigating from the dark-themed homepage to the brighter case studies. As this is a portfolio, the primary focus was on showcasing the content effectively.

There’s a commented demo of the main effect at the end of this case study .

Structure / Stack

Whenever possible, I prefer to work with vanilla JavaScript and simple tools, and this project presented the perfect opportunity to utilize my current favorite stack. I used Astro for static page generation, Taxi to create a single-page-app-like experience with smooth page transitions, and Gsap Tweens for animation effects. Twgl provides WebGL helpers, while Lenis manage the scrolling.

All content is delivered through Sanity , with the sole exception of case study videos, which are hosted on Cloudflare and streamed using Hls .

The website is statically generated and deployed on Vercel, both via CI/CD and from Sanity to rebuild when the content updates.

The CMS structure is quite simple, just a collection for the work, one for pages like /about , and a group for generic data (which in this case is only contact info). In this instance the website is pretty simple and this configuration is not really needed, but considering the headless nature of this setup this was the best way to ensure the content side of things could outlive the website, and for a next version we could (or whoever will work on it) potentially build on top.

The official integration for Astro/Sanity came right in the middle of the project, enhancing the interaction between the two. We’re also leveraging the Vercel Deploy plugin, so who uses the CMS can freely deploy a new version when needed.

The whole repo looks something like this:

Astro + Sanity

In this case we’re using Astro at a 10% of it’s potential, just with .astro files (no frameworks). Basically as a templating language for static site generation. We’re mostly leveraging the component approach, that ends up being compiled into a single, statically generated html document.

As an example, the homepage looks like this. At the top, in between the --- there is what Astro calls frontmatter , which is simply the server side of things that in this case executes at build time since we’re not in SSR mode. Here you can see an example if this.

You can check out my starters here , where you’ll find both the Astro and Sanity starters that I used to spin up this project.

I use a single entry point for all my javascript ( app.js ) at a layout level as a component, and the interesting part starts from there.

In my entry point I initialise all of the main components of of the app.

• Pages — which is Taxi setup in a way so it returns promises. This way I can just await page animations and make my life a bit easier with keeping everything in sync (which I end up never doing properly and manually syncing values because I get messy and the delivery is coming up) .
• Scroll — which is simply a small lenis wrapper. Pretty standard tbh, just some utilities and helper functions as well as the setup code. I also have the logic to subscribe and unsubscrube functions from other components that need the scroll, so I’m sure everything is always in sync.
• Dom — holds all the DOM related code, both functional and animation related.
• Gl — that holds all the WebGl things, in this case pretty simple as it’s just a full screen quad that I use to change the background colour with nice and smooth values

In here there are my main (and only) resize() and render() functions. This way I’m sure I only call requestAnimationFrame() once render loop and have a single source of truth for my time value, and that listening and firing a single event for handling resize.

The animation framework relies on two primary JavaScript classes: an Observer and a Track.

An Observer , constructed using the IntersectionObserver API, triggers whenever a DOM node becomes visible or hidden in the viewport. This class is designed to be flexible, allowing developers to easily extend it and add custom functionality as needed.

Meanwhile, the Track class builds upon the Observer. It automatically listens to scroll and resize events, calculating a value between 0 and 1 that reflects the on-screen position of an element. This class is configurable, allowing you to set the start and end points of the tracking—effectively functioning as a bespoke ScrollTrigger. One of its key features is that it only renders content when the element is in view, leveraging its foundational Observer architecture to optimize performance.

A practical demonstration of how these classes function is evident on the case study pages.

In this setup, images and videos appear on the screen, activated by the Observer class. At the same time, the scaling effects applied to images at the top and bottom of the page are straightforward transformations driven by a Track on the parent element.

The page transition involves a simple element that changes color based on the links clicked. This element then wipes upwards and away, effectively signaling a change in the page.

The preloader on our website is more of a stylistic feature than a functional one—it doesn’t actually monitor loading progress, primarily because there isn’t much content to load. We introduced it as a creative enhancement due to the simplicity of the site.

Functionally, it consists of a text block that displays changing numbers. This text block is animated across the screen using a transformX property. The movement is controlled by a setInterval function, which triggers at progressively shorter intervals to simulate the loading process.

Scrambled Text

The text animation feature is based on GSAP’s ScrambleText plugin, enhanced with additional utilities for better control and stability.

Initially, we attempted to recreate the functionality from scratch to minimize text movement—given the large size of the text—but this proved challenging. We managed to stabilize the scrambling effect somewhat by reusing the original characters of each word exclusively, minimizing variations during each shuffle.

We also refined the interactive elements, such as ensuring that the hover effect does not activate during an ongoing animation. This was particularly important as some unintended combinations generated inappropriate words in French during the scrambles.

For the homepage, we replaced the hover-trigger with an onload activation for the menu/navigation centerpiece. We hardcoded the durations to synchronize perfectly with the desired timing of the visual effects.

Additionally, we integrated CSS animations to manage the visibility of elements, setting {item}.style.animationDelay directly in JavaScript. A Track object was employed to dynamically adjust the scale of elements based on their scroll position, enhancing the interactive visual experience.

Homepage images effect

This is probably the most interesting piece of it, and I needed a couple of tries to understand how to make it work, before realising that are really just absolute positioned images with a clip-path inset combined with a Track to sync it with the scroll that also controls the scaling of the inner image.

Color Change

It’s the only WebGl piece of this whole website.

Originally, the concept involved changing colors based on scroll interactions, but this was eventually moderated due to concerns about it becoming overly distracting. The implementation now involves a full-screen quad, constructed from a single triangle with remapped UV coordinates, which allows for a more flexible and responsive visual display.

The color values are dynamically retrieved from attributes specified in the DOM, which can be freely adjusted via the CMS. This setup involves converting color values from hexadecimal to vec3 format. Additionally, a couple of GSAP Tweens are employed to manage the animations for transitioning the colors in and out smoothly.

This use of WebGL ensures that the color transitions are not only smooth and visually appealing but also performant, avoiding the lag and choppiness that can occur with heavy CSS animations.

This is a minimal rebuild of the main homepage effect. Other than some CSS to make it functions, 90% of it happens in the track.js file, while everything is initialised from main.js .

The Track class is used as the base to create the ImageTransform one, which extends the functionality and transforms the image.

There’s a few helper functions to calculate the bounds on resize and to try and maximise performance it’s only called by lenis when a scroll is happening. Ideally should be wrapped by an Observer so it only calculates when is in view, but I kept it simpler for the demo.

It’s a simple website, but was a fun and interesting challenge for us nonetheless. Hit me up on Twitter if you have any questions or want to know more!

Tagged with: case-study webgl

Federico Valla

Independent creative director and dev working with agencies and brands on immersive, web based experiences.

Shuffling Typography Animation

How to Add More Fun to a Game: Extending “The Aviator”

On-scroll animation ideas for sticky sections, subscribe for the latest frontend news.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

From our partner