Unlike many other industries, the web design community is all about sharing knowledge and experience. Each of us is very lucky to be part of such a great and useful learning environment, and it is up to us to embrace it — to embrace our learning experiences, and also to embrace our ability to share.
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:
Is your pattern library up to date today? Alla Kholmatova has just finished a fully fledged book on Design Systems and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. Just sayin'.
“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:
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. View the finished project.
“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
“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.
“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 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.
(al) (il) (ea)
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.