Showcase of Case Studies in Design Portfolios

Advertisement

Portfolio websites are critical for designers who want to get exposure for their work and attract new clients. While all portfolio sites will showcase the work of the designer, some have chosen to provide additional information about the project through case studies.

In this post we will be featuring more than 30 portfolio sites to show how they are using case studies from their own design projects to communicate with potential clients. Not all of them are referred to as “case studies” on the site, but all provide much more information than just giving a screenshot with the client’s name.

If you are considering ways to make your existing work more relevant or appealing to visitors who may be potential clients, providing case studies is one option. Take a look at the sites featured here and you may come up with some ideas of how they could be used on your own site.

Common Features in Case Studies

As you browse through the sites that are featured in this post, you may notice that many of them include the following:

Multiple screenshots
While all design portfolios will include screenshots or images to display the work, many sites that use case studies to provide detailed information about the project will also include several screenshots instead of just one.

Client background information
The purpose of the case study is to put the design project into context and to show how it works in a real world situation, as opposed to showing only how the final product looks. Part of the context is the particular situation of the client, therefore, many cases studies will include some basic information about the client, what they do, and what they wanted from the designer.

Project overviews
The project overview or description will allow visitors to the portfolio to get some additional information about the project and may help them to understand what was accomplished. Some cases studies, as you will see below, will go a step further and even define the problem or challenge, as well as the solution that was accomplished with the design.

Listing of specific services provided
Many case studies will include the details of services that were performed as part of the project by the designer or agency. This is especially useful when multiple parties have worked together to complete the end result. Without knowing who is responsible for what part of the project it can be difficult to assess the work that was done.

Client testimonials
Another element that is often found as part of the case study is a quote or testimonial from the client. In many cases they are brief testimonials, and in some cases they give more detailed information about their experience working with the designer.

Dedicated page
Generally, but not always, when case studies are used there will be a separate page on the portfolio site for each case study. When case studies are not used, the “portfolio” or “work” page of the site typically includes images for a number of projects with links to larger versions of the image.

Showcase of Case Studies

Erskine Design1
Erksine Design provides a detailed case study with information about the project and the process of the design and development.

Erskine Design2

Agent8 Design3
Agent* Design provides some brief information about the client, as well as some details of the project and the design. Multiple screenshots are used to show the work.

Agent8 Design4

iHook Creative5
iHook Creative provides several images from each project along with a brief description of the project.

iHook Creative6

Delete7
Delete provides a written overview of each project along with multiple images that are shown in a slide show.

Delete8

Corporate Edge9
Corporate Edge’s site provides nice case studies with some background information about the project and a number of images.

Corporate Edge10

nGen Works11
nGen Works shows a large image from the projects, details and description in paragraph format, as well as a listing of the specific services that were provided.

nGen Works12

Tobias Ahlin13
Tobias Ahlin shows a screenshot from the project, a few paragraphs of information, plus some details like the amount of time taken and tools used.

Tobias Ahlin14

Instrument15
Instrument’s case studies include several screenshots from the project, basic info like the launch date, and a detailed write up that includes some client information as well as a description of the project. Instrument also lists the specific team members and their role in the project.

Instrument16

Sunrise Design17
Sunrise Design’s portfolio includes multiple screenshots from the project, a detailed summary, a list of services that were provided, and a testimonial from the client.

Sunrise Design18

Flex36019
FLex360’s portfolio includes multiple screenshots from the project (in a slider), services provided, and an overview of the project.

Flex36020

Anthony J. Zinni21
Anthony J. Zinni shows a large screenshot from each project, details about the client, the project, the studio, and the role. He also includes a brief written description of the project.

Anthony J. Zinni22

Jared Christensen23
Jared Christensen has a few paragraphs about the details of each project, multiple large images, and the specifics about his role in the design.

Jared Christensen24

MDX Interactive25
The case studies on MDX Interactive’s website include a description of the challenge and the solution, and a project overview. Screenshots are also included.

MDX Interactive26

Jarad Johnson27
Jarad Johnson’s portfolio includes a few paragraphs about the project, a large screenshot, and a testimonial from the client.

Jarad Johnson28

45royale29
45royale’s case studies include some background information on the client and project, a listing of the services that were provided, a testimonial from the client, and a few images in a slider.

45royale30

Valen Designs31
Valen Designs provides a large image, a few paragraphs about the project, and a listing of the particular services that were a part of the project.

Valen Designs32

DrawingArt33
DrawingArt gives the details of the project, including the technologies involved and the services provided, along with a brief description. They also show multiple images from the project in a slide show.

DrawingArt34

Fudge35
Fudge’s portfolio includes a few images from the project, a brief description, as well as a quote from the client and a quote from Fudge.

Fudge36

BKWLD37
BWWLD provides a written description of each project, multiple images, and a list of the specific services provided for the project.

BKWLD38

The Plant39
The Plant gives informative case studies about their projects. They start by giving details of the problem, followed by a description of the solution. Technologies involved are also listed.

The Plant40

OnWired41
OnWired provides background information and details about the project, plus a listing of the services provided. In addition to showing a screenshot, the initial sketch and wireframe are also displayed (in a slider).

OnWired42

The Energy Cell43
The Energy Cell’s portfolio provides a detailed listing of the services provided for a specific project, a description, and multiple images in a slider.

The Energy Cell44

Elliot Jay Stocks45
Elliot Jay Stocks’ portfolio includes some background information on the client, details about the project and services performed, multiple images, and a quote from the client.

Elliot Jay Stocks46

Powerful CMS47
Powerful CMS’ site includes case studies with background information about the client and project, a list of challenges that were faced, and the solution and result. It also includes a testimonial from the client.

Powerful CMS48

Winnie Lim49
Winnie Lim’s portfolio includes a few paragraphs of information about the project, date of completion, client, and multiple screenshots.

Winnie Lim50

OH! Media51
OH! Media’s portfolio gives a basic description of the project and the client, screenshots, and project details that include the date, development length, and platform.

OH!52

Grow Interactive53
Grow’s portfolio includes a nice write up about the project, links to any recognition or press that it has received, and several images.

Grow Interactive54

Keystone Design Union55
Keystone Design Union’s case studies include several images, a description and project information. Some case studies also include a listing of contributors to the project.

Keystone Design Union56

Footnotes

  1. 1 http://erskinedesign.com/
  2. 2 http://erskinedesign.com/casestudies/frieze/
  3. 3 http://www.agent8.co.uk/
  4. 4 http://www.agent8.co.uk/2009/03/21/review-award-winning-salons/
  5. 5 http://www.ihookcreative.com/
  6. 6 http://www.ihookcreative.com/the-work/true-dentistry
  7. 7 http://www.deletelondon.com/
  8. 8 http://www.deletelondon.com/view/babyliss-pro-website?workFilter=Website;
  9. 9 http://corporateedge.com/
  10. 10 http://corporateedge.com/articles/view/1
  11. 11 http://www.ngenworks.com/
  12. 12 http://www.ngenworks.com/projects/happy_webbies
  13. 13 http://tobiasahlin.com/
  14. 14 http://tobiasahlin.com/agigen-redesign/
  15. 15 http://www.weareinstrument.com/
  16. 16 http://www.weareinstrument.com/#/work/bonfire-snow-website
  17. 17 http://sunrisedesign.com/
  18. 18 http://sunrisedesign.com/portfolio/jennifer-handy-properties
  19. 19 http://www.flex360.com/
  20. 20 http://www.flex360.com/portfolio?id=92&page=1
  21. 21 http://zinnidesign.com/
  22. 22 http://zinnidesign.com/glunz_beer_web_d.php
  23. 23 http://www.jaredigital.com/
  24. 24 http://www.jaredigital.com/portfolio/the-geniant-blog
  25. 25 http://www.mdxinteractive.com/
  26. 26 http://www.mdxinteractive.com/portfolio/spitfire/
  27. 27 http://jaradjohnson.com/
  28. 28 http://jaradjohnson.com/portfolio/
  29. 29 http://www.45royale.com/
  30. 30 http://www.45royale.com/work/mindzeye-studios/
  31. 31 http://valendesigns.com/
  32. 32 http://valendesigns.com/portfolio/psdtuts/
  33. 33 http://www.drawingart.org/
  34. 34 http://www.drawingart.org/#/works_and_projects/websites/ciriljazbec_photography_v2/
  35. 35 http://madebyfudge.com/
  36. 36 http://madebyfudge.com/articles/fudge-snapped-up-for-new-site
  37. 37 http://www.bkwld.com/
  38. 38 http://www.bkwld.com/work/radioshack-netogether
  39. 39 http://theplant.jp/
  40. 40 http://theplant.jp/en/work/
  41. 41 http://onwired.com/
  42. 42 http://onwired.com/portfolio/healthlink-europe/
  43. 43 http://www.energycell.co.uk/
  44. 44 http://www.energycell.co.uk/web_flavia.html
  45. 45 http://elliotjaystocks.com/
  46. 46 http://elliotjaystocks.com/portfolio/print-design/fusion-ads-print/
  47. 47 http://www.powerfulcms.com/
  48. 48 http://www.powerfulcms.com/case-studies/non-profit-organization-house-design-skills-move-drupal-cms
  49. 49 http://winnielim.com/
  50. 50 http://winnielim.com/work/yumsg
  51. 51 http://www.ohmedia.ca/
  52. 52 http://www.ohmedia.ca/portfolio
  53. 53 http://www.thisisgrow.com/
  54. 54 http://www.thisisgrow.com/#/work/selectedwork/sponsors
  55. 55 http://www.thekdu.com/
  56. 56 http://www.thekdu.com/index.php?option=com_content&view=article&id=78:diesel&catid=2:case-studies&Itemid=16

↑ Back to topShare on Twitter

Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Wow, another list of stolen ideas collected and displayed for the grabbing by non-creative designers. Nothing like populating the internet with a bunch of clone sites because somebody needs to make some money on advertising with lame articles that have absolutely no content other than somebody’s great ideas…. Thanks Smashing!!!

  2. 2

    Wow great collection, especially like jennifer’s site, bkwld, and grow interactive

    very nice portfolios and case studies

  3. 3

    This is awesome, guys. Thanks Smashing!

  4. 4

    Another very interesting and useful article. Thank you, Steven.

  5. 5

    Looks great. Are you planning to do the same for photographers’ portfolios? I’d really appreciate that!

  6. 6

    Great List. Maybe I can get some ideas for my website. It’s under development and I have yet many things to correct…

    But there are some, here, so amazing!

  7. 7

    Really helpful post, thank you very much :)

  8. 8

    Some good stuff here! Thanks!

  9. 9

    Nice list, again from this site. :)

  10. 10

    Thanks for adding my site to your roundup, I have one gripe though. When you took the screen capture the sIFR was destroyed and in it’s place are a few gray blocks and the title is of something completely different. I think the screen capture was taken while the page was still loading. Could you please update the image?

    Derek,
    Valen Designs

  11. 11

    The flex360 Website is – I think – linked right, but the screenshot is from the Flex Vienna (a nightclub).

    Nice turnaround btw :)

  12. 12

    A nice collection, thanks for the inspiration!

  13. 13

    Nice list, thanks SM!

  14. 14

    really useful

  15. 15

    Thanks for the nice selection!

    You may like the way case studies are presented here: http://www.id3.co.th

  16. 16

    Screenshot for FLEX360 is incorrect, not sure what website that one is but we should be this website.

    Great post and thanks for including us!

  17. 17

    Yeah, that flex360 screen cap is definitely wrong. Their site blows that thing away.

  18. 18

    Beautiful and inspiring!

  19. 19

    I’m confused, how is Valen’s site not basically the old Envato site?

  20. 20

    .. or I guess the question is, why would you choose an former layout from another site you made as your portfolio?

  21. 21

    Thanks for featuring our site, we’re making some modifications and the new site should be up in a month or so….

    Thanks again Smashing!

  22. 22

    Great article and I really appreciate the mention of my site. Thank you.

  23. 23

    Alessandro Mingione

    September 25, 2009 2:24 am

    I would include Area 17, which has by far one of the best websites on the net. Their case studies are visually interesting and inspiring.

  24. 24

    @tetra What are you talking about? My web site (Valen Designs) does not look like the old Envato site! As well, my site was created at or around the same time and with no knowledge of the other. It just so happens I began working for Envato later. The only similarities are they were both using green in the header and they had a leaf in the logo. Other than those coincidences they were nothing like each other.

  25. 25

    Here at b1 we have tried to present our portfolio and clients in a unique personal way. Any comments and feedback is welcomed. http://www.b1group.co.uk/portfolio

  26. 26

    Very useful data for the freelancer/firm looking for inspiration.

  27. 27

    Hi ! Nice articles.
    I work for a swedish web agency and I post regularly articles on logo / webdesign case studies related to our clients, and try to provide hand sketches, wireframe, mood board and the process from the request to the final design.

    Welcome to http://www.pierrevanderpol.com/
    Feel free to participate too.

  28. 28

    Anthony Calzadilla

    February 23, 2010 1:43 pm

    this article really came in handy today – thank you for the excellent work!

  29. 29

    Very handy,
    I’m currently working of self promotion so this helped me understand easy understanding of navigation through a portfolio style site.
    Thanks,

    Mark Fuller

  30. 30

    InfinPixels - London

    February 27, 2014 4:51 am

    very handy! Thanks for those tips. As well as content, design is very important here. How matter how good you explained the case study, if the design is average then its not all that attractive. I found a good example. http://tribalmedia.co.uk/clients/roll-tv/

  31. 31

    Awsome!
    FYI, the link http://www.agent8.co.uk/work/review_hair_salon.htm at Agent8 section is broken.

↑ Back to top