Santa Caterina's Market
New website for Barcelona's iconic food shopping destination.
Based on the user interview results, the team disregarded the necessity of creating a mobile application, in favour of improving the website and the Whatsapp service.
The research confirmed the user personas we had in mind: Montse, a local middle-aged professional woman and, Stanislaw, a young foreign resident in Barcelona.
As mentioned, we centred our efforts into improving the website and the market´s WhatsApp. We focused on the development of the Ready-to-Cook Boxes, pre-set packs with all the necessary ingredients and recipe to cook a dish.
We decided to re-direct the online shopping service to Manzaning, an existing online shopping platform used by most of the Markets in Barcelona. We based the website wireframing on the analysis of several food markets´ websites. El Mercat de la Boqueria in Barcelona and Borough Market in London were the most relevant references. We could establish the categories, the subcategories and the industry conventionalisms to use in our site.
We did the wireframing and the first round of user testing with Axure. The outcome of the testing to 4 people was:
Do you want to see the full wireframing?
User Interface Design
The initial colour palette was very colourful (because of the Santa Caterina´s Market roof inspiration) but it became really hard to control. We ended up reducing the palette, and green became the main colour because of its association with organic and natural values.
Initial colour palette
Final colour palette
The Main Menu font size was amended from regular to medium and from 16px to 18px
Type fonts in the style guide were amended from regular to medium
The buttons font was amended from regular to bold
We tested the UI mockup with 4 users and the main issues were accessibility related.
We had to increase the style of some of the text and also the size since some users had issues with reading clearly.
Do you want to see the full mockup?
The team during a visit to the market :-)
In the end, we improved the overall market website experience being conscious of new generations and foreign residents.
Due time constraints we could not develop further the WhatsApp ChatBot. This will form part of the next steps of this project.
We will also have to do further research (surveys and interviews) to the market staff to improve the experience of the traders. In this initial phase, we have prioritised your focus on customers only.
Figma´s UI Mock Up: The buttons and other UI elements had rounded edges to provide a fluid look and feel to match the organic concept.
Understanding the User
To get a good understanding of our users habits and needs, we ran a survey with 90 respondents and we conducted 6 user interviews.
The interviews confirmed that:
Phone calls and WhatsApp are the main communication platforms between sellers and customers.
There are communication issues between sellers and foreigners.
Boats docked in Barcelona port are also an important client of El Mercat de Santa Caterina (aside from tourists, residents, and restaurants).
Survey results. From 90 respondents, 34 answered that they rarely or never go to the market and the main reasons are the short opening hours.
Current Santa Caterina´s Market home page.
The lack of languages makes navigation impossible for non-locals.
The Market and the Competitors
During the market & competitors research, we could identify the 3 weakest points that we had to focus on resolving.
A website with very poor user experience, especially comparing it to other food providers like The Atmatller Origens.
The lack of languages options, which impacted directly to foreign customers. The current website is just written in Catalan.
The unclear online shopping experience.
Santa Caterina's, a historical food market located in Barcelona is struggling to retain old-customers and does not know how to attract new generations and foreign cultures.
To build a digital service that improves the engagement between sellers and consumers taking into account the technological and digital constraints of the users.
The UX / UI team was formed by Polina Zagorski, Lucie Mayrová and Mateo Pardo.
4 weeks (2 weeks of research and ideation, and 2 weeks of prototyping and testing)
Market & Competitors Analysis
User Persona Creation
User Journey Mapping
User Task Flow
User Interface Design
Traders Cards Iterations
Whole cards to be made clickable (not just the link)
Contact details to be added to the card.
Main Menu Iterations
Logo relocated to the side to match conventionalisms
Flag added to represent language option
“Visit us” replaced with “About us”
Home page added to the menu (just in Logo was confusing for 3 users)
Website initial sketches: The Main Menu (horizontal) is at the header and the Secondary Menu (vertical) is on the right-hand side when needed.