users want an e-commerce platform that MIRRORS the physical shop's vibe

WHY CREATE AN E-COMMERCE PLATFORM?

Many small businesses, like Sant Buena, a café and gourmet grocery shop in Berlin, face the challenge of building an online presence and offering e-commerce options, which was the focus of our second UX/UI project.

Understanding the landscape

To better understand the problem, we began with secondary research, discovering that Sant Buena opened in August 2024 and is still in its early stages, relying mainly on word-of-mouth marketing and a minimal landing page for its online presence. We then interviewed the owner, Tom Wagner, who shared his vision of creating a cozy digital experience that mirrors the shop while expanding the business to offer café items like cutlery and cups for purchase.

Finally, we conducted a customer survey to gather insights from visitors about their experience.

HOW DOES THE ENVIRONMENT OF SANT BUENA MAKE YOU FEEL?

Most users used the words ‘cozy’ and ‘welcoming’ to describe their experience in the shop.

Do you check a shop’s inventory online before going to buy on site?

5 out of 6 people who answered our survey said they do, which was important for us to consider when building the E-Commerce platform.

What DO you value the most in an online shop?

Here answers varied quite a lot, but some common denominators were a smooth shopping experience with different payment methods available and clear information on products.

the competition

The next step in our research was to find out what Sant Buena’s main competitors were up to. The ones we found to be the most similar to our chosen brand were Eat Berlin, L’Épicerie, and Goldhahn & Samson. Though they present similarities, especially Goldhahn & Samson with a gourmet grocery shop and a café in its interior, we were not able to find any other shop with the exact same principle as Sant Buena, which we considered an advantage for our client.

user persona - meet joão

“My friend showed me Sant Buena and I love it! I wonder if they have an online shop? I want to navigate their whole product assortment.”

Other than insights on the brand itself, Tom provided us with valuable information regarding Sant Buena’s main public. He said most clients tend to be people who live in the neighborhood, therefore people with money, who are usually either in their late 20s or 30s, and enjoy treating themselves to high-quality products.

Thus, we were able to come up with our user persona:
João is a 33-year-old, Berlin-based, Brazilian product designer who heard about Sant Buena through a friend.
As for his goals, motivations, needs, and frustrations, among others, the main key points are:

GOALS

  • Buying his favorite product

  • Treating himself by consuming a high-end product

MOTIVATIONS

  • Not limited to fully online experiences

  • Finding products of different categories in a single shop

NEEDS

  • Knowing about product stock and details before buying

  • E-Commerce design needs to match the physical shop's vibe

PAIN POINTS

  • Lack of information on products online

  • Unpleasant aesthetics on E-Commerce pages

To avoid profiling, for our presentation we chose to use the image of a dog wearing a hat, which made it look more sophisticated, like someone who would enjoy high-end products.

PROBLEM STATEMENT

Relaxed foodies need to find product availability, detailed information, and a seamless E-commerce experience that mirrors the vibe of the physical store, because it saves them the time for more enjoyable activities and avoids the frustration of unattractive visuals.

IDEATION

When the ideation part started, we aimed at figuring out what features our online shop should include.
To get rid of any limiting thoughts, we used ideation techniques such as the ‘Crazy 8s’ and ‘Worst Possible Idea’. Out of those, some very good ideas emerged, and as a group we decide to implement the following:

- Welcoming message on landing page
- Categories as cards in a carousel
- Same-day delivery available at a higher price
- Link between website and shop’s social media profiles
- Option to pick up order at the shop
- Product pages with product descriptions

Once our ideas had been laid out, we came up with a site map to better illustrate each of the features we wanted to include.

user flow

With the assistance of our site map, we were able to come up with our user flow.
Our main flow (the one we chose to present) consists of the user having the task of placing an order on Sant Buena’s website. To fulfill this task, the user starts from the online shop’s home page (main page), then they select ‘groceries’. From there, they must select the subcategory ‘breakfast’.
We acknowledged that the user could be unsure of where to find their desired product, hence we chose to work with breadcrumbs, so that from ‘breakfast’ they can easily go back to the ‘groceries’ page in case their desired product is not available in the subcategory they initially thought it would be.


Moving on, from ‘breakfast’, they are able to select a product, which will redirect them to its page, where they will find information on it and a button that allows them to add it to their cart. Once the product has been added to their shopping cart, a window pops up with two options: ‘Continue shopping’ or ‘Checkout’. The user then clicks ‘checkout’ and is redirected to the checkout page, where they fill out all the necessary fields, select ‘place order’, and the order is successfully placed.

moodboard

After deciding on a color palette, we looked for images online that translated the vibe we were going for, and then proceeded to testing our moodboard by creating a form with a list of adjectives that could be used to describe our brand, and people could vote for each one. We knew our moodboard was efficient in conveying the message we wanted when we saw that the most voted word was ‘welcoming’.

wireframing & prototyping

To develop the visual layout of Sant Buena’s E-commerce, we drew inspiration not only from Tom Wagner’s other business’ website, FLAMAKERS, but also from the competitors’ websites, especially Goldhahn & Samson. However, we changed up elements we thought did not work so well visually for both these online shops, such as color choices and buttons.

We chose to have products as cards in a carousel, as well as to have the main product categories at the top within our header. We debated whether the header should be white or red and chose to go with red for more contrast with the main image, which shows the outside of Sant Buena.

Image size has been optimized so quality does not reflect the real resolution of the prototype.

Click here to access the hi-fi prototype.

Usability Testing Results and learnings

Once we finished out first prototype, we had some users test it.
Although their feedback was positive for the most part — they seemed to particularly enjoy the clean, minimalistic design, for instance — , they pointed out a few things that could use improvement, such as the carousels not being intuitive enough.

Since time was a big constraint and every group member had different availabilities, there were things that, looking back, we wish we could have done differently had we had more time. Thus, we reflected on those things, as well as on what our next steps would have been if we were to carry on with this project.

We intended to add a gift card menu to our hi-fi wireframe — and prototype — , but unfortunately, we did not have the time to do that.
Moreover, after presenting our product as well as our slides, to the stakeholder, he pointed out it would have been interesting to see shops from outside of Berlin (such as from the USA, which is where he drew inspiration for Sant Buena’s concept from) included in our competitor analysis.
Additionally, we would have taken more time in setting the guides and artwork to help with consistency throughout the designs.

CONCLUSION

In time-sensitive projects like this, effective task delegation and clear division of responsibilities are not just helpful—they're essential. Equally important is meticulous time planning that accommodates iterative cycles, allowing for feedback-driven adjustments from both stakeholders and users.

Given the time constraints of this project, several areas could have benefited from further refinement had additional time been available:

  • Enhancing navigation and carousels: Exploring alternative layouts or incorporating visual navigation aids, such as arrows, to improve usability.

  • Expanding competitor analysis: Including global competitors, particularly those that inspired the owner, to gain broader insights.

  • Refining the prototype: Adding dynamic interactions, such as hover states and animations, to create a more engaging user experience.

These improvements would have elevated the overall quality and effectiveness of the final product.