“This Is How We Built It” Case Studies (Part 2)

We hope you enjoyed the first part of this case studies overview. Obviously we don’t want you to get lost, so just check out the list of categories again:

  1. Illustration, Graphics and Logo Design
  2. Typography
  3. Usability Design
  4. Advertising, Promotion and E-Commerce
  5. Redesigning Elements and Features
  6. Complete (Re)branding and (Re)design
  7. Content and Storytelling (appears on a new page)
  8. Technical Challenges and Solutions
  9. Workflow and Optimization
  10. Last Click

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.

Step-By-Step Landing Page Copywriting | Nathan Barry

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.”

The Art Of Storytelling Around An App

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.

Rethinking the Case Study

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).

Retiring The Portfolio Screenshot

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.

Beating Borders: The Bane of Responsive Layout

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.

How We Improved Page Speed By Cleaning 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.

meinhonig_2_mini

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

GitHub: Front End Performance Case Study

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.

Design case study: iPad to Windows Store app (Windows)

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.

Mad Manimation: Behind the Scenes

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

Freckle: Embedding Canvas and SVG charts in emails

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

Scaling Pinterest - From 0 to 10s of Billions of Page Views a Month in Two Years

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!

 Creative Market: How We Built a Photoshop Extension

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.

Etsy: Batch Processing Millions and Millions of Images

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

Making 100,000 Stars - HTML5 Rocks

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

Cinémur: Mastering the Application Cache Manifest for Offlin

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.

Harvey: A Second Face for Your JavaScript

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.

airbnb

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.

Making a 60fps Mobile App

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.

Visual design explorations

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 Anatomy of an Experience Map

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?”

tour-of-france-grinta_mini

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.

Turning Small Projects Into Big Profit, A Case Study

Staticity No More,” Ted Irvine and Uy Tieu
Vox shares how they overhauled their workflow by using StyleTiles.

vox

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.

What We've Learned About Responsive Design

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.

workflow-app

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.

cxpartners:Responsive Design & ROI – observations from the c

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.

Making Your Site Responsive — Mastering Real-World Constraints

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

Goals, Constraints, And Concept In A Redesign - 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%.

How a simple redesign 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.

Last Click

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.

Mentoring a Project

Until Next Time

We hope this collection will prove to be a valuable resource in your quest to deliver great work. And we hope it will inspire you to share the knowledge and experience you’ve gained on your own.

If you do client work, make sure your contracts allow you to share it, so that you don’t get into trouble. Episode 20 of Unfinished Business talks about secrecy and non-disclosure agreements.

Are we missing your favorite case study? Share it with us in the comments!

(al) (il) (ea)

Former trainee Melanie, completed her degree in Philosophy, Politics and Economics at Otago University, and is now back working in the Smashing Editorial Team while freelancing as web designer on the side. She's interested in many things like writing, web design, politics, travelling and underwater rugby, and tweets as @mel_in_media.

  1. 1

    nice article! The link to the “Mein Honig – Brand Identity,” isn’t working

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top