FNAC-DARTY
In this project, our challenge was to enhance FNAC's Click & Collect experience within the payment funnel and refine the design of their store pages. Addressing both business ambition to increase web orders via Click & Collect to over 50% and users' need for easy access to relevant information, our deliverables included a mobile-first prototype, a detailed research report, and a suite of innovative, bold design solutions intended to elevate the user experience and support FNAC's strategic objectives.
FNAC-DARTY
In this project, our challenge was to enhance FNAC's Click & Collect experience within the payment funnel and refine the design of their store pages. Addressing both business ambition to increase web orders via Click & Collect to over 50% and users' need for easy access to relevant information, our deliverables included a mobile-first prototype, a detailed research report, and a suite of innovative, bold design solutions intended to elevate the user experience and support FNAC's strategic objectives.
FNAC-DARTY
In this project, our challenge was to enhance FNAC's Click & Collect experience within the payment funnel and refine the design of their store pages. Addressing both business ambition to increase web orders via Click & Collect to over 50% and users' need for easy access to relevant information, our deliverables included a mobile-first prototype, a detailed research report, and a suite of innovative, bold design solutions intended to elevate the user experience and support FNAC's strategic objectives.
Project
Web redesign
Team
Joana Silva, Melanie Dick
Role
UX/UI Designer
Year
2024
Timeframe
15 days
1
Problem
1
Problem
1
Problem
Streamlining Click & Collect for business impact and a better user experience
FNAC aimed to enhance the attractiveness of the Click & Collect service within the payment funnel on the FNAC website and to refine the design of their store pages.
Concurrently, users needed a more straightforward way to access relevant Click & Collect information and select the most suitable store, without feeling overwhelmed by the process.
Streamlining Click & Collect for business impact and a better user experience
FNAC aimed to enhance the attractiveness of the Click & Collect service within the payment funnel on the FNAC website and to refine the design of their store pages.
Concurrently, users needed a more straightforward way to access relevant Click & Collect information and select the most suitable store, without feeling overwhelmed by the process.
Streamlining Click & Collect for business impact and a better user experience
FNAC aimed to enhance the attractiveness of the Click & Collect service within the payment funnel on the FNAC website and to refine the design of their store pages.
Concurrently, users needed a more straightforward way to access relevant Click & Collect information and select the most suitable store, without feeling overwhelmed by the process.
2
Goals
2
Goals
2
Goals
Bold ideas, innovation and a mobile first strategy
FNAC aimed to elevate its Click & Collect service, targeting over 50% of web orders through this channel.
The project mandate was clear : to prioritize a mobile-first design approach for a prototype that simplifies the process of selecting a FNAC store for order pickup.
Bold ideas, innovation and a mobile first strategy
FNAC aimed to elevate its Click & Collect service, targeting over 50% of web orders through this channel.
The project mandate was clear : to prioritize a mobile-first design approach for a prototype that simplifies the process of selecting a FNAC store for order pickup.
Bold ideas, innovation and a mobile first strategy
FNAC aimed to elevate its Click & Collect service, targeting over 50% of web orders through this channel.
The project mandate was clear : to prioritize a mobile-first design approach for a prototype that simplifies the process of selecting a FNAC store for order pickup.
3
Solution
Streamlined store selection and enhanced information accessibility
After extensive research and testing, we implemented a 'Continue as a guest' option to streamline the process. The product page underwent a redesign for clearer information presentation, improving layout and making Click & Collect details more attractive and accessible. We added a selector banner for delivery methods, enhancing visibility and clarity, and provided detailed instructions on the Click & Collect process. A significant breakthrough was the development of a travel time calculation feature, automatically locating users, suggesting the nearest store, and providing estimated travel times for walking, biking, public transport, and car. This, along with the redesign of visuals for the store list search, facilities filters, precise delivery times, and a virtual store visit option, comprehensively improved the ease and attractiveness of choosing Click & Collect.
3
Solution
Streamlined store selection and enhanced information accessibility
After extensive research and testing, we implemented a 'Continue as a guest' option to streamline the process. The product page underwent a redesign for clearer information presentation, improving layout and making Click & Collect details more attractive and accessible. We added a selector banner for delivery methods, enhancing visibility and clarity, and provided detailed instructions on the Click & Collect process. A significant breakthrough was the development of a travel time calculation feature, automatically locating users, suggesting the nearest store, and providing estimated travel times for walking, biking, public transport, and car. This, along with the redesign of visuals for the store list search, facilities filters, precise delivery times, and a virtual store visit option, comprehensively improved the ease and attractiveness of choosing Click & Collect.
3
Solution
Streamlined store selection and enhanced information accessibility
After extensive research and testing, we implemented a 'Continue as a guest' option to streamline the process. The product page underwent a redesign for clearer information presentation, improving layout and making Click & Collect details more attractive and accessible. We added a selector banner for delivery methods, enhancing visibility and clarity, and provided detailed instructions on the Click & Collect process. A significant breakthrough was the development of a travel time calculation feature, automatically locating users, suggesting the nearest store, and providing estimated travel times for walking, biking, public transport, and car. This, along with the redesign of visuals for the store list search, facilities filters, precise delivery times, and a virtual store visit option, comprehensively improved the ease and attractiveness of choosing Click & Collect.
4
Research methodology
To gain a comprehensive understanding, we employed a mixed-methods research approach:
Surveys to quantify user motivations and barriers.
In-depth Interviews to explore user preferences and experiences in detail.
Task User Testing to identify usability issues and user pain points.
Desirability Testing to evaluate visual appeal and information layout.
4
Research methodology
To gain a comprehensive understanding, we employed a mixed-methods research approach:
Surveys to quantify user motivations and barriers.
In-depth Interviews to explore user preferences and experiences in detail.
Task User Testing to identify usability issues and user pain points.
Desirability Testing to evaluate visual appeal and information layout.
4
Research methodology
To gain a comprehensive understanding, we employed a mixed-methods research approach:
Surveys to quantify user motivations and barriers.
In-depth Interviews to explore user preferences and experiences in detail.
Task User Testing to identify usability issues and user pain points.
Desirability Testing to evaluate visual appeal and information layout.
5
Key findings
Insights into Fnac's Click & Collect : cost savings, accessibility and user frustrations
5
Key findings
Insights into Fnac's Click & Collect : cost savings, accessibility and user frustrations
5
Key findings
Insights into Fnac's Click & Collect : cost savings, accessibility and user frustrations
User motivations : Cost and convenience
User motivations : Cost and convenience
User motivations : Cost and convenience
Store selection criteria
Store selection criteria
Store selection criteria
User experience insights
User experience insights
User experience insights
Users expressed frustration with mandatory sign-ins disrupting the flow.
User 1
"It is definitely a negative point that you MUST sign in and create an account just to be able to see or choose the different delivery options."
Information overload led to overlooked features, highlighting a need for streamlined content.
User 2
"What was missing ? Showing the location of each store in map instead of having just a list of adresses."
Users expressed frustration with mandatory sign-ins disrupting the flow.
User 1
"It is definitely a negative point that you MUST sign in and create an account just to be able to see or choose the different delivery options."
Information overload led to overlooked features, highlighting a need for streamlined content.
User 2
"What was missing ? Showing the location of each store in map instead of having just a list of adresses."
Users expressed frustration with mandatory sign-ins disrupting the flow.
User 1
"It is definitely a negative point that you MUST sign in and create an account just to be able to see or choose the different delivery options."
Information overload led to overlooked features, highlighting a need for streamlined content.
User 2
"What was missing ? Showing the location of each store in map instead of having just a list of adresses."
Desirability concerns
Desirability concerns
Desirability concerns
50% of users used the word “overwehlming” and 29% the word “boring” to describe the look of the current store page.
The Call-To-Action (CTA) button was non-functional and the icons used on the page were not intuitive, making them difficult to understand.
6
Insights to action
Based on these insights, we recommended several design interventions:
1. Streamline the Sign-in Process: Offer alternatives to mandatory sign-ins to maintain user flow.
2. Enhance accessibility information: Clearly display store accessibility features, including parking and public transport options.
3. Improve visual engagement: Incorporate vibrant, user-friendly visuals and intuitive layouts to enhance the overall appeal and usability of the Click and Collect service.
4. Personalized store recommendations: Utilize geo-location to suggest the nearest stores, tailored to user preferences for convenience.
6
Insights to action
Based on these insights, we recommended several design interventions:
1. Streamline the Sign-in Process: Offer alternatives to mandatory sign-ins to maintain user flow.
2. Enhance accessibility information: Clearly display store accessibility features, including parking and public transport options.
3. Improve visual engagement: Incorporate vibrant, user-friendly visuals and intuitive layouts to enhance the overall appeal and usability of the Click and Collect service.
4. Personalized store recommendations: Utilize geo-location to suggest the nearest stores, tailored to user preferences for convenience.
6
Insights to action
Based on these insights, we recommended several design interventions:
1. Streamline the Sign-in Process: Offer alternatives to mandatory sign-ins to maintain user flow.
2. Enhance accessibility information: Clearly display store accessibility features, including parking and public transport options.
3. Improve visual engagement: Incorporate vibrant, user-friendly visuals and intuitive layouts to enhance the overall appeal and usability of the Click and Collect service.
4. Personalized store recommendations: Utilize geo-location to suggest the nearest stores, tailored to user preferences for convenience.
7
Final result
Main solutions to improve the Click & Collect experience
7
Final result
Main solutions to improve the Click & Collect experience
7
Final result
Main solutions to improve the Click & Collect experience
Product page information layout
To better meet user needs for clarity and FNAC’s desire to promote Click & Collect, we reorganized the product page. User feedback during mid-fi testing confirmed that these adjustments enhanced the appeal and understanding of the Click & Collect option.
Product page information layout
To better meet user needs for clarity and FNAC’s desire to promote Click & Collect, we reorganized the product page. User feedback during mid-fi testing confirmed that these adjustments enhanced the appeal and understanding of the Click & Collect option.
Product page information layout
To better meet user needs for clarity and FNAC’s desire to promote Click & Collect, we reorganized the product page. User feedback during mid-fi testing confirmed that these adjustments enhanced the appeal and understanding of the Click & Collect option.
Delivery method page
Originally combined, the delivery and payment method options were separated into two distinct pages to simplify user decisions and reduce information overload. Tabs were introduced to navigate between delivery options, with Click & Collect set as the default choice.
A pivotal addition was the travel time calculation feature, which automatically locates users, selects the nearest store, and displays travel times for various transportation modes.
Delivery method page
Originally combined, the delivery and payment method options were separated into two distinct pages to simplify user decisions and reduce information overload. Tabs were introduced to navigate between delivery options, with Click & Collect set as the default choice.
A pivotal addition was the travel time calculation feature, which automatically locates users, selects the nearest store, and displays travel times for various transportation modes.
Delivery method page
Originally combined, the delivery and payment method options were separated into two distinct pages to simplify user decisions and reduce information overload. Tabs were introduced to navigate between delivery options, with Click & Collect set as the default choice.
A pivotal addition was the travel time calculation feature, which automatically locates users, selects the nearest store, and displays travel times for various transportation modes.
Store selection ehancements
We enhanced the store selection interface with engaging visuals and a more user-friendly layout. Based on user feedback, we added a prominent map view button and resolved previous issues with map navigation. Users can now easily mark a store as a favorite, enhancing the personalization of their shopping experience.
Store selection ehancements
We enhanced the store selection interface with engaging visuals and a more user-friendly layout. Based on user feedback, we added a prominent map view button and resolved previous issues with map navigation. Users can now easily mark a store as a favorite, enhancing the personalization of their shopping experience.
Store selection ehancements
We enhanced the store selection interface with engaging visuals and a more user-friendly layout. Based on user feedback, we added a prominent map view button and resolved previous issues with map navigation. Users can now easily mark a store as a favorite, enhancing the personalization of their shopping experience.
Facilities and services filters
Reflecting our research insights we introduced a filter system allowing users to personalize their store choice.
Facilities and services filters
Reflecting our research insights we introduced a filter system allowing users to personalize their store choice.
Facilities and services filters
Reflecting our research insights we introduced a filter system allowing users to personalize their store choice.
Revamped Store page
Revamped Store page
Revamped Store page
8
Key learnings
After a busy 15-day sprint, our team presented a Minimum Viable Product (MVP), to FNAC's stakeholders. This MVP, developed quickly to show our basic ideas, still needs more work and testing to fully meet the needs of both users and the business. FNAC will now review our work to decide which parts to improve and expand on.
We faced several challenges, especially in keeping our focus on the payment process while considering different products that might have unique rules. Also, working with an international group brought challenges related to different laws in each country, which affected what information we had to show to customers.
Despite these challenges, the project was a great learning opportunity. The ongoing changes to the website taught us how to quickly adapt to new situations.
I'm very thankful for the chance to have work on this project with FNAC-DARTY. Special thanks to Valentin Faget, the UX Designer at FNAC DARTY, for guiding us through this project. Also, a big thank you to my teammates, Joanna Silva and Melanie Dick, for their hard work and dedication.
8
Key learnings
After a busy 15-day sprint, our team presented a Minimum Viable Product (MVP), to FNAC's stakeholders. This MVP, developed quickly to show our basic ideas, still needs more work and testing to fully meet the needs of both users and the business. FNAC will now review our work to decide which parts to improve and expand on.
We faced several challenges, especially in keeping our focus on the payment process while considering different products that might have unique rules. Also, working with an international group brought challenges related to different laws in each country, which affected what information we had to show to customers.
Despite these challenges, the project was a great learning opportunity. The ongoing changes to the website taught us how to quickly adapt to new situations.
I'm very thankful for the chance to have work on this project with FNAC-DARTY. Special thanks to Valentin Faget, the UX Designer at FNAC DARTY, for guiding us through this project. Also, a big thank you to my teammates, Joanna Silva and Melanie Dick, for their hard work and dedication.
8
Key learnings
After a busy 15-day sprint, our team presented a Minimum Viable Product (MVP), to FNAC's stakeholders. This MVP, developed quickly to show our basic ideas, still needs more work and testing to fully meet the needs of both users and the business. FNAC will now review our work to decide which parts to improve and expand on.
We faced several challenges, especially in keeping our focus on the payment process while considering different products that might have unique rules. Also, working with an international group brought challenges related to different laws in each country, which affected what information we had to show to customers.
Despite these challenges, the project was a great learning opportunity. The ongoing changes to the website taught us how to quickly adapt to new situations.
I'm very thankful for the chance to have work on this project with FNAC-DARTY. Special thanks to Valentin Faget, the UX Designer at FNAC DARTY, for guiding us through this project. Also, a big thank you to my teammates, Joanna Silva and Melanie Dick, for their hard work and dedication.