“This Is How We Built It” Case Studies

Advertisement

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 yourself1 and how to use one to spice up your portfolio2.

In today’s 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!

Here is a quick list of the categories covered:

  1. Illustration, Graphics and Logo Design3
  2. Typography4
  3. Usability5
  4. Advertising, Promotion and E-Commerce6
  5. Redesigning Elements and Features7
  6. Complete (Re)branding and (Re)design8
  7. Content and Storytelling9
  8. Technical Challenges and Solutions10
  9. Workflow and Optimization11
  10. Last Click12

Illustration, Graphics And Logo Design

Illustrator Full Spectrum Spirograph13,” Veerle Pieters
Pieters talks about her experimentation process with spirographs, inspired by the work of Andy Gilmore.

Illustrator full spectrum spirograph14

The Design Process of my Infographic About Women Cycling for Grinta!15,” Veerle Pieters
Pieters shares her experience of the design process behind the infographic on women’s cycling that she produced for Grinta magazine.

Grinta!: Design process of my infographic16

A Systematic Approach to Logo Design17,” Adham Dannaway
Icon design can be time-consuming. Dannaway shows how to systematically approach a new logo design.

Petra Capital: A systematic approach to logo design18

(Re)building a Simplified Firefox Logo19,” Sean Martell
Learn how Firefox’s logo was simplified to better fit its extended usage beyond a desktop web browser.

Firefox: (Re)building a simplified logo20

Five Details21,” Jon Hicks
Jon Hicks shares the design process behind the Five Details Logo, including the design and choice of typography.

Five Details: Logo design study22

Iconfinder Logo23,” SoftFacade
SoftFacade completely reimagined Iconfinder’s existing identity and came up with a shiny and modern robot character. View the detailed design process.

Iconfinder: Logo Case Study24

The Great Gatsby25
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.26

gatsby27

Whitney Graphic Identity28,” 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.

Whitney Graphic Identity29

My ‘Tour de France’ posters30,” 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.

Tour de France posters31

Typography

Type study: Sizing the legible letter32

Designing Type Systems33,” 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.

Designing type systems34

Novel Constructions: The Making of a Typeface35,” Christopher Dunst
Dunst shares the process behind the creation of the “Novel” typeface.

Novel Constructions | I love typography, the typography and fonts blog36

The Development of the Signage Typeface Wayfinding Sans Pro37,” Ralf Herrmann
Herrmann describes the development of the Wayfinding Sans Pro, a signage typeface that can be read from a long distance.

The design of a signage typeface | I love typography, the typography and fonts blog38

The Making of FF Tundra39,” Ludwig Übele
Übele shares the process behing making the FF Tundra typeface, which was highly inspired by nature.

The making of FF Tundra40

The Making of Magasin41,” Laura Meseguer
Meseguer writes how she created Magasin, a typefaces inspired by fluid handwriting.

Magasin: The making of42

Type Study43” series, Adobe Typekit
Typekit features a whole series of case studies of typography:

Usability

Social Login Buttons Aren’t Worth It51,” MailChimp
Social login buttons are used by many apps today. MailChimp shares its own experience and considerations in using social login buttons.

MailChimp: Social Login Buttons Aren’t Worth It52

Usability in Icons53,” 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.

Usability in Icons | Stiern54

iOS Icon Design: A Designer’s Exploration55,”
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.

Notorious: iOS icon design - A designers exploration56

The Making of Octicons57,” 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.

GitHub: The Making of Octicons58

Designing Facebook Home59,” 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.

Designing Facebook Home60

Advertising, Promotion And E-Commerce

How to Make Your Own App Promo Cards61,” 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!

How to Make Your Own App Promo Cards62

The Art of Launching an App63,” 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.

The Art Of Launching An App: A Case Study | Smashing UX Design64

How to Launch Anything65,” 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.

launch-anything66

Selling My E-Book on Amazon67,” 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 Website68,”
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 Tweets69,” 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. Noise70,” 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.

37signals: Visual Exploration behind Signal vs. Noise71

Reinventing Our Default Profile Pictures 72,” 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.

37signals: Reinventing our Default Profile Pictures 73

Login Screen Design: Behind the Scenes74,” 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.

GoSquared Blog: Login Screen Design and UX75

Save for Later76,” 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.

Mozilla UX: Save For Later77

A Closer Look at Zoom78,” FiftyThree
FiftyThree shares the design process behind the new zoom feature in its Paper app.

Paper: A closer look at zoom79

Reinventing the Investment Calculator80,” 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.

Reinventing the investment calculator81

Getting Down to Business82,” 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.

The Globe And Mail83

Olympics: User Experience and Design84,” Nick Haley
Nick Haley shares the BBC’s design process of delivering the Olympics across desktop, tablet, mobile and connected TV.

BBC Olympics: User Experience and Design85

How We Built the Responsive Olympics Site86,” Matt Clark
Matt Clark writes about MSN UK’s approach to delivering the Olympics digitally, from the brief to the finished design.

How we built MSN UK's responsive Olympics site87

The Anatomy Of A Successful Logo Redesign88,” 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.

The Anatomy Of A Successful Logo Redesign89

What I Want Out of Facebook90,” 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.

Field Study: What I Want Out of Facebook91

In Praise of Lost Time92,” 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.

Facebook Timeline: In praise of lost time93

Designing the new, fully responsive Wired.co.uk article pages94,” Javier Ghaemi
This article is about redesigning the Wired.co.uk article website to provide a more content-first and immersive experience.

wired95

Complete (Re)branding And (Re)design

How to Approach a Responsive Design96,” 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.

How to Approach a Responsive Design97

Responsive Design Case Study98,” 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.

South Tees Hospital:  Responsive Design case study99

Rebuilding a University Homepage to Be Responsive. Twice. In Less Than a Year100,” 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.

Rebuilding a university homepage to be 101

Yes, You Really Can Make Complex Web Apps Responsive102,” 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.

Adioso: Yes, you really can make complex web apps responsive103

Designing a New Playground Brand104,” 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.

Playground: Designing a New Playground Brand105

How House Parties Helped Us Design Potluck106,” Cemre Güngör
The team at Potluck describes how it took inspiration from reality to design a “house party on the Internet.”

How house parties helped us design Potluck107

Colorado Identity108,” 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.

Making Colorado109

Building the New Financial Times Web App110,” 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.

Building The New Financial Times Web App111

Google Treasure Maps112,” Alex Griendling
Griendling writes about the design process behind Google Maps’ treasure mode.

Google Treasure Maps: About the design process113

Find Your Way to Oz114,” 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.

Case Study: Find Your Way to Oz - HTML5 Rocks115

The Making of the Moscow Metro Map 2.0116,” 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.

The making of the Moscow Metro Map 2.0117

Skinny Ties and Responsive eCommerce118,” Brendan Falkowski
Read and learn how GravDept redesigned Skinny Ties’ creative and technical direction to propel shopping on every device.

Skinny Ties: Responsive eCommerce119

The Design Thinking Behind the New Disney.com120,” 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.

Disney: The design thinking behind the new online presence121

Say Hello to the New ISO122,” Andy Clarke
Clarke and David Roessli redesigned the website of the ISO (International Organization for Standardization) and share their experience.

Say hello to the new ISO123

A Responsive Design Case Study124,” David Bushell
The redesign of Passenger Focus takes advantage of the Web as an unique medium.

PassengerfocusA Responsive Design Case Study – David Bushell125

BBC News: Responsive Web Design and Mustard126,” Kaelig Deloumeau-Prigent
These slides address the core principles and the “cutting the mustard” technique behind the BBC News’ responsive website.

BBC News: Responsive Web Design and Mustard127

The Trello Tech Stack128,” Brett Kiefer
Read the process behind the Trello app, from initial mockup to a solid server and maintainable client.

Trello: The Trello Tech Stack129

Responsibly Responsive: Developing the Greenbelt Website130,” Rachel Andrew
Andrew writes about her front-end design decisions in rebuilding the Greenbelt Festival’s website.

Greenbelt: Responsibly Responsive website development131

The Digital-Physical: On Building Flipboard for iPhone and Finding the Edges of Our Digital Narratives132,” Craig Mod
Mod walks through the process of building the Flipboard app for iPhone and of finding the edges of its digital narratives.

The Digital?Physical: On building Flipboard for iPhone and Finding Edges for Our Digital Narratives133

Page-Flip Effect From 20 Things I Learned134,” 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.

20 thiCase Study: Page Flip Effect from 20thingsilearned.com135

Six Key Lessons From a Design Legend136,” 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.

Six Key Lessons from a Design Legend (a before-and-after) | GiftRocket Blog137

Breaking The Rules: A UX Case Study138,” Laura Klein
Klein shows how she broke all rules to create the great UX for Outright.

Outright: Breaking The Rules - A UX Case Study139

7 UX Considerations When Designing Lens Hawk140,” Christian Holst
Lens Hawk is a massive DSLR lens database. This article shares seven UX considerations that were made in its design process.

Lens Hawk: 7 UX Considerations141

The Story of the New Microsoft.com142,” Nishant Kothary
Kothary shares his insight into making Microsoft’s new website. Also, check out Trent Walton’s perspective on the redesign143.

The Story of the New Microsoft.com144

Behind the Scenes of the New Kippt145,” 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.

New Kippt: Behind The Scenes146

Crayola: Free the ‘What If’147,” Daniel Mall
Dan Mall has put together a case study of the creation of the new Crayola application for kids.

Crayola: Free the 148

Campus Quad iPhone App149,” Soft Facade
Soft Facade covers every aspects of the design process behind its Campus Quad app.

Campus Quad: iPhone App Case Study150

How to Make a Vesper: Design151,” Vesper
Learn how the Vesper app was designed and made.

Vesper: How to Make a Vesper: Design152

Betting on a Fully Responsive Web Application153,” 14islands
Read about how 14islands took the web app for Kambi, a sports-betting service, to the next level.

Kambi: Betting on a fully responsive web application154

AMMO Rack App Design Critique155,” Alexander Komarov
An interesting study of the feedback process that improved the AMMO Rack app.

AMMO Rack:  App Design Critique156

Walking Through the Design Process157,” Ian Storm Taylor
Taylor walks you through the design process of Segment.io, including the progression of mockups in Photoshop.

Segment.io: Walking Through the Design Process158

Music Video ‘Lights’: The Latest WebGL Sensation159,” 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.

Music video 'Lights': the latest WebGL sensation!160

Designing for Designers161,” Kyle Meyer
Designing for other designers is different than working for regular clients. Kyle Meyer shares his experience.

Adapting to a Responsive Design162,” Matt Gibson
Cyber-Duck abandoned its separate mobile website and created a new responsive design.

Cyber-Duck: Adapting To A Responsive Design163

Grids, Flexibility and Responsiveness164,” Laura Kalbag
Kalbag shares her thoughts on the redesign of her own website, including her choice of typefaces.

Laura Kalbag: Grids, flexibility and responsiveness165

Making of Typespiration166,” Rafal Tomal
Rafal Tomal built Typespiration as a side project. Learn about the process from initial idea to finished WordPress website.

Typespiration: Making of167

Case Studies168,” Fi
Design firm Fi has integrated case studies into its portfolio. The studies are very interactive and beautifully designed. Here are four of them:

Fi Case studies173

More Case Studies!

Perhaps you are more interested in case-studies on copywriting, content and storytelling, technical challenges, or just workflow and optimization tips? Well, off we go to the second part of the overview174. Now you should be well prepared for a couple of late reading sessions over the next weekends!

(al) (il) (ea)

Footnotes

  1. 1 http://www.newfangled.com/rethinking_the_case_study
  2. 2 http://www.smashingmagazine.com/2012/11/06/retiring-portfolio-screenshot/
  3. 3 #a1
  4. 4 #a2
  5. 5 #a3
  6. 6 #a4
  7. 7 #a5
  8. 8 #a6
  9. 9 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a7
  10. 10 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a8
  11. 11 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a9
  12. 12 http://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a10
  13. 13 http://veerle.duoh.com/design/article/illustrator_full_spectrum_spirograph
  14. 14 http://veerle.duoh.com/design/article/illustrator_full_spectrum_spirograph
  15. 15 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_about_women_cycling_for_grinta
  16. 16 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_about_women_cycling_for_grinta
  17. 17 http://www.adhamdannaway.com/blog/branding/a-systematic-approach-to-logo-design
  18. 18 http://www.adhamdannaway.com/blog/branding/a-systematic-approach-to-logo-design
  19. 19 http://blog.seanmartell.com/2013/06/27/rebuilding-a-simplified-firefox-logo/
  20. 20 http://blog.seanmartell.com/2013/06/27/rebuilding-a-simplified-firefox-logo/
  21. 21 http://hicksdesign.co.uk/journal/five-details
  22. 22 http://hicksdesign.co.uk/journal/five-details
  23. 23 http://softfacade.com/work/iconfinder/
  24. 24 http://softfacade.com/work/iconfinder/
  25. 25 http://printbench.com/the-great-gatsby/
  26. 26 http://www.behance.net/gallery/THE-GREAT-GATSBY/8550121
  27. 27 http://printbench.com/the-great-gatsby/
  28. 28 http://www.experimentaljetset.nl/archive/whitney-museum-identity
  29. 29 http://www.experimentaljetset.nl/archive/whitney-museum-identity
  30. 30 http://veerle.duoh.com/design/article/my_tour_de_france_posters
  31. 31 http://veerle.duoh.com/design/article/my_tour_de_france_posters
  32. 32 http://blog.typekit.com/category/type-study/
  33. 33 http://ilovetypography.com/2012/04/11/designing-type-systems/
  34. 34 http://ilovetypography.com/2012/04/11/designing-type-systems/
  35. 35 http://ilovetypography.com/2012/05/15/making-fonts-novel-typeface/
  36. 36 http://ilovetypography.com/2012/05/15/making-fonts-novel-typeface/
  37. 37 http://ilovetypography.com/2012/04/19/the-design-of-a-signage-typeface/
  38. 38 http://ilovetypography.com/2012/04/19/the-design-of-a-signage-typeface/
  39. 39 http://ilovetypography.com/2011/10/05/the-making-of-ff-tundra/
  40. 40 http://ilovetypography.com/2011/10/05/the-making-of-ff-tundra/
  41. 41 http://ilovetypography.com/2013/04/25/magasin-font-making-of/
  42. 42 http://ilovetypography.com/2013/04/25/magasin-font-making-of/
  43. 43 http://blog.typekit.com/category/type-study/
  44. 44 http://blog.typekit.com/2013/05/01/hi-dpi-typography/
  45. 45 http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/
  46. 46 http://blog.typekit.com/2012/05/23/type-study-pairing-typefaces/
  47. 47 http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
  48. 48 http://blog.typekit.com/2011/05/17/type-study-stereo-typography/
  49. 49 http://blog.typekit.com/2011/03/24/type-study-choosing-fallback-fonts/
  50. 50 http://blog.typekit.com/2012/04/24/type-study-techniques-for-using-novelty-fonts/
  51. 51 http://blog.mailchimp.com/social-login-buttons-arent-worth-it/
  52. 52 http://blog.mailchimp.com/social-login-buttons-arent-worth-it/
  53. 53 http://stiern.com/articles/usability/usability-in-icons/
  54. 54 http://stiern.com/articles/usability/usability-in-icons/
  55. 55 http://thetechblock.com/an-ios-icon-design-exploration/
  56. 56 http://thetechblock.com/an-ios-icon-design-exploration/
  57. 57 https://github.com/blog/1135-the-making-of-octicons
  58. 58 https://github.com/blog/1135-the-making-of-octicons
  59. 59 http://vimeo.com/68749840
  60. 60 http://vimeo.com/68749840
  61. 61 http://blog.mikeswanson.com/post/32759154825/yourownapppromocards
  62. 62 http://blog.mikeswanson.com/post/32759154825/yourownapppromocards
  63. 63 http://www.smashingmagazine.com/2012/04/05/art-of-launching-app-case-study/
  64. 64 http://www.smashingmagazine.com/2012/04/05/art-of-launching-app-case-study/
  65. 65 http://www.smashingmagazine.com/2013/06/28/how-to-launch-anything/
  66. 66 http://www.smashingmagazine.com/2013/06/28/how-to-launch-anything/
  67. 67 http://snook.ca/archives/writing/selling-ebook-on-amazon
  68. 68 http://boagworld.com/talks/unbelievable-ecommerce/
  69. 69 http://blog.mailchimp.com/twitter-promoted-tweets/
  70. 70 http://37signals.com/svn/posts/3316-visual-exploration-behind-signal-vs-noise
  71. 71 http://37signals.com/svn/posts/3316-visual-exploration-behind-signal-vs-noise
  72. 72 http://37signals.com/svn/posts/3104-behind-the-scenes-reinventing-our-default-profile-pictures
  73. 73 http://37signals.com/svn/posts/3104-behind-the-scenes-reinventing-our-default-profile-pictures
  74. 74 https://www.gosquared.com/blog/archives/3359
  75. 75 https://www.gosquared.com/blog/archives/3359
  76. 76 https://blog.mozilla.org/ux/2012/10/save-for-later/
  77. 77 https://blog.mozilla.org/ux/2012/10/save-for-later/
  78. 78 http://making.fiftythree.com/a-closer-look-at-zoom
  79. 79 http://making.fiftythree.com/a-closer-look-at-zoom
  80. 80 http://makaluinc.com/blog/2012/10/reinventing-the-investment-calculator.html
  81. 81 http://makaluinc.com/blog/2012/10/reinventing-the-investment-calculator.html
  82. 82 http://www.teehanlax.com/story/globe-and-mail/
  83. 83 http://www.teehanlax.com/story/globe-and-mail/
  84. 84 http://www.bbc.co.uk/blogs/internet/posts/olympics_design
  85. 85 http://bbc.in/Nkqt4Z
  86. 86 http://www.creativebloq.com/web-design/how-we-built-msn-uks-responsive-olympics-site-9134646
  87. 87 http://www.creativebloq.com/web-design/how-we-built-msn-uks-responsive-olympics-site-9134646
  88. 88 http://www.fastcodesign.com/1672938/the-anatomy-of-a-successful-logo-redesign
  89. 89 http://www.fastcodesign.com/1672938/the-anatomy-of-a-successful-logo-redesign
  90. 90 http://blog.keenancummings.com/post/34832313784/knitt-what-i-want-out-of-facebook
  91. 91 http://blog.keenancummings.com/post/34832313784/knitt-what-i-want-out-of-facebook
  92. 92 http://www.domusweb.it/en/design/in-praise-of-lost-time/
  93. 93 http://www.domusweb.it/en/design/in-praise-of-lost-time/
  94. 94 http://views.fromthe7th.com/posts/2013/05/designing-the-new-fully-responsive-wiredcouk-article-pages
  95. 95 http://views.fromthe7th.com/posts/2013/05/designing-the-new-fully-responsive-wiredcouk-article-pages
  96. 96 http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
  97. 97 http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
  98. 98 http://builtbyboon.com/blog/responsive-design-case-study
  99. 99 http://builtbyboon.com/blog/responsive-design-case-study
  100. 100 https://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than-a-year
  101. 101 https://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than-a-year
  102. 102 http://adioso.com/blog/2013/06/responsifying-adioso/
  103. 103 http://adioso.com/blog/2013/06/responsifying-adioso/
  104. 104 http://playgroundinc.com/blog/finding-and-redefining-playground-brand/
  105. 105 http://playgroundinc.com/blog/finding-and-redefining-playground-brand/
  106. 106 https://medium.com/p/308c1d5cd789
  107. 107 https://medium.com/p/308c1d5cd789
  108. 108 http://coloradoidentity.tumblr.com/
  109. 109 http://coloradoidentity.tumblr.com/
  110. 110 http://www.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/
  111. 111 http://www.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/
  112. 112 http://blog.alexlikesdesign.com/post/46850507084/today-marks-the-launch-of-google-treasure-maps
  113. 113 http://blog.alexlikesdesign.com/post/46850507084/today-marks-the-launch-of-google-treasure-maps
  114. 114 http://www.html5rocks.com/en/tutorials/casestudies/oz/
  115. 115 http://www.html5rocks.com/en/tutorials/casestudies/oz/
  116. 116 http://www.artlebedev.com/everything/metro/map2/process/
  117. 117 http://www.artlebedev.com/everything/metro/map2/process/
  118. 118 http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
  119. 119 http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
  120. 120 http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
  121. 121 http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
  122. 122 http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso
  123. 123 http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso
  124. 124 http://dbushell.com/2012/06/17/passenger-focus-responsive-web-design-case-study/
  125. 125 http://dbushell.com/2012/06/17/passenger-focus-responsive-web-design-case-study/
  126. 126 http://www.slideshare.net/kaelig/bbc-news-responsive-web-design-and-mustard
  127. 127 http://www.slideshare.net/kaelig/bbc-news-responsive-web-design-and-mustard
  128. 128 http://blog.fogcreek.com/the-trello-tech-stack/
  129. 129 http://blog.fogcreek.com/the-trello-tech-stack/
  130. 130 http://www.rachelandrew.co.uk/archives/2012/03/16/responsibly-responsive-developing-the-greenbelt-website/
  131. 131 http://www.rachelandrew.co.uk/archives/2012/03/16/responsibly-responsive-developing-the-greenbelt-website/
  132. 132 http://craigmod.com/journal/digital_physical/
  133. 133 http://craigmod.com/journal/digital_physical/
  134. 134 http://www.html5rocks.com/tutorials/casestudies/20things_pageflip.html
  135. 135 http://www.html5rocks.com/tutorials/casestudies/20things_pageflip.html
  136. 136 http://www.giftrocket.com/blog/design-tips-from-a-master
  137. 137 http://www.giftrocket.com/blog/design-tips-from-a-master
  138. 138 http://www.smashingmagazine.com/2011/08/17/breaking-the-rules-a-ux-case-study/
  139. 139 http://www.smashingmagazine.com/2011/08/17/breaking-the-rules-a-ux-case-study/
  140. 140 http://baymard.com/blog/ux-considerations-designing-lenshawk
  141. 141 http://baymard.com/blog/ux-considerations-designing-lenshawk
  142. 142 http://rainypixels.com/words/the-story-of-the-new-microsoft-com/
  143. 143 http://trentwalton.com/2012/10/03/a-new-microsoft-com/
  144. 144 http://rainypixels.com/words/the-story-of-the-new-microsoft-com/
  145. 145 http://theindustry.cc/2013/04/26/behind-the-scenes-of-the-new-kippt/
  146. 146 http://theindustry.cc/2013/04/26/behind-the-scenes-of-the-new-kippt/
  147. 147 http://danielmall.com/work/crayola/
  148. 148 http://danielmall.com/work/crayola/
  149. 149 http://softfacade.com/work/campusquad/
  150. 150 http://softfacade.com/work/campusquad/
  151. 151 http://vesperapp.co/blog/how-to-make-a-vesper/
  152. 152 http://vesperapp.co/blog/how-to-make-a-vesper/
  153. 153 http://blog.14islands.com/post/52546836134/case-study-betting-on-a-fully-responsive-web
  154. 154 http://blog.14islands.com/post/52546836134/case-study-betting-on-a-fully-responsive-web
  155. 155 http://www.akomarov.com/critboard/2011-ammo-rack-app-design-critique
  156. 156 http://www.akomarov.com/critboard/2011-ammo-rack-app-design-critique
  157. 157 http://ianstormtaylor.com/walking-through-the-design-process/
  158. 158 http://ianstormtaylor.com/walking-through-the-design-process/
  159. 159 http://www.netmagazine.com/features/behind-scenes-lights-latest-webgl-sensation
  160. 160 http://www.netmagazine.com/features/behind-scenes-lights-latest-webgl-sensation
  161. 161 http://methodandcraft.com/articles/designing-for-designers
  162. 162 http://www.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/
  163. 163 http://www.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/
  164. 164 http://laurakalbag.com/grids-flexibility-and-responsiveness/
  165. 165 http://laurakalbag.com/grids-flexibility-and-responsiveness/
  166. 166 http://rafaltomal.com/making-of-typespiration-com/
  167. 167 http://rafaltomal.com/making-of-typespiration-com/
  168. 168 http://www.f-i.com/work/all
  169. 169 http://www.f-i.com/fi/airlines/
  170. 170 http://www.f-i.com/google/ramayana
  171. 171 http://www.f-i.com/sony/connected-world/
  172. 172 http://blog.f-i.com/usatoday-com-redesigning-one-of-americas-most-popular-news-site/
  173. 173 http://www.f-i.com/work/all
  174. 174 http://www.smashingmagazine.com/this-is-how-we-built-it-case-studies-part-2/

↑ Back to topShare on Twitter

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.

Advertising
  1. 1

    I must say that Typography is certainly a key aspect of modern design. Thanks for the share!

    2
  2. 2

    Great set of references, thank you!

    1
  3. 3

    Another great example of this is Splinters ( http://www.splinter.co.uk ) insight into creating a series of Bitesize games for the BBC — http://www.splinter.co.uk/inside-the-world-of-bitesize/

    1
  4. 4

    Christopher Butler

    July 19, 2013 4:28 pm

    Hey, great piece! And thanks for linking to my “Rethinking the Case Study” article :)

    0
  5. 5

    Fantastic! Thanks so much! This is why I love this industry. You’ve inspired me to share some work of my own, thank you!

    0
  6. 6

    Great stuff, thanks for all these nice articles to read.

    0
  7. 7

    Well, this article could’ve been cut by half to be honest as some of the things are quite obvious for the average designer…

    However the ‘logo/icon’ approach was pretty cool, thanks for the post.

    0
  8. 8
  9. 9

    Greatest.
    Post.
    Ever.

    1
  10. 10

    Wow, thanks for this post – this is super interesting and helpful!

    1
  11. 11

    Invaluable post – thanks so much – this will keep me busy for awhile!

    1
  12. 12

    I like MailChimp a lot. It’s a killer app…file under nitpick:

    I use MC about twice a month personally and usually set it up for clients…but, it still takes me 10 clicks to locate my API when I need it. A search within MC dashboard takes you to explanation of what an API is rather than the APIs themselves.

    If usability was their goal, this key functionality needs to be made more prominent.

    1
  13. 13

    Impressive article!

    1
  14. 14

    So much information in here! really reminds me of why I got into this sort of work in the first place. Collaboration and Imagination

    1
  15. 15

    Nikhil Malhotra

    July 31, 2013 9:38 pm

    Great article!! Reading others case study always helps in improving ones own process. It gives insight in what we are doing correct and what are we doing wrong.

    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