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

We hope you enjoyed the first part1 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 Design2
  2. Typography3
  3. Usability Design4
  4. Advertising, Promotion and E-Commerce5
  5. Redesigning Elements and Features6
  6. Complete (Re)branding and (Re)design7
  7. Content and Storytelling (appears on a new page)8
  8. Technical Challenges and Solutions9
  9. Workflow and Optimization10
  10. Last Click11

Content And Storytelling

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

Step-By-Step Landing Page Copywriting | Nathan Barry13

The Art Of Storytelling Around An App14,” 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 App15

Rethinking the Case Study16,” 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 Study17

Retiring The Portfolio Screenshot18,” 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 Screenshot19

Responsibly Leveraging Advanced Web Features20,” 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-Book21,” 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 Layout22,” 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 Layout23

How We Improved Page Speed by Cleaning CSS, HTML and Images24,” 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 Images25

Mein Honig – Brand Identity26,” 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_mini27

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

GitHub: Front End Performance Case Study29

iPad to Windows Store App30,” 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)31

Behind the Scenes of Mad Manimation32,” 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.33

Mad Manimation: Behind the Scenes34

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

Freckle: Embedding Canvas and SVG charts in emails36

Scaling Pinterest From 0 to 10s of Billions of Page Views a Month in Two Years37,” 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 Years38

How We Built a Photoshop Extension With HTML, CSS and JS39,” 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 Extension40

Batch Processing Millions and Millions of Images41,” 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 Images42

Making 100,000 Stars43,” 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 Rocks44

Mastering the Application Cache Manifest for Offline Web Apps and Performance45,” 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 Offlin46

Harvey: A Second Face for Your JavaScript47,” 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      48

Our First Node.js App: Backbone on the Client and Server49,” 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.

airbnb50

Making a 60fps Mobile App51,” 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 App52

The Making of the Interactive Treehouse Ad53,” 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 Design54,” 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 Interface55,” 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 Tesco56,” 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 Sass57,” 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 Development58,” Maciej Pasternacki
These slides show how test-driven development enabled Gnowsis to reimplement Refinder’s basic data model.

Managing JavaScript on Responsive Websites59,” 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 Fat60,” 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 Explorations61,” Paul Lloyd
Lloyd of Clearleft talks about how to maintain knowledge-sharing and collaboration on a growing team.

Visual design explorations62

The Anatomy of an Experience Map63,” 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 Map64

The design process of my infographic for the ‘Tour of France’ for Grinta!65,” 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_mini66

Turning Small Projects Into Big Profit67,” 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 Study68

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

vox70

What We’ve Learned About Responsive Design71,” 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 Design72

The Modular Canvas: A Pragmatic Workflow for Designing Applications73, 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-app74

How We Reduced Our Cancellation Rate by 87.5%75,” 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 Site76,” Justin Tadlock
This study looks at how Theme Hybrid handles memberships after registration and payment.

Post-Implementation, Pre-Launch: A Crucial Checkpoint77,” 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 78,” 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 Studies79,” 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 Coalface80,” Chris Berridge
Working on the frontline, Berridge share his insights on responsive design and returns on investment.

cxpartners:Responsive Design & ROI – observations from the c81

Making Your Site Responsive: Mastering Real-World Constraints82,” 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 Constraints83

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

Goals, Constraints, And Concept In A Redesign - Vanseo Design85

How a Simple Redesign Increased Customer Feedback by 65%86,” 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%87

More on Apples: Mobile Optimization in Ecommerce88,” 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 Design89,” 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 Evaluation90,” 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 Project91

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 Business92 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 and being a part-time politician. 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
  2. 3

    What a great (not to mention comprehensive) list of information. I’m digging in right now. :)

    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