Designing a cross-channel experience for a new and unique food court.
The “Cité Internationale de la Gastronomie et du Vin de Dijon” has opened in May 2022 and welcomed more than 500,000 visitors since then. Although the number may seem impressive, it is under initial expectations. Many reasons have been mentioned, one in particular: people have changed their habits and routines since Covid and they are still in the process of resuming their previous activities such as going to restaurants, to the movies and more generally speaking to public events.
The “Village Gastronomique”, which is the biggest part of the “Cité”, is home to stores, restaurants, and places of experience where Gastronomy is King. The management of the Village discovered soon enough that people expected that in a place called the City of the Gastronomy they could eat everywhere, every time of the day, and many different sorts of food. Therefore, it was decided to change the value proposal and add to it a “food-court” experience. Several months after this pivot, their website had to be redesigned to align with this new service and anticipate the arrival of a new click-and-collect service.
This is precisely when Sonia and I came in…
The Challenge
The Village asked both of us to redesign their desktop home page and include a click-and-collect experience for people living in Dijon. We worked as a team of two UX/UI designers and had 2 weeks to overcome this challenge.
The Brief
Our initial discussion with the stakeholder, Lauriane, the Brand Director of the Village, was very instructive. We quickly understood that the Village’s concept was misunderstood. Consequently, people thought that it is a place for tourists, hence the high prices. We immediately knew we had to investigate and understand what could be the real frustrations behind those observations.
Our approach
This was a perfect opportunity to follow the design thinking process by the book and help the Village improve the current situation.
Our Strategy
We collected a lot of insights during our kick-off meeting with our stakeholder. This is where we started from :
Our initial data
- Certainties: the actual offer is misunderstood thus considered expensive. Although gastronomy is supposed to be convivial, it is perceived as elitist ;
- Hypothesis: people living in Dijon consider the Cité as a whole and make no difference between the Cité and the Village (managed as two separate entities) ; having two distinct websites is confusing ; the click-and-collect service is something expected and wanted by people ;
- Doubts : people understand that the Village is now a Food Court ; people view the Village as a place to do their daily shopping ; people easily access and understand the Village’s program.
A good UX requires a good strategy. To define our action plan, we first defined our UX strategy:
- Challenges: overcome the preconception about the Village, help visitors better understand the concept, provide clear information about the program ;
- Aspirations: generate more visits on site and increase the conversion rate to event registration ;
- Focus area: have an engaging home page, simple and clear, reflecting the values of the Village, a good story telling and access to content and information ;
- Guiding principles: stay focus on the inhabitants of Dijon, help the Village explain and stay true to their promise and values, try to uncover visitors’ frustration before focusing on click and collect, try and understand how the city of Dijon works, and how its inhabitants interact with the premises ;
- Activities: build a robust UX research strategy as the core of the entire process to uncover the truth behind the complaints and dissatisfactions heard here and there ;
- Tests: plan a lot of tests during the whole process, starting by questions to ask to Dijonnais during interviews or backed by an online survey to gather as much data as we could.
UX Research
Facts about food courts
Born in 1970 in shopping malls in America and Asia, the concept initially was to feed a maximum of people in a minimum of time. The concept has evolved and rebooted in Europe in 2010 with Eataly and in 2014 with the Time Out Market of Lisboa. The concept has remained the same since then:
- A place of high transit as crowds attract crowds ;
- A large offer for a large choice, a high concentration for a high mutualisation of charges and economies of scale on expanses ;
- Cultural events to attract customers, showcase real expertise and make a lasting impression.
Competitive Analysis
To identify the competition we first asked ourselves what could be the alternatives when it comes to deciding to go to the “Village Gastronomique”:
- Information: the city of Dijon, the “Cité” itself which has its own means of communication and information, the local tourism office which may promote other places, other experiences ;
- Practical: people tend to shop near where they live, especially for essential products, and eat in their urban area. Therefore we considered food markets, starting with “Les Halles”, the central food market in Dijon, restaurants (480+ in Dijon) and local stores ;
- Destination: Nuit St-George or Beaune could be considered as alternatives destinations to visit ;
- (Collective) imagination: people may know food courts, high-places of gastronomy, or may have heard of the “Cité de la Gastronomie de Lyon” whose opening was a fiasco and remains a failure in people’s mind.
We came to the conclusion that if the “Village Gastronomique” wants to succeed it has to be a preferred choice to eat, shop, spend some quality time, experience new things, and stay 2 to 3 hours to enjoy everything it has to offer.
Seconday Research
We then used secondary research to dive into the context of the Dijonnais. We looked at social networks and comments from Dijonnais. It became clear that people did not understand the concept of food court and more generally speaking the concept of the Village. We observed a lot of discontent: prices, gaps between what they had imagined and what the Village is, etc.
Then we looked at the Halles of Dijon, a famous food market hosted under historic halls (1875). We found out that the prices there were considered expensive by Dijonnais, there were a lot of tourists and food tasting organized, and a well-known although considered expensive Sunday brunch. We decided to include questions about the Halles in our interview guide to better understand the relationship between Dijonnais and this place as potential leads to uncover frustrations about the Village.
We found out that there were around 500 restaurants in town for 150k inhabitants, that is to say 1 restaurant to 300+ inhabitants. As an element of comparison, the number is 1 to 118 in Paris which is already considered as a high number given the high density of the city and its high concentration of restaurants. In other words, Dijonnais have a lot of choice if they want to go to a restaurant. Lastly, we wondered how Dijonnais understand the concept of food-court. Although it is a growing concept it is still recent (2010’s) and mostly developed in big cities. It appeared that only the top 10 cities in France have food courts and between 1 and 3 of them. We then assumed that most of Dijonnais may never have experienced the concept (The Village being the first one in the region). At this point it became clearer that there was still a lot to explain to Dijonnais about the Cité and its Village.
Visual Competitive Analysis and heuristic evaluation
We had a quick look at other food courts to understand how they positioned themselves, how they communicate and how their website look like. We also looked at the Cité’s website as we already knew that there were a lot of confusions between the Cité and the Village, the second being part of the first:
- The “Cité de la Gastronomie”: the website uses 3 colors (black, white and yellow), all as primary colors, which makes it difficult to notice calls to actions, there are a lot of technical and content issues, focuses on the city and its region, not the Cité, a separate website to sell tickets, and a lot of heuristic issues ;
- Food courts: almost all websites look the same. They use Fullscreen pictures and videos, a lot of colors, but offer a poor experience when it comes to prepare a visit and understand how the place works.
It very much felt like those websites existed because they had to and not because they were meant to achieve actual conversion goals.
Interviews
Based on all the collected data, we created our interview guide and incorporated all the subjects we had to look deeper into.
Using the Village’s Instagram account, we had the opportunity to meet and discuss with many people living in Dijon, 21 actually, and confirm our initial hypothesis and doubts, while discovering new facts:
- The Village sources its products among local growers and farmers, favoring local distribution, and working with MOF (Meilleurs Ouvriers de France, which are the winners of a national competition held every four years for many different craftmanships). While the village tries to promote local know-how and quality, visitors only see high prices.
In fact there were a lot to explain to visitors and more than we initially anticipated.
A major outcome of the interviews was discovering that people do not consider first a program and then pick a date depending on the events they would like to attend. In fact, they consider a day that could work in their calendar for them to visit the Village, and then make the decision if they find something interesting enough on that day. From that moment on, we knew we would have to guide the website’s visitors to event registration as soon as they arrive on the home page.
Online Survey
Using a Lean Survey Canvas we prepared our form to back up our recent findings with solid numbers.
With the help of our stakeholder, we were able to publish an online survey in a facebook group of 40k members of Dijonnais.es and collected 525 responses. According to surveymonkey we had to reach 384 responses to consider the results to be 95% representative of our target with an error margin of 5%. This survey confirmed what we already suspected:
- People are highly influenced by their entourage ;
- 90% of the participants went at least once to the Village, but “only” 62% of them would recommend the Village ;
- Their last visit was rated 3.2 out of 5 which points out a lot of space for improvement ;
- 73% expect better prices in the future, 60% incentives for the Dijonnais and 52% more and “better” events ;
- 81% do not understand why there are 2 separate websites for the Cité and for the Village. They find it confusing, illogical and a waste of time and effort.
Our persona
Using all the collected data, we used an empathy map and an affinity diagram to build our user archetype.
Our persona was built on a mix of the qualitative and quantitative data we previously gathered:
- 50% of our target was 45+ years old ;
- 64% of our respondents were female ;
- 71% lived in couple and 58% had a least one child ;
- 86% lived in Dijon or its surroundings (< 20km from down town).
We built a user journey map based on the same data and the main frustrations we understood so far:
- Having difficulties to find information, quickly, easily and unambiguously ;
- Missing events while having subscribed to the newsletter and the Instagram account of the Village ;
- Understanding what a food court is and how it works ;
- Feeling welcomed to the Village and that this place had been designed for Dijonnais and not only tourists.
Problem statement and a big decision to make
At this point of the process, we had a decision to make. We were initially asked to redesign the home page in preparation for a new click-and-collect service. But we discovered that a far greater stake was to help people understand the Village, its offer, and be informed of future events and not miss any of them, may they be of interest. Datawise, here were the facts:
- Accessing the program and the catering offer are the #1 and #2 interests of inhabitants of Dijon where the click and collect is expected by less than 20% of interrogated people ;
- Dijonnais look for a convivial place to visit and where to spend time with friends and family (73%), not particularly a delivery service (<20%) ;
- Traffic is mostly mobile (70%) and not Desktop (29%).
Therefore we proposed to our stakeholder to reorient the challenge and stated the problem to solve as following:
Inhabitants from Dijon need to fully enjoy the program of the Village and better prepare their visit, because the actual confusion and dispersion of the information create disappointment and frustration.
While considering the stakeholder’s needs:
The “Village Gastronomique” has designed its website to inform visitors about its program and register online for its events, workshops.
Designing our initial concept
We used all our findings to ideate and design our concept. We used different UX tools: HMW statements, bad/good ideas, crazy8, brainstorming sessions, etc. We then worked on our value proposition using a value proposition canvas, built our MVP using the MoSCoW matrix and defined our user flow to focus on. We worked on the information architecture and defined our sitemap, a simplified version of the existing one, based on our findings. This part was almost a “straight line” as the design thinking process already felt as a well-known routine for both of us.
We also used key principles directly coming from our UX research and translated them into UX principles.
Prototyping
Atomic design
We felt experienced enough to take the time and decision to apply everything we learnt so far during our Ironhack UX/UI bootcamp. One in particular being atomic design. Instead of trying to figure out what our screens could look like, we started designing atoms, then molecules, organisms to finally build actual templates, almost without noticing it. It came naturally just by following our key principles and our framework. This way of designing made us feel very confident about the result, its consistency and simplicity.
Besides, we had already figured out that using styles, components, auto-layout and everything that makes Figma such as powerful tool, was also a great way to be efficient and productive, especially when we decided to remove or add sections to our design, change something in our card system, etc. So we built 100% configurable components which ensured uniformity in our design.
Visual identity
We used the existing brand identity, incorporated the Village’s website principles and completed the missing parts to build our style guide. Its main principles were:
- Minimalism and space to support the image of high and premium quality ;
- Smaller buttons and elements as the experience had to be mobile first ;
- Roundness and fineness to stay true to the brand identity ;
- Same typo (Didot) as the logo for titles to strengthen the brand identity ;
- Same typo for plain texts as the one used on the website but with positive letter spacing (Gill Sans Nova) ;
- Additional colors to highlight more the calls to action, picked from the tetradic palette originated from the dark golden primary color ; blue being the perfect complementary color and purple a good additional color reminding visitors of wine and blackcurrant (strong symbols in Dijon). At this point we did not select the green color because it appeared too far from the Village’s values to us. We hesitated to add two additional colors and kept in mind that this could be something to be tested during our next desirability tests.
We also chose to add a background already part of the brand identity, but only for the desktop version of our site. Those alveolus were used on site for signs, bags, wallpapers and considered a good “cross-channel” reminder of the Village’s identity.
Mobile-first and Responsiveness
The decision to design a mobile-first experience was highly motivated by the data analytics of the actual website: more than 70% of its traffic came from mobiles and 29% from desktops (almost no traffic from tablet). We then decided to focus on an adaptive and responsive design optimized for mobiles and desktops. On top of that we made all our wireframes for a viewport of 320px width. It was a good way to ensure simplicity and clarity of the design and we considered it paid off! I will let you judge by yourself.
I apologize in advance for the here below demo of our prototype because it is a heavy embedded GIF which might take some time to download 🙇🏻♂️ (~22Mo).
Testing
We had incorporated to our online survey an optional registration for test sessions and thus collected more than 150 email contacts. We decided to schedule a lot of tests as the opportunity was given to us to do so. We used calendly to inform and let people register by themselves to one of scheduled sessions. Therefore we planned 2 test sessions per prototyping stage: lo-fi wireframes > mid-fi prototype > hi-fi prototype. For each stage we had a test session, then we iterated based on the collected feedbacks and the test results, and did an additional test session. We proceeded like this until we were plainly satisfied and confident enough to present the results to our stakeholder.
Conclusion and next steps
I must admit that building confidence test after test is a pleasant feeling. Each iteration reinforced our feeling to have well apprehended people’s frustrations and offered a practical solution to each of them. Thus, we felt very proud when we presented our final results to our stakeholder, especially because we knew we could support every decision we made on our way to discover the truth behind all the frustrations we understood so far.
We also felt privileged as the opportunity was given to us to participate to next stages of this redesign process and share our findings with the Village’s environment.
And indeed, those next steps brought a sense of reality to our work. We are now looking forward to hopefully seeing positive results to the changes we recommended, prototyped and help achieved.
This new journey into the land of UX has been a great experience for my partner and I. For the first time we felt as actual UX/UI designers and were acknowledged as such. It is a great feeling and a great pride, especially when you are being thanked for the accomplished work. Feeling useful gave meaning to our action and confidence to continue on this path. Once UX designer, always UX designer? ;-)
