Case Study Website Layout

Case Study is a research or analysis of a particular work. Today, we have selected some examples of interesting case studies of different companies having presented their works in an expanded form. These works can be found on their websites, or on websites specialized in creating portfolios.

Here, you will be able to see the evolution of changes in web design, as well as its brands. Most of these cases have been prepared by professional studios, and, as a beginner, you will be able to see how professionals work during the presentation of projects.

Some examples are designed on separate web pages and are made with the use of new technologies HTML5 and CSS3. The pages of the presentation are interactive and very vivid, when the case itself is viewed.

Enjoy watching the presentation and have much inspiration! If you know any other examples of web design Case Studies, please feel free to write about them in your commentaries.

Case Study Examples in Web Design

Ramayana

Ramayana is an innovative and groundbreaking project that invites you to take part in an adventure through a fully illustrated World. The team brought to live a classic tale that is a symbiosis of Indonesian and Thai cultures.

Enjoy an immersive interactive experience that has become real to powerful capabilities of Chrome browser. You are also invited to familiarize yourself with some vital stages of the workflow that are described in portfolio section.

Project Re

The team is managed to come up with an elegant and at the same time amusing and creative cross-platform solution that displays a plenty of content from four different categories. Each section is defined by its brand. You are welcome to dive into a fantastic user experience spiced up with modern interactive attributes and several eye-pleasing illustrative tricks. The case study reveals some stumbling blocks that the company had to overcome.

Nickelodeon iOS App

The concept was created in the anticipation of the 25th anniversary of the Kid’s Choice Awards. With a primary focus on the young viewing public, the agency has incorporated lots of amusing drawings and popular cartoon characters to capture the mood of the event and meet the targeted audience.

The secret-agent theme underlies the project, sets the tone and establishes the atmosphere. Explore some interesting sketches that give hints about the realization of the idea.

Broadway.com iPad App

This is an iPad application with a cabaret charisma and a gamut of emotions. The program scans all the data presented on the official website and provides users with only valuable content. What’s more, there is a function to book tickets to live performances. The project is an alliance of design, functionality and user experience that makes it stand out from the crowd. The case study lifts the veil from the development process.

HTC

The agency has built the website with the brand in mind. Spruced up with some interactive features and lovely aesthetics that is a result of a combination of classic and modern styles, the UI conveys all the relevant information beautifully and efficiently.

The visitors are quickly engaged thanks to outstanding experience and wonderful design. Go through the whole process of crafting the project from scratch that is presented in the case study.

Redbull TV

Redbull T is a tiny yet valuable Chrome extension that offers instruments to watch online RedBull tv stream. The latter comprises more than four hundred episodes from 15 shows. Members can create their custom channels just by dragging and dropping content from various genres that are arranged in a column on the left. To know how the team is managed to put the users in driver’s seat, take a look at the corresponding page in their portfolio.

60 Minutes

The concept is all about the news. It is a little application for Chrome browser that collects reports, exclusive interviews and video segments thereby offering users to watch and read the relevant information on the spot.  Despite such a vast amount of the multimedia content, the interface looks tidy and does not overwhelm readers. HTML5, CSS3, and some cutting-edge solutions were used in development process. Find out what else did the team employ in order to achieve the desired result.

Ducati Community App

Ducati Community App is a social community platform that is boosted by some interactive features. It is fast, intelligent and easy-to-operate. The program enables members to view friend’s activity, comment on the go, browse updates, add posts and much more with a single click. The interface gets its beauty from the glossy surfaces, charismatic dark coloring, beautiful iconography and outstanding visuals.

Heatmap

The project is dedicated to the annual prestige festival that takes place in Cannes. It shows the spots of the social gatherings and popular restaurants. Among other features, it helps find local destinations, map your location and share the photos with others. The design is clean, structured and eye-pleasing. As the case study implies, the application is built on the basis of the powerful collaboration of Google Maps and high-end features of HTML5.

Kontain Android Application

The application was created to provide the community on Kontain.com with a handy environment. Vibrant, glossy iconography helps users to move around pretty efficiently, supplying them with a quick access to such vital functions as posting a new update, surfing through friends’ updates and activities and others.

The beauty of interface lies in a meticulous attention to details, gorgeous color scheme and plenty of white space. The team uncovers the workflow step by step.

Civil War 150

Civil War 150 evokes patriotic feelings from the first seconds. While the user interface is enhanced with some excellent renderings that are iconic and nationalistic, the interface is intuitive and handy. The information architecture is a piece of art whereas user experience is immersive and highly engrossing. These factors energize the campaign and make it interesting to explore.

Iconfinder

The team has reimagined logotype for one of the most popular engines for finding icons in the expenses of the Internet, aka Iconfinder. It visually represents the platform as well as non-verbally communicates the required message. The case study unveils all the problems, challenges and their corresponding solutions, in-depth analysis, and some clarifying screenshots.

Project Noah

The Android tablet app greets its targeted audience with a fantastic interface design that is prettified by some fine traits such as clothes textured emblems with stitched effect and clean and neat flat style elements. It has a strong natural vibe and organic feeling that meets the spirit of National Geographic. There is a ton of pictures that are well-organized and properly dished up. In the portfolio section, the team has also brought to light several stages of the development routine.

SendGrid

The platform has got a facelift from the talented folks of SoftFacade. They rethought and enhanced both frontend and backend, having made it more user-friendly, interactive and enthralling. The user experience was also enriched to meet the crowd.

SimpleGeo

Jeffrey Kalmikoff redesigned the outward-facing website, landing pages, products pages, press page, team page, blog, etc. as well as gave some artistic twists to items of brand identity such as b-card and compass icon. To find out what else did the artist improve and revamp, take a look at the official page in his online portfolio.

Star Wars

The agency has recreated the whole universe of the beloved saga. While the project still has to handle a gazillion of content, yet the revamped version deals with this task quite effectively, including even more epic visuals without sacrificing user experience and excellent readability. It allows easily navigate through the structure, enjoy hot videos, indulge in reading and feel absolutely comfortable. The case study of the work has some interesting comments.

Crayola

The team created a highly energetic and vibrant redesign made in the spirit of products. There are lots of colors; however, they do not overpower readers. The content is neatly spaced out so that every portion of text can be quickly scanned and read. What’s more, it is also responsive, so that visitors can enjoy beautiful aesthetics even on mobile devices. The corresponding case study gives practical hints how to cope with such amount of tones.

Apache Flex

Adrian Knopik created the new version of the logotype for Apache Flex. It is bright, elegant, smooth and energetic. The typography is carefully selected and perfectly complements the graphics. Every detail is vigilantly planned. The piece of brand identity is presented in two color palettes, monochrome and vibrant. The page dedicated to this work features both versions and some extra material.

FLUD

BASIC Agency has prototyped the website and supporting mobile application for the small startup in San Diego. Both products are marked by consistency of style so that they are unobtrusively connected. While the landing page places the content within a traditional horizontal arrangement, the tablet version has a time-tested modular system that lays out the copy in carefully organized cells with a proper amount of space. Mobile version as befits is compact and has a linear structure.

Canon EOS-M

Canon-EOS M is a micro site that works fast, steady and coherent across various devices, platforms and browsers. Being highly populated with images and visuals, it still offers users a comfortable environment with a gorgeous aesthetics and intuitive navigation. Red and black are used to give the content and controllers a proper foundation.

Event & Music Website

Event & Music Website is charged with a lively vibe. The architecture is straightforward and robust and is supported by the grid system. Flat style runs the show here, saving the design from confusing readers.

Each block is carefully outlined. The navigation is seamlessly integrated. Thanks to fluid layout the UI displays information correctly regardless of the screen dimension. The presentation page has several screenshots and comments of the author.

GHA

GHA is a website with a dark coloring that produces enough aesthetics to let users enjoy the composition and, at the same time, exploit the potential to the full extent. The design owes its unique and alluring appeal to the infographic-inspired theme. The interface is harmoniously enriched with maps, charts, and some other matching elements.

Donate to Band Brand

The website lists articles from various categories in a pleasant way. Although it is still pulled by a linear layout that displays pieces of the content portion by portion; however, thanks to marvelous aesthetics, beautiful and handy interface the concept grabs the attention. Set of tools for quick refinement is a nice touch.

Provokator

The project bursts with a vast amount of energy, boxy vibe, and geometric appeal. It is based on a classic three-column structure that due to some original twists looks visually appealing and attention-grabbing. As befits, both sidebars assist users in moving around, while the central part showcases the relevant information that is broken into digestible fragments.

Conclusion

When you lack in inspiration, and Dribbble and Behance are failed to help you, it is time to surf through case studies of the most respectable digital agency. They always have something to show off; something that you won’t find in the regular galleries. Not only do you get an opportunity to examine the project thoroughly, but you can also get acquainted with challenges and problems that occurred during the workflow and may find out some hints for solving them.


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

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

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

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

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

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

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

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

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

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

The 5 core elements of a web design case study

1. The Overview

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

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

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

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

2. The Context and Challenge

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

This section can be distilled into three main elements:

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

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

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

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

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

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

3. The Process and Insight

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

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

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

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

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

4. The Solution

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

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

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

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

5. The Results

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

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

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

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

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

5 examples of creative web design case studies

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

Aerolab — Xapo

Fantasy Interactive — Airlines Project

Michael Evensen — Soundcloud App

Robin Noguier — Allocine

Super Top Secret — University of Oregon

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

About the Author

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

Follow @SimonHeats

EmailPinterestFacebookFacebookLinkedIn

Let’s grow your freelance or agency business.

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

Thanks for subscribing

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

Learn more

Let’s grow your freelance or agency business.

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

No charge. Unsubscribe anytime.

Thanks for subscribing

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

Learn more

0 thoughts on “Case Study Website Layout

Leave a Reply

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