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