Marine Stewardship Council
Date
January 2023
Project Type
Website Redesign
Contribution
UX Research, UX Design, UI Design
The Marine Stewardship Council is an international non-profit organisation that recognises and rewards efforts to protect oceans and safeguard seafood supplies for the future.
Enhancing the MSC certification website experience
The MSC is responsible for certifying fisheries based on stringent sustainability criteria. Once certified, businesses are granted the blue MSC label for their products. This activity stands as one of the organisation's primary endeavours, aiming to bolster the adoption of sustainable fishing practices and provide businesses with acknowledgment and promotion. However, the organisation faces challenges in converting website traffic into registered interest, prompting the need for a redesign of this pivotal website section. The overarching objective is to boost the number of fisheries pursuing certification.
Problem
Businesses in the seafood industry struggle to grasp the significance and tangible benefits of sustainable seafood certification. Despite increasing awareness of environmental issues like overfishing, some remain unaware of their sourcing practices' impact. Others view certification as optional, hindering their engagement with bodies like the Marine Stewardship Council (MSC). Additionally, the existing website's fragmented information complicates navigation and makes it difficult to take action.
Solution
Redesigning this critical section of the website to tackle usability concerns and offer transparent, accessible details on MSC certification processes, benefits, and criteria. This involves emphasising the pressing need for sustainable fishing practices, clarifying the business advantages of certification, instilling trust, refining navigation, organising content efficiently, and integrating interactive elements for enhanced user engagement and comprehension.
Exploring stakeholder perspectives and pain points
To achieve these research goals I used a dual approach of generative and and evaluative research enlisting stakeholders engaged in seafood production, such as fisheries managers, sustainability managers, and procurement specialists. In the initial phase, I conducted semi-structured interviews to delve into participants' awareness, attitudes, and perceptions regarding sustainable seafood certification. Additionally, I explored their experiences and pain points in the certification process, where applicable. In the subsequent phase, I facilitated usability testing sessions, tasking participants with specific actions on the current MSC website while capturing their interactions, feedback, and task completion rates.
Key Takeaways
28% of survey participants we're not fully convinced overfishing is a significant problem.
75% we're unconvinced there were tangible business benefits to being certified.
A number also flagged slow bureaucratic experiences with previous attempts to gain other certifications as well as difficulties getting buy in from internal stakeholders.
For the three main website tasks given to participants the average failure rate was just over 30%.
The average time to completion for tasks provided (which involved finding specific information on the website) ranged from 58 to 128 seconds.
A significant portion of participants are what could be described as not tech savvy.
Based on this reserarch we can start to paint a picture of different types of user as well as their needs and frustrations
The need for better persuasion and an improved user experience
After completing the interviews, surveys, and user tests, I opted to conduct an additional usability assessment utilising a PURE (Pragmatic Usability Rating by Experts) analysis. This approach involved aggregating ratings, based on a predefined scale, from a panel of experts well-versed in UX principles and heuristics
Overall, the website scored 25 out of a possible 60 across four different tasks. Tasks associated with assessing suitability for certification and initiating certification pursuit performed notably poorly. These findings, alongside those from the interviews and surveys underscored the following critical problems:
Despite growing awareness of the importance of sustainable fishing practices, businesses face significant barriers in adopting certification programs such as that offered by the Marine Stewardship Council (MSC). Skepticism about both environmental and business benefits, and challenges in navigating certification processes hinder participation. Additionally, stakeholders encounter usability issues on the MSC website, including difficulty in accessing relevant information and navigating complex pathways. As a result, businesses are unable to make informed decisions about pursuing certification, leading to missed opportunities for environmental stewardship and market differentiation.
Providing clearer information while improving website navigation
I started with some rough sketches and very low fidelity frames to experiment with various layouts and content arrangements. A pivotal consideration during this stage was assessing whether the extensive volume of information necessitated multiple pages or could be consolidated into a single page.
Following the presentation of initial designs to previous participants and gathering feedback, it became evident that incorporating ample clean, empty space would be beneficial, especially considering the diverse range of technical abilities among users. For the same reason, I chose to consolidate the essential information onto a single page.
I refined the sitemap and proceeded to develop high-fidelity wireframes, which would serve as the foundation for further development once decisions regarding branding and visual elements were finalised.
An intuitive page emphasising action and business benefits
After finalising the general architecture, I spent time exploring various design styles. Through wireframing experimentation, I concluded that adopting a clean and spacious layout would be advantageous. Consequently, I was drawn to utilising cards for their flexibility and effectiveness in organising information. Additionally, I opted for intermittent use of gradients to inject visual interest into what could otherwise risk becoming a mundane design.
I then proceeded to develop a mood board with a range of colours, imagery and image assets aligning with the brand, design, and layout specifications. Leveraging MSC's existing core brand colour, I expanded the palette drawing inspiration from the ocean. For font selection, Manrope emerged as the prime choice owing to its readability and suitability for both headings and body text.
A streamlined web page that conveys urgency, highlights business benefits and provides a clear path to action.
By integrating clear messaging regarding the importance of sustainable fishing practices, the page compels businesses to take action towards MSC certification. Highlighting the tangible advantages of certification, such as improved marketability and profit margins, it addresses skepticism and motivates user engagement. The simplified navigation enhances user interaction, guiding them seamlessly through the key information. Overall, the redesigned landing page effectively communicates MSC's mission, encourages business participation, and facilitates informed decision-making.
Problems Solved
Lack of understanding about the significance of sustainable seafood certification among businesses
Unclear perception of the business benefits associated with certification
Skepticism regarding the importance of sustainable fishing practices
Challenges in navigating certification processes on the existing MSC website
Fragmented presentation of information on the website leading to difficulty in accessing relevant details
