BACK TO PROJECTS
UX/UI project
LA NETSCOUADE WEB ECO-DESIGN
2023
UX/UI Design
Eco-Design
LA NETSCOUADE ECO-DESIGN WEBSITE
Overview
During hackathon school week, we had an opportunity to collaborate with Netscouade agency which is an digital communication agency specializing in sustainable developement. Our team included UX/UI designers, an Art Director and a Web Developper. Weāre on a mission of better communication about the values and the expertises of company and enhancing the visibility to attract more visitors on their website.
Client
LaNetscouade
UX Audit
UX/UI Design
Art Direction
Roles
BUSINESS NEEDS
Client request
The client's request is to redesign their existing website to effectively showcase the manifesto, expertise, and eco-design values of Netscouade agency.
Project goals
Highlighting the eco-design pratices and updating the website to align with WEB standards.
Promoting inclusive and sustainable values to attract potential customers to the sector.
Showcasing the agency's collective spirit to attract more talented individuals to join the team.
DESIGN PROCESS
We employed the 'Double Diamond' design thinking process to thoroughly uncover problems and challenges. Through brainstorming sessions and iterative development, we crafted effective solutions.
āHOW TO ECO-DESIGN THE NETSCOUADEāS WEBSITE WHILE MAINTAINING THE CREATIVE APPEAL?ā
Problematic and challenges
DISCOVER
Stage 1
UX AUDIT : lanetscouade.com
We conducted a UX Audit on the entire user experience of the website, identifying pain points and aligning them with web standards and eco-design principles.
We conducted a UX Audit on the existing website and conducted competitorās benchmark to identify and address the challenges and issues faced
1.
STUCTURE OF PAGES:
Agency information such as team members, engagements, and partnerships are dispersed across various sections, causing informationās disturbance.
Lack of a methodology section outlining Netscouade's approach to projects and stages, which could serve as a unique selling point and enhance differentiation
2.
PAGE CONTENT:
Absence of clear explanations regarding Netscouadeās services and expertises.
Dividing project sections with details : Context > Expertises > Challenge > Solution > Result
Blog : Primarily features company news instead of a wider range of content
"Join Us" section lacks sufficient value proposition, incorporate additional elements highlighting team, culture, and collective aspects, inspiring by Welcome to The Jungle's approach.
3.
UI elements:
Excessive non-essential visuals present.
Current color palette fails to reflect the eco-friendly values of the agency.
4.
Marketing strategy
Not displaying ecological information regarding to the siteās impact, measurement and environmental footprint.
Absence of customer and brand reviews to showcase the agency's expertise.
The manifesto doesn't sufficiently highlight the reasons behind choosing Netscouade and the significance of its name.
Stage 2
Competitorās benchmark
We implemented also an analysis and comparison of agency competitors within the industry to gain valuable insights and to a deeper understanding of successful patterns and identified scenarios to avoid. This insight guided us in creating a strategy that leveraged the project's strengths, addressed its weaknesses, and mitigated potential threats.
DEFINE
User personaes
From our in-depth research and interview with our client, we built 2 personaes models to match with our project objectifs.
Target 1: Interested in the agency's projects and news, he was keen to to call on the Netscouade in the development of a project
Target 2: Interested in eco-design, he finds out more about the agency before applying for a position that's right for him.
Target 1:
Target 2:
From our UX research and audit, we decided to guide our design approach by these following principles:
Mobile first design : Priotizing on specific needs while accomodating the increasing needs of users on mobile devices
Selecting the essentials : Emphasizing minimalist design to maximize clarity and avoid overwhelming elements that hinder user experience.
Accessibility: Ensuring a transparent and accessible experience tailored to the specific needs of all users.
Low-carbon and optimized website: Reducing file sizes and eliminating unnecessary elements to improve loading speed and optimize resource usage.
Informatif and non illustratif: Providing in priority informations without resorting to unecessary elements.
ENHANCEMENTS INSIGHTS
IDEATIONS
Stage 1
New ARBORESCENCE
After identifying the problems, our initial focus was on enhancing and redesigning the site's structure, or 'arborescence', with the aim of resolving issues and improving the clarity of the information architecture.
New Art Direction
We implemented a new art direction to achieve a minimalist and intuitive design, in alignment with our eco-design objectives for the website.
Stage 2
FINAL SOLUTIONS
UX/UI IMPROVEMENTS
By aligning our key insights findings with eco-design practices, we have developed the following solutions to address the issue
01.
Mobile-first approach
We implemented a new art direction to achieve a minimalist and intuitive design, in alignment with our eco-design objectives for the website.
02.
Pagination instead of the infinite scroll
To minimize the energy consumption and avoid the heavy loading caused by infinite scroll, we have chosen to implement pagination across all pages. This decision aims to make the website lighter and more eco-friendly
Maximize links
To enhance content efficiency and userās accessibility, we incorporated hyperlinks to provide necessary information without cluttering the site.
03.
Suppression of contact page
We removed the contact page and relocated it to the footer, simplifying the process of agency's contact.
04.
Replacing the individuals by global team images
To reduce the page charge of energy consumption,we simplify the member introduction by replacing the global team image while reinforcing the collectif aspect for Lanetsouade.
05.
Avoid superfloue images and priotizing the imformativeness
We provide in priority informations without resorting to unecessary elements and avoiding superfloue image that cause the heavy loading for the site.
06.
07.
SMS Newsletter options
We integrated an SMS newsletter option to minimize the agency's carbon footprint compared to sending newsletters via email. The SMS newsletter will be sent via whatsapp after joining PICKS community.
Summarized articles
To condense the article's text, we chose to summarize it while retaining key terms for SEO effectiveness. Additionally, we included a PDF link for more detailed information, significantly reducing website content loading and improving user accessibility and comprehension.
08.
Symplifying the filter system on blog page
A clear and minimalist filter system enhance a better user experience for searching the articles and blogs on website.
