La Petite Affaire Café
Digital Voices for Local Businesses
About the Business
La Petite Affaire is a café in central Louisiana that combines classical French techniques with bold Cajun flavor and locally-sourced ingredients. LPA offers rotating menus, catering, fine-dining Fridays, and is heavily involved in the community, often hosting events.
My Goal
I wanted to go beyond a personal school project by partnering with a local business I believe in. My ultimate goal was to give the business a digital home- increasing accessibility, improving communication, and putting a spotlight on its unique offerings and values.
My Role
I worked with La Petite Affaire Café as a UX Designer and Framer Developer. I was solely responsible for research, design, testing, and development. I also provided some copy and creative consulting.
Timeline
August 2024 -
October 2024
Deliverables
A responsive website with online reservations, blog support, and defined branding
About the Business
La Petite Affaire is a café in central Louisiana that combines classical French techniques with bold Cajun flavor and locally-sourced ingredients. LPA offers rotating menus, catering, fine-dining Fridays, and is heavily involved in the community, often hosting events.
My Goal
I wanted to go beyond a personal school project by partnering with a local business I believe in. My ultimate goal was to give the business a digital home- increasing accessibility, improving communication, and putting a spotlight on its unique offerings and values.
My Role
I worked with La Petite Affaire Café as a UX Designer and Framer Developer. I was solely responsible for research, design, testing, and development. I also provided some copy and creative consulting.
Deliverables
A responsive website with online reservations, blog support, and defined branding
La Petite Affaire Café
La Petite Affaire Café
Digital Voices for Local Businesses
Digital Voices for Local Businesses
Timeline
August 2024 - October 2024
About the Business
La Petite Affaire is a café in central Louisiana that combines classical French techniques with bold Cajun flavor and locally-sourced ingredients. LPA offers rotating menus, catering, fine-dining Fridays, and is heavily involved in the community, often hosting events.
My Goal
I wanted to go beyond a personal school project by partnering with a local business I believe in. My ultimate goal was to give the business a digital home- increasing accessibility, improving communication, and putting a spotlight on its unique offerings and values.
My Role
I worked with La Petite Affaire Café as a UX Designer and Framer Developer. I was solely responsible for research, design, testing, and development. I also provided some copy and creative consulting.
Timeline
August 2024 - October 2024
Deliverables
A responsive website with online reservations, blog support, and defined branding
The Problem
The Problem
The Problem
Initially, the café was reliant on solely a Facebook business page. This is less than ideal for any company, as it reduces customer access, weakens brand messaging, and reduces acquisition of user insights. For LPA specifically, it created multiple pain points: key offerings like catering were hard to find, daily menu updates and event information were often missed, and there were no online reservation options available to customers,
Initially, the café was reliant on solely a Facebook business page. This is less than ideal for any company, as it reduces customer access, weakens brand messaging, and reduces acquisition of user insights. For LPA specifically, it created multiple pain points: key offerings like catering were hard to find, daily menu updates and event information were often missed, and there were no online reservation options available to customers,
Initially, the café was reliant on solely a Facebook business page. This is less than ideal for any company, as it reduces customer access, weakens brand messaging, and reduces acquisition of user insights. For LPA specifically, it created multiple pain points: key offerings like catering were hard to find, daily menu updates and event information were often missed, and there were no online reservation options available to customers,
The Solution
I created a responsive website with clear branding, quality visuals, and easy access to information. A blog feature communicates daily menus and events, while online reservations and catering inquiries improve convenience and engagement. Thoughtful copy communicates the café’s value at a glance.
I created a responsive website with clear branding, quality visuals, and easy access to information. A blog feature communicates daily menus and events, while online reservations and catering inquiries improve convenience and engagement. Thoughtful copy communicates the café’s value at a glance.
I created a responsive website with clear branding, quality visuals, and easy access to information. A blog feature communicates daily menus and events, while online reservations and catering inquiries improve convenience and engagement. Thoughtful copy communicates the café’s value at a glance.
The Solution
The Solution
The Design Process
The Design Process
The Design Process
This final results of this project were crucial to the business and how it connected to its community. I made my design decisions based on long-term compatibility, direct user feedback, and multiple rounds of testing. I incorporated rapid iteration and feedback into my design.
This final results of this project were crucial to the business and how it connected to its community. I made my design decisions based on long-term compatibility, direct user feedback, and multiple rounds of testing. I incorporated rapid iteration and feedback into my design.
This final results of this project were crucial to the business and how it connected to its community. I made my design decisions based on long-term compatibility, direct user feedback, and multiple rounds of testing. I incorporated rapid iteration and feedback into my design.
Research
Market Research and Business Analysis
Market Research and Business Analysis
Market Research and Business Analysis
Utilizing surveys and in-person interviews, I synthesized valuable insights from a pool of 57 participants, prioritizing occasional and new customers to better understand their behavior, as well as the gaps between what consumers want and what the business currently provides. Results reinforced that LPA is serving a demand for local, community-forward business, but the business and customers share common pain points: flow of information, and a desire for online bookings.
Utilizing surveys and in-person interviews, I synthesized valuable insights from a pool of 57 participants, prioritizing occasional and new customers to better understand their behavior, as well as the gaps between what consumers want and what the business currently provides. Results reinforced that LPA is serving a demand for local, community-forward business, but the business and customers share common pain points: flow of information, and a desire for online bookings.
Utilizing surveys and in-person interviews, I synthesized valuable insights from a pool of 57 participants, prioritizing occasional and new customers to better understand their behavior, as well as the gaps between what consumers want and what the business currently provides. Results reinforced that LPA is serving a demand for local, community-forward business, but the business and customers share common pain points: flow of information, and a desire for online bookings.
Design Decision
Communication with a Personal Touch
Communication with a Personal Touch
Communication with a Personal Touch
LPA’s needs differed from most cafés due to its rotating daily menus and involvement in community events. Project parameters required the solution allow a personal touch and easy menu updates from business owners without continued support from designers, or complex backend needs. I decided a blog feature would best support these goals, additionally incorporating a hero carousel component on the home screen to communicate significant announcements with the highest impact.
LPA’s needs differed from most cafés due to its rotating daily menus and involvement in community events. Project parameters required the solution allow a personal touch and easy menu updates from business owners without continued support from designers, or complex backend needs. I decided a blog feature would best support these goals, additionally incorporating a hero carousel component on the home screen to communicate significant announcements with the highest impact.
LPA’s needs differed from most cafés due to its rotating daily menus and involvement in community events. Project parameters required the solution allow a personal touch and easy menu updates from business owners without continued support from designers, or complex backend needs. I decided a blog feature would best support these goals, additionally incorporating a hero carousel component on the home screen to communicate significant announcements with the highest impact.
High Fidelity Prototype [Figma]
Enhancing Community Ties
Community impact is at the art of everything La Petite Affaire does. Promoting local growers was a point of passion for both myself and stakeholders. To showcase these suppliers and drive the “fresh, local” messaging to users, I created the Community Partners page, where users can easily find which farmers LPA works with, and which ingredients they each provide. Beyond adding transparency and building user trust, this will also increase exposure and traffic to other local businesses, bolstering our community.
This image demonstrates a full page example of the finished product, with four partners listed- the final result is continuous scroll.
Community impact is at the art of everything La Petite Affaire does. Promoting local growers was a point of passion for both myself and stakeholders. To showcase these suppliers and drive the “fresh, local” messaging to users, I created the Community Partners page, where users can easily find which farmers LPA works with, and which ingredients they each provide. Beyond adding transparency and building user trust, this will also increase exposure and traffic to other local businesses, bolstering our community.
This image demonstrates a full page example of the finished product, with four partners listed- the final result is continuous scroll.
Framer Export - [Nearly] Finished Product
Framer Export - [Nearly] Finished Product
Enhancing Community Ties
Community impact is at the art of everything La Petite Affaire does. Promoting local growers was a point of passion for both myself and stakeholders. To showcase these suppliers and drive the “fresh, local” messaging to users, I created the Community Partners page, where users can easily find which farmers LPA works with, and which ingredients they each provide. Beyond adding transparency and building user trust, this will also increase exposure and traffic to other local businesses, bolstering our community.
This image demonstrates a full page example of the finished product, with four partners listed- the final result is continuous scroll.
Creating Engagement Opportunities
Creating Engagement Opportunities
Creating Engagement Opportunities
Increasing Conversion and Engagement Opportunities
Increasing Conversion and Engagement Opportunities
Increasing Conversion and Engagement Opportunities
I implemented email submission forms for online reservations and catering inquiries, allowing the business to capture customer emails and drive engagement where none existed before. Additionally, I set up an email CMS to send automated reminders, event updates, and blog notifications, fostering ongoing customer interaction and loyalty. This transforms the business's relationship with its customers into a more dynamic and connected experience. I achieved this by researching business and developer solutions that worked within Framer and within the business’s budget, ultimately landing on a combination of plugins and widgets for the ideal solution.
I implemented email submission forms for online reservations and catering inquiries, allowing the business to capture customer emails and drive engagement where none existed before. Additionally, I set up an email CMS to send automated reminders, event updates, and blog notifications, fostering ongoing customer interaction and loyalty. This transforms the business's relationship with its customers into a more dynamic and connected experience. I achieved this by researching business and developer solutions that worked within Framer and within the business’s budget, ultimately landing on a combination of plugins and widgets for the ideal solution.
I implemented email submission forms for online reservations and catering inquiries, allowing the business to capture customer emails and drive engagement where none existed before. Additionally, I set up an email CMS to send automated reminders, event updates, and blog notifications, fostering ongoing customer interaction and loyalty. This transforms the business's relationship with its customers into a more dynamic and connected experience. I achieved this by researching business and developer solutions that worked within Framer and within the business’s budget, ultimately landing on a combination of plugins and widgets for the ideal solution.
GIF of simple reservation process
Design Iteration
Design Iteration
Design Iteration
Simplifying the User Journey
Simplifying the User Journey
Simplifying the User Journey
While the initial usability study was favorable with a SUS score of 96%, there were a couple of opportunities for improvement. High-use customers indicated a desire for front page access to frequent tasks, which I incorporated by adding buttons to the home carousel slide, as well as adjusting the navigation to include a drop-down menu for added convenience. I also edited the copy for increased clarity based on observed user behavior.
While the initial usability study was favorable with a SUS score of 96%, there were a couple of opportunities for improvement. High-use customers indicated a desire for front page access to frequent tasks, which I incorporated by adding buttons to the home carousel slide, as well as adjusting the navigation to include a drop-down menu for added convenience. I also edited the copy for increased clarity based on observed user behavior.
While the initial usability study was favorable with a SUS score of 96%, there were a couple of opportunities for improvement. High-use customers indicated a desire for front page access to frequent tasks, which I incorporated by adding buttons to the home carousel slide, as well as adjusting the navigation to include a drop-down menu for added convenience. I also edited the copy for increased clarity based on observed user behavior.
Before usability study
After usability study
Before usability study
After usability study
Adaptation and Development
Adaptation and Development
Adaptation and Development
Adaptive Design and Development with Framer
Adaptive Design and Development with Framer
Adaptive Design and Development with Framer
The project budget did not allow for a development team to build the final design. After consulting with stakeholders, I decided to design with Framer in mind, utilizing the user-friendly platform to build out CMS features such as the blog and e-mai forms, and adapting my design to suit a variety of screen sizes. Learning this platform enabled me to stay with the client from conception to execution, and provide a finished product.
The project budget did not allow for a development team to build the final design. After consulting with stakeholders, I decided to design with Framer in mind, utilizing the user-friendly platform to build out CMS features such as the blog and e-mai forms, and adapting my design to suit a variety of screen sizes. Learning this platform enabled me to stay with the client from conception to execution, and provide a finished product.
The project budget did not allow for a development team to build the final design. After consulting with stakeholders, I decided to design with Framer in mind, utilizing the user-friendly platform to build out CMS features such as the blog and e-mai forms, and adapting my design to suit a variety of screen sizes. Learning this platform enabled me to stay with the client from conception to execution, and provide a finished product.
A Framer screenshot of home screen variations
A Framer screenshot of home screen variations
A Framer screenshot of home screen variations
Conclusion
Next Steps
This project is complete and pending final materials (photography, copy, vendor info) from stakeholders for launch. Following the publishing, I will initiate a broader customer survey for feedback on the site, and monitor a few KPIs: conversion rates for dinner reservations and catering inquiries, page load time, and traffic sources.
This project is complete and pending final materials (photography, copy, vendor info) from stakeholders for launch. Following the publishing, I will initiate a broader customer survey for feedback on the site, and monitor a few KPIs: conversion rates for dinner reservations and catering inquiries, page load time, and traffic sources.
Takeaways
Driving community with design
Above all else, the most valuable part of this experience was learning in real time the sort of impact my designs can have on a small business. It was incredible gratifying to work with such impactful members of my community and build something to drive their vision forward, and it afforded me the opportunity to practice designing with multiple stakeholders in mind.
When to tweak it, and when to scrap it
In acting as a graphic designer and my excitement to learn Canva, I spent too much time trying to make another, more complex version of the first carousel card, one which simply did not compress suitably to mobile size. I am committed to improving my “make it work” mindset to include “making it work” by making a completely different option! The new card has a much stronger visual impact and afforded a better messaging opportunity that strongly improved the overall personality of the page.
Know your limits- but push them when you can
As this was a volunteer service and my current coding knowledge is basic, I dreaded leaving the business with a design and the need to find (and pay) a developer. After researching various options, we landed on Framer, affording me the opportunity to offer the business a fully launched site while working within the parameters of my developer experience. The clients were grateful I was both transparent about my limitations, and so dedicated to find a workaround. This was a very rewarding experience, and is allowing me to practice satellite skill sets to become a more well-rounded designer.
Driving community with design
Driving community with design
Above all else, the most valuable part of this experience was learning in real time the sort of impact my designs can have on a small business. It was incredible gratifying to work with such impactful members of my community and build something to drive their vision forward, and it afforded me the opportunity to practice designing with multiple stakeholders in mind.
Above all else, the most valuable part of this experience was learning in real time the sort of impact my designs can have on a small business. It was incredible gratifying to work with such impactful members of my community and build something to drive their vision forward, and it afforded me the opportunity to practice designing with multiple stakeholders in mind.
When to tweak it, and when to scrap it
When to tweak it, and when to scrap it
In acting as a graphic designer and my excitement to learn Canva, I spent too much time trying to make another, more complex version of the first carousel card, one which simply did not compress suitably to mobile size. I am committed to improving my “make it work” mindset to include “making it work” by making a completely different option! The new card has a much stronger visual impact and afforded a better messaging opportunity that strongly improved the overall personality of the page.
In acting as a graphic designer and my excitement to learn Canva, I spent too much time trying to make another, more complex version of the first carousel card, one which simply did not compress suitably to mobile size. I am committed to improving my “make it work” mindset to include “making it work” by making a completely different option! The new card has a much stronger visual impact and afforded a better messaging opportunity that strongly improved the overall personality of the page.
Know your limits- but push them when you can
Know your limits- but push them when you can
As this was a volunteer service and my current coding knowledge is basic, I dreaded leaving the business with a design and the need to find (and pay) a developer. After researching various options, we landed on Framer, affording me the opportunity to offer the business a fully launched site while working within the parameters of my developer experience. The clients were grateful I was both transparent about my limitations, and so dedicated to find a workaround. This was a very rewarding experience, and is allowing me to practice satellite skill sets to become a more well-rounded designer.
As this was a volunteer service and my current coding knowledge is basic, I dreaded leaving the business with a design and the need to find (and pay) a developer. After researching various options, we landed on Framer, affording me the opportunity to offer the business a fully launched site while working within the parameters of my developer experience. The clients were grateful I was both transparent about my limitations, and so dedicated to find a workaround. This was a very rewarding experience, and is allowing me to practice satellite skill sets to become a more well-rounded designer.
Takeaways
Takeaways
Takeaways
Impact
“It’s like you saw our vision and pulled it straight out of my head. This is exactly what we wanted; you really got the business. I can’t wait to put it up.”
Roy Guilbeau, Business Owner
“It’s like you saw our vision and pulled it straight out of my head. This is exactly what we wanted; you really got the business. I can’t wait to put it up.”
Roy Guilbeau, Business Owner
“It’s like you saw our vision and pulled it straight out of my head. This is exactly what we wanted; you really got the business. I can’t wait to put it up.”
Roy Guilbeau, Business Owner
“It looks like a great little place. I definitely want to go [to the business] after browsing this site. The food looks amazing, and the messaging really pushes that fresh, local aspect.
Study participant,
potential customer
“It looks like a great little place. I definitely want to go [to the business] after browsing this site. The food looks amazing, and the messaging really pushes that fresh, local aspect.
Study participant,
potential customer
“It looks like a great little place. I definitely want to go [to the business] after browsing this site. The food looks amazing, and the messaging really pushes that fresh, local aspect.
Study participant,
café regular
“It looks like a great little place. I definitely want to go [to the business] after browsing this site. The food looks amazing, and the messaging really pushes that fresh, local aspect.
Study participant,
café regular
“It looks like a great little place. I definitely want to go [to the business] after browsing this site. The food looks amazing, and the messaging really pushes that fresh, local aspect.
Study participant,
café regular
“It looks like a great little place. I definitely want to go [to the business] after browsing this site. The food looks amazing, and the messaging really pushes that fresh, local aspect.
Study participant,
potential customer
This project
Thanks for stopping by!
Thanks for stopping by!
Thanks for stopping by!
Ready to fill your cup?
Reach out at:
destiny.jackson.ux@gmail.com
Thanks for stopping by!
Ready to fill your cup? Reach out at:
destiny.jackson.ux@gmail.com
Ready to fill your cup? Reach out at:
destiny.jackson.ux@gmail.com