How to write the perfect web design case study to win more clients
An immersive digital portfolio is the key to landing new clients. Learn how to show off your skills with a winning web design case study.
Design and build a custom portfolio website, visually, within 21 days.
A design portfolio without case studies is like a movie with no dialogue — visually present but lacking the substance needed to convey its full meaning.
Dialogue and case studies both communicate meaning. Without dialogue, audiences struggle to understand a film’s plot, characters, and themes, similar to how clients will struggle to understand the problem you solved, your design process, and the impact of your work without a thorough case study.
When you’re competing against other designers for a project or role, a well-written web design case study sets your portfolio apart , showing potential clients what you’ve done and what you’re capable of.
What is a case study?
A case study is an in-depth investigation into a person or group of people, a situation, event, or a product. A web design case study is a visual and textual analysis of a successful web platform, landing page , website design, or other web-based product. These types of case studies can be physical documents, but they’re often digital: PDFs, infographics, blog posts, or videos. Screenshots are an essential component, as are wireframes and mockups. But a robust web design case study also features detailed written explanations.
These visual and written elements work together to create a comprehensive assessment of the design process from start to finish, including the challenges faced, the solutions implemented, and the results achieved.
5 benefits of web design case studies
Now that we’ve touched on how case studies sell prospective clients on your work, here are a few other benefits of adding web design case studies to your portfolio website:
1. Demonstrate expertise
Case studies are a powerful marketing tool for designers to demonstrate their capabilities to potential clients or employers. A good web design case study showcases your skills and expertise in solving complex design problems.
2. Build credibility
In case studies, designers often include the name of the business, client, or project they’ve worked on, building credibility by providing real-world examples of their past work. You can even add testimonials and reviews to highlight positive feedback directly from those you’ve worked with.
3. Inspire future projects
Examining and analyzing your own work can inspire your next website build — maybe you’ll try one of the layouts that was nixed for this project or center the next design around an element you ended up loving. It also provides guidance and best practices for design projects, setting the bar for innovative design.
4. Encourage personal growth
Writing an investigation of your own design portfolio pieces after completing a project provides an excellent avenue for self-reflection. Reflecting on past projects, the struggles you’ve faced working on them, and what you’ve learned from the process will help you identify your strengths as a designer and areas of improvement to work on.
5. Improve communication
Presentations of your own work don’t just communicate the design process, decisions, and outcomes to clients. They also speak to stakeholders, including clients, team members, and management. A well-written case study illustrates a designer’s ability to effectively communicate complex design ideas and concepts, and writing it will improve your communication skills and offer insight into how effectively you work and collaborate with others.
What makes an effective web design case study?
A web design case study describes the process you took to solve a challenge with a particular web design project. A successful case study features a notable client project, a well-written narrative structure, and an engaging visual design.
Think of it as a story with an identifiable beginning, middle, and end. Throughout the story, show clients your approach to successful web design — the problem, the research you did to prepare for the project, the steps and iterations you completed throughout the process, and the final results you delivered. This narrative structure helps clients understand the project’s evolution and details your design process, making it key to an effective case study.
Case study curation and criteria
We’ve covered the basics of what a good case study looks like. But how do you determine which projects to include? If a project meets all the following criteria, it’s a good candidate for a detailed case study.
Is it relevant to the future projects you hope to explore?
If there’s a type of project you’ve completed in the past that you’d like to avoid in the future, that particular portfolio piece might not be a great option for a case study. You’re not just trying to sell yourself to clients — you’re trying to land jobs you actually want to do.
Does it have a defined initial problem?
Web design projects often arise as a result of a problem. These projects are perfect for case studies because the product design goes beyond appearance and functionality. Here are some of the issues your designs might solve:
- Poor user experience: To create a smooth, enjoyable experience for users, user experience (UX) design focuses on identifying and solving issues that cause frustration, confusion, or difficulty while using an app or a website, such as confusing navigation, misleading icons, or slow load times. Addressing these challenges lets you showcase your understanding of your target audience’s needs and demonstrates your ability to apply your creative and technical skills to solve them.
- Low search engine ranking: Redesigning a website with search engine optimization (SEO) in mind will improve its ranking in the search engine results pages, and you’ll have metrics to include in your case study to quantify the claims you’re making.
- Inconsistent branding: Brand design is a massive part of a company’s identity. A lack of alignment between the logo, colors , and other visual elements of a brand’s identity and its digital assets reflects negatively on the company, leaving customers with more questions than answers about who’s behind the brand. Good web design can bring a sense of cohesion to the company’s digital products, an achievement you can speak to in your case studies.
Does the outcome deliver measurable success?
Good design is subjective, but the best projects for case studies have data to show how successful they are. Search engine ranking is one example. You might also highlight impressive metrics for user engagement (bounce rate, time spent on the site), conversion rate (the percentage of visitors who make a purchase or fill out a form), or web traffic (the number of visitors to the website).
Is the project visually suitable for presentation?
When preparing a web design case study, consider the various formats it can be presented in, such as a video, static webpages, or interactive web content.
Selecting projects that fit your chosen presentation format is essential to showcasing your web design skills. As a web designer, it’s a given that whatever you’re presenting to potential clients needs to use thoughtful, aesthetically pleasing designs.
Design for display
There’s no single right way to present a case study. What’s most important is that your case study tells the story of the journey from an initial problem or idea to a finished product that meets the client’s needs.
A minimalist design will help you achieve this goal. But don’t confuse minimalist with boring. You can (and should) get clever with the presentation. Instead of using basic screenshots, for example, consider exhibiting your work in modern frames with immersive features. Or display screenshots of the product in its natural habitat. Webflow designer Karen Huang uses a digital screen in this user experience case study to feature a screenshot of the user interface (UI) on a smartphone screen just as users would experience it:
Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.
How do you structure a case study?
The contents of every web design case study will vary, but they should all follow this basic structure:
1. A challenge
Start your case study with an introduction to your client and the problem your design solved. Include details about the project’s context, goals, and constraints. This section sets the stage for the rest of the case study and ensures the readers clearly understand what the project — and your solution — is all about.
2. A solution
Detail your approach to solving the challenge introduced in the previous section. Include information about your research, its methodology, and the data you gathered to develop your solution. Focus on your skills, not diagnostics — this is the place to showcase your intelligent approach, reasoning, and innovative ideas that ultimately resolve the challenge.
For this section, it’s helpful to break each key resolution into separate paragraphs and introduce images in chronological order to detail your design process. Screenshots of wireframes and strategy phases will paint a vivid picture of the project’s journey.
If you face any challenges or roadblocks while designing your solution, discussing them provides insight into your problem-solving skills and shows potential clients how you overcome difficulties. End this section with multiple pictures of the final product, and be sure to include a direct link to the project for potential clients and employers to peruse.
3. The impact
This section is where you’ll highlight metrics and data that back up the project’s success. Leverage metrics, user feedback, or whatever data is available to illustrate how your solution solved your client’s challenges and achieved the project’s goals. You can also include information about the potential longitudinal impact of your work and future opportunities for the project.
4. Key quotes
A case study is a perfect place to share client testimonials and add quotes from team members to help readers learn what the experts behind the project think about the build. Get creative but use quotes sparingly, sprinkling them throughout the case study to support the image or project stage the quote relates to.
Let your work do the talking
At Webflow , we offer the tools to make websites and the tutorials you need to perfect them. Learn how to start a web design business , make an online portfolio , or enhance your skills with a web design certificate with guidance from our blog and educational platform, Webflow University . Draw inspiration from our collection of templates and websites and start building your best site yet with Webflow.
Subscribe to Webflow Inspo
Get the best, coolest, and latest in design and no-code delivered to your inbox each week.
Related articles
Presenting your web design portfolio: The complete guide for winning new clients
When presenting your portfolio to a potential web design client, focus on sharing your goals, ideas, and thought processes as you worked through the projects.
4 steps to creating an impressive UX design portfolio
Your UX design portfolio helps you impress future employers and attract clients. Here are four crucial steps to creating an outstanding portfolio.
13 tips to make you a better web designer
Helpful advice to help you level up your web design skills
5 SaaS web design trends in 2017
Check out 5 of the most fascinating web design trends from ChartMogul's 2017 study of SaaS landing pages.
How to get web design clients fast: 5 key steps
Not sure how to get web design clients fast? Follow these 5 essential steps to get started.
Show, don’t tell — create sites that do the talking for you
Advice from a seasoned web designer on how to design and build a portfolio site that will dazzle clients.
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
Transforming the design process at
- Interactions
- Localization
- Figma to Webflow Labs
- DevLink Labs
- Feature index
- Accessibility
- Webflow vs WordPress
- Webflow vs Squarespace
- Webflow vs Shopify
- Webflow vs Contentful
- Webflow vs Sitecore
- Careers We're Hiring
- Webflow Shop
- Accessibility statement
- Terms of Service
- Privacy policy
- Cookie policy
- Cookie preferences
- Freelancers
- Global alliances
- Marketplace
- Libraries Beta
- Hire an Expert
- Made in Webflow
- Become an Expert
- Become a Template Designer
- Become an Affiliate
5 inspiring web design case studies
A good case study makes for a top calling card; check out these examples.
The reality of web design is that once you've finished a project, you hopefully move straight onto the next one. However, every site you deliver is an essential portfolio piece that demonstrates your skills and abilities, and while you'll usually want to link to your recent work on your site, it pays to do the job properly.
Rather than simply grabbing a screenshot of a landing page and a link and adding it to your online portfolio, writing up an engaging case study on your work can be a lot more worthwhile. Case studies don't need to be lengthy essays; they just need to give readers a taste of your process and provide some insight into the challenges you've faced over the course of a web build and how you solved them.
They're a great way to let potential clients know how you work, and they can also provide inspiration for other designers and developers; here are five of our favourite recent examples. Make sure you also check out our top web design tips .
- How to write engaging case studies for your portfolio
01. Museum of Science and Industry of Chicago
For a really inspiring case study, it's hard to beat DogStudio's extensive piece chronicling its work for the Museum of Science and Industry of Chicago. The museum is a vast and highly respected American institution, and you can't help but get the impression that DogStudio was punching well above its weight when it won the commission to rethink and revamp its web platform, but as this case study reveals, it carried the job off with aplomb.
Packed with revealing wireframes, imagery and animations, it's a fascinating insight into a massive and challenging build that had to cater for more than five million online visitors wanting to do everything from buy tickets through to figuring out where to park and finding information about individual exhibits.
02. National Geographic: A Bear's-Eye View of Yellowstone
Sometimes it's better to show rather than tell. For this captivating look at Yellowstone National Park as seen by four bears fitted with camera collars and GPS, Hello Monday had a wealth of footage, data and expert analysis to work with. And rather than go into dry details of how it fitted everything together, it keeps things brief in its case study , providing a short outline of the project and deliverables before moving on to an entirely visual essay that demonstrates just how much work went into creating this digital feature.
As well as a good helping of footage and screenshots showcasing what the site's all about, what we really love about this study is a section dedicated to how Hello Monday stamped its own personality on the project, breathing extra life into the feature with animation, watercolour illustrations and pencil-drawn portraits of each bear.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
03. Once Upon a Time in… Hollywood
Currently doing big business at the box office, Quentin Tarantino's Once Upon a Time in… Hollywood is a love letter to 1960's cinema that recreates its era with Tarantino's typical attention to detail. And to create an online presence that captured the feel of 1969 Hollywood as well as the film, LA agency Watson went the extra mile to create a digital magazine that feels like it could have come off a newsstand 50 years ago.
In this case study the Watson team explain not only the thinking behind the magazine and its pitch-perfect adverts, but also how they create a physical print run of the mag that got handed out at the premiere and first-night screenings, creating a whole other social buzz as movie fans posted shots of their magazine to prove that they were there. If you're looking for ideas on how to run a strong social campaign, there's some great material here.
04. British Red Cross
Kota's case study on its recent work with the British Red Cross is a clear and concise piece that provides valuable insight on the challenges – and opportunities – of working on a campaign with an institution with clear-cut brand guidelines that need to be adhered to. In the case of the British Red Cross's OneKindThing campaign, Kota had to create a platform that stood out from previous campaigns while staying within the society's pretty epic brand guidelines.
With a handful of images and a couple of paragraphs, Kota outlines how it managed just that, and also covers some of the technical hurdles that had to be overcome to deliver the finished site. The end result was well worth the effort, as the British Red Cross testimonial at the end of the case study reveals.
05. Stonewall Forever
To mark the 50th anniversary of the Stonewall Riots, an event that helped bring about the Pride movement, Stink Digital partnered with The LGBT Community Center to create Stonewall Forever, an immersive digital experience that features key narratives and previously unheard stories from LGBTQ+ history.
Stink Digital's case study explains how it built a living monument to 50 years of Pride, based in Christopher Park, New York, but accessible anywhere through a website or AR app, and goes into some detail of the challenges of creating a WebGL monument that consists of over 10,000 individual shards with post-processing effects, but still runs at 60fps, even on low-end devices.
Beyond the technical challenges, though, this is an absorbing and insightful piece on a project that explores life before, during and after the Stonewall Riots.
Related articles:
- The hottest web design trends of 2019
- How to refine your design portfolio
- Get the perfect website layout in 27 steps
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Jim McCauley is a writer, performer and cat-wrangler who started writing professionally way back in 1995 on PC Format magazine, and has been covering technology-related subjects ever since, whether it's hardware, software or videogames. A chance call in 2005 led to Jim taking charge of Computer Arts' website and developing an interest in the world of graphic design, and eventually led to a move over to the freshly-launched Creative Bloq in 2012. Jim now works as a freelance writer for sites including Creative Bloq, T3 and PetsRadar, specialising in design, technology, wellness and cats, while doing the occasional pantomime and street performance in Bath and designing posters for a local drama group on the side.
Related articles
A Space for Creative Growth
6 Web Design Case Studies We Can Learn From
Convey your thought processes and skills - and show future clients who you are as a designer
- Apr 11, 2019
We all know the importance of having a good online design portfolio. It’s your opportunity to show off your masterpieces to the world, while having full control over all aspects, from the layout, to animations, navigation and more. This way, you can have an impact on the way your work is perceived and experienced by potential clients or employers.
That’s all very well, but when it comes to web design projects, why not simply add a link to the website itself and let your visitors browse freely over there? Sure – you should link to any websites you’ve designed, but there are many ways to effectively showcase your web design projects on your portfolio.
Creating a case study that explains your work process and final results can elevate your projects to a whole other level. It can help your site visitors gain a better understanding of who you are, the way you work, your decision-making processes and more. Just like any other design project, a case study should tell a story. It should take your site visitors on a journey through your process, from color palette choices, to icons created specifically for the project, ‘before and after’ pics and more.
We’ve gathered six designers who have chosen diverse ways to expertly showcase their web design projects on their Wix portfolios. Dive in for some inspiration:
1. Brown Owl Creative for Creative House Group
> Showcasing custom-made icons and full-length screenshots
Multidisciplinary design company, Brown Owl Creative, chose to place a fullscreen gif on the top fold of this project page, instantly setting the tone. Directly beneath, a brief sentence introduces the client they were working with, plus the discipline involved and a link to the final result: the website itself. A generous use of white space helps put the focus on the text.
Scrolling down, you’ll find full-length screenshots of their website design, with a simple non-obtrusive gray border. They’ve also chosen to display a section of the client’s website on a laptop, offering an alternative perspective. Another nice touch is the emphasis they’ve put on three animated icons that are featured on the final site. And let’s not forget some basic UX principles they’ve taken care of: a ‘Back to top’ button and a ‘Next project’ button to ensure fluid navigation.
2. Miki Twersky for Nosta Fragrances
> Merging video screenshots with atmospheric photos
There are many subtle additions to NYC-based designer Miki Twersky’s portfolio that make it such a success. The comic footer, delightfully honest ‘ About ’ page and spacious layout make for a browsing experience that is both smooth and entertaining.
It comes as no surprise that her inner project pages are crafted with just as much care and attention to detail. This web design case study starts with a mood-setting image, followed by a brief explanation of the brand and some additional basic details, such as the date, her roles within the project and any other contributors. A slider invites you to scroll through to view the various stages involved in the logo design process.
Further down, Miki has seamlessly integrated video screenshots of the website, enabling her to choose which aspects of her design to put a spotlight on. The page ends with a few product photos that help strengthen the look-and-feel and tie everything together, while presenting more of her branding work.
3. Adelaide Wang for Humm.ly
> Thorough case study incorporating texts, images and videos
San Francisco-based product designer, Adelaide Wang, definitely knows the ins and outs of creating an intriguing and comprehensive case study. Having worked on many aspects of this project for Humm.ly , a music healthcare platform and app, she was able to share her and her team’s full work process.
The long-scrolling page takes you on a journey through some of the major stages of any design project. It starts by presenting their search for a defined visual identity. It then moves on to the details of the app’s various screens and navigation, putting an emphasis on the accessibility of the website’s design . Lastly, Adelaide presents the website itself on various devices, including a video screenshot of the website on mobile.
A consistent layout is used throughout the page, with titles, subtitles and paragraph text all retaining the same style. Two alternating shades of gray make up the website’s background, creating a clear, but subtle, separation between folds, and ultimately contributing to a successful user experience.
Learn more about how to nail your website’s UX design with these professional examples.
4. Studio&more for Din7
> Presenting color choices, logo design and more
Here’s another example of a detailed web design case study, by graphic design studio, Studio&more. In this project for industrial design company, Din7, they worked on both branding and UX. As a result, they had the material necessary to cover everything from color palette and typography choices, to the development of the company’s logo design, illustration style, website and various applications of the visual identity.
Each section of the case study is numbered and presented with a succinct selection of images. They’ve also used the visual language they came up with for the brand in the background, creating a strong and clearly defined tone of voice. Lastly, the studio has picked out a few of their website design’s screens to showcase separately, drawing attention to them.
5. Ariel Sun for her wedding website
> Telling a story through text and images
NYC-based artist and designer, Ariel Sun, created this web design case study for her own wedding website. There are many ways to write copy for your design portfolio – and here, Ariel’s gone for a friendly and personal tone of voice to provide site visitors with an inviting summary of the project. She also clearly explained what she and her partner’s different roles were in the process, giving everyone the credit they deserve.
Two simple, static screenshots of the website design follow, presenting the most prominent pages of the site. These are accompanied by an illustration of the couple and an image of the wedding invitation, helping us get a feel for the vibe they were going for. All of this is presented in a highly aesthetic way, using a clean grid, plus a fixed menu at the top for comfortable navigation.
6. Liron Ashkenazi for The-Artery
> Including mobile and tablet view, process, and more
Multidisciplinary design director, Liron Ashkenazi, worked with a team of 3D artists, designers and developers to come up with the award-winning design for The-Artery ’s website. Liron’s case study of the project is made up of a selection of beautifully designed screenshot videos, short explanatory titles, the 3D model design process and accompanying text. The layout is concise, while including all the relevant details.
A thin column on the left provides us with background information on the client, The-Artery, as well as a breakdown of the various roles and the people involved. It also includes a list of links where the website has been featured.
Scrolling down the page, you see the development of the 3D animated models that appear on the final website. There’s also an image that showcases the website on three different devices. Incorporating elements from the design outside of the screenshots, makes for an intriguing visual representation of the overall project. The text above and on each image clarifies which page you’re looking at and who’s responsible for which elements, while not distracting from the design itself. Finally, Liron has included the design for a 404 page – a welcome addition, especially when it looks this good.
MORE POSTS LIKE THIS:
Apr 23, 2024
Stay curious: 5 web-design inspiration sites
Apr 15, 2024
Mentor Spotlight with Guy Banaim
Apr 8, 2024
Designer Spotlight with Pauline Esguerra
We use essential cookies to make Venngage work. By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
Manage Cookies
Cookies and similar technologies collect certain information about how you’re using our website. Some of them are essential, and without them you wouldn’t be able to use Venngage. But others are optional, and you get to choose whether we use them or not.
Strictly Necessary Cookies
These cookies are always on, as they’re essential for making Venngage work, and making it safe. Without these cookies, services you’ve asked for can’t be provided.
Show cookie providers
- Google Login
Functionality Cookies
These cookies help us provide enhanced functionality and personalisation, and remember your settings. They may be set by us or by third party providers.
Performance Cookies
These cookies help us analyze how many people are using Venngage, where they come from and how they're using it. If you opt out of these cookies, we can’t get feedback to make Venngage better for you and all our users.
- Google Analytics
Targeting Cookies
These cookies are set by our advertising partners to track your activity and show you relevant Venngage ads on other sites as you browse the internet.
- Google Tag Manager
- Infographics
- Daily Infographics
- Template Lists
- Graphic Design
- Graphs and Charts
- Data Visualization
- Human Resources
- Beginner Guides
Blog Graphic Design
15+ Professional Case Study Examples [Design Tips + Templates]
By Alice Corner , Jan 12, 2023
Have you ever bought something — within the last 10 years or so — without reading its reviews or without a recommendation or prior experience of using it?
If the answer is no — or at least, rarely — you get my point.
Positive reviews matter for selling to regular customers, and for B2B or SaaS businesses, detailed case studies are important too.
Wondering how to craft a compelling case study ? No worries—I’ve got you covered with 15 marketing case study templates , helpful tips, and examples to ensure your case study converts effectively.
Click to jump ahead:
- What is a Case Study?
Business Case Study Examples
Simple case study examples.
- Marketing Case Study Examples
Sales Case Study Examples
- Case Study FAQs
What is a case study?
A case study is an in-depth, detailed analysis of a specific real-world situation. For example, a case study can be about an individual, group, event, organization, or phenomenon. The purpose of a case study is to understand its complexities and gain insights into a particular instance or situation.
In the context of a business, however, case studies take customer success stories and explore how they use your product to help them achieve their business goals.
As well as being valuable marketing tools , case studies are a good way to evaluate your product as it allows you to objectively examine how others are using it.
It’s also a good way to interview your customers about why they work with you.
Related: What is a Case Study? [+6 Types of Case Studies]
Marketing Case Study Template
A marketing case study showcases how your product or services helped potential clients achieve their business goals. You can also create case studies of internal, successful marketing projects. A marketing case study typically includes:
- Company background and history
- The challenge
- How you helped
- Specific actions taken
- Visuals or Data
- Client testimonials
Here’s an example of a marketing case study template:
Whether you’re a B2B or B2C company, business case studies can be a powerful resource to help with your sales, marketing, and even internal departmental awareness.
Business and business management case studies should encompass strategic insights alongside anecdotal and qualitative findings, like in the business case study examples below.
Conduct a B2B case study by researching the company holistically
When it comes to writing a case study, make sure you approach the company holistically and analyze everything from their social media to their sales.
Think about every avenue your product or service has been of use to your case study company, and ask them about the impact this has had on their wider company goals.
In business case study examples like the one above, we can see that the company has been thought about holistically simply by the use of icons.
By combining social media icons with icons that show in-person communication we know that this is a well-researched and thorough case study.
This case study report example could also be used within an annual or end-of-year report.
Highlight the key takeaway from your marketing case study
To create a compelling case study, identify the key takeaways from your research. Use catchy language to sum up this information in a sentence, and present this sentence at the top of your page.
This is “at a glance” information and it allows people to gain a top-level understanding of the content immediately.
You can use a large, bold, contrasting font to help this information stand out from the page and provide interest.
Learn how to choose fonts effectively with our Venngage guide and once you’ve done that.
Upload your fonts and brand colors to Venngage using the My Brand Kit tool and see them automatically applied to your designs.
The heading is the ideal place to put the most impactful information, as this is the first thing that people will read.
In this example, the stat of “Increase[d] lead quality by 90%” is used as the header. It makes customers want to read more to find out how exactly lead quality was increased by such a massive amount.
If you’re conducting an in-person interview, you could highlight a direct quote or insight provided by your interview subject.
Pick out a catchy sentence or phrase, or the key piece of information your interview subject provided and use that as a way to draw a potential customer in.
Use charts to visualize data in your business case studies
Charts are an excellent way to visualize data and to bring statistics and information to life. Charts make information easier to understand and to illustrate trends or patterns.
Making charts is even easier with Venngage.
In this consulting case study example, we can see that a chart has been used to demonstrate the difference in lead value within the Lead Elves case study.
Adding a chart here helps break up the information and add visual value to the case study.
Using charts in your case study can also be useful if you’re creating a project management case study.
You could use a Gantt chart or a project timeline to show how you have managed the project successfully.
Use direct quotes to build trust in your marketing case study
To add an extra layer of authenticity you can include a direct quote from your customer within your case study.
According to research from Nielsen , 92% of people will trust a recommendation from a peer and 70% trust recommendations even if they’re from somebody they don’t know.
So if you have a customer or client who can’t stop singing your praises, make sure you get a direct quote from them and include it in your case study.
You can either lift part of the conversation or interview, or you can specifically request a quote. Make sure to ask for permission before using the quote.
This design uses a bright contrasting speech bubble to show that it includes a direct quote, and helps the quote stand out from the rest of the text.
This will help draw the customer’s attention directly to the quote, in turn influencing them to use your product or service.
Less is often more, and this is especially true when it comes to creating designs. Whilst you want to create a professional-looking, well-written and design case study – there’s no need to overcomplicate things.
These simple case study examples show that smart clean designs and informative content can be an effective way to showcase your successes.
Use colors and fonts to create a professional-looking case study
Business case studies shouldn’t be boring. In fact, they should be beautifully and professionally designed.
This means the normal rules of design apply. Use fonts, colors, and icons to create an interesting and visually appealing case study.
In this case study example, we can see how multiple fonts have been used to help differentiate between the headers and content, as well as complementary colors and eye-catching icons.
Marketing case study examples
Marketing case studies are incredibly useful for showing your marketing successes. Every successful marketing campaign relies on influencing a consumer’s behavior, and a great case study can be a great way to spotlight your biggest wins.
In the marketing case study examples below, a variety of designs and techniques to create impactful and effective case studies.
Show off impressive results with a bold marketing case study
Case studies are meant to show off your successes, so make sure you feature your positive results prominently. Using bold and bright colors as well as contrasting shapes, large bold fonts, and simple icons is a great way to highlight your wins.
In well-written case study examples like the one below, the big wins are highlighted on the second page with a bright orange color and are highlighted in circles.
Making the important data stand out is especially important when attracting a prospective customer with marketing case studies.
Use a simple but clear layout in your case study
Using a simple layout in your case study can be incredibly effective, like in the example of a case study below.
Keeping a clean white background, and using slim lines to help separate the sections is an easy way to format your case study.
Making the information clear helps draw attention to the important results, and it helps improve the accessibility of the design .
Business case study examples like this would sit nicely within a larger report, with a consistent layout throughout.
Use visuals and icons to create an engaging and branded business case study
Nobody wants to read pages and pages of text — and that’s why Venngage wants to help you communicate your ideas visually.
Using icons, graphics, photos, or patterns helps create a much more engaging design.
With this Blue Cap case study icons, colors, and impactful pattern designs have been used to create an engaging design that catches your eye.
Use a monochromatic color palette to create a professional and clean case study
Let your research shine by using a monochromatic and minimalistic color palette.
By sticking to one color, and leaving lots of blank space you can ensure your design doesn’t distract a potential customer from your case study content.
In this case study on Polygon Media, the design is simple and professional, and the layout allows the prospective customer to follow the flow of information.
The gradient effect on the left-hand column helps break up the white background and adds an interesting visual effect.
Did you know you can generate an accessible color palette with Venngage? Try our free accessible color palette generator today and create a case study that delivers and looks pleasant to the eye:
Add long term goals in your case study
When creating a case study it’s a great idea to look at both the short term and the long term goals of the company to gain the best understanding possible of the insights they provide.
Short-term goals will be what the company or person hopes to achieve in the next few months, and long-term goals are what the company hopes to achieve in the next few years.
Check out this modern pattern design example of a case study below:
In this case study example, the short and long-term goals are clearly distinguished by light blue boxes and placed side by side so that they are easy to compare.
Use a strong introductory paragraph to outline the overall strategy and goals before outlining the specific short-term and long-term goals to help with clarity.
This strategy can also be handy when creating a consulting case study.
Use data to make concrete points about your sales and successes
When conducting any sort of research stats, facts, and figures are like gold dust (aka, really valuable).
Being able to quantify your findings is important to help understand the information fully. Saying sales increased 10% is much more effective than saying sales increased.
While sales dashboards generally tend it make it all about the numbers and charts, in sales case study examples, like this one, the key data and findings can be presented with icons. This contributes to the potential customer’s better understanding of the report.
They can clearly comprehend the information and it shows that the case study has been well researched.
Use emotive, persuasive, or action based language in your marketing case study
Create a compelling case study by using emotive, persuasive and action-based language when customizing your case study template.
In this well-written case study example, we can see that phrases such as “Results that Speak Volumes” and “Drive Sales” have been used.
Using persuasive language like you would in a blog post. It helps inspire potential customers to take action now.
Keep your potential customers in mind when creating a customer case study for marketing
82% of marketers use case studies in their marketing because it’s such an effective tool to help quickly gain customers’ trust and to showcase the potential of your product.
Why are case studies such an important tool in content marketing?
By writing a case study you’re telling potential customers that they can trust you because you’re showing them that other people do.
Not only that, but if you have a SaaS product, business case studies are a great way to show how other people are effectively using your product in their company.
In this case study, Network is demonstrating how their product has been used by Vortex Co. with great success; instantly showing other potential customers that their tool works and is worth using.
Related: 10+ Case Study Infographic Templates That Convert
Case studies are particularly effective as a sales technique.
A sales case study is like an extended customer testimonial, not only sharing opinions of your product – but showcasing the results you helped your customer achieve.
Make impactful statistics pop in your sales case study
Writing a case study doesn’t mean using text as the only medium for sharing results.
You should use icons to highlight areas of your research that are particularly interesting or relevant, like in this example of a case study:
Icons are a great way to help summarize information quickly and can act as visual cues to help draw the customer’s attention to certain areas of the page.
In some of the business case study examples above, icons are used to represent the impressive areas of growth and are presented in a way that grabs your attention.
Use high contrast shapes and colors to draw attention to key information in your sales case study
Help the key information stand out within your case study by using high contrast shapes and colors.
Use a complementary or contrasting color, or use a shape such as a rectangle or a circle for maximum impact.
This design has used dark blue rectangles to help separate the information and make it easier to read.
Coupled with icons and strong statistics, this information stands out on the page and is easily digestible and retainable for a potential customer.
Case Study Examples Summary
Once you have created your case study, it’s best practice to update your examples on a regular basis to include up-to-date statistics, data, and information.
You should update your business case study examples often if you are sharing them on your website .
It’s also important that your case study sits within your brand guidelines – find out how Venngage’s My Brand Kit tool can help you create consistently branded case study templates.
Case studies are important marketing tools – but they shouldn’t be the only tool in your toolbox. Content marketing is also a valuable way to earn consumer trust.
Case Study FAQ
Why should you write a case study.
Case studies are an effective marketing technique to engage potential customers and help build trust.
By producing case studies featuring your current clients or customers, you are showcasing how your tool or product can be used. You’re also showing that other people endorse your product.
In addition to being a good way to gather positive testimonials from existing customers , business case studies are good educational resources and can be shared amongst your company or team, and used as a reference for future projects.
How should you write a case study?
To create a great case study, you should think strategically. The first step, before starting your case study research, is to think about what you aim to learn or what you aim to prove.
You might be aiming to learn how a company makes sales or develops a new product. If this is the case, base your questions around this.
You can learn more about writing a case study from our extensive guide.
Related: How to Present a Case Study like a Pro (With Examples)
Some good questions you could ask would be:
- Why do you use our tool or service?
- How often do you use our tool or service?
- What does the process of using our product look like to you?
- If our product didn’t exist, what would you be doing instead?
- What is the number one benefit you’ve found from using our tool?
You might also enjoy:
- 12 Essential Consulting Templates For Marketing, Planning and Branding
- Best Marketing Strategies for Consultants and Freelancers in 2019 [Study + Infographic]
3 examples of landing page case studies that inspire trust
A case study should inspire trust that you're the right provider for a specific job. These 3 landing page examples do just that...
Oliver Meakings
A case study is a key part of any B2B sales process, which is why I've put together a list of landing pages for you to draw inspiration from.
These landing pages demonstrate useful techniques that can take your conversion rate to the next level.
Case studies aren't the same as "normal" landing pages, but they have a similar purpose: to convince website visitors that you are the right person/company for the job. And there's nothing more convincing in marketing than somebody finding success with your product.
A good case study takes the reader through a journey; from painful realization of a big problem that lies ahead all the way to overcoming the hurdle.
In the midst of all of that "chaos" is where your product or service comes in, so here are a few ways to help you tell the right stories.
A Few Ways To Write Your Case Study
Case studies don't necessarily have to live on a landing page to be effective, they can also be distributed via PDF files, videos, or even live webinars to capture a specific audience.
When it comes to highlighting a story on a landing page though, the most important thing is to start with the benefits provided and work your way through the challenges.
Remember that you're speaking to a business audience so all they care about is what's in it for them. You have to provide this answer immediately at the top of your case study.
Although this is the first thing the prospect will see, it's not the first one you'll write. The process of getting your case study down is much more treacherous than that. First, you have to ask yourself why...
» Why did the customer go through such lengths to use your product?
The problem is always the biggest factor in a customer's success story. If the product was able to solve it, then the process of getting there was worth it and the money was well-spent.
In most cases, customers will never get there.
Sometimes because the product or service wasn't good enough, other times because they didn't really know what they wanted.
But when they do get on the other side of the fence, that's when a case study is crucial for you to get the most out of the business relationship, and I have some examples to show you.
The 3 Case Study Page Examples I've Picked
For each of the 3 examples you'll see in a moment, there are different ways to convey a similar message—that of success.
That's what a case study is all about, it's where customers are celebrated for being the "hero" in the story and your product being the means to an end. The elements of a good case study landing page are:
- A banner image at the top that recaps the entire story in a quick summary for the reader to understand whether they'd like to go through with the entire article
- Quick benefits below the main banner with information on what the customer was able to achieve after going through the "trouble" of implementing the solution
- Some high-level information on the type of business the customer runs like the industry they operate in and the size of their company compared to target market
- The complete story of how a customer first realized they had a problem and then identified your product or service as a potential solution leading to success
All these elements must be included for a case study that inspires trust. Fancy design isn't as important here as sending the message of success across using a real-life example.
Example of Case Study #1: Miro's Thoughtful Formatting
There's no denying that Miro has one of the most beautifully-intricate visual identities I've come across, so it's good to see that they're passing that effort onto their case studies as well.
Miro is a collaborative software most known for its digital whiteboard, where customers can conduct brainstorming sessions and store some of their most important Eureka moments.
Essentially, it's a place where team members go to "throw it all out on the table" and then start putting the pieces together.
It's a wonderful tool that has a unique angle on collaboration.
Upwork saw an opportunity to use the tool in a way that would help them fully-embrace design thinking as part of their culture and thus requiring a complete organizational restructuring across multiple departments.
Miro beautifully illustrates the complexity of the situation by pairing it with a sleek profile of the company and the type of business they run.
Addressing the problem is only one part of the equation though; they go as far as to highlight what design thinking is with beautiful cards right below the fold not only guiding you through the journey of Upwork but also educating you on the topic itself which coincidentally is exactly what Miro is strong at: helping teams foster innovation via collaborative effort.
In just two visual steps, Miro has given us a lot of information to work with, and now I'm left wondering: "Was Upwork ultimately able to deploy their design thinking approach?"
That's when Miro fills in the context from within Upwork's culture, making it clear that this was a big shift for them and that if they wanted to do it, they'd have to be aligned in full.
The reason why I'm putting this landing page first is that it screams trust; from the thoughtfully-placed quotes to the authoritative sources, Miro knows exactly what they're trying to achieve with this case study and they execute it almost with surgical precision.
What's even better is that, being a software tool, Miro can embed their own solution within the case study itself, making the experience that much more compelling.
Of course, not everybody will be able to afford creating a software suite as complex as Miro's just to make their case study stand out, but I just think it's absolutely brilliant. The problem with case studies is that they are often boring, uninspired chunks of text that don't say anything other than:
"We did this for customer A so you should buy our product."
Miro flips that coin by focusing on Upwork's problem first and only getting to what Miro did as a solution towards the bottom of the article, cementing their commitment to customer success.
Overall, Miro checks all the boxes here:
- An immediate understanding of the problem
- Tackling the story from an educational standpoint
- Removing themselves only to enter when relevant
- Focusing on the customer success and not theirs
If you had to copy one landing page for your next case study, this is it. One of the most elegant ways to compliment a customer that's found success with your product or service.
Example of Case Study #2: Ghost's Unorthodox Approach
Ghost is a Content Management System that claims to be the best way for news publishers to claim back their independence through a variety of monetization features.
Just like Miro's landing page, the best case studies are the ones that embed your product or service within the content itself, essentially showing the benefit rather than talking about it.
That's where Ghost's approach truly shines.
They created a "showcase" of websites built on Ghost.
From this seemingly-endless pool of gorgeous designs, you can draw a lot of inspiration, with many of them having their own dedicated mini-spotlights to celebrate the customer.
Although not a case study landing page in the "traditional" sense since this is more of a gallery of customers who built their publications using Ghost, it's still impressive how they were able to pass that feeling of trust and empowerment by simply taking screenshots of their client's sites.
The cool thing is that Ghost has dozens of the examples to show, making it an effective marketing tool due to its compelling visuals and variety of choices.
As unusual as it might seem, Ghost's approach is extremely effective at producing exactly the effect they are looking for:
» building trust in the blink of an eye
As soon as you open up the showcase page, you're greeted with a world of Ghost creations that look amazing. The next in line is obviously you then.
Example of Case Study #3: Kiflo's Simple Yet Effective Page
To close this deep dive into some of the most powerful case study landing page designs available on the internet, I'm now picking something more in tune with a "typical" success story.
Similar to HubSpot's case study design, Kiflo (a Partner Relationship Management software suite) highlights the main benefits provided by their product at the top of the page.
In the hero section, they include details about the representative who's given a short interview for the case study, and later they'll link that information with quotes from them.
Quotes with real faces and names reinforce the message of the case study
With its simple approach, Kiflo's case study landing page is half-article, half feature page. Below the fold, you get a clear understanding of the company they've interviewed, the challenge that they were facing, and how they came to find and ultimately choose Kiflo as a solution.
The page does a great job at separating each section so that the reader can follow along with PerceptionPredict's point of view which is that of the hero going through incredible challenges to find the superpower which would lend him the tools to succeed in his quest.
By then connecting the features of the product back to the original problem, Kiflo is effectively affirming itself as the solution to creating a partner program from scratch with practically no experience nor advanced knowledge on how to operate one day-to-day.
In their "Strategy" section, Kiflo describes how each feature helped the customer tackle a part of the overall puzzle, up until finally solving the problem at scale.
The results shown are convincing and they really show the effort that the team at Kiflo made to help PerceptionPredict succeed.
The landing page world isn't just made of eye-popping colors and quirky animations; it's meant to deliver value to the reader in a way that helps them move forward and down your funnel.
If you're looking to create a case study page but don't really know where to start, try and bring a first version of it live rather than aiming for perfection. Then see what sticks.
I've reviewed 100s of landing pages over the years and I can tell you that what I care about seeing the most is upfront value.
If you don't tell me what you do NOW, I'm gone.
A similar thing can be said about case studies; if I can't find anything that tells me I should trust you above the fold, I won't go on to read the rest.
So put those benefits up there :)
(And convince me you're the only solution to my problem!)
Originally published 27 Apr 2021
Sign up for more like this.
Web Design Case Study: THT. Website Design for Engineering Service
Welcome to take a glance at one of our recent projects, created at the crossroads of the practical and creative, design and engineering. In this case study, we unveil the story of website design for THT, the company making electronics that breathe life into innovative products.
Client and Project
THT is a USA-based team that offers electrical engineering and firmware development and services that span from proof-of-concept prototyping to designs for mass production. As they describe themselves, they are committed to producing reliable technology that performs at the highest standard, with honest, well-organized, clearly documented, and trustworthy work. They back clients who they believe in and whose goals they can achieve.
The THT team approached us with a request for a website design to amplify their online presence, highlight the service’s benefits, tell about the projects that had already been accomplished, and enhance communication with their customers. We also implemented the website on Webflow .
Website Design
The general visual and interaction design for the THT website is based on the following points:
- the solid visual hierarchy that makes the web pages highly scannable and allows website visitors to quickly get into the essence of the service
- simple, elegant, and readable typography corresponding to the theme and not distracting visitors with decorative elements
- the deep dark color palette and the balanced usage of stylish gradients
- well-arranged content, allowing for quick skimming and uniting different sections into the integral user experience
- effective and consistent graphics performance and custom visual elements for the original presentation
- smooth, catchy web motion effects
Altogether, those factors do their best to make the website present the essence and benefits of the service, engage visitors, and create a quick and strong emotional connection.
The typography choice fell on Alliance, the sans serif typeface flexible for various goals and providing good legibility in both short and large texts.
And here’s a glance at the colors used for the website: deep, eye-pleasing, and providing a good background for various visuals and text blocks.
The home page of the website presents an overview of the services the company provides and the portfolio of completed projects. The hero section features a prominent custom illustration our team made to set the topic and activate instant visual connection to the theme of electronics, devices, and digital technologies even before the visitor reads the text. The image is supported with the blog tagline, a short, concise text block unveiling the main idea of the company activity, and a noticeable call-to-action button for those who want to connect the team right from the point.
Scrolling the page down, visitors can learn more about what the company can help with; all the services are well-organized in a clear, digestible list supported with neat line graphics. The following Portfolio section shows the cards with project previews. All preview cards are endowed with special custom illustrations in one style, which helps to reach visual consistency and integrity.
And here’s how web animation helps make the experience even more dynamic and impressive on the home page of the THT website.
This is a glance at the particular project page in the portfolio. It echoes the visual style set on the home page, with neatly arranged, hierarchic text blocks, illustrative and photo content, and supportive line graphics.
And here’s an example of the page presenting the tool dealing with different data. For the design here, we had to consider various types of infographics and stats that would look clear and consistent.
Another interesting design point to mention is the animation of the interactions with the tabs of different projects, imitating a sort of curtain moving up and opening an extensive preview of the project.
In the structure of the company website, a contact page is usually quite simple. Still, it has great importance as it sets the direct communication with the potential customer, so it’s crucial not to overdesign it to make the page fast to load, informative, and functional. That’s also the idea behind the contact page for the THT website: a contact form is added to the page to let the visitor quickly send the message right from there, or they could choose from other convenient methods like writing an email, giving a call, or arranging an online meeting.
All website pages are adapted to the efficient mobile experience to make the design work at its full and let the brand communicate successfully on any device.
After that our team implemented all the design solutions with Webflow, which ensured that designers monitored the slightest details of the development process.
New design case studies from tubik team are coming soon. Stay tuned!
More Design Case Studies
Here’s a set of more case studies sharing the design solutions and approaches to some of the design projects.
Glup. Delivery App Branding and UX Design
Decriminalize Poverty. Storytelling Web Design on Social Issue
MOVA Brewery. Ecommerce Website Design for Beer Producer
HP23. Website and 3D Animation for Prostheses Producer
Magma Math. Web Design for Educational Platform
Nonconventional Show. Website Design for Podcast
BEGG. Brand Packaging and Web Design for Food Product Ecommerce
Crezco. Brand Identity and UI/UX Design for Fintech Service
FarmSense. Identity and Web Design for Agricultural Technology
Carricare. Identity and UX Design for Safe Delivery Service
Otozen. Mobile App Design for Safe Driving
Originally written for Tubik Blog , graphic and video content by tubik
Want to get emails about new posts?
Check your inbox or spam folder to confirm your subscription.
One Page Case Study Websites
A curated collection of 47 case study websites for inspiration and references. Each review includes a full screenshot of the website design along with noteworthy features. These One Pagers are a great to show users your work in a beautiful long Single Page website, normally pitching your services and social links at the bottom.
Reject Pile
Variable fonts support in Figma
Vertigo Typeface
Pudding Studio
Green Reconstruction of Ukraine
The Steve Jobs Archive
Webflow — Build and style your site exactly how you want ✨
Dang! We’ve run out One Pagers...
There are no more pages to load
- Content Marketing
How to write a case study for your website
Published on: 11 May 2020
Last modified on: 24 April 2023
Team Hallam
Case studies are an essential part of any business’ marketing collateral. But creating a really good one takes more than just putting pen to paper and hoping for the best. Learn why they are important, and how to write a case study for your website that not only packs a punch, but drives results.
What is a case study?
A case study is a way of demonstrating how your business’s helped a person or client overcome a particular challenge. It clearly lays out how your products or services were used to solve a problem, and the results. It’s important to note that a case study isn’t a press release or a sales pitch (at least, not directly), it’s about showcasing your work and framing it in the context of helping others. In short, it’s not about you, but your customer.
Why are case studies important?
Case studies can often get overlooked when it comes to producing marketing material. After all, they’re not exactly the most glamorous form of content to produce, and blog posts can seem more appealing. So why invest in case studies at all? Haven’t we moved on to other things? The truth is that case studies are, and continue to be, incredibly effective. They help to attract new customers, cement trust and increase conversions. It’s the storytelling nature of the format that boosts its effectiveness, and that’s what case studies allow you to do – tell a story about your brand and how you’ve helped others. The story you draft paints a picture, stimulates emotions, and gives your business greater selling power. Storytelling, by using your customer’s voice in a data-backed piece, is an invaluable sales tool – and that’s why case studies continue to work so well.
What makes a good case study?
There are a number of things a good case study should include. Here are the core things you should consider when you are preparing to write a case study for your website, and you can use these as a sort of checklist when creating your draft.
A compelling subject matter
Not every piece of work is worthy of a case study. Choose your best projects and accomplishments, where the client has been happy with what’s been achieved and you have clear results to show for it. It doesn’t matter the size or scope of the work, either. It could have been a one-off, short campaign or a full website redesign over the course of several months. What matters is the impact you had. And then it needs a good angle. Is there anything particularly different or unique about the problem you’ve solved? Anything different that you did as a business? Don’t use details that don’t support the purpose, but think about just why it was so successful.
Industry-specific
Demonstrable problem-solving
Case studies are solution-centric, so you need to show yours at work. An effective one will clearly demonstrate how you took a problem and solved it using your expertise, products or services. There needs to be a before and after – a story.
Solid evidence
Quotes and testimonials
Presented well
Last but by no means least, your case study needs to presented in an engaging, easily digestible way. This includes good formatting and a clear structure (which we’ll get to in a moment) but also the visual elements to it. You may want to enlist the help of a designer to really present it in the most user-friendly way. Depending on time and budget, you could even create a short video to help illustrate the story. Of course, all the usual things for writing for the web still apply: headings and subheading, bullet points and lists should all be included. Make it as easy as possible for the scanners and skimmers out there to read and engage with it.
How to write your case study
As we said previously, it’s not simply a case of putting pen to paper. The key to writing a successful case study is nailing its structure. It has to read well, and it has to tell that all-important story that captures your audience. Thankfully, there’s a tried-and-tested method of doing this which we adhere to. To help your writing flow nicely, we recommend structuring it into the following sections:
1. The headline
2. The client
Open with a short introduction to the client – who they are, their background and industry. You can base it on what they say on their company website or LinkedIn profile.
3. The challenge
Explain over a paragraph or two the challenges your client was facing and wanting to overcome. There could be just one, or a few different pain points.
4. The solution (and your approach to it)
Now for what you actually did. Talk about how your products or services helped solve that problem. Get into the specifics, and also explain your thinking and decision-making throughout the process.
5. The results
This is where you lay out It’s always better to use real numbers, not just vague statements like ‘more than doubled their traffic’. Really hammer it home by pulling out the big guns!
6. The testimonial
Finish up with a quote from your customer, ideally stating how their business has been improved or how happy they are with the service received. It doesn’t need to be lengthy, but it should be genuine. And be sure to use their own words, rather than trying to make it sound typically corporate.
Case studies: your next steps
So there you have it – our complete guide on how to write a case study for your website that captures your audience and hopefully converts them. Of course, no two case studies are ever the same (and nor should they be), but if you stick to a structure you can Above all, the three fundamental elements are:
- What was the problem?
- What solution did you provide?
- What proven results can you showcase?
Have you just learned something new?
Then join the 80,000 people who read our expert articles every month.
- First name *
- Last name *
- Email address *
By signing up to this form I agree, that Hallam may store my data and may contact me using the email address I have provided with promotional emails about products, special offers, and other information which may be of interest. Please also read our privacy policy . You can revoke your consent at any time
- Phone This field is for validation purposes and should be left unchanged.
Get content like this in your inbox, weekly.
More trending content.
How to write great blog posts that engage readers and drive traffic
Email Marketing
How to write killer marketing emails
Case Studies
Our work in action.
Explore our web design case studies to see how we craft custom sites that look great, perform well, and drive serious results.
Engaged Sessions
Retail & products.
Blenz needed a fresh new website to reflect their updated branding, and to help customers more easily find their way to online orders, app downloads, and perks.
A new web design with vastly improved structure and navigation help BC Dairy’s different audiences discover their array of tasty content.
Our website redesign helped SISU’s visitors quickly and easily find where to buy their products, while showcasing their wellness blog as a resource.
Travel & Tourism
Tourism cowichan.
Tourism Cowichan needed a new website to get visitors excited about all this earthy, welcoming region has to offer. This project required a strong architecture with emphasis on featured and related content, for easy browsing and content discovery.
Organic Search Traffic
Professional services.
MISIM needed a brand new website to showcase their complex offering and vast experience – and they also needed cohesive brand strategy to make their digital presence stand out.
CRAFT Beer Market
Our tantalizing website redesign helped CRAFT Beer Market achieve huge increases in their search traffic, impressions, and page speeds.
Pacific Public Health Foundation
PPHF’s resource and campaign content had become difficult to navigate. They needed a full website redesign to improve site architecture and content discoverability – and on a short timeline.
Engineering & Construction
Highline forming.
Highline Forming needed a polished, professional new website with significantly deeper content to help them stand out in a highly competitive industry and region.
This new website was focused on helping SHARE capture their rebrand, expand their offering, and make their content more conversational.
Tourism Prince Rupert
This redesign helped Tourism Prince Rupert earn significantly more search traffic and engagement, while making it easier for their team to manage their ever-evolving content
Technology & Investment
Sandstorm gold royalties.
Sandstorm Gold needed a complete redesign to increase investor appeal. We designed and built multiple new custom features to give the site engaging movement, and help drive content discovery.
Outward Bound Training Academy
Outward Bound’s outdoor training academy had grown too big for their main website, and needed a home of its own. We designed an all-new website to showcase their programs and courses.
Research & Education
MIRA’s high volume of resources had outgrown their old site. They needed a full redesign to drastically reorganize all that content around multiple newly clarified audiences – while meeting high accessibility standards.
Average Engagement Time
Backpack buddies.
Backpack Buddies needed a full redesign to help their organization raise awareness, and to significantly improve their visual storytelling to create that emotional connection needed to drive donations.
Donation Rate
Bc burn fund.
The BC Burn Fund had a heavily outdated website that was difficult to use, and failed to capture their important programs and services. They needed a massive redesign to help drive awareness, attract donors, and support campaigns – starting with proper brand guidelines.
Bounce Rate
PCRS needed a redesign to make their website much easier to search and browse, to help make their critical services more accessible to vulnerable communities with limited online access.
More Website Users
Lgm financial services.
LGM needed a website redesign to showcase their new products and services, and bring their rebrand to life. Our project helped them drive traffic, boost engagement, and speed up their site.
Health & Wellness
We designed an all-new website for BRIA to launch their new virtual mental healthcare service for women and start building their patient list.
This brand new web design helped Nexii double their search traffic and content views, and drastically increase website visits from their U.S. audience.
Under the Same Sun
Under the Same Sun needed a fresh website that could better convey their impact and tell their story, to help drive awareness and – ultimately – donations.
Our website redesign helped RCBC organize their massive volume of important resource content for multiple competing audiences, while making it easier for their team to keep content up-to-date.
Sandbox Royalties
Sandbox Royalties needed a brand new website to launch their company into the market, and immediately begin to attract investors. It had to be uncomplicated yet highly professional.
Circular Materials
This huge website redesign project required organizing a vast amount of content for multiple audiences into an efficient architecture, building a highly usable backend, enabling tailored user experiences by location, and supporting two languages – all on a tight turnaround.
Pages Viewed Per Session
Lindome structures.
Lindome needed a major website redesign to properly showcase their product library and accessories, to help facilitate lead generation and conversions. We went with a bold, visual design to showcase real life applications of their structures.
Faster Page Loads
Delta-q technologies.
We crafted a new web design for Delta-Q to help them showcase their innovative solutions and capabilities, and deepen their company storytelling, while drastically improving visitor engagement.
Engagement Rate
Horizon copper.
Horizon Copper needed a spacious new website to showcase their brand, while making it easier for investors and the public to find critical information about their asset portfolio.
Kitimat Bound
Our brand new website for Kitimat Bound helped capture the region’s breathtaking natural beauty and entice travellers, as evidenced by the rapid climb in search traffic and engagement each month since launch.
Canada’s Placemaking Community
The all-new website we designed for CHCI’s Placemaking Community find its audience, so the organization can share resources and showcase community projects to make others want to get involved.
Mobile Traffic
Yvr art foundation.
The clean, welcoming new website we designed for the YVR Art Foundation helped them double their traffic and on-page engagement, significantly increasing their reach about opportunities and exhibits.
Western Stevedoring
We crafted a new website structure and design for Western Group and its two divisions. The new sites are straightforward for their customers to use, while broadening their company story.
Equinox Gold
A clean, uncluttered design helped Equinox Gold showcase investor information about their mining portfolio, and while keeping the public informed about their responsible practices.
Conversion Rate
Surrey hospitals foundation.
Our total website redesign for Surrey Hospitals Foundation helped them showcase their rebrand, deepen content about their community impact, and drastically increase website traffic and conversions.
Longer Sessions
Summ foods.
The new website we designed for SUMM! Foods helped them better tell their heartwarming brand story, and to achieve huge improvements in their website engagement.
Able & Howe
Our design project for Able & Howe was focused on helping them reposition their brand, deepen their content, and highlight their unique business approach.
BuilderWorks
Our fresh web design helped BuilderWorks achieve impressive page speeds and a high conversion rate right after launch.
Smart, Savvy + Associates
We crafted a new website to help Smart, Savvy capture their recent rebrand, and to create a more usable experience for their two distinct audiences.
CHBA BC Education
We built a brand-new website for CHBC BC to house their high volume of educational content, driving significantly more organic search content within a few months after launch.
This redesign helped Vivreau dramatically increase search traffic and engagement, while showcasing their product offering and environmental impact.
Braintrust Group
We redesigned Braintrust Group’s website to create a more welcoming, motivating user experience that would improve their conversion rate – and it worked.
We redesigned MRS Lumber’s website to create a much more usable product catalogue, drive more traffic, and to improve sales.
TreeFree Sourcing
Tree Free Sourcing had a tiny website, so we crafted a new design that would help them deepen their content, showcase their B2B offering, and drive sales.
Website Users
Four points insurance.
Four Points Insurance needed to move their commercial offering to its own domain. We designed a new website that earned huge traffic, engagement, and page speeds right after launch.
Miracon Development
Our ongoing partnership with Miracon resulted in not only a fresh website for their business, but also several sub-sites for their new developments and massive monthly leaps in traffic and conversions.
This redesign project was about helping Stanscott distinguish their product portfolio from the parent company, and highlight opportunities for potential clients in the Caribbean and beyond.
ISS Language and Career College
As part of our ongoing partnership with ISSofBC, we redesigned the website for their Language & Career College to create a welcoming experience with clear paths to their many language programs and services.
Centre for Brain Health
The UBC Centre for Brain Health creates a massive amount of important content, and it was our job to help them organize it into a well-structured new website.
A Better Life
A Better Life Foundation needed a website redesign so they could better communicate their meaningful work, create community connections, and drive their digital campaigns.
Beacon Group
The new website we designed for Beacon Group involved a total brand reinvention and improved content strategy to showcases their unique approach to consulting
Fraser Valley Conservancy
We crafted a new website for Fraser Valley Conservancy to help them tell their story, clearly convey their impact, and better engage with potential donors.
Spur Communication
Spur Communication had grown way beyond their one-page website, and hired us for a redesign that included deeper content and a custom Shopify theme for an all-new digital downloads store
BC Non-Profit Housing Association
We redesigned the website for the BC Non-Profit Housing Association help make their valuable resources much more easily discoverable, while aligning with a recent rebrand.
Centre for Advancing Health Outcomes
Our website redesign helped CHÉOS boost search traffic and engagement, and drastically improve the organization of their critical health research content.
Naturally:Wood
The new Naturally:Wood website was a huge challenge that we enjoyed: folding two large, resource-heavy sites into one usable structure and rebranded design.
Forestry Innovation Investment
The new website we crafted for Forestry Innovation Initiative helped them significantly improve their page speeds, engagement, and traffic – but most importantly, it made it easier for their team to manage their content.
DeMello Spirituality Center
We redesigned the DeMello’s Spirituality Center’s website to refresh the user experience, and to improve content discoverability.
Avg. Conversion Rate
Northwest bc recruitment.
This project was a joint venture for several communities that needed an engaging and interactive website experience to showcase jobs and regional attractions in Northwest BC.
Search Traffic
The CTN needed a new website to help their underserved audiences access vital resources and information. Our design helped them increase search traffic and engagement, too.
North Vancouver Chamber
This fresh web design helped the North Vancouver Chamber achieve a huge increase in conversion rate, as well as improved on-site engagement.
Marion Scott Gallery
Marion Scott Gallery has showcased contemporary art from Northern Canada since 1975.
One World Education
One World Education helps learners of all ages develop critical thinking and writing skills.
Semios tasked us with a full website redesign for their global expansion, to facilitate improved navigation and deeper content about their expanding capabilities.
Barbican Property Management
Barbican Property Management needed a new website to improve their content and search capabilities for potential tenants browsing hundreds of residential and commercial properties.
BBS Pro needed our help to drastically improve the usability of their technical product catalogue, while increasing traffic, engagement, and page speeds
Conversions
Envisio came to us looking for a a total website overhaul to reflect their visual rebrand. At the same time, they wanted to improve their storytelling, SEO, and conversions.
Binnie’s website redesign was about reflecting their rebrand, deepening their content, and demonstrating their impressive experience and capabilities to both customers and potential recruits.
Adrenaline Tattoo Studios
We crafted a highly visual website for Adrenaline Studios, improving their storytelling content while increasing their search traffic and engagement.
Archetype Glass
Archetype hired us to create a polished new web design to match their premiere products, plus a complex product catalogue and tiered content filtering.
The new website we built for PHS helped them better convey their vital community services for donors – and drove a massive conversion rate increase.
Faster Loads
Bright health.
This redesign was a fun challenge involving a complete rebrand and name change, deepening content while reducing clutter, and creating micro-sites for products. The new site more than doubled their organic search traffic.
Kenorah’s website redesign was all about better showcasing their breathtaking dream-home projects through a more visual experience, while amplifying their intimate process to help potential clients fully envision the smooth work and results.
RDH Building Science
RDH tasked us with a full website redesign to migrate three sites into one interface, while keeping the content from three blogs and their services clean and usable for distinct audiences.
Repeat Visitors
Quantum matter institute.
We were thrilled to help the Quantum Matter Institute with a complete redesign of their content structure and site design, to organize a vast volume of content into a usable experience.
One Coffee hired us for a website redesign to reflect their products’ new look, and to deepen their content for improved SEO. We also helped them significantly boost page speeds.
We designed an all-new, strategic website to help Herstasis™hit the market running, raise awareness, attract investors, and build an audience ready to use their product.
Host Defense
Host Defense needed an all-new website to launch their brand in Canada, with a shoppable product catalogue and ample educational resources for existing and potential customers.
Secure IT Systems approached us about a redesign to create a deeper website experience that accurately showcases their capabilities, and feels as professional as their customer care.
CooperTree Analytics
CopperTree needed a fresh web design and structure to make their high volume of technical information easier to digest, while building out stronger areas for their trust and credibility content.
Softlanding
Softlanding’s website redesign was all about improving their complex user experience, especially navigation. At the same time, we improved their conversion rate, engagement, and site speed.
The new website we crafted for Botanica was focused on helping users find content quickly and effortlessly, and communicating their dedication and commitment to wellness while boosting SEO, conversion rate, and mobile performance.
Neighbourhood Small Grants
Neighbourhood Small Grants needed a total website redesign to deliver more customized multilingual audience experiences, and to capture their exciting rebrand.
The Dakeryn group of companies needed a fresh website to add more depth to their content, flesh out their product directory, and build up their sustainability storytelling.
The Sound came to use for a full revamp of their user experience, needing more content for SEO, improved content discovery, and a much stronger and easier-to-manage CMS.
Equinox Gallery
We crafted a new website for Equinox Gallery to recreate the in-person experience through clean, minimal design and new areas for content discovery and virtual viewings.
Longer Mobile Visits
Population Health Research Institute needed a full website redesign to help make their huge volume of critical research content much easier to search and explore.
Tourism New Westminster
Tourism New Westminster serves both tourists and residents, so they needed a total redesign to make all of their local content more visually appealing and browsable to help drive business.
Inclusion BC
Inclusion BC tasked us with designing a highly usable and welcoming new website to help their audience find critical resources and opportunities.
BluEarth Renewables
The fresh website we built for BluEarth Renewables boasts an exceptionally strong information architecture and navigation, with clear paths to key content for each of their many diverse audiences.
Tourism Langley
Tourism Langley wanted a custom web design focused on rich photography, with a powerful user experience tailored to helping people quickly find events, guides, and local tips to get them excited about the township.
Stella Custom Glass Hardware
Stella Custom Glass Hardware needed their new website to be rooted in a quick, intuitive mobile experience, to help their B2B audience find parts and specs while working on job sites.
The Nature Trust of BC
The Nature Trust of British Columbia needed a new web design to better tell their brand story and the value of their work, to help drive conversions.
First Nations Summit
The First Nations Summit needed a brand new website to make information, tools, and resources about the BC treaty process more accessible.
Our years-long partnership with ISSofBC has included two full redesigns of their main site, as well as building separate sites for their services and programs.
Pacific Centre for Reproductive Medicine
Another long-time partner, we’ve worked with PCRM through redesigning and expanding their website as their business has grown to include new locations and services.
Start Your Project
If your website isn't performing well or just doesn't properly represent your business, talk to us. We'll build you a custom solution that works.
Amp Up Your Site!
Sign up to get our latest articles, packed with website tips and more.
New Case Study
How to avoid (and repair) these 3 critical design blunders
Case studies
Design Blunders
Social Proof: Why people's behaviors affect our actions
Social Proof
Adobe: The growing issue with “Free” trials UX
Adobe Trial UX
Letterboxd: How to nail product market fit with clear Jobs‑To‑Be‑Done
Jobs-To-Be-Done
Spotify Wrapped: 6 psychology principles that make it go viral every year
Spotify Wrapped
The psychology of Temu’s casino‑like shopping UX
Temu Onboarding
GoDaddy: How to improve checkout flows ethically
GoDaddy Checkout UX
Framing Effect: Why context affects decisions
Framing effect
The psychology behind highly effective landing pages
Landing page conversion
Apple vs Meta Threads: The Illusion of Privacy
Apple privacy policy
Beehiiv subscription: 5 small UX mistakes that make a BIG difference
Newsletter subscription
The Search War: Bing AI Chat vs. Google
The Psychology Behind Loom's Explosive Growth
Loom onboarding
Episode 1: Can Bing's new AI search challenge Google?
Bing onboarding
Typeform: How to offboard users the right way
Typeform offboarding
How to increase signup confirmation rates with Sniper Links
Email confirmation UX
Labor Perception Bias: Why faster isn't always better
Labor perception bias
Tech ethics: If cookie consent prompts were honest…
Cookie consent
Amber Alert Redesign: 5 UX Improvements That Could Save Lives
Amber alerts UX
Google: How to increase feature adoption the right way
Google feature adoption
How Linkedin Increased Notification Opt-in Rates by 500%
Linkedin notifications
The Psychology of Advertising: Why this ad made me stop scrolling
Advertising psychology
The Ugly Truth About Net Promoter Score Surveys
Net promoter surveys
The Psychology Behind Amazon's Purchase Experience
Amazon purchase UX
One Simple Psychology Framework To Improve Your Onboarding
Blinkist onboarding
How Blinkist Increased Trial Conversions by 23% (Ethically)
Trial paywall optimization
YouTube’s Attempt To Solve The Paradox of Choice
Youtube retention
Adobe: The Psychology of User Offboarding
Adobe offboarding
Signal: How To Ethically Boost Your Revenues
Signal monetization
Chrome vs Brave: How To Use Ethical Design To Win Customers
Brave onboarding
The Psychology of Clubhouse’s User Retention (...and churn)
Clubhouse retention
The Scary Future Of Instagram
Instagram monetization
The Psychology of Misinformation on Facebook
Facebook misinformation
The Psychology Behind TikTok's Addictive Feed
Tiktok feed psychology
How To Properly Apply Jobs-To-Be-Done To User Onboarding
Headspace onboarding
How To Notify Users Without Being Spammy
Lifecycle emails
User Onboarding: Is HEY Email Worth It?
Hey onboarding
7 Product Team Pitfalls You Should Avoid
Product team pitfalls
How Tinder Converts 8% Of Singles Into Customers In Less Than 15min.
Tinder monetization
Coronavirus Dashboard UX: How Design Impacts Your Perception
COVID dashboard UX
How Morning Brew Grew To 1.5 Million Subs In 5 Years
Morning Brew retention
Uber Eats: How To Ethically Use Scarcity To Increase Sales
Uber Eats retention
Airbnb: How To Reduce Churn With Personalization
Airbnb personalization
6 Ways Mario Kart Tour Triggers You Into Gambling Your Money
Mario Kart monetization
Strava: 7 Strategies To Convert More Freemium Users
Strava monetization
Tesla: How To Grow Through Word-of-Mouth
Tesla charging UX
How Hopper Perfectly Nails Permission Requests UX
Hopper onboarding
9 Ways To Boost SaaS Revenues With A Better Upgrade UX
Zapier monetization
Superhuman's Secret 1-on-1 Onboarding Revealed
Superhuman onboarding
Trello User Onboarding: 7 Tactics To Inspire You
Trello onboarding
5 Deadly Onboarding Mistakes You Should Avoid
Sleepzy onboarding
Duolingo's User Retention: 8 Tactics Tested On 300 Million Users
Duolingo retention
Calm Referral Strategy: Drive Viral Growth With Simple Rewards
Calm referrals
Spotify vs Apple: How Spotify is betting $230M on podcasts to win over Apple users (Ep. 2)
Spotify onboarding
Spotify vs Apple: How Spotify is betting $230M on podcasts to win over Apple users (Ep. 1)
Spotify vs Apple
- Illustration
- Processes and Tools
Case Study Processes and Tools UI/UX
Case Study: Credentially. Website Creation with Webflow
The process of website creation for credentially, the service for automated hr management in healthcare: web design stages and insights into development with webflow..
More and more digital products arise around to connect people that need each other and help professionals to do their job faster and more efficiently. Our new case study is right about one of them: today we will tell you about web design and development as one of the stages of our collaboration with Credentially , a SAAS product for effective and automated hiring of healthcare professionals. This website was not only designed by our team but also developed and implemented with Webflow, so below we will tell you about all the creative stages and uncover some insights into how Webflow works.
The main creative team from the Tubik side on the project included Ernest Asanov, Vladyslav Taran, Sergiy Kucherenko, Vlad Radionov, Alexey Dubrov, Yaroslava Yatsuba, Anastasiia Ostapenko, and Polina Taran; the supporting team included Denys Koloskov, Valeriia Gonchar, Kirill Erokhin, and Max Dreshpak.
Credentially is a SAAS product designed to support and enhance the HR management in healthcare by automating hiring, onboarding, and tracking the compliance of the employees. It reduces the huge amount of paperwork usually involved in all the mentioned processes and paves the simple and efficient way of hiring success with technologies of the new digital world.
Tubik Team has also worked on product branding which is already used by the company in all the marketing channels, the website that is already live, and the service re-design which is now in progress to be released soon and take the user experience for Credentially clients to the next level.
Altogether, a new brand identity, a lead-generating website, and a redesigned product had the goal to portray the company as a game-changer as well as building trust within the healthcare HR community.
This case study is devoted to the website design and development part: the task was to build an efficient website that would increase the brand presence online, generate more leads and actual sales by educating the visitors and showcasing the great work the Credentially team has done so far.
Design Process
The Credentially team came to us well-prepared: they had already considered the basic website structure and page blocks as well as had UX wireframes and text content for the pages. Together, we reconsidered the user flows and interactions, and the Tubik team offered the usability improvements, yet in general, most wireframes were well-structured from the very start.
The website structure consists of six core pages:
As well, there are additional pages such as Careers or Terms & policies, and Blog for the company news and articles.
UI Concept for Homepage
As our team had been already developing branding and product design for Credentially, the website design approach was based on some visual solutions that had been approved before. In particular, it’s an idea of “folders” – inside the product, they serve as containers for users’ documents. Also, the idea of the logo – the blue tab that breaks the orange borders and limitations – was further developed in the web interface, keeping the consistency of the brand image. The mentioned elements were used as distinguishing elements of the website look and now can be found on almost all pages.
The creative process for the Home page resulted in most iterations as that was the main and the strategically important page so its style had to define the stylistic direction for the rest of the pages.
To share the progress and discuss it with the clients effectively, we showed designs via InVision. This way of communication was good because the clients could see how a webpage would look in the browser and could leave the comments right in the needed places.
Sure, that couldn’t reflect the design and interactions at its full because the animation was one of the key factors of user experience. For the cases when animation had to be demonstrated and discussed, we used Readymag.
Hero Section
The Credentially team has a brand slogan that includes several variations. It became the basis for the hero section idea: to make it more engaging and interactive, designers decided to let the tagline get re-typed and show different slogan variations. Technically it was realized with the open-source script Typed.JS which was open for commercial use and flexible in getting tuned for the users’ needs.
Also, the hero section intended to feature an animated video about the service. As it was at the initial stage of the creative process and the website was to be ready for release much faster, the solution was thought-out to use product mockups for that space until the video was ready. Together with the client, the creative team discussed and decided what was better to show in those mockup screens, sketched the wireframe, and then made the simplified UI without full detailing as the product itself was under redesign process as well.
This version was put into production in the process of website development and was live until the video was ready to be featured. The Credentially team really liked this static variant and they even got an idea to stick to it and integrate the animated video into it. However, having tried several options, the creative team insisted on emphasizing the video and showing the preview for several seconds to attract the visitors’ attention immediately and engaging them to hit the play button and watch the full video.
This is the look of the final variant which can be seen on the website now.
The second section of the Home page featured the benefits and also had several variants. The final version defined each benefit with an icon , heading, and short description text. As all the information was essential for visitors, the entire list was shown at once.
Nevertheless, after user testing and an SEO audit, it got clear that a rather significant number of visitors got stuck in that particular section.
So, it was redesigned to look shorter and some information was hidden into tabs to increase conversion rates .
Such audits, testing, and checkups help to track user behavior. Armed with that information, designers can quickly respond and make the needed alterations. In this case, it took just several hours to make the section reconsidered and give it a more efficient layout, the one you can find on the website now.
For the visuals, it was decided to make a choice in favor of custom illustrations instead of stock photos or creating custom photo content. What’s more, the illustrations of the same style are integrated into the product screens so it made the visual connection between the product and its website much stronger as well as amplified consistency .
We offered two different styles of illustrations. The first variant offered the characters with non-standard proportions, a steady trend in digital illustration, with artistic touches such as noise, textures, and uneven strokes. The second variant featured characters that were more universal, detailed, and closer to realistic. The Credentially team chose the second variant.
Every illustration was discussed and approved at the sketch stage and then was wrapped into a colorful digital version.
The main CTA button on the website offers the user to book a demo and after being hit it opens the full-screen pop-up window with a form to fill in. Such an approach is efficient comparing to opening another page because the time of opening a new page may differ and depends much on the internet connection speed, while the modal window is loaded in no time and opens immediately after the click.
However, sometimes there can be situations when you need to share the link directly to the form without any distractions instead of directing the leads to the website and expecting them to click the button. For that goal, a special separate page with a form was created.
One of the interesting design solutions for the Featured page was creating the “breaking lines”. They are placed across the whole width of the page and feature the heading of the text blocks. The lines symbolize the pains and problems people face while hiring medical personnel (Manual, Time-intensive, Chaotic).
In the process of scrolling the page, when the line reaches the central part of the screens, these pains, shown as barriers or borders, get broken this way supporting the main company message “Work without borders”.
The mobile version of the website echoes the same approach but each “pain” section is placed vertically.
Another design solution for this page worth mentioning was the section with toggle switches “Stay staffed/Stay compliant”. The task here was to reflect 18 benefits each of which had a short description and belongs to one of the categories, “staffed” or “compliant”. The switches could be clickable to demonstrate that both categories are active for the Credentially clients by default.
The designers decided that such an amount of data would be effectively presented in switchable tabs. So, they tried different versions of placements and layouts for this section.
As a result, the version below was found the best by both designers and the Credentially team.
Here’s a glance at designs for a Feature page and company blog.
And here’s how the mobile version of the website looks.
Webflow: Development and Implementation
The website was fully implemented by means of the Webflow platform. So, here we will uncover some practical points of the process.
At the early stage, we started work in our studio account until the Credentially team bought their own paid plan. Then we transferred the project to their profile. It is easy to do in just a couple of clicks between the paid profiles.
Our goal was to develop and release the Homepage independently from other pages of the website. Such a situation is quite typical: it allows the Sales team to use the website as soon as possible.
After that, the links in the navigation bar in the website header and footer were changed to the links to the relevant section on the home page. Clicking them, users reached the needed section directly.
Developing a website with Webflow, you can choose a domain name to which the website is published. It can be either the custom domain name or webflow-generated one. Quite often the webflow-generated domain name is used as a testing one to try and check different solutions before they are up into the production on the live website.
Any alterations and changes can be published at once, it usually takes split seconds. In general, Webflow allows for coding design of any complexity without limitations. All the elements that are now used for Web are available in the Webflow editor and all their featured and properties can be tuned as well as in the process of the classic front-end development.
Besides, Webflow lets designers create the animation of any elements using various triggers.
In the Credentially project, we’ve used the following types of web animation :
- page loading animation
- animation of the element appearing on the screen
- up/down scroll animation
- click/hover animation
- time over animation
- tab changes the animation for the elements in Tabs.
Apart from all the opportunities, Webflow offers “in the box”, any out-of-the-box solution can be realized by means of custom code implementation which is available for all paid accounts. We used custom coding for the following animation cases.
- automatic retyping of the tagline by means of the side script integration
- automatic start of the full video after the preview is clicked in the Hero Section
- animated countdown of the stats when the user reaches the section
- generation of the interactive connections behind the network of logos by means of the open-source side script integration
Features Page
- for the automatic slider in the hero section: when visitors open the page, they see the animation of the first slide, after that it automatically switches to the second slide. Then the switch can be managed by click
- to implement toggle switches and an extended view of the tab for every feature
The rest of the animations on the website were done with the native functionality of Webflow.
If the website has blocks or layout elements that are used on different pages (navigation bar in the header, footer, pop-up windows), they can be created once as Symbols, and then their copies can be used on different pages. This sticks to the same principle as in any graphic editor. If anything is changed in a Symbol, the changes will be implemented on all pages.
Other Services Integration
Zapier service allows for the integration of over 2000 apps and services with Webflow.
For the Credentially website, we made integration with Hubspot and MailChimp. When a user requests a demo or subscribes for a newsletter, Webflow transfers the data to the required service as well as sends a notification via Slack.
Apart from that, all the information obtained from the contact forms is also saved in the Webflow account.
Access Permissions
Depending on the type of the paid account, the owner can have the opportunity to invite other people to the project for work on the website with limited rights and permissions. For example, these can be editors and writers for a blog: they can add or remove articles, create categories, upload files that could be downloaded from the article, etc.
Also, another category of users can be allowed to make edits on the website pages, for example, edit the text blocks or change the image.
Every page developed in Webflow can be optimized for SEO as well as particular layout elements.
Dynamic Content
Webflow has its own system of content management. It is mostly used for the pages where the design stays the same but the content has to be changed from time to time, like for example a page of a team member, blog posts, product pages on the ecommerce store, etc. For this project, we used Webflow CMS to make the pages for Insights and Terms & Policies.
Terms & Policies
Creating the page template, a designer can choose the settings for its elements, define some of them as canonic, set particular limitations (for example, the number of characters), tune SEO settings as well as integrate data from the other databases in terms of the project.
Developing the Insights page, we had to cover the following tasks:
- Posts preview having different colors of photo overlay
- Internal search functionality
- Ability to download files attached to a post
1. The mode of the color overlay can be done with the CSS property, which isn’t there by default in Webflow but can be added via code injection.
With jQuery, we could also set different colors for different posts.
2. In Webflow, the functionality of internal search across the website is available as a native feature and can be integrated into any website page.
To make the search work for blog pages only, it was needed to tune the search index and exclude the static pages and CMS templates from the search.
3. The ability to attach the file is set when the template of the blog post is created. Yet, in the developments, for this point, it’s needed to define a separate block and set the parameter “conditional visibility”. It works as a filter: if there is an attached file, the block is shown; if there is no file, the block will be replaced with the next element.
That is just a part of the work we did for Credentially and it shows clearly how many aspects and details should be taken into account when you create a user-friendly website. Soon, we’ll share another article devoted to identity branding we designed for Credentially. Stay tuned!
More Design Case Studies
Here’s a set of more case studies sharing the design solutions and approaches for some of the UX design projects done by Tubik.
Case Study: HUAWEI. Icon Design for EMUI 10
Illuminating Radioactivity. Interactive Web Design for Education
Lumen. Website for Museum of Mountain Photography
GNO Blankets. Branding and Web Design for Ecommerce
Designer AI. Dashboard and Graphics for Fashion Service
CashMetrics. UX Design for Finance Management Service
Bitex. UX Design for Stock Analysis App
Inspora. Brand and UI Design for Virtual Stylist
Slumber. Mobile UI Design for Healthy Sleeping
- February 2024
- January 2024
- December 2023
- November 2023
- October 2023
- September 2023
- August 2023
- February 2023
- January 2023
- December 2022
- November 2022
- October 2022
- September 2022
- August 2022
- February 2022
- January 2022
- December 2021
- November 2021
- October 2021
- September 2021
- August 2021
- February 2021
- January 2021
- December 2020
- November 2020
- October 2020
- September 2020
- August 2020
- February 2020
- January 2020
- December 2019
- November 2019
- October 2019
- September 2019
- August 2019
- February 2019
- January 2019
- December 2018
- November 2018
- October 2018
- September 2018
- August 2018
- February 2018
- January 2018
- December 2017
- November 2017
- October 2017
- September 2017
- August 2017
- February 2017
- January 2017
- December 2016
- November 2016
- October 2016
- September 2016
- August 2016
- February 2016
- January 2016
- December 2015
- November 2015
- October 2015
- September 2015
- August 2015
Welcome to check designs by Tubik on Dribbble and Behance ; explore the gallery of 2D and 3D art by Tubik Arts on Dribbble
Don't want to miss anything?
Get weekly updates on the newest design stories, case studies and tips right in your mailbox.
Feel the Beat. UI Design for Music Streaming Services
The new article dives into the peculiarities of UI design for music streaming services. It shows screens and interface elements typical for these digital products.
Case Study: Herteas. Packaging Design for Herbal Tea Brand
Graphic design project inspired by the calming, energizing, and inspiring power of good tea. Check visual identity and packaging design for the brand of herbal teas.
Case Study: Ready Set Recover. Web Design and Illustrations for Surgery Recovery Platform
Check the creative process for website design and a set of illustrations created for Ready Set Recover, a supportive online program empowering people to prepare for and recover from surgery.
Case Study: OK Boomer. Trivia Game Design and Branding
Let's uncover the fun and lively illustration and design process for the OK Boomer trivia game: from game design and a big bunch of characters to packaging and brand communication visuals.
More articles by themes
Let’s collaborate
Want to work on the project together? Contact us and let’s discuss it.
- Get started Get started for free
Figma design
Design and prototype in one place
Collaborate with a digital whiteboard
Translate designs into code
Get the desktop, mobile, and font installer apps
See the latest features and releases
- Prototyping
- Design systems
- Wireframing
- Online whiteboard
- Team meetings
- Strategic planning
- Brainstorming
- Diagramming
- Product development
- Web development
- Design handoff
- Product managers
Organizations
Config 2024
Register to attend in person or online — June 26–27
Creator fund
Build and sell what you love
User groups
Join a local Friends of Figma group
Learn best practices at virtual events
Customer stories
Read about leading product teams
Stories about bringing new ideas to life
Get started
- Developer docs
- Best practices
- Reports & insights
- Resource library
- Help center
Figma Case study templates
Present your project in pre-built editable templates to get you started.
UX Case study template
UX Case Study Template made to help UX Designers create and organize their case study without any struggle.
Case study presentation template
Case study presentation to frame key insights and outcomes.
Long form research case study template with customizable styles.
Design presentation deck
Modern design deck template with multiple sections.
Visual portfolio template
Modern visual portfolio template with 12 column grid and light and dark themes.
Behance Presentation Template
Case study template with multiple components, visual styles and frame sizes.
Case study template
Case study template with pastel style coloring.
Holistic Case Study Template
Case study presentation template complete with project overview, wireframes and key journey insights.
Case study presentation layout for interview
Case study template with multiple app UI screens.
Portfolio UI - Web & Mobile
A portfolio UI for designers and developers which has 4 unique pages includes blog, case study.
Apple device mockups
Complete Apple device mockup screens for iPhone, Mac, iPad and Apple Watch.
Explore 1,000+ templates on the Figma community
Explore even more templates, widgets, and plugins—all built by the Figma community.
Graphic Design Services
Design makes you human. Great design makes you memorable.
Brafton’s unlimited graphic design service can deliver artwork that underscores your brand message & captures the attention of your potential customers.
By entering your email address, you agree to receive emails from Brafton in accordance with our Privacy Policy . You may unsubscribe from these communications at any time.
Strategy Meets Art
Visual content converts faster than words alone. How’s that for ROI?
Content marketing strategies powered by dynamic media outperform all others, and with a variety of visual assets supporting your marketing, we turn your brand into an ROI engine.
Attract a larger audience, nurture high-intent prospects and enhance customer engagement with design that matters.
Infographics
Visualize complex data, intuitive concepts and compelling narratives with infographics of every size. Our expert designers synthesize dense information and transform it into engaging graphical stories that your audience will retain in seconds and remember for weeks.
Want to stay top of mind?
Infographics are shared or liked on social media 3X more often than other content types. Brafton graphic design services make info … graphic.
White Papers, eBooks and Case Studies
Show prospective clients exactly what you have to offer. Thought leadership and sales enablement pieces should reflect your corporate identity and captivate readers through engaging design, all while driving home the key strengths that make your business unique.
Generate more leads through professionally formatted white papers, eBooks and case studies. Our graphic design professionals can create high-value assets that promote strong brand identity, as well as collateral that supports them, including conversion landing pages, calls to action, promotional emails, custom graphics for social media and more.
Brafton’s experienced designers study your existing brand guidelines closely to maintain consistency across all of your graphical assets throughout the entire sales funnel to promote a strong brand identity.
Calls To Action
We put your conversion process into overdrive with effective CTAs designed for higher click-through rates. Customized typography, color, iconography, placement and verbiage make your CTAs branded centerpieces of your website, email marketing, PPC advertising and more.
Your graphic designer combines the optimal mix of copy and color to capture leads and make instant connections with prospects. Creative ad copy and CTA design are mandatory for converting users into paying customers, and Brafton’s experts deliver.
Custom Illustrations
Stock imagery and stale text are dead. You need authentic, high-quality visuals made by creatives with years of experience. Each custom illustration is an opportunity to deliver your target audience a message meant to be remembered.
Our custom illustrations can be embedded anywhere on your site, throughout your email campaigns and on your social platforms, making them versatile assets that support your digital marketing program.
Our designers craft logos, blog features and thumbnails, social images, newsletter formatting and any type of web or print layout—all with your branding at the forefront. Whatever your design needs are, our experts have the skills, knowledge and tools to get it done for you.
Interactive Infographics
Modernize your brand identity and animate your static content with interactive infographics. Our team of graphic designers and developers collaborate to embed interactive elements into your traditional infographics. These elements may be triggered by scrolling through the page, hovering over an icon or clicking a button.
Each movement of the user’s mouse creates a visually rich and dynamic form of content that presents information with max UX in mind. Custom quizzes, interactive maps, informational flowcharts and other forms of interactive data visualizations give you the unique opportunity to capture attention, ask specific questions, show off your top qualities in a dynamic way, and more.
UX & Web Design
In a mobile-first, human-first world, user experience is everything. Search engines prize seamless, responsive website design across all device types. That’s why our graphics team, along with our consulting, technical and editorial teams, ideate, create and consult on branding, wireframes and mockups so you rank higher in SERPs and best serve site visitors.
Optimized web copy, enhanced site speed and user-friendly functionality turn your site into an interactive digital lab that serves your target audience. It also sets the stage for experiential and creative design, and other forms of visual communication like interactive quizzes, animated features and larger 3-D renderings.
Our unlimited graphic design capabilities mean you can take on an entire site redesign, or focus on specific sections of your site such as your blog or particular conversion landing pages. Putting excellent graphic design at the forefront of your website strategy means you’re putting the needs and wants of your audience first—and that’s what turns a website from just a URL to an ROI generating machine.
What Our Clients Are Saying
Helping Crews Control Think Global With Local SEO
The Perfect Content Marketing Cocktail for Lanshore
How We Made Webex’s Blog Go
Hear from our experts, branding 101: what is it, and how does it work.
Ken Boostrom, Design and UX Director
Brafton by Design: Visual Marketing With Courtney Meyer
Courtney Meyer, Senior Designer
On-Demand Artwork
A comprehensive content marketing strategy often extends beyond the marketing department. Consistent graphic design across all aspects of your business are crucial for supporting a brand identity that stays steady across all platforms and mediums.
No design project is too big or too small for our graphic design experts. We appreciate the importance of having the right collateral at the right time.
We offer custom graphic design for any asset your company needs: sales sheets, one-pagers, advertising and promotional materials, internal reports and documents, client-facing guides and email templates and more—all designed to spec and upon request.
We can also accommodate print design, business cards, brochures, direct mail, corporate logo design and other specialized services and marketing materials.
It’s art without boundaries.
Graphic Design ROI
Graphic design works. We know this after more than 10 years in the business as the largest content marketing agency in North America.
Authenticity of content is the most influential factor in 80% of consumers’ decisions to follow a brand. And adding design to text enables users to follow directions 323% better. The indicators are clear: If you want engagement, you need professional graphic design services.
Graphic design services from Brafton help monetize your messaging, turning your creative ideas into commercial wins.
WITH PURPOSE
Learn how Brafton turns illustration into ROI. Every asset has a purpose; every image matches customer intent. Design your success starting now.
Check out Brafton’s graphic design services in the United Kingdom »
In Australia?
Check out Brafton’s graphic design services in Australia »
In Germany?
Check out Brafton’s graphic design services in Germany »
IMAGES
VIDEO
COMMENTS
A web design case study is a visual and textual analysis of a successful web platform, landing page, website design, or other web-based product. These types of case studies can be physical documents, but they're often digital: PDFs, infographics, blog posts, or videos. Screenshots are an essential component, ...
Make sure you also check out our top web design tips. How to write engaging case studies for your portfolio. 01. Museum of Science and Industry of Chicago. DogStudio took on a massive job with this site, and delivered (Image credit: DogStudio) For a really inspiring case study, it's hard to beat DogStudio's extensive piece chronicling its work ...
4. Studio&more for Din7. > Presenting color choices, logo design and more. Here's another example of a detailed web design case study, by graphic design studio, Studio&more. In this project for industrial design company, Din7, they worked on both branding and UX. As a result, they had the material necessary to cover everything from color ...
This means the normal rules of design apply. Use fonts, colors, and icons to create an interesting and visually appealing case study. In this case study example, we can see how multiple fonts have been used to help differentiate between the headers and content, as well as complementary colors and eye-catching icons.
Reason Production Studio - Website design Case Study. Multiple Owners. 312 937. Save. HRMS Website UX/UI Design Case Study. Prasenjeet Kharat. 42 454. Save. Ice Cream Website and App - UX/UI Case Study. Armine Hovsepyan. 226 1.6k. Save. NFT Website Case Study. Sahin Mia. 580 3.8k. Save. Live NGO Website Redesign- UIUX Case Study.
Creative Nights is a UX design consultancy and creative studio headquartered in Prague, with an impressive roster of international projects. One of these projects is the website for the renowned dental products brand, Swissdent. Art of Swissdent is designed as a crossover between an eCommerce website and an online presentation of the brand. The case study, available at the agency's website ...
All good case study designs will include a combination of photo, video, and illustrations or charts to tell a story of their clients' success. Rather than just relying on text, these visual aids back-up any claims being made as well as visually capturing the attention of readers. They are laser focused.
The 5 core elements of a web design case study. 1. The Overview. Think of your Overview section as the executive summary of your case study. It's the Cole's Notes version of the document, and allows your prospects to quickly understand the highlights of your past work without reading the entire thing. This section should include the core ...
The 3-part case study structure. Each case study I create has three main parts: Part A: The transformation that your client experienced from working with you on this project. Think of this as an overview of your story. Part B: The design decisions that you made throughout the project.
Case study examples. Case studies are proven marketing strategies in a wide variety of B2B industries. Here are just a few examples of a case study: Amazon Web Services, Inc. provides companies with cloud computing platforms and APIs on a metered, pay-as-you-go basis.
The 3 Case Study Page Examples I've Picked. For each of the 3 examples you'll see in a moment, there are different ways to convey a similar message—that of success. ... Similar to HubSpot's case study design, Kiflo (a Partner Relationship Management software suite) highlights the main benefits provided by their product at the top of the page.
Website Design for Engineering Service. Welcome to take a glance at one of our recent projects, created at the crossroads of the practical and creative, design and engineering. In this case study, we unveil the story of website design for THT, the company making electronics that breathe life into innovative products.
These One Pagers are a great to show users your work in a beautiful long Single Page website, normally pitching your services and social links at the bottom. A curated collection of 47 case study websites for inspiration and references. Each review includes a full screenshot of the website design along with noteworthy features.
Thankfully, there's a tried-and-tested method of doing this which we adhere to. To help your writing flow nicely, we recommend structuring it into the following sections: 1. The headline. This one-liner should be an impactful overview of the project, perhaps highlighting one of the key goals or achievements. 2.
Our work in action. Explore our web design case studies to see how we craft custom sites that look great, perform well, and drive serious results. Industry Engineering & Construction Health & Wellness Non-Profit Professional Services Research & Education Retail & Products Technology & Investment Travel & Tourism.
Mood Board 📄 Page Structure ⭐️ AIDA Model. By leveraging the AIDA model, I gained valuable insights into structuring and sequencing content on my website. AIDA, which stands for Attention, Interest, Desire, and Action, helped me effectively engage users and guide them towards a specific objective.. Attention — The first section of the page is supposed to grab a visitor's attention ...
Trello onboarding. Sleepzy onboarding. Duolingo retention. Calm referrals. Spotify onboarding. Spotify vs Apple. See exactly how companies like Tinder, Airbnb, Trello, Uber and Tesla design products that people love. One new user experience case study every month.
Briefing. The goal of this project was to study, analyze and develop an improved web customer support page for a well-known brand active in the market, in order to provide an overall better, easier, and faster user experience throughout the interface. The result should be a non-responsive desktop-based web page design.
Web Design and Development with Webflow. Case Study Processes and Tools UI/UX. Case Study: Credentially. Website Creation with Webflow. The process of website creation for Credentially, the service for automated HR management in healthcare: web design stages and insights into development with Webflow. by Alexey Dubrov and Marina Yalanska.
Explore 1,000+ templates on the Figma community. Explore even more templates, widgets, and plugins—all built by the Figma community. See more. Display your projects and research in an organized and presentable format with free templates to get you started.
View Case Study & Portfolio Page design. Case Study & Portfolio Page design Like. Kunal Chhajer. Like. 4 ... 1.2k Shot Link. View Retail Express: SaaS Website Case Study Pages. Retail Express: SaaS Website Case Study Pages Like. Beetle Beetle - SaaS Website Design Agency Team. Like. 132 53.1k Shot Link. View Small World Games Website. Small ...
Landing Page Case Study Inspirational designs, illustrations, and graphic elements from the world's best designers. Want more inspiration? Browse our search results... View Clothing Store Website Design _GOODY. Clothing Store Website Design _GOODY Like. UIHUT - UI UX Design Agency Team. Like. 96 11.1k View Event Landing Page - Floko . Event ...
Discover 12,000+ Case Study designs on Dribbble. Your resource to discover and connect with designers worldwide. Find designers. Designer search Quickly find your next designer; Post a job ... Case Study: THT Website Design Like. tubik Team. Like. 211 81.5k
Generate more leads through professionally formatted white papers, eBooks and case studies. Our graphic design professionals can create high-value assets that promote strong brand identity, as well as collateral that supports them, including conversion landing pages, calls to action, promotional emails, custom graphics for social media and more.