case study design website

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

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

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

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

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

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

What is a case study?

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

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

5 benefits of web design case studies

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

1. Demonstrate expertise

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

2. Build credibility

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

3. Inspire future projects

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

4. Encourage personal growth

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

5. Improve communication

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

What makes an effective web design case study?

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

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

Case study curation and criteria

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

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

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

Does it have a defined initial problem?

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

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

Does the outcome deliver measurable success?

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

Is the project visually suitable for presentation?

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

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

Design for display

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

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

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

How do you structure a case study?

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

1. A challenge

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

2. A solution

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

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

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

3. The impact

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

4. Key quotes

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

Let your work do the talking

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

Subscribe to Webflow Inspo

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

Related articles

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

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

4 steps to creating an impressive UX design portfolio

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

13 tips to make you a better web designer

Helpful advice to help you level up your web design skills

5 SaaS web design trends in 2017

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

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

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

From frustration to customization: How using Webflow changed the game for Mothershed Design Co.

See how switching to Webflow allowed one design agency to take full control over their web design process and grow their business.

Get started for free

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

Transforming the design process at

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

A Space for Creative Growth

6 Web Design Case Studies We Can Learn From

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

• Apr 11, 2019

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

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

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

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

1. Brown Owl Creative for Creative House Group

> Showcasing custom-made icons and full-length screenshots

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

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

2. Miki Twersky for Nosta Fragrances

> Merging video screenshots with atmospheric photos

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

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

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

3. Adelaide Wang for Humm.ly

> Thorough case study incorporating texts, images and videos

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

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

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

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

4. Studio&more for Din7

> Presenting color choices, logo design and more

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

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

5. Ariel Sun for her wedding website

> Telling a story through text and images

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

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

6. Liron Ashkenazi for The-Artery

> Including mobile and tablet view, process, and more

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

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

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

MORE POSTS LIKE THIS:

Apr 23, 2024

Stay curious: 5 web-design inspiration sites

Apr 15, 2024

Mentor Spotlight with Guy Banaim

Apr 8, 2024

Designer Spotlight with Pauline Esguerra

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

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.

Get the course! 10h video + UX training

How To Write a Great Design Case Study

Case studies are often seen as documentation. But they can be more than that — digestible, thorough stories that showcase skills, values and process. Here are some examples to refer to when writing one.

How do we write a great design case study? I’ve put together some practical guides, examples and do’s and don’ts on how to stand out.

Key Takeaways #

• Think of a case study like a magazine feature.
• Keep a case study digestible, thorough and a story.
• Choose a customer that represents your scope of work.
• Promote the skills that you want to be hired for.
• Focus on insights rather than process.
• Show your intention and your values.
• Use the language that your future clients will understand.
• Teach readers something they don’t already know.

A fantastic example: Creating Slack's illustrations , neatly put together by Alice Lee.

I absolutely love diving into case studies that highlight wrong assumptions and failures, explaining how designers managed to turn the ship towards a better outcome. It’s a wonderful way to understand how a designer thinks, and that how they learn and adapt along the way.

Don’t be afraid to show your mistakes, and tell honest stories that your prospect clients can connect to. Probably the worst thing you could do is to create a polished, soulless, marketing version of your work that is too perfect to be true.

Authenticity and enthusiasm always shine through. Don’t hide them, and people will notice how incredible you are.

Design Case Study Examples and Guides #

A Complete Guide To Case Study Design , by Fabricio Teixeira, Caio Braga

Creating Slack's illustration voice , by Alice Lee

Reimagine the future of TV , by Abdus Salam

Designing Urban Walks , by Anton Repponen

Case Study Club , a curated hub by Jan Haaland

A Guide To Case Studies for Designers , by Jenny Kowalski

How to Write Project Case Studies For Your Portfolio , by Tobias van Schneider

Tips to Structuring Case Studies , by Lillian Xiao

How to Write Great UX Case Studies , by Yu Siang Teo

How To Write A Case Study For Your Design Portfolio

How To Write Trust-Building Case Studies (+ Templates) , by Elise Dopson

The Ultimate Guide to Writing a Good Case Study

How to Create Case Studies Without Any Past Projects

Related articles

How To Avoid Bias in UX Research

Designing Better Design Critiques

The Best Handoff Is No Handoff

How To Improve Time Estimates For Designers

Using Case Studies to Boost Your Web Design Business

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

The benefits of web design case studies

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

1. Boost SEO

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

2. Improve landings-to-leads ratio

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

3. Increase your rates

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

4. Communicate your process

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

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

How to create a web design case study

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

1. The brief

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

2. Your approach

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

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

4. A visual

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

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

5. Learnings

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

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

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

Highlights from Circle Live: Design Trends 2023

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

• Melanie Lang
• Jul 19, 2013

75 Instructive Design Case Studies

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

About The Author

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

Email Newsletter

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

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

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

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

Illustration, Graphics And Logo Design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Advertising, Promotion And E-Commerce

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

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

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

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

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

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

Redesigning Elements And Features

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

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

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

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

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

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

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

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

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

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

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

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

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

Complete (Re)branding And (Re)design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Content And Storytelling

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

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

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

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

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

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

Technical Challenges And Solutions

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Workflow And Optimization

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

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

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

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

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

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

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

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

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

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

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

Responsive Design

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

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

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

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

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

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

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

Further Reading

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

Smashing Newsletter

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

Front-End & UX Workshops, Online

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

TypeScript in 50 Lessons

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

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

Free Online Case Study Generator

Captivate your clients by highlighting your company's solutions, and get valuable insights to improve your business strategy with Venngage's case study templates.

Create a case study report that looks compelling and converts leads without any design experience. Showcase real success stories and challenges that your products and services helped to solve. Join over 40,000 businesses in using Venngage as a marketing solution.

Design from one of our case study templates

Choose from hundreds of case study templates. see all case study templates, design professional case studies for meetings, and negotiations.

Create your own case studies to share compelling success stories. Showcase products, strategies, and tactics that had made your clients grow. You don't need any design experience! All of our case study template designs are created in-house by professional designers.

You don't need to be a designer to create a professional-looking case study infographic, or in-depth, multi-page reports. Pick from our library of easy-to-edit case study templates.

Get access to high-quality stock photos and choose from over 40,000+ icons and illustrations to use. Venngage also offers a wide variety of chart and data visualization widgets that you can customize.

Want to incorporate your brand's identity? We've got you. My Brand Kit feature lets you upload your company logos, fonts, and colors. Perfect to stand out in your presentation!

Get your team involved when creating case studies. Real-time collaboration allows you to provide feedback and apply changes creating a great design in minutes.

How to create a case study in 5 easy steps:

Showcase your challenges to elevate your brand with ease

Customizable Templates

No design experience? No problem! Our stunning template designs will make your data analysis look great without even trying.

User-Friendly Editor

Easily visualize and present complex case study examples with Venngage editor. Use our Smart features to quickly add or remove shapes, lines, and branches with a single click.

Access Stunning Photography

A case study report is more engaging and impressive when you use Venngage's library of 3 million stock photos. Professional and royalty-free.

Data Visualization

With Venngage's free case study creator, you can add data collected from a Google Sheet or CSV, and the chart automatically populates the data.

24/7 Customer Support

Experiencing issues? Have questions about using a feature or need advice? Our support team is available around the clock.

My Brand Kit

Build your brand through consistency. My Brand Kit lets you incorporate your branding into every asset you design in Venngage.

Customize Venngage's Case Study Templates

• Choose your favorite design from the templates library. We have an extended gallery of layouts you can work on. Just organize your qualitative and quantitative data, add customizable graphs, icons and images, set your brand identity, and start creating a comprehensive case study report.
• Use illustrations, icons and photos: Case studies ought to be visually engaging and inviting. That's why Venngage lets you access 40K+ icons and beautiful illustrations, impressive stock photos, and customizable charts and graphs.
• Create branded content without any design help: Branded case studies help your brand really stand out. They're an excellent form of lead generation and branding building. Showcase your expertise and real-life success stories that will win over your readers.

Collaborate with team members and stakeholders in real-time

• Replace online meetings, email threads, chats, or messages by simply clicking "Share" from the editor to send a private link to your peers.
• Share your designs, so people can work together and make adjustments to achieve the perfect showcase for your strategies.
• Work better together. Provide feedback, share expertise, and have insights for a perfect process mapping design.

Download and share your case study design with a click

• Download your document as a PDF or Interactive PDF (to use hyperlinking).
• To print your document, apply print bleeds in the editor and then download it as a PDF.
• Share your completed design using a share link - no need to download a single thing.

Great features that make your report stand out

• My Brand Kit lets you instantly apply your branding to any template design, saving you hours of time and effort.
• Access Pixabay, Pexels, and other libraries for impressive stock photos from around the world - for free.
• Hundreds of font options and styles to suit your design preferences. You can also request fonts we don't have to maintain your brand look.

How do I sign up for Venngage's case study creator?

To start using Venngage's free case study creator, sign up for free using your email, Facebook or Gmail account. Once you create an account you can choose which template to get started with and start editing in the online editor.

How do I write a case study?

The easiest way to write a case study is to get started with a template. This provides you with a pre-set cover page and table of contents; a variety of page layouts to work with; and a picture of how to organize content, add designs and break up text. A case study is not a technical document that needs to be structured in a specific and formal way. You can get creative but focus on making your content clear and easy to understand.

What's an example of a case study?

Case studies, in business and marketing, are stories of success achieved through a product or service. The product can even be a strategy or framework that was pioneered by an industry thought leader. Many brands publish case studies on their website to share how their clients see tremendous value in using their products. The case study essentially chronicles the entire client journey from having a problem, to finding the solution, and the outcome of that solution.

Try Venngage's Case Study Creator today. Sign up for free!

Get started with our case study templates:

Business case study, content marketing case study, lead generation business case study, social media case study.

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

The Fundamentals of Website Redesign – A Case Study

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

By Alex Gurevich

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

PREVIOUSLY AT

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

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

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

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

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

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

The Value of Website Redesign Pre-project Research

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

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

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

Step 1: Become Familiar with the Content

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

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

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

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

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

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

Step 2: Create Focus. Simplify. Organize.

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

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

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

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

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

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

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

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

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

The remaining organizational structure was straightforward:

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

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

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

Step 3: Get the Client Involved

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

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

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

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

Create Visual Structure Through Wireframing

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

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

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

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

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

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

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

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

Provide the Homepage with a Clear Goal

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

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

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

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

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

Featured Location > Welcome > Magazine > Events > News

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

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

Incorporate the Brand Style Guide

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

Experiment with Typography Combinations

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

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

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

Polish the Look and Feel of the Website

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

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

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

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

Finishing Strong: Mind the Details

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

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

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

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

Web Redesign Is Built on a Foundation of Careful Planning

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

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

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

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

Further Reading on the Toptal Blog:

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

Understanding the basics

What is website design all about.

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

What do you do as a web designer?

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

Why do you need a website?

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

Alex Gurevich

Phoenix, AZ, United States

Member since October 26, 2015

About the author

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Toptal Designers

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

Join the Toptal ® community.

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.

On-Scroll Pixelated Image Loading Effect

Tiny Grid Layout Animation

Cyberpunk inspired Three.js Scene with JavaScript and Blender

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

Ideas, insights and inspirations.

• Advertising
• AI, Tech & e-Commerce Brand Marketing
• Analytics and Metrics
• Art Projects
• B2B Marketing
• Business Strategy
• Copywriting
• Digital Communication
• Digital Life
• Digital Magazine Publishing
• Elliance Brand
• Healthcare & Wellness Marketing
• Higher Education Marketing
• Inbound Marketing
• Inspirations
• Manufacturing Marketing
• Market Insights
• Marketing Strategy
• Newsletters
• Nonprofit Marketing
• Paid Advertising
• Project Management
• Search Marketing
• Social Media
• Storytelling
• Uncategorized
• User Experience
• Visual Thinking
• Web Development
• Website Design

An Osteopathic Medical School Website Design Case Study

Founded in 1916, Kansas City University (KCU), is one of the oldest osteopathic medical schools in the US, and one of the largest medical schools in Missouri. With 13 new osteopathic schools opening up in the next 2 years and peers stepping up their efforts,  KCU turned to Elliance to bolster its leadership role and outsmart the competition.   

The Elliance Recommendation:

Elliance’s recommended approach was shaped by four insights about prospective medical students. First, they are digital natives glued to their mobile devices. Second, they heavily use Google to explore their educational options. Third, they want to know in advance if the enrolled students and alumni were satisfied by their medical school experience. Fourth, as a lingering effect of Covid, prospective students living in the midwest tend to have a strong preference to attend graduate medical school in the midwest. 

Keeping these insights in mind, Elliance recommended replacing the large osteopathic medical school website with a lean, mobile-first, SEO-powered microsite that distills the argument for KCU into fewest possible pages. We further recommended creating a blog which would house their amazing student, alumni and faculty stories and achievements. These stories would not only persuade prospects to enroll, but also get KCU ranked on Google page one in the state of Missouri, the Midwest and beyond.

Osteopathic Medical School Website Design:

Osteopathic Medical School Blog Design:

The Results:

Two months after the osteopathic medical school website and blog were launched, KCU saw a 30% improvement in traffic growth to the microsite and blog. For many Missouri and Midwest related keyword variations KCU is  now ranked on Google Page 1. In addition, they are marching towards Google page one for reputation keywords like “Top Osteopathic Schools in the Midwest”. Furthermore, they have started seeing improvements in various osteopathic specialty area keywords for which they were simply not ranked for before. 

Now if prospective medical students search for anything related to osteopathic medical school in Missouri and the Midwest, they can find Kansas City University on the first page of search results. And once they get to the website they are able to quickly access  the most important information they need to make their decision. This includes class profile, featured alumni, faculty spotlights, residency match rates, and a streamlined application process. 

Learn more about our higher education marketing , website redesign and inbound marketing services and consider partnering with us to grow your enrollment endowment and reputation for your osteopathic medical school.

Related posts:

• A New Medical School Dean’s Guide to Life: 10 strategic considerations for your first 100 days and beyond
• Medical School Marketing Case Studies

Comments are closed.

[fts_instagram instagram_id=256737344 super_gallery=yes image_size=100px icon_size=50px space_between_photos=1px hide_date_likes_comments=yes center_container=yes image_stack_animation=yes type=user]

Cookies in use

Get the facts about transgender & non-binary athletes.

Transgender and non-binary people, in particular trans and non-binary student athletes, are under attack by politicians at all levels of government, as well as in the media. 2021 officially surpassed 2015 as the worst year for anti-LGBTQ+ legislation in recent history, with 27 anti-LGBTQ+ bills enacted. 2022 looks to be continuing this trend, with the first weeks of the year seeing anti-LGBTQ+ bills under consideration in state legislatures across the country. More than 55 directly target transgender girls and women in sports and would prevent them from playing on the team that aligns with their gender identity.

When reporting on issues related to transgender and gender non-confirming people, please use the Human Rights Campaign’s Brief Guide to Getting Transgender Coverage Right in order to ensure inclusive and accurate coverage. In addition, if you’re reporting on trans youth in sports, please find some facts and resources below.

Transgender and non-binary people have been under attack for years - the pivot to sports is yet another front in this fight.

For the last two decades, anti-LGBTQ+ politicians have attempted to sow disinformation about LGBTQ+ people’s rights to score cheap political points with their base. Transgender and non-binary people have been the target of many of these attacks, especially since the 2015 state legislative sessions. Then, so-called bathroom bills were a major focus and politicians lied about threats to women and girls’ safety that never materialized. Today, trans and non-binary youth are the target of these attacks, with baseless arguments about sports participation and misinformation about affirming healthcare access .

At least 35 of the more than 250 bills proposed in 2021 would unnecessarily regulate or prohibit transgender youth from being able to access best-practice, age-appropriate, gender-affirming medical care. So far, two bills of this kind have become law -- in Arkansas , when the state House and Senate overrode Governor Asa Hutchinson’s veto of House Bill 1570, which is aimed at denying medically-necessary, gender-affirming services to transgender youth, and in Tennessee , when Republican Governor Bill Lee signed SB 126, which unnecessarily regulates life-saving, best practice medical care for transgender youth. Such bills have proliferated in the last two years, despite no evidence that there has been any issue with youth receiving inappropriate care. In fact, these bills are opposed by organizations dedicated to children’s health, including the American Academy of Pediatrics, the American Association of Child and Adolescent Psychiatry, the National Association of Social Workers, and more.

These attacks on transgender youth generally, and trans athletes specifically, are fueled by discrimination, not facts . These bills represent a cruel effort to further stigmatize and discriminate against LGBTQ+ people across the country, specifically trans youth who simply want to live as their true selves and grow into who they are. After failing to prohibit trans and non-binary people’s access to restrooms, legislators have pivoted to using misinformation about sports as the next way to score political points.

Proponents of anti-trans sports bans are relying on stereotypes that have sexist implications.

While it may be true that a particular transgender youth has physical abilities that help them in the sport of their choice (like height, which is helpful in volleyball for instance), natural variations in physical characteristics are part of sports, especially at younger ages. Many of these bills would govern play at elementary and middle school as well as high school, when all youth’s bodies are undergoing tremendous change at significantly varying speeds. In other sports, a smaller physique might be to an athlete’s advantage. And, like all other youth, trans youth are short and tall, strong and not, fast and slow.

Breaking down these stereotypes also breaks down these arguments. Transgender girls are not new, and they’re not taking over girls’ sports. In fact, transgender youth:

are a small part of the overall population in schools, and only about half of trans youth identify as girls ( opponents don’t seem as interested in trans boys, who they assume will not be able to compete with cisgender boys - a sexist assumption),

just like other other youth, have varying interest in playing sports,

just like other youth, will have varying degrees of physical ability and attributes that may/may not lend themselves to success in the sport of their choice,

just like all other youth, will have varying degrees of seriousness and commitment to sports.

Transgender youth already face very high levels of discrimination, including in school.

Transgender youth experience all kinds of mistreatment (such as harassment, harsher discipline, or physical or sexual assault) because of their gender identity. There are many very real challenges that face transgender youth, including mistreatment in schools, family rejection, threats of physical violence, and other discrimination. Anti-trans sports bans risk further marginalizing young people who already face tremendous challenges in school. Proponents of these bans suggest that trans athletes are pretending to be trans in order to do well at sports - ignoring entirely the incredible stigma trans youth face.

Twenty states, the IOC, and the NCAA have allowed trans athletes to play sports for decades, with no problems.

If there was truly an existential issue with transgender athletes competing in sports, these bodies would be taking more specific steps to address it. What we’re actually seeing is the opposite - legislators using transgender youth as a culture war talking point are attempting to put into place bans that nobody is asking for. The NCAA’s recent change to remove non-discrimination protections from its constitution and defer to IOC guidelines was a political decision that abdicates their responsibility to protect student athletes, but it does not meaningfully change the current state of play: transgender students can play sports, with specific requirements in place for each sport.

Playing sports comes with well-known academic, emotional, mental, and social benefits. Transgender youth should not be shut off from these opportunities.

Playing sports helps young people maintain good physical health, build self-confidence and self-esteem, grow leadership skills, understand the value of teamwork, and much more, according to the President’s Council on Sports, Fitness, & Nutritional Science .

Numerous athletes at both the amateur and professional level have spoken out in support of their transgender teammates and competitors.

These athletes include Women’s World Cup champion soccer player Megan Rapinoe , tennis icon Billie Jean King , Stanford swimmer Brooke Forde , NBA star Dwyane Wade , Canadian soccer phenom Erin McLeod , WNBA star Napheesa Collier , and many more. Additionally, sports organizations like the Ivy League , the College Swimming & Diving Coaches Association of America (CSCAA), and others have spoken out publicly to defend trans people’s presence in sports.

For more information, please visit hrc.org/transgender , HRC’s Transgender and Non-Binary People FAQ and HRC’s Brief Guide to Getting Transgender Coverage Right .

Related Resources

Transgender

HRC’s Brief Guide to Reporting on Transgender Individuals

Understanding the transgender community.

Transgender, Health & Aging, Workplace

Debunking the Myths: Transgender Health and Well-Being

Love conquers hate., wear your pride this year..

100% of every HRC merchandise purchase fuels the fight for equality.

Choose a Location

• Connecticut
• District of Columbia
• Massachusetts
• Mississippi
• New Hampshire
• North Carolina
• North Dakota
• Pennsylvania
• Puerto Rico
• Rhode Island
• South Carolina
• South Dakota
• West Virginia

Leaving Site

You are leaving hrc.org.

By clicking "GO" below, you will be directed to a website operated by the Human Rights Campaign Foundation, an independent 501(c)(3) entity.

More From Forbes

Artificial sweetener could seriously damage gut according to new study.

• Share to Facebook
• Share to Twitter
• Share to Linkedin

Many processed foods such as candies, cakes, cookies, juices and sodas contain artificial sweeteners ... [+] like neotame.

An artificial sweetener used in many types of food, including candy, cakes, juice, yoghurt and chewing gum has been shown to cause significant gut damage in a lab-based study.

The new study published in the journal Frontiers in Nutrition , indicates that even small doses of neotame, a derivative of aspartame can cause damage to the gut, potentially leading to inflammation, resistance to insulin and even serious blood infections, according to the research team.

"There is now growing awareness of the health impacts of sweeteners such as saccharin, sucralose and aspartame, with our own previous work demonstrating the problems they can cause to the wall of the intestine and the damage to the ‘good bacteria’ which form in our gut," said Dr. Havovi Chichger, senior author of the work from Anglia Ruskin University in the U.K in a press release .

Neotame is a newer sweetener and was approved by the FDA for use in most foodstuffs in 2002. But the study showed that the sweetener can damage the digestive tract in numerous different ways; directly by causing the death of the cells which line the gut and allow for absorption of nutrients and also directly, by damaging "good" bacteria found in the gut microbiome which are essential for digestion.

The study tested neotame on some species of bacteria typically found in the microbiome and found that the sweetener influenced the normally-helpful bacteria to behave abnormally. The researchers also combined the bacteria with gut cells in a dish and tested the effect of neotame, finding that the bacteria became toxic to the cells by sticking to them and sometimes even entering them, causing cell death.

"This can lead to a range of potential health issues including diarrhoea, intestinal inflammation, and even infections such as septicaemia if the bacteria were to enter the blood stream," added Dr Chichger.

The Best Romantic Comedy Of The Last Year Just Hit Netflix

Apple iphone 16 unique all new design promised in new report, the world s best beers according to the 2024 world beer cup.

Aspartame, the older sibling of neotame in particular has been controversial, with some studies suggesting that it might be carcinogenic, but often in higher doses than most humans reasonably consume. For example the American Cancer Society website states that: " The FDA estimates that a person weighing 60 kg (132 lb) would have to consume about 75 packets of aspartame in a day to reach the upper end of the acceptable daily intake of 50 mg/kg/day."

The World Health Organization International Agency for Research on Cancer classifies aspartame as " possibly carcinogenic to humans " based on some, limited evidence linking it to the development of liver cancers in people. But regulatory organizations generally summarize that there is no conclusive evidence that aspartame causes cancer at doses which humans typically consume.

However, the new study was not about cancer and indicates that sweeteners may have other negative impacts on health.

"It is important to study sweeteners that have been introduced more recently and our new research demonstrates that neotame causes similar problems, including gut bacteria becoming diseased," said Dr Chichger, who has done several previous studies looking at the impact of sweeteners on gut health. The study also tested neotame at concentrations that were at, or below the recommended daily allowance for humans.

"Our findings demonstrate the need to better understand common food additives more widely and the molecular mechanisms underlying potential negative health impacts," said Dr Chichger.

• Editorial Standards
• Reprints & Permissions