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.

User Personas

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.

Ideation 


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.

Prototyping

Wireframing

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

Iterations

 

Before Testing

  • 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

After Testing

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 :-)

Conclusion

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.

The Challenge

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.

Goal

To build a digital service that improves the engagement between sellers and consumers taking into account the technological and digital constraints of the users.

Team
The UX / UI team was formed by Polina Zagorski, Lucie Mayrová and Mateo Pardo.

Duration
4 weeks (2 weeks of research and ideation, and 2 weeks of prototyping and testing)

Tools

My Responsibilities

  • Market & Competitors Analysis

  • User Interviews

  • User Persona Creation

  • Empathy Maps

  • User Journey Mapping

  • User Task Flow

  • Axure prototyping

  • User Interface Design

  • Usability Testing

Traders Cards Iterations

Before Testing

After Testing

  • Whole cards to be made clickable (not just the link)

  • Contact details to be added to the card.

Main Menu Iterations

 

Before Testing

After Testing

  • 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)

Sketching

Website initial sketches: The Main Menu (horizontal) is at the header and the Secondary Menu (vertical) is on the right-hand side when needed.