Redesigning a Case Study Landing Page

Project Overview

The company's case studies are used to showcase the value of their product solutions. However, the site at the time hindered customer’s ability to find relevant information efficiently. For my final project at Noroff I leveraged the design thinking process and collaborated with users to revamp the landing and case study pages. Since then I have updated the design using my new skills in Figma.

Methods used:
Competitor review and testing
Remote user interviews
The 5 why's and tell me more techniques
Divergent thinking technique
Usability testing of wireframes

The site on desktop and mobile in September 2024

Research

Reviews and user testing of the existing site as well as competitors' provided an understanding of why customers read case studies, where and how they expect to find them and how and when they use them.

User Interviews

Miro was used to visually summarise the results from user interviews and it became clear that they use case studies to;

Help solve unforeseen challenges

Back-up decision making when using a product for the first time (or the company)

Keep up to date with new technology

Customers also want to know a product's track record, if it's been used in similar circumstances and how successful it

View the Affinity Map here

"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

" I read case studies to keep up to date on new technology, but mostly to aid in decision making. I need to know a product's track record, if it's been used in similar circumstances and how successful it is. "

— From user interview

Synthesising Insights

Visualising the core 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, site map and navigation scheme.

Utilising insights from the research phase along with inspiration from a moodboard and persona, brainstorming was used to generate ideas and solutions round how to make:

Case studies more discoverable?
It easier to view products used in cases studies?

These were refined through iterative sketching and narrowed down to three key concepts via dot-voting.

View the user flow here

Low fidelity wireframes

Basic wireframes were sketched out following design principles, patterns and best practices. For example, limiting choices/complexity to make decision-making easier, additionally Jakub’s Law was considered throughout - recognising that familiar designs reduce user effort.

The Solution

Case studies and products used were made more discoverable by;

Updating and modernising the main navigation and footer to reflect the company's growth and changes in web design, including direct navigation to case studies

Using visual cards as well as a related case studies carousel (which would be used on product pages too)

Tagging case study cards with latest/most read tags making them quickly identifiable

Giving users control over the cases they want to see through filters for well phase, location and challenge as well as being able to sort results by latest, most read and alphabetically

Adding links to the products used in cases to the case study page

View the prototype here

Iterations and 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

The main filters by well phase (Topside, Completion etc.) were made more visual with small cards.

Further ideas include:

Since this re-design the company has undergone a well needed re-brand, so the branding could be updated - enabling more contrast between sections
A log-in area for customers to view more sensitive information - such as product success rate

Thank you!

Thanks for checking out my portfolio.

Back to top