Quick answer: A good website design case study says a short story with evidence: the client’s issue, the process, the solution and quantifiable results. Use before/after numbers wherever possible, have a meaningful image, clear the client. The results section does the most work, because it not only gives you good-looking pages, but business impact.
Why a Website Design Case Study Fails
A significant number of case studies fail for one reason:
Most case studies: Fail to show value and just describe the deliverables. What most people do is put too much information in UX and product design case studies, according to one design director. Another guide recommends not showing readers too many pictures.
The solution is to stick to the one story. With a case study, it’s important to demonstrate how you tackled a challenge and the part that proves impact—via metrics, testimonials. Select work that aligns to the client you’re looking for next, and ensure that each project is successful.
Case Study Blueprint
This is the Case Study Blueprint (Original Framework).
A Shopify guide for web designers names five core elements, including an overview, the challenge, your process and the results. The blueprint below elaborates on this, offering suggested proof for the sections. It’s an editorial template, not a standard.
| Section | What to do | Supporting evidence to incorporate |
| Conclusions | A brief executive summary of the projectcentrepiece of the project that is easy to digest. | |
| Challenge | The problem that kicked off the project | Client goals, base data |
| Schedule | How you worked – in a few clear steps | Wireframes, sketches, key decisions |
| Propramme | What you created and why | Final designs – annotated screenshots |
| Results | What has difference showed after launch | Metrics, testimonial |
The overview comes after the rest of it is written. One guide suggests that it’s better to complete the case study summary first, as then it’s easier to write the summary with the knowledge of what happened.
Evidence Ladder
Evidence Ladder (Original Framework)
But not all proof is created equal. This list provides the hierarchy of claims from weak to strong, that will allow you to judge the strength of your case study. Again, it’s an editorial model.
- Deliverables. Screenshots and mockups are examples of the products you created.
- Process. Thinking is represented by wireframing, research notes and decisions.
- Qualitative feedback. Client/User comments provide evidence of how it has landed.
- Quantitative change. Before and After Metication: What moved?
- Business outcome. Revenue/leads or cost savings illustrate the point of significance.
Most “weak” case studies remain at rung 1 or 2. Be sure to get to rungs 3 and 4 on the best projects.
What to Measure
Select metrics that are related to the project objectives. Common examples include conversions rates, task completion rates, time on-page, bounce rate and customer satisfaction data from surveys. Do this prior to project implementation and record baseline data. One Shopify instructional course emphasizes making a case study for the projects from the beginning.
Follow this format for your results: The hydroelectric power plant was based on.
| Frequency (Hz) | 625.0Hz | 1000Hz | 1 second |
| Conversions in fraction notation | Converted fraction value | Converted fraction decimal value | Dates to convert between |
| The bounce rate is a metric that measuring online performance.It measures online performance with bounce rate. | |||
| Completion of tasks | [count] | [value] | [value] [dates] |
Only post numbers that you can support. Without being able to measure results, appeal to qualitative evidence (a quote from a client) and explicitly state what can and cannot be claimed.
Writing and Presentation Tips
Tips for writing and giving presentations.
- Use everyday language. Don’t use jargon; make people who don’t design understand your decisions.
- Conduct yourself in a personal, professional manner. One of the portfolio guides recommends putting the writing in the same authentic voice that you use for your About page.
- Allow one page per case study. This easily aids beginners and search engines.
- Draw diagrams if appropriate. Decision statements can be expressed better using flows and iterations than using paragraphs.
- Get permission. Never use their name, data or screenshots without getting consent from the client.
- Have a small but strong set. Three to five case studies – one designer says that there are at least two of them that are really good.
Case Study Checklist
Assessment case study checklist (Linkable Asset)
- Selected a project that is suitable for the type of clients that I want
- Beginning baseline data was collected
- One sentence was written to summarise the problem statement
- Illustrated the steps with a few informative diagrams
- Final Designs/with short annotations
- Before–After Results with Time Periods
- Incorporated Client Testimonial.
- Successfully requested permission to publish in writing
- Jargon removed and extra screenshots eliminated
- Last person to write the overview.
Guest Post Angles
These topics are applicable to web design, freelance & agency publications:
- Deliverables to outcomes – a case study re-written.
- What to measure on a website redesign: a metrics guide.
- Case studies as sales tools: using them in proposals.
Begin Writing the Results Section First
Before you clean up another screen shot, get the laundry started and write the results section—what, how, how long. If you cannot complete it, locate missing evidence prior to completing the rest of it. A website design case study is only as enthusiastic as the evidence in that section, so construct the story round it.
One Response