Redesigning a Case Study Landing Page
Project Overview
The company's case studies showcase the value of their product solutions. However, the outdated site made it difficult for customers to find relevant information efficiently.
Applying the design thinking process, I collaborated with users to revamp the case study and landing pages. The result was improved navigation, a reduction in the time customers spent searching for relevant content and more discoverable content.
Methods used:
- Competitor analysis
- Remote user interviews
- Affinity Mapping
- Personas
- User flows
- Brainstorming
- Heuristic evaluation
- Accessibility
- Low-fidelity wireframing
- Usability testing
- Prototyping
My role:
I led this project independently, but worked with users throughout.
Discover
Why and how people use case studies
I wanted to understand why customers read case studies and where and how they expect to find them. After creating a screener I sourced five participants. Two from contacts the sales department provided and three from my network in the industry. They included reservoir, completion and drilling engineers. I conducted remote interviews with them using Teams.
The site on mobile in 2024
- Hamburger menu where choosing 'News' led the next page (image.2)
- News sub-menu items
- Case study landing page
"I would find it easier if it was grouped maybe by topic. If I’m looking for a plug I’d probably want to jump straight into case studies for the plugs, but I might lose out on stumbling over something else that could trigger my interest”
— Quote from a Completions Engineer
Define
The problem
Summarising the insights visually in Miro made it clear that engineers use case studies to:
- Help solve unforeseen well challenges
- Support decisions when trying a product or the company for the first time
- Keep up with new technology
They also wanted to know a product's track record, if it'd been used in similar circumstances, and its success rate. Users mentioned a lack of trust in the information on the website. They also found it disorganised and difficult to find.
How could I make case studies more discoverable and products featured in them easier to find?
Develop
Solve the problem
Utilising insights from the discovery phase and a persona I brainstormed ideas round how I might make case studies more discoverable and it easier to find products featured in them. I sketched some ideas on paper, then narrowed them down to three key concepts via dot-voting. View the ideas below.
Finding Case Studies
Navigating to case studies used to involve people having to guess which menu item they were under. Adding the navigation item Resources allows people to find them quickly.
Filtering Case Studies
Well conditions dictate different approaches, materials and compliance regulations. Trying to find a specific case study relevant to a well challenge was time consuming and difficult. Adding filters such as well conditions, well stage, applications, products, location and year allows people to find relevant case studies quickly.
A sort function allows them to sort the results alphabetically or by date, and large, visual tabs allow quick high-level filtering for well stage.
Connecting Content
Opening a case study used to involve clicking on a link that opened a PDF. Creating a page per case study is better for SEO and allows for:
- Links to products - giving quick access to product information.
- A similar cases carousel - enabling people to discover relevant content.
- Links to related technical papers - making them more discoverable and adding proof of success.
Reading Experience
Reading a case study used to involve reading a static PDF. Adding in-page navigation allows people to see what's covered and skip ahead.
Low fidelity wireframes
Deliver
The solution
I created a design system in Figma. I then uploaded it to Claude and created a high-fidelity prototype. I made a few iterations, such as moving away from the circular filter carousel in favour of a more common tabs solution. This took up less space on mobile.
View the final prototype below
Case studies, and products used in them, were made more discoverable by making the following changes:
Navigation and filtering:
- "Resources" as the main navigation label, with sub-items "Case studies", "Technical Papers" and "Webinars"
- Visual cards on the homepage highlighting and linking to case studies
- Tabs for the main category filter (well phase)
- Filters for applications, location, well conditions, well environment, well phase and product
- Sorting by newest, oldest or alphabetical order
- "New" tags on case study cards, making new content quickly identifiable
Case study pages:
- Links to relevant technical papers, adding to proof of success
- "Related case studies" carousel
- Visual cards linking to products used in cases
Best practices for filtering were followed, including:
- Multiple filters selectable at once
- Overview of active filters on the results page
- Updated result count
- Quick way to delete one or all filters
- Many filters chunked for easy scanning
- Instant filtering, letting people change course when results don't fit
Additional updates included:
- A carousel at the bottom of the case study page promoting the company's sustainability strategy
- Improved footer with a larger CTA for getting in touch
- "Talk to us" CTA in the header
The design system created in Figma, then uploaded to, and used in Claude.
Accessibility
Structure and navigation
- Descriptive headings, titles and labels
- Section headings organise the content
- Multiple ways to navigate (nav bar, search, footer, cards on homepage)
- Navigation is predictable across all devices
- Buttons, icon labels and link texts are consistent across devices
- Skip link letting screen reader and keyboard users bypass the main navigation
Visual and interaction
- Text and non-text contrast meets WCAG AA
- No reliance on colour alone
- Focus states on all interactive elements
- 48x48px target size for buttons, icons and links (Material Design)
- Content reflows into narrow viewports without sideways scrolling
- The hero section animation can be paused
Next steps
Ideas for future iterations include updating the other pages as well as creating a log-in area for people to:
- View product success/failure rates and learn what happened
- Download more detailed technical specifications for products
What did I learn?
Out of the contacts Sales provided I could only get one interview and their role wasn't really within the target group. It turned out that they had a list of approved equipment they were permitted to use. So in the event of any other products being required, they would report to a senior colleague who would then take on responsibility for finding what was needed. They would also just request any information they needed from their contact in sales, so they rarely used the website. So my screening could have been better.
I learnt more about faceted navigation as well as filtering and sorting best practices.
Thanks for checking out my portfolio!
