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 is.
"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.
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.
Iterations and Next Steps
Since this design has been re-visited the following iterations have been made;
Additional ideas include:
- Since this re-design the company has undergone a well-needed rebrand, so the branding has been updated - enabling mo re contrast.
- A log-in area for customers to view more sensitive information - such as product success rate.
Thanks for checking out my portfolio!
