Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

75 Instructive Case Studies – This Is How We Built It

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

Further Reading on SmashingMag: Link

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!

Here is a quick list of the categories covered:

  1. Illustration, Graphics and Logo Design6
  2. Typography7
  3. Usability8
  4. Advertising, Promotion and E-Commerce9
  5. Redesigning Elements and Features10
  6. Complete (Re)branding and (Re)design11
  7. Content and Storytelling12
  8. Technical Challenges and Solutions13
  9. Workflow and Optimization14
  10. Last Click15
  11. Illustration, Graphics and Logo Design16
  12. Typography17
  13. Usability Design18
  14. Advertising, Promotion and E-Commerce19
  15. Redesigning Elements and Features20
  16. Complete (Re)branding and (Re)design21
  17. Content and Storytelling (appears on a new page)22
  18. Technical Challenges and Solutions23
  19. Workflow and Optimization24
  20. Last Click25

Illustration, Graphics And Logo Design

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

Illustrator full spectrum spirograph27

The Design Process of my Infographic About Women Cycling for Grinta!28,” 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 infographic29

A Systematic Approach to Logo Design30,” 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 design31

(Re)building a Simplified Firefox Logo32,” 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 logo33

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

Five Details: Logo design study35

Iconfinder Logo36,” 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 Study37

“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.38

gatsby

Whitney Graphic Identity39,” 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 Identity40

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

Typography

Type study: Sizing the legible letter

Designing Type Systems43,” 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 systems44

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

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

The Development of the Signage Typeface Wayfinding Sans Pro47,” 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 blog48

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

The making of FF Tundra50

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

Magasin: The making of52

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

Usability

Social Login Buttons Aren’t Worth It60,” 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 It61

Usability in Icons62,” 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 | Stiern63

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

Notorious: iOS icon design - A designers exploration

The Making of Octicons64,” 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 Octicons65

Designing Facebook Home66,” 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 Home67

Advertising, Promotion And E-Commerce

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

The Art of Launching an App70,” 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 Design71

How to Launch Anything72,” 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-anything73

Selling My E-Book on Amazon74,” 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 Website75,”
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 Tweets76,” 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. Noise77,” 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. Noise78

Reinventing Our Default Profile Pictures 79,” 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 80

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

Save for Later83,” 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 Later84

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

Paper: A closer look at zoom86

Reinventing the Investment Calculator87,” 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 calculator88

Getting Down to Business89,” 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 Mail90

Olympics: User Experience and Design91,” 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 Design92

How We Built the Responsive Olympics Site93,” 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 site94

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

What I Want Out of Facebook97,” 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 Facebook98

In Praise of Lost Time99,” 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 time100

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

wired

Complete (Re)branding And (Re)design

How to Approach a Responsive Design101,” 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 Design102

Responsive Design Case Study103,” 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 study104

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

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

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

Designing a New Playground Brand107,” 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 Brand108

How House Parties Helped Us Design Potluck109,” 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 Potluck110

Colorado Identity111,” 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 Colorado112

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

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

Google Treasure Maps: About the design process116

Find Your Way to Oz117,” 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 Rocks118

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

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

Skinny Ties: Responsive eCommerce122

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

Say Hello to the New ISO125,” 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 ISO126

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

PassengerfocusA Responsive Design Case Study – David Bushell128

BBC News: Responsive Web Design and Mustard129,” 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 Mustard130

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

Trello: The Trello Tech Stack132

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

Greenbelt: Responsibly Responsive website development134

The Digital-Physical: On Building Flipboard for iPhone and Finding the Edges of Our Digital Narratives135,” 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 Narratives136

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

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

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

Outright: Breaking The Rules - A UX Case Study142

7 UX Considerations When Designing Lens Hawk143,” 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 Considerations144

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

The Story of the New Microsoft.com147

Behind the Scenes of the New Kippt148,” 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 Scenes149

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

Crayola: Free the 151

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

Campus Quad: iPhone App Case Study153

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

Vesper: How to Make a Vesper: Design155

Betting on a Fully Responsive Web Application156,” 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 application157

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

AMMO Rack: App Design Critique159

Walking Through the Design Process160,” 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 Process161

Music Video ‘Lights’: The Latest WebGL Sensation162,” 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!163

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

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

Cyber-Duck: Adapting To A Responsive Design166

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

Laura Kalbag: Grids, flexibility and responsiveness168

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

Typespiration: Making of170

Case Studies171,” 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 studies176

Content And Storytelling

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

Step-By-Step Landing Page Copywriting | Nathan Barry178

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

“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 Screenshot181,” 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 Screenshot182

“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-Book183,” 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 Layout184,” 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 Layout185

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

Mein Honig – Brand Identity188,” 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_mini189

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

GitHub: Front End Performance Case Study191

iPad to Windows Store App192,” 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)193

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

Mad Manimation: Behind the Scenes196

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

Freckle: Embedding Canvas and SVG charts in emails198

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

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

Batch Processing Millions and Millions of Images203,” 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 Images204

Making 100,000 Stars205,” 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 Rocks206

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

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

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

airbnb212

Making a 60fps Mobile App213,” 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 App214

The Making of the Interactive Treehouse Ad215,” 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 Design216,” 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 Tesco217,” 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 Sass218,” 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 Fat219,” 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 Explorations220,” Paul Lloyd
Lloyd of Clearleft talks about how to maintain knowledge-sharing and collaboration on a growing team.

Visual design explorations221

The Anatomy of an Experience Map222,” 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 Map223

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

Turning Small Projects Into Big Profit226,” 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 Study227

“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%228,” 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 Site229,” 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 230,” 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 Studies231,” KISSmetrics
Lots of techniques and tactics to optimize your website for better conversions shared by marketers.

Responsive Design Link

Responsive Design and ROI: Observations From the Coalface232,” Chris Berridge
Working on the frontline, Berridge share his insights on responsive design and returns on investment.

cxpartners:Responsive Design & ROI – observations from the c233

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

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

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

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

More on Apples: Mobile Optimization in Ecommerce240,” 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 Evaluation241,” 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 Project242

(al) (il) (ea)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2012/11/06/retiring-portfolio-screenshot/
  2. 2 https://www.smashingmagazine.com/2013/07/this-is-how-we-built-it-case-studies/
  3. 3 https://www.smashingmagazine.com/2009/09/showcase-of-case-studies-in-design-portfolios/
  4. 4 https://www.smashingmagazine.com/2009/11/15-impressive-case-studies-behance/
  5. 5 https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/
  6. 6 #a1
  7. 7 #a2
  8. 8 #a3
  9. 9 #a4
  10. 10 #a5
  11. 11 #a6
  12. 12 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a7
  13. 13 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a8
  14. 14 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a9
  15. 15 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies-part-2/#a10
  16. 16 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a1
  17. 17 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a2
  18. 18 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a3
  19. 19 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a4
  20. 20 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a5
  21. 21 https://www.smashingmagazine.com/2013/07/19/this-is-how-we-built-it-case-studies/#a6
  22. 22 #a7
  23. 23 #a8
  24. 24 #a9
  25. 25 #a10
  26. 26 http://veerle.duoh.com/design/article/illustrator_full_spectrum_spirograph
  27. 27 http://veerle.duoh.com/design/article/illustrator_full_spectrum_spirograph
  28. 28 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_about_women_cycling_for_grinta
  29. 29 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_about_women_cycling_for_grinta
  30. 30 http://www.adhamdannaway.com/blog/branding/a-systematic-approach-to-logo-design
  31. 31 http://www.adhamdannaway.com/blog/branding/a-systematic-approach-to-logo-design
  32. 32 http://blog.seanmartell.com/2013/06/27/rebuilding-a-simplified-firefox-logo/
  33. 33 http://blog.seanmartell.com/2013/06/27/rebuilding-a-simplified-firefox-logo/
  34. 34 http://hicksdesign.co.uk/journal/five-details
  35. 35 http://hicksdesign.co.uk/journal/five-details
  36. 36 http://softfacade.com/work/iconfinder/
  37. 37 http://softfacade.com/work/iconfinder/
  38. 38 http://www.behance.net/gallery/THE-GREAT-GATSBY/8550121
  39. 39 http://www.experimentaljetset.nl/archive/whitney-museum-identity
  40. 40 http://www.experimentaljetset.nl/archive/whitney-museum-identity
  41. 41 http://veerle.duoh.com/design/article/my_tour_de_france_posters
  42. 42 http://veerle.duoh.com/design/article/my_tour_de_france_posters
  43. 43 http://ilovetypography.com/2012/04/11/designing-type-systems/
  44. 44 http://ilovetypography.com/2012/04/11/designing-type-systems/
  45. 45 http://ilovetypography.com/2012/05/15/making-fonts-novel-typeface/
  46. 46 http://ilovetypography.com/2012/05/15/making-fonts-novel-typeface/
  47. 47 http://ilovetypography.com/2012/04/19/the-design-of-a-signage-typeface/
  48. 48 http://ilovetypography.com/2012/04/19/the-design-of-a-signage-typeface/
  49. 49 http://ilovetypography.com/2011/10/05/the-making-of-ff-tundra/
  50. 50 http://ilovetypography.com/2011/10/05/the-making-of-ff-tundra/
  51. 51 http://ilovetypography.com/2013/04/25/magasin-font-making-of/
  52. 52 http://ilovetypography.com/2013/04/25/magasin-font-making-of/
  53. 53 http://blog.typekit.com/2013/05/01/hi-dpi-typography/
  54. 54 http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/
  55. 55 http://blog.typekit.com/2012/05/23/type-study-pairing-typefaces/
  56. 56 http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
  57. 57 http://blog.typekit.com/2011/05/17/type-study-stereo-typography/
  58. 58 http://blog.typekit.com/2011/03/24/type-study-choosing-fallback-fonts/
  59. 59 http://blog.typekit.com/2012/04/24/type-study-techniques-for-using-novelty-fonts/
  60. 60 http://blog.mailchimp.com/social-login-buttons-arent-worth-it/
  61. 61 http://blog.mailchimp.com/social-login-buttons-arent-worth-it/
  62. 62 http://stiern.com/articles/usability/usability-in-icons/
  63. 63 http://stiern.com/articles/usability/usability-in-icons/
  64. 64 https://github.com/blog/1135-the-making-of-octicons
  65. 65 https://github.com/blog/1135-the-making-of-octicons
  66. 66 http://vimeo.com/68749840
  67. 67 http://vimeo.com/68749840
  68. 68 http://blog.mikeswanson.com/post/32759154825/yourownapppromocards
  69. 69 http://blog.mikeswanson.com/post/32759154825/yourownapppromocards
  70. 70 https://www.smashingmagazine.com/2012/04/05/art-of-launching-app-case-study/
  71. 71 https://www.smashingmagazine.com/2012/04/05/art-of-launching-app-case-study/
  72. 72 https://www.smashingmagazine.com/2013/06/28/how-to-launch-anything/
  73. 73 https://www.smashingmagazine.com/2013/06/28/how-to-launch-anything/
  74. 74 http://snook.ca/archives/writing/selling-ebook-on-amazon
  75. 75 http://boagworld.com/talks/unbelievable-ecommerce/
  76. 76 http://blog.mailchimp.com/twitter-promoted-tweets/
  77. 77 http://37signals.com/svn/posts/3316-visual-exploration-behind-signal-vs-noise
  78. 78 http://37signals.com/svn/posts/3316-visual-exploration-behind-signal-vs-noise
  79. 79 http://37signals.com/svn/posts/3104-behind-the-scenes-reinventing-our-default-profile-pictures
  80. 80 http://37signals.com/svn/posts/3104-behind-the-scenes-reinventing-our-default-profile-pictures
  81. 81 https://www.gosquared.com/blog/archives/3359
  82. 82 https://www.gosquared.com/blog/archives/3359
  83. 83 https://blog.mozilla.org/ux/2012/10/save-for-later/
  84. 84 https://blog.mozilla.org/ux/2012/10/save-for-later/
  85. 85 http://making.fiftythree.com/a-closer-look-at-zoom
  86. 86 http://making.fiftythree.com/a-closer-look-at-zoom
  87. 87 http://makaluinc.com/blog/2012/10/reinventing-the-investment-calculator.html
  88. 88 http://makaluinc.com/blog/2012/10/reinventing-the-investment-calculator.html
  89. 89 http://www.teehanlax.com/story/globe-and-mail/
  90. 90 http://www.teehanlax.com/story/globe-and-mail/
  91. 91 http://www.bbc.co.uk/blogs/internet/posts/olympics_design
  92. 92 http://bbc.in/Nkqt4Z
  93. 93 http://www.creativebloq.com/web-design/how-we-built-msn-uks-responsive-olympics-site-9134646
  94. 94 http://www.creativebloq.com/web-design/how-we-built-msn-uks-responsive-olympics-site-9134646
  95. 95 http://www.fastcodesign.com/1672938/the-anatomy-of-a-successful-logo-redesign
  96. 96 http://www.fastcodesign.com/1672938/the-anatomy-of-a-successful-logo-redesign
  97. 97 http://blog.keenancummings.com/post/34832313784/knitt-what-i-want-out-of-facebook
  98. 98 http://blog.keenancummings.com/post/34832313784/knitt-what-i-want-out-of-facebook
  99. 99 http://www.domusweb.it/en/design/in-praise-of-lost-time/
  100. 100 http://www.domusweb.it/en/design/in-praise-of-lost-time/
  101. 101 http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
  102. 102 http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
  103. 103 http://builtbyboon.com/blog/responsive-design-case-study
  104. 104 http://builtbyboon.com/blog/responsive-design-case-study
  105. 105 https://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than-a-year
  106. 106 https://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than-a-year
  107. 107 http://playgroundinc.com/blog/finding-and-redefining-playground-brand/
  108. 108 http://playgroundinc.com/blog/finding-and-redefining-playground-brand/
  109. 109 https://medium.com/p/308c1d5cd789
  110. 110 https://medium.com/p/308c1d5cd789
  111. 111 http://coloradoidentity.tumblr.com/
  112. 112 https://www.smashingmagazine.com/wp-content/uploads/2013/07/colorado.jpg
  113. 113 https://www.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/
  114. 114 https://www.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/
  115. 115 http://blog.alexlikesdesign.com/post/46850507084/today-marks-the-launch-of-google-treasure-maps
  116. 116 http://blog.alexlikesdesign.com/post/46850507084/today-marks-the-launch-of-google-treasure-maps
  117. 117 http://www.html5rocks.com/en/tutorials/casestudies/oz/
  118. 118 http://www.html5rocks.com/en/tutorials/casestudies/oz/
  119. 119 http://www.artlebedev.com/everything/metro/map2/process/
  120. 120 http://www.artlebedev.com/everything/metro/map2/process/
  121. 121 http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
  122. 122 http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
  123. 123 http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
  124. 124 http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
  125. 125 http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso
  126. 126 http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso
  127. 127 http://dbushell.com/2012/06/17/passenger-focus-responsive-web-design-case-study/
  128. 128 http://dbushell.com/2012/06/17/passenger-focus-responsive-web-design-case-study/
  129. 129 http://www.slideshare.net/kaelig/bbc-news-responsive-web-design-and-mustard
  130. 130 http://www.slideshare.net/kaelig/bbc-news-responsive-web-design-and-mustard
  131. 131 http://blog.fogcreek.com/the-trello-tech-stack/
  132. 132 http://blog.fogcreek.com/the-trello-tech-stack/
  133. 133 http://www.rachelandrew.co.uk/archives/2012/03/16/responsibly-responsive-developing-the-greenbelt-website/
  134. 134 http://www.rachelandrew.co.uk/archives/2012/03/16/responsibly-responsive-developing-the-greenbelt-website/
  135. 135 http://craigmod.com/journal/digital_physical/
  136. 136 http://craigmod.com/journal/digital_physical/
  137. 137 http://www.html5rocks.com/tutorials/casestudies/20things_pageflip.html
  138. 138 http://www.html5rocks.com/tutorials/casestudies/20things_pageflip.html
  139. 139 http://www.giftrocket.com/blog/design-tips-from-a-master
  140. 140 http://www.giftrocket.com/blog/design-tips-from-a-master
  141. 141 https://www.smashingmagazine.com/2011/08/17/breaking-the-rules-a-ux-case-study/
  142. 142 https://www.smashingmagazine.com/2011/08/17/breaking-the-rules-a-ux-case-study/
  143. 143 http://baymard.com/blog/ux-considerations-designing-lenshawk
  144. 144 http://baymard.com/blog/ux-considerations-designing-lenshawk
  145. 145 http://rainypixels.com/words/the-story-of-the-new-microsoft-com/
  146. 146 http://trentwalton.com/2012/10/03/a-new-microsoft-com/
  147. 147 http://rainypixels.com/words/the-story-of-the-new-microsoft-com/
  148. 148 http://theindustry.cc/2013/04/26/behind-the-scenes-of-the-new-kippt/
  149. 149 http://theindustry.cc/2013/04/26/behind-the-scenes-of-the-new-kippt/
  150. 150 http://danielmall.com/work/crayola/
  151. 151 http://danielmall.com/work/crayola/
  152. 152 http://softfacade.com/work/campusquad/
  153. 153 http://softfacade.com/work/campusquad/
  154. 154 http://vesperapp.co/blog/how-to-make-a-vesper/
  155. 155 http://vesperapp.co/blog/how-to-make-a-vesper/
  156. 156 http://blog.14islands.com/post/52546836134/case-study-betting-on-a-fully-responsive-web
  157. 157 http://blog.14islands.com/post/52546836134/case-study-betting-on-a-fully-responsive-web
  158. 158 http://www.akomarov.com/critboard/2011-ammo-rack-app-design-critique
  159. 159 http://www.akomarov.com/critboard/2011-ammo-rack-app-design-critique
  160. 160 http://ianstormtaylor.com/walking-through-the-design-process/
  161. 161 http://ianstormtaylor.com/walking-through-the-design-process/
  162. 162 http://www.netmagazine.com/features/behind-scenes-lights-latest-webgl-sensation
  163. 163 http://www.netmagazine.com/features/behind-scenes-lights-latest-webgl-sensation
  164. 164 http://methodandcraft.com/articles/designing-for-designers
  165. 165 https://www.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/
  166. 166 https://www.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/
  167. 167 http://laurakalbag.com/grids-flexibility-and-responsiveness/
  168. 168 http://laurakalbag.com/grids-flexibility-and-responsiveness/
  169. 169 http://rafaltomal.com/making-of-typespiration-com/
  170. 170 http://rafaltomal.com/making-of-typespiration-com/
  171. 171 http://www.f-i.com/work/all
  172. 172 http://www.f-i.com/fi/airlines/
  173. 173 http://www.f-i.com/google/ramayana
  174. 174 http://www.f-i.com/sony/connected-world/
  175. 175 http://blog.f-i.com/usatoday-com-redesigning-one-of-americas-most-popular-news-site/
  176. 176 http://www.f-i.com/work/all
  177. 177 http://nathanbarry.com/step-by-step-landing-page-copywriting/
  178. 178 http://nathanbarry.com/step-by-step-landing-page-copywriting/
  179. 179 https://www.smashingmagazine.com/2013/03/19/art-of-storytelling-around-app/
  180. 180 https://www.smashingmagazine.com/2013/03/19/art-of-storytelling-around-app/
  181. 181 https://www.smashingmagazine.com/2012/11/06/retiring-portfolio-screenshot/
  182. 182 https://www.smashingmagazine.com/2012/11/06/retiring-portfolio-screenshot/
  183. 183 http://snook.ca/archives/writing/ebook-notes
  184. 184 http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
  185. 185 http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/
  186. 186 http://dyn.com/how-we-improved-page-speed-by-cleaning-css-html-and-images/
  187. 187 http://dyn.com/how-we-improved-page-speed-by-cleaning-css-html-and-images/
  188. 188 http://www.behance.net/gallery/Mein-Honig-Brand-Identity/9772815
  189. 189 http://www.behance.net/gallery/Mein-Honig-Brand-Identity/9772815
  190. 190 http://blog.jphpsf.com/2012/04/28/front-end-performance-case-study-github/
  191. 191 http://blog.jphpsf.com/2012/04/28/front-end-performance-case-study-github/
  192. 192 http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx
  193. 193 http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx
  194. 194 http://www.anthonycalzadilla.com/2011/04/behind-the-scenes-of-mad-manimation/
  195. 195 http://stuffandnonsense.co.uk/content/demo/madmanimation/
  196. 196 http://www.anthonycalzadilla.com/2011/04/behind-the-scenes-of-mad-manimation/
  197. 197 http://mir.aculo.us/2013/04/30/embed-canvas-and-svg-charts-in-emails/
  198. 198 http://mir.aculo.us/2013/04/30/embed-canvas-and-svg-charts-in-emails/
  199. 199 http://highscalability.com/blog/2013/4/15/scaling-pinterest-from-0-to-10s-of-billions-of-page-views-a.html
  200. 200 http://highscalability.com/blog/2013/4/15/scaling-pinterest-from-0-to-10s-of-billions-of-page-views-a.html
  201. 201 https://creativemarket.com/blog/2013/04/12/how-we-built-a-photoshop-extension-with-html-css-and-js
  202. 202 https://t.co/e42mm9nB0s
  203. 203 http://codeascraft.com/2010/07/09/batch-processing-millions-of-images/
  204. 204 http://etsy.me/duZkGJ
  205. 205 http://www.html5rocks.com/en/tutorials/casestudies/100000stars/
  206. 206 http://www.html5rocks.com/en/tutorials/casestudies/100000stars/
  207. 207 https://developers.facebook.com/blog/post/2012/07/16/mastering-the-application-cache-manifest-for-offline-web-apps-and-performance/
  208. 208 https://developers.facebook.com/blog/post/2012/07/16/mastering-the-application-cache-manifest-for-offline-web-apps-and-performance/
  209. 209 http://techtime.getharvest.com/blog/harvey-a-second-face-for-your-javascript
  210. 210 http://techtime.getharvest.com/blog/harvey-a-second-face-for-your-javascript
  211. 211 http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
  212. 212 http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
  213. 213 http://aerotwist.com/blog/making-a-60fps-mobile-app/
  214. 214 http://aerotwist.com/blog/making-a-60fps-mobile-app/
  215. 215 http://css-tricks.com/treehouse-ad/
  216. 216 http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
  217. 217 http://www.troyhunt.com/2012/07/lessons-in-website-security-anti.html
  218. 218 http://wildbit.com/blog/2012/04/16/refactoring-14000-lines-of-css-into-sass/
  219. 219 http://paulrobertlloyd.com/2012/11/trimming_the_fat/
  220. 220 http://clearleft.com/thinks/visualdesignexplorations/
  221. 221 http://clearleft.com/thinks/visualdesignexplorations/
  222. 222 http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
  223. 223 http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
  224. 224 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_for_the_tour_of_france_for_grinta
  225. 225 http://veerle.duoh.com/design/article/the_design_process_of_my_infographic_for_the_tour_of_france_for_grinta
  226. 226 https://www.smashingmagazine.com/2011/12/19/turning-small-projects-into-big-profit-case-study/
  227. 227 https://www.smashingmagazine.com/2011/12/19/turning-small-projects-into-big-profit-case-study/
  228. 228 http://blog.reemer.com/how-we-reduced-our-cancellation-rate-by-87-5
  229. 229 http://justintadlock.com/archives/2012/10/16/how-i-run-a-membership-site
  230. 230 http://www.markboulton.co.uk/journal/a-new-make-mantra-a-statement-of-design-intent
  231. 231 http://blog.kissmetrics.com/100-conversion-optimization-case-studies/
  232. 232 http://www.cxpartners.co.uk/cxblog/responsive-design-roi-observations-from-the-coalface/
  233. 233 http://www.cxpartners.co.uk/cxblog/responsive-design-roi-observations-from-the-coalface/
  234. 234 https://www.smashingmagazine.com/2013/03/28/mastering-real-world-constraints/
  235. 235 https://www.smashingmagazine.com/2013/03/28/mastering-real-world-constraints/
  236. 236 http://www.vanseodesign.com/web-design/redesign-goals-constraints-concept/
  237. 237 http://www.vanseodesign.com/web-design/redesign-goals-constraints-concept/
  238. 238 http://www.campaignmonitor.com/blog/post/3845/quick-redesign-improved-feedback
  239. 239 http://www.campaignmonitor.com/blog/post/3845/quick-redesign-improved-feedback
  240. 240 http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/
  241. 241 http://laurakalbag.com/mentoring-the-evaluation/
  242. 242 http://laurakalbag.com/mentoring-the-evaluation/

↑ Back to top Tweet itShare on Facebook

Former Smashing Editor Melanie completed her degree in Philosophy, Politics and Economics at Otago University, and is now freelancer and part-time politician. She's interested in many things like writing, web design, travelling and fire brigade, and tweets as @mel_in_media.

  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

    Mandy Raasch

    July 24, 2013 9:19 am

    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

    Clay Asbury

    July 26, 2013 4:50 am

    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

    2
  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

↑ Back to top