Work Collection
Nantes Métropole Dans Ma Poche
Nantes Métropole Dans Ma Poche
Nantes Métropole Dans Ma Poche
Role
Role
UI/UX Designer – Research, design iterations, and prototyping for the final mockups.
UI/UX Designer – Research, design iterations, and prototyping for the final mockups.
Team
Team
Worked in a team of 4 UX designers in collaboration with Nantes Métropole representatives.
Worked in a team of 4 UX designers in collaboration with Nantes Métropole representatives.
Tools
Tools
Figma, Adobe illustrator, Notion, Mirro, User testing via maze and face to face interviews
Figma, Adobe illustrator, Notion, Mirro, User testing via maze and face to face interviews
Overview
Overview
How can we redefine the app’s experience to better serve students, seniors, and metropolitan users while making city services more accessible, sustainable, and user-friendly?
How can we redefine the app’s experience to better serve students, seniors, and metropolitan users while making city services more accessible, sustainable, and user-friendly?
The Nantes Métropole Dans Ma Poche app connects users to essential city services but lacked engagement from students. Our mission was to audit the app, enhance usability, and introduce new features tailored to younger users. Through user research and iterative design, we restructured the app to improve navigation, accessibility, and relevance, ensuring a more intuitive and engaging experience for students.
The Nantes Métropole Dans Ma Poche app connects users to essential city services but lacked engagement from students. Our mission was to audit the app, enhance usability, and introduce new features tailored to younger users. Through user research and iterative design, we restructured the app to improve navigation, accessibility, and relevance, ensuring a more intuitive and engaging experience for students.
The Nantes Métropole Dans Ma Poche app connects users to essential city services but lacked engagement from students. Our mission was to audit the app, enhance usability, and introduce new features tailored to younger users. Through user research and iterative design, we restructured the app to improve navigation, accessibility, and relevance, ensuring a more intuitive and engaging experience for students.
Background
Background
Before diving into user research and ideation, we conducted an in-depth audit of the existing application.
Before diving into user research and ideation, we conducted an in-depth audit of the existing application.
The audit focused on three key areas:
Evaluating the app’s visual design, readability, contrast, and alignment with accessibility standards.
Identifying pain points, key user flows, and overall intuitiveness to ensure a smoother interaction.
Assessing the environmental impact of technical and graphical choices, in line with eco-design best practices.
In addition, we conducted a user questionnaire to gather quantitative insights on app usage, awareness of available services, and student needs. This helped us pinpoint gaps in engagement and usability.
To complement this analysis, we also researched digital service apps across different sectors to benchmark navigation, personalization, and search experiences. This competitive research helped shape our design approach, ensuring that the new version of the app would be more intuitive, student-friendly, and environmentally conscious.
The audit focused on three key areas:
Evaluating the app’s visual design, readability, contrast, and alignment with accessibility standards.
Identifying pain points, key user flows, and overall intuitiveness to ensure a smoother interaction.
Assessing the environmental impact of technical and graphical choices, in line with eco-design best practices.
In addition, we conducted a user questionnaire to gather quantitative insights on app usage, awareness of available services, and student needs. This helped us pinpoint gaps in engagement and usability.
To complement this analysis, we also researched digital service apps across different sectors to benchmark navigation, personalization, and search experiences. This competitive research helped shape our design approach, ensuring that the new version of the app would be more intuitive, student-friendly, and environmentally conscious.
The audit focused on three key areas:
Evaluating the app’s visual design, readability, contrast, and alignment with accessibility standards.
Identifying pain points, key user flows, and overall intuitiveness to ensure a smoother interaction.
Assessing the environmental impact of technical and graphical choices, in line with eco-design best practices.
In addition, we conducted a user questionnaire to gather quantitative insights on app usage, awareness of available services, and student needs. This helped us pinpoint gaps in engagement and usability.
To complement this analysis, we also researched digital service apps across different sectors to benchmark navigation, personalization, and search experiences. This competitive research helped shape our design approach, ensuring that the new version of the app would be more intuitive, student-friendly, and environmentally conscious.
Problem
Problem
Low student engagement – The app lacked student-friendly features and incentives to use it.
Complex navigation & cluttered UI – Users found it difficult to access key services efficiently.
Limited accessibility – No personalization options or onboarding experience.
Low student engagement – The app lacked student-friendly features and incentives to use it.
Complex navigation & cluttered UI – Users found it difficult to access key services efficiently.
Limited accessibility – No personalization options or onboarding experience.
Low student engagement – The app lacked student-friendly features and incentives to use it.
Complex navigation & cluttered UI – Users found it difficult to access key services efficiently.
Limited accessibility – No personalization options or onboarding experience.
Solution
Solution
Solution
Introduced a dedicated section for student discounts, promotions, and services, accessible through an interactive map.
Implemented a grouping system allowing users to customize their homepage for quick access to frequently used services.
Developed a light mode and added an interactive tutorial to onboard new users.
Introduced a health & nature-focused feature, suggesting city walks and outdoor activities.
Introduced a dedicated section for student discounts, promotions, and services, accessible through an interactive map.
Implemented a grouping system allowing users to customize their homepage for quick access to frequently used services.
Developed a light mode and added an interactive tutorial to onboard new users.
Introduced a health & nature-focused feature, suggesting city walks and outdoor activities.
Introduced a dedicated section for student discounts, promotions, and services, accessible through an interactive map.
Implemented a grouping system allowing users to customize their homepage for quick access to frequently used services.
Developed a light mode and added an interactive tutorial to onboard new users.
Introduced a health & nature-focused feature, suggesting city walks and outdoor activities.
Design Process
Design Process
To ensure a user-centered redesign, we created personas based on our research, highlighting student needs, frustrations, and expectations. Then mapped user journeys to analyze their interactions with the app, identifying pain points and opportunities for improvement.
To ensure a user-centered redesign, we created personas based on our research, highlighting student needs, frustrations, and expectations. Then mapped user journeys to analyze their interactions with the app, identifying pain points and opportunities for improvement.
To ensure a user-centered redesign, we created personas based on our research, highlighting student needs, frustrations, and expectations. Then mapped user journeys to analyze their interactions with the app, identifying pain points and opportunities for improvement.
User journey
User journey
User journey
To better understand user pain points, we created a user journey map based on interviews and observations of typical user behavior. These insights helped us identify moments of friction and directly informed our redesign priorities.
To better understand user pain points, we created a user journey map based on interviews and observations of typical user behavior. These insights helped us identify moments of friction and directly informed our redesign priorities.
To better understand user pain points, we created a user journey map based on interviews and observations of typical user behavior. These insights helped us identify moments of friction and directly informed our redesign priorities.
Wireframing
Wireframing
Wireframing
Based on our user research and audit findings, we restructured the app’s information architecture to improve navigation and accessibility. We started with low-fidelity wireframes, exploring different layouts and testing them to ensure a clearer hierarchy and smoother user flows.
Based on our user research and audit findings, we restructured the app’s information architecture to improve navigation and accessibility. We started with low-fidelity wireframes, exploring different layouts and testing them to ensure a clearer hierarchy and smoother user flows.
Based on our user research and audit findings, we restructured the app’s information architecture to improve navigation and accessibility. We started with low-fidelity wireframes, exploring different layouts and testing them to ensure a clearer hierarchy and smoother user flows.
Usability Testing
Usability Testing
Usability Testing
Quantitative Testing with Maze: We used Maze, a robust remote user testing platform, to conduct rapid click tests and A/B testing on our prototypes. This allowed us to collect measurable heatmaps, success rates, and time-on-task data to validate navigation improvements.
Key insights from research:
Home screen clutter: Too much text made it hard to find relevant services.
Navigation confusion: Users struggled to find city services like waste collection schedules.
Event section underused: Users preferred external platforms for local events.
Quantitative Testing with Maze: We used Maze, a robust remote user testing platform, to conduct rapid click tests and A/B testing on our prototypes. This allowed us to collect measurable heatmaps, success rates, and time-on-task data to validate navigation improvements.
Key insights from research:
Home screen clutter: Too much text made it hard to find relevant services.
Navigation confusion: Users struggled to find city services like waste collection schedules.
Event section underused: Users preferred external platforms for local events.
Quantitative Testing with Maze: We used Maze, a robust remote user testing platform, to conduct rapid click tests and A/B testing on our prototypes. This allowed us to collect measurable heatmaps, success rates, and time-on-task data to validate navigation improvements.
Grouping services
Grouping services
Creating a grouping system in order to obtain better organisation within the application. Our design aimed to provide an easy to look at home screen.
Creating a grouping system in order to obtain better organisation within the application. Our design aimed to provide an easy to look at home screen.
Accessibility
Accessibility
Creating a tutorial for the application in order to provide an overview of all existing and new functions. We also worked on the accessibility of the application by creating a light mode and by cathegorising the services.
Creating a tutorial for the application in order to provide an overview of all existing and new functions. We also worked on the accessibility of the application by creating a light mode and by cathegorising the services.
Student plans
Student plans
Creating a `student plans` service including 5 cathegories that we decided after our initial research and user tests. Creating individual pages for each cathegorie with a possibility of viewing directly on the map.
Creating a `student plans` service including 5 cathegories that we decided after our initial research and user tests. Creating individual pages for each cathegorie with a possibility of viewing directly on the map.
Grouping services
Creating a grouping system in order to obtain better organisation within the application. Our design aimed to provide an easy to look at home screen.
Accessibility
Creating a tutorial for the application in order to provide an overview of all existing and new functions. We also worked on the accessibility of the application by creating a light mode and by cathegorising the services.
Student plans
Creating a `student plans` service including 5 cathegories that we decided after our initial research and user tests. Creating individual pages for each cathegorie with a possibility of viewing directly on the map.
UI KIT
UI KIT
Impact & Results
Our redesign was adopted by Nantes Métropole and integrated into their official app update, improving the experience for over 100,000 users. The project gained recognition as a best-practice example in service design within our school and is now used as a reference project to showcase the Design de Service curriculum. This impact highlights the value of user-centered design in enhancing public digital services.
Related Post: https://rb.gy/3upe25
Impact & Results
Our redesign was adopted by Nantes Métropole and integrated into their official app update, improving the experience for over 100,000 users. The project gained recognition as a best-practice example in service design within our school and is now used as a reference project to showcase the Design de Service curriculum. This impact highlights the value of user-centered design in enhancing public digital services.
Our redesign was adopted by Nantes Métropole and integrated into their official app update, improving the experience for over 100,000 users. The project gained recognition as a best-practice example in service design within our school and is now used as a reference project to showcase the Design de Service curriculum. This impact highlights the value of user-centered design in enhancing public digital services.
Related Post: https://rb.gy/3upe25
Related Post: https://rb.gy/3upe25
Next Case Study
Arkéa connected
Arkéa connected