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 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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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 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.
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.
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.
Whether you’re looking for a studio job or you want to get some new freelance clients, you need a good portfolio. I’m talking more than just a series of curated images with a short description of the project. I know you can do better than that.
You should be creating in-depth case studies around your work—and they should document your process and market your services on your website. This is much better than just having a gallery as your portfolio for several very important reasons:
- It can serve as the final presentation of your project when it comes time to send off your final work to the client
- More content on the page means your portfolio piece ranks higher in search results
- By showcasing your process, you’re giving clients a better idea of how you work, which lays down their expectations for future projects
- It gives you the opportunity to prove your worth and show that you can satisfy your customers’ needs
- It can help lead the user to contact you for a new project with a tailored call to action
In this article, I’ll go over the key elements that make a good case study and the steps you need to take to get more clients from your design portfolio.
Document your process
The easiest way to create your case study: document your process along the way. This includes taking screenshots and photographs of your process while keeping detailed notes that explain your design decisions.“The easiest way to create a case study: document your process along the way.”
So at every stage of the project when you make an internal revision, document it and explain why you made it. By explaining your process in this way, you’re able to keep yourself in check to ensure that you’re making the right decisions based on your client’s goals and not your personal aesthetic or gut feeling.
To keep your notes and images organized you can use Behance’s WIP (Work In Progress) feature that allows you to show your work in its early stages, and get feedback on it from your followers that can help guide the artistic direction.
This has been especially helpful for me because it simplifies the process of putting my ideas together while making connections with other creative professionals online. Check out the example above where you can see my process of creating my 26 Letters piece for my new homepage.
Your case study doubles as your final presentation
Another added benefit to creating case studies is that they also serve as an excellent final presentation to give to your client once production is complete. For me, this always wows my clients because it proves that my project perfectly aligns with their expectations and goals. And that makes it really hard for them to ask for revisions later on.“Case studies also serve as an excellent final presentation for clients.”
Then, once the client approves my artwork and pays the final installment, I can easily reuse my presentation to post a detailed case study in my portfolio. Double win!
Here’s a sample of a recent logo design case study I created for Paper Tiger Mentoring that showcases the steps I took to complete the design. Notice how much more engaging this is and how my revisions have reasons behind them. It’s hard to argue with a final result when everything you made reflects what’s most appropriate to attract my client’s demographic.
So rather than just sending your client the final static image of your project, why not create a case study that serves as the final presentation instead? Think of how much better of an impression it would make to send your client the beautiful final result in addition to showing the steps you took to get there.
The 6 key principles to the perfect case study
Now that you understand the importance of case studies, let’s break down the key elements that will get your portfolio noticed and keep the project inquiries rolling in.
Try framing your first case study from an educational perspective. This means having a dedicated page on your website that helps others understand your creative process. This is not an easy task at first because you probably won’t have much experience writing about your work, but with practice it gets a lot easier and really fun.
1. Provide a meaningful overview for the non-readers
The project overview is the first piece of content on the page that allows your visitors to get some additional information about the project and understand what was accomplished. Keep this short and to the point so that the skimmers and browsers can get a quick look at what your project is all about without having to read the full case study.
Here’s an example of how I introduced my hand-lettered logo design project for Say Something Marketing. Notice that I provide some key information before I start to talk about my process like industry, creation date, project duties, and objective. You can either break down the info like how I have here, or provide just a few lines for your overview. Just be sure to include the problems that your client is trying to solve so that you can talk about your process with their goals in mind.
Along with this introduction, it’s important to show the final result upfront before going into the beginning stages of your process. You don’t want to make the user scroll down to the bottom of the page in order to see the final result of your beautiful work.
2. Show pictures—lots and lots of pictures
Your images should tell the complete story of how you got from your initial research all the way to your final product. This means taking screenshots, uploading high-quality pictures of sketches, creating mockups, and anything else that can help visualize your story. Give your users some eye candy and seduce them to read your content.
People love seeing the evolution of a project and how it came to life. Watching a project form step-by-step is not only engaging, it also makes you more relatable when you show the mistakes you made along the way.
So don’t worry if one of your process shots isn’t perfect or camera-ready. It’s a work in progress—it’s not supposed to be perfect on the first try. Check out my process for creating my Stop Staring Poster. It has imperfections, but that’s what makes the final result so much more interesting.
3. Describe the reason behind your decisions
Every color, line, and letter you use in your designs should have a purpose and reason it works best for your client. The purpose of the case study is to put the design project into context and to show how it works in a real world situation, as opposed to showing only how the final product looks.
This is why you have an in-depth onboarding process before starting production so you can get a detailed and clear view of what your client wants. In order to land your ideal clients, you need a questionnaire that sets the tone of the project moving forward and gives you everything you need to determine if it’s the right project for you. This way you can over deliver on a project because it’s custom-made to attract their audience.
4. Top it off with a client testimonial
Client testimonials are proof that you can provide work that satisfies your customers. A good testimonial creates trust and has the power to convince even your “tough sell” visitors that your service can make a difference in your customer’s life. So it’s important to not only follow up with your clients to get a review of your services but know how to use your testimonials effectively on your website.“A good testimonial creates trust.”
Most of us ask for testimonials, and if we follow up and pester our customers enough, we get testimonials. But without asking the right questions to probe our clients, our testimonials usually end up looking something like this:
Dina did a great job on this project. I’m very happy and plan to work with her again.
Now that isn’t a bad review, but it doesn’t sell my services or tell a good story of how I am to work with. This is because most clients don’t know how to give testimonials, so as professionals we need to guide them to provide testimonials that will inspire potential clients to hire us.
Here are the 3 basic questions you should ask in order to get a powerful testimonial:
- Discuss your experience working with me.
- What did you like most about your final project?
- Would you hire me again? If so, why?
By asking these questions, I’m able to get a testimonial that tells a vivid story. Check out one of my previous client testimonials for a logo design project I created forBrandScape:
Dina invested hours learning about my brand personality, mission, and style. She was completely transparent about her process and always kept me involved. It was up to Dina to really translate everything we’d discussed to a logo, and the end result blew me away.
The script is playful but clean, and the colors pop beautifully. The logo is visually distinct and professional, and I’m excited to display it every chance I get! I’m so grateful to have had the opportunity to work with Dina for such a unique product, and I plan to work with her again.
Now that’s a testimonial that sells! About 3 days after posting this project and testimonial, I received 5 new inquiries. And they just keep rolling on in—all from one excellent case study.
5. Don’t forget the call to action
Just like any other page on your site, you need a call to action (CTA) to help guide the user to contact you. For me, 82% of the people who look at 3 or more of my projects in my portfolio submit a project request. So having a CTA on your portfolio page is one of the most important pieces of content that will help you get new clients.“Your portfolio page has to have a call to action.”
If you’ve followed the above steps in your case study, you should have enticed your user enough to contact you. Now all you need is to serve up a custom pitch of your services on the bottom of the page with a link to your questionnaire.
There are several ways to make your call to actions stand out, but with each project you should have a custom-written call to action that speaks directly to your user. For example, if a client is looking at my portfolio and is checking out one of my hand-lettered logo designs, they’re most likely interested in hiring me for a similar project.
Rather than having a nonspecific CTA such as “Like what you see? Contact me today for a free quote,” try presenting a more personalized message like “Interested in a hand-lettered logo design that’s custom made to attract your audience? Contact me today for a free quote.”
See the difference? If you were a potential client looking for a logo design, which one would you click on?
6. SEO is important, too
SEO is an often overlooked step when adding new projects to your portfolio. It’s a necessary part of web design that can help you get more organic traffic to your portfolio site.
Your portfolio is filled with work that other clients in those industries want. So a good starting point is to use descriptive long-tail keywords like “logo design for app” or “web design for restaurants.” You already have the content and images to reel them in, and now all you need are some keywords to get their attention on Google.
You can test out search terms by using tools such as Wordtracker and the Google Adwords Keyword Tool. I won’t go into the nuts and bolts of search engine optimization here. (For a crash course in SEO that won’t overwhelm you, check out this article.
Blast your newest project across the internet
After you’ve posted your case study online, the work is only about 90% complete. That extra 10% is going to get new eyes on your portfolio and help you get your work noticed. This means posting your work everywhere your designs are welcomed.
So get active on Facebook, Twitter, and Google+; post your portfolio pieces to Behance, Dribbble, and deviantART. Get creative and film your process and put the video on YouTube or livestream it using Periscope. You could even create a slideshow of your artwork and share it on Slideshare or put together a PDF presentation and upload it to Scribd. The more you link out your newest portfolio piece, the more people you can get looking at your work.
The great thing about marketing yourself isn’t just getting more clients—it’s building a following of other like-minded designers. Tons of designers and art directors are always on the lookout for people to pass design work onto. Once you start forming a good network, you’ll find that more projects will automatically start coming to you, rather than you frantically searching and begging for work.
This was originally published on Letter Shoppe.