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 and a reduction in the time customers spent searching for relevant content.

Methods used:

User interviews
Competitor benchmarking
Personas
Affinity Mapping
User flows
Heuristic evaluation
Brainstorming
Accessibility
Usability testing
Wireframing
Prototyping

My role

I led this project independently, balancing full-time work and part-time study.

iPhone frames presenting the redesign of Interwell's case study landing page

Discover

Gain insight into the use of case studies

Competitor benchmarking Remote user interviews

Active listening Empathy

I needed to find out why customers read case studies and where and how they expect to find them. The sales department had provided me with two contacts, and I reached out to my own in the industry, from the target group. They included reservoir, completion and drilling engineers. I interviewed and tested the existing site with five people in total.

The site on mobile in 2024

The hamburger menu (Choosing 'News' led a user to the next screen - image.2)
The News sub-menu
The 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”

— From user interview

Define

Synthesise the data

Affinity Mapping

Data analysis Analytical thinking Prioritisation

Using Miro to visually summarise the results it became clear that people used case studies to;

Help solve unforeseen well challenges
Back-up decision making when using a product (or the company) for the first time
Keep up to date with new technology

They also needed to know a product's track record, if it's 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.

Visualising the user flow and referring to the competitor review informed the requirements for the site. Synthesising these in an affinity map shaped the development of the information architecture and navigation scheme.

Develop

Solve the problem

Ideating Sketching Heuristic Review Accessibility

Creativity

Utilising insights from the discovery phase and a persona. Brainstorming was used to generate ideas round how I might make:

Case studies more discoverable
It easier to find products used in case studies

I sketched some ideas on paper, then narrowed them down to three key concepts via dot-voting.

Ideas included:

Filtering by well conditions, well stage, applications, products, location and year. And enabling sorting alphabetically or by age.
Using larger, visual shapes for high-level filters

Wells conditions dictate different approaches, materials and compliance regulations. So providing a filter for this and well stage would enable users to find the most relevant case studies for the wells they are currently working on.

Linking to products from the case study page to enable users quick access to product information
A related case studies carousel to showcase similar cases a user may be interested in
Linking to related technical papers to make them more discoverable, but importantly adds proof of success
An index of content at the top of the case study page to show content and enable a user to skip content
Showing the time to read a case study
Including an image of the author to personalise the case studies and build reliability
Adding in "Contact Us" CTAs

I created a low fidelity prototype using Claude and tested the flow and labels.

Wireframe sketches

Deliver

The solution

High fidelity prototyping Usability testing Iteration

Case studies and products used in them were made more discoverable by:

Changing the main navigation label to Resources with the sub-items: Case studies, Technical Papers and Webinars
Highlighting and linking to case studies through visual cards on the homepage
Using larger, visual filters for the main areas
Providing filters such as: Well conditions, Well Phase, Application, Product, Location and Year
Enabling people to sort results by newest, oldest and alphabetically
Adding a "Related case studies" carousel to case study pages
Tagging case study cards with new making them quickly identifiable
Visual cards linking to products used in cases, on the case study page

Best practices for filtering were followed. Such as;

Enabling people to choose more than one filter at a time
Displaying an overview of active filters on the results page
Show an updated result count
Providing people with a quick way to delete one or all filters
Where there were many filters they were chunked for easy scanning
Instant filtering - enabling users to change course should the results not match their needs

Links to relevant technical papers were added to case study pages. This added to the proof of success of the products.

Additional updates included:

Adding a card carousel to promote the company's sustainability strategy at the bottom of the case study page
An improved footer with a larger CTA for getting in touch

View the low fidelity prototype

Future solutions

Next steps

Since this design has been re-visited the following iterations have been made;

A contact-us carousel was added to help customers find a person's contact details quickly from relevant pages i.e case studies and product pages
Since this re-design the company has undergone a rebrand, so the branding has been updated - enabling more contrast.

Additional ideas include:

A log-in area for people to view more sensitive information - such as product success/failure rates and learn what happened. They could also download more detailed technical specifications for products.

What did I learn?

Out of the contacts Sales provided I could only get one interview. Their role was also not 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. So my screening could have been better.

I learnt about faceted navigation and filtering and sorting best practices.

Thanks for checking out my portfolio!

Back to top To Booking Process project