With every website you add to your portfolio, you further build your credibility in the industry. Seeing the number of projects is great, but clients also want to learn about your design process behind it. That’s when case studies come in
The best web developers are able to charge higher because they sell the thinking, not just the end product. So instead of pasting the client’s website’ screenshot, adding a link, and calling it a day - you can opt for writing an engaging case study.
The case studies shouldn’t be boring. They can be simple, to the point, and have engaging visuals that deliver the point across. Often, we complicate the process, resulting in poor case studies
I studied the best web design case studies out there and wrote down what’s common in all of them. Here’s the checklist laid out for you :)
Web Design Case Study Structure
It starts with a brief about the project. You will start by defining the following,
1. Project details
You define the scope of work, timeline, project link, and more. Give a clear context of the project before diving deep into the details
2. Project goals
Here you define the client goals of the project. What did your client want to achieve? Why did he want to make a new website in the first place? You define those over-arching goals, giving the reasoning behind the “why we did the project?”
Willian spread out the research goals to truly understand the consumer mindset in the travel industry. His approach helped identify pain points related to planning, documenting, and sharing a trip
No projects are a piece of cake. Every creative person will face challenges down the road. Explore them here. You might think,
“Why are we sharing our struggles?”
One word. Human. Because we are humans, and when we share our mishaps along with success, it makes us feel more human. Plus, your potential client sees you notice the challenges and how to overcome them (next part)
How did you overcome the challenges? What process did you take? How did you communicate with the client? What was the end outcome? Share how you become a valuable asset to your client
Ashmik wrote down the project details, role, challenges, tools used, and solutions all in one easy-to-view section. This allows reading the important information in one glance
Research is an integral part of beginning any project. When you conduct research, it shows that you’re not just focused on delivering quickly. But instead, you think intuitively about every project and its impact on the client. A common project research structure looks like so,
1. User personas
Each website is made not for the client, but for the end consumer. In the first stage, you understand who is the end consumer by filling out their demographics, needs, and pain-points. This also helps in crafting the messaging strategy of the website.
2. Research findings
The website belongs to an industry that you are less aware of. You might also need to interview customers to get a deeper understanding of the industry
Once again, Ashmik laid out the user persona in one of the best ways. Any user persona needs to highlight the demographics, and interests, give a brief overview, and an image that helps image the idea user.
3. Competitor research
There are competitors in the industry. So you would do some online research, and look at their websites to understand their site structure and messaging approach. Share your findings right here
Willian shows the competitors in an organized way
What to include in your Research?
If you're working on any web design project, here's a quick checklist to ensure you research your client’s industry properly,
Questions asked (if you used to survey or interview)
Secondary research (design inspiration)
3. Competitor research/audit
Description (market they serve, messaging approach, brand audit, etc)
Pros & Cons (of the business, brand, website, social, and other elements)
BONUS: How To Present Your Research
Presenting the research for your web design project is crucial. However, there are multiple elements in research, namely,
The way you connect them together is by using Affinity diagrams. Affinity Diagrams are created by clustering data (facts, ideas, observations, and/or quotes) by the overarching theme that defines their relationship (their affinity). It may be time-consuming and exhausting if you have a lot of data, but its value lies in the ability to map it out and identify connections between it.
You now present your end results - the actual design!
Present the different iterations you made to reach the final end product
2. Wire-framing & site maps
Wireframes give a proper structure to any website, in terms of content and design. Share them right here
3. Choice of visual language
Tell us why you went with the specific font, color palette, or messaging. What’s the reason behind it and how does it finally help get closer to the client’s goals
Show the low-fidelity concepts and the final web designs. Share links to the website or make it easier for clients to view it right from the browser. Learn how to embed websites in Webflow
Ensure your case study is full of branded visuals to make the reading experience more enjoyable for your potential clients
1. What outcomes did your client achieve from the project?
In the end, you can tie back the beginning by mentioning the outcomes that your client achieved. This can be in terms of improved UX experience, growth in visitors, improved SEO performance, and lots more
2. What went well in the project
To add a personal touch, you can highlight small achievements in the project. This allows potential clients to understand how you view success in any project
3. What could have gone better in the project
And of course, don’t shy away from telling what you could improve from the experience. Let your clients know you are aware of your shortcomings but you learn from them and get better.
And that’s how you make solid web design case studies. Do keep in mind that this is the standard way of presenting your case studies. You can change the order of elements based on your design. Nothing is made on stone
Ali Saeed is a Webflow developer and designer based in Kuwait. He has been working as a designer for 4 years, and recently jumped into the Webflow world. He loves to help the community and solve problems. He has collected resources to help the community design and build better using Webflow.