Chili & Paprika- Building an e-commerce
This project started as a conceptual one while I was on the Ironhack Bootcamp; when we presented our design to the company, they asked us to implement it and give them an e-commerce site. The final site can be found here.
Task
We were tasked with designing an e-commerce for an actual Berlin store, we chose Chili & Paprika, a Mexican and Latin American food shop based in Prenzlauerberg. This was a group project of 4 people and we were to use their stocklists and focus on the site’s information architecture.
Research
We started the project by conducting interviews, undertaking visual and branding competitor analysis as well as a stakeholder interview. With this, we got the all-important stocklist as well as an understanding of what made Chili & Paprika a unique shop. Every single customer we spoke to mentioned the owners of the shop, often recommending how to use a certain product. It became very clear to us that the online shop needed to maintain this sentiment. It also became clear that the products became quite overwhelming to some people in the shop, as it is a fairly small space and they have a large variety. The benefits of the online shop will be the ease of organisation.
The competitor analysis showed that while there are many restaurants and online entities within this sector in Berlin; they are unique in terms of having a physical shop. Almost all of them used a very bright colour pallet.
It also became clear to us that there were two distinct user groups. The customers who come from Latin America, and know exactly what they want when they go there. Then there was another group who went just to browse, often relying on the advice given by the proprietors.
Using all this information, we created two different user personas.
We then developed a site map as well as user flows for both Sophia and Pablo. Then we moved onto writing problem statements to clearly convey the task. While Pablo's focus was on quick and easy navigation to a specific item; Sophia’s was to be able to clearly browse the selection. We needed users to be able to navigate the website with ease regardless of which user bracket they fell into.
HMW create an organized online shopping experience while maintaining the personal touch of the owners and conveying the authenticity of the products?
Alongside all of this, we had been working on the organisation of the products. While Chili & Paprika didn’t provide us with a complete stock list, we were able to generate our own based on our visits to the store. We collected a variety of about 100 products. The next step was to organise them into different sections. We did this by using a technique called card sorting, both in-person, using sticky notes and remote, using Optimal Workshop.
I honestly thought that this would be a really straight forward exercise, as to me it seemed clear what the main categories would be. We did a closed card sorting, meaning we provided the names of the main categories and the participant had to just place the products. From the first in-person card sorting, it became clear that there was an issue. While in the U.K., where I am from, it is commonplace to use the term ‘dried goods’, the non-native English speaking participant was thrown by this term. It was then that the German natives in our team confessed that they too were slightly confused by the term.
Chili & Paprika has a diverse customer base, while there are some native English speakers, the majority are either German or Spanish native speakers. As this was a project for Ironhack, we had to find English terms that would be clear to their client base. In the end, we decided to use the term ‘pantry’ as opposed to dried goods as it is more universally understood.
The design
With being a group of 4, we decided it was best to start with some crazy 8’s to help us ideate the look of the site. We then discussed and dot voted to decide quickly and effectively on the look of the page. From this we went onto build the mid-fidelity, inputting all the information we learnt from the card sorting.
The main points that we discovered in this stage were:
- We added a fun barrier question of “Are you spicy enough?”, any shop with ‘chilli’ in the name is going to be fairly spice focused. Both yes and no will give you access, one saying you are in the right place and the other offering to introduce you to the cuisine.
- From our conversations with the client, we decided that the product photography was going to include the colourful striped blankets that featured around the shop. Therefore we knew that there needed to be space in the design for the photos to breathe.
- We added a recommendation as to what to make/do with the product, providing the presence of the owners on the site.
- The owners were very clear that they would not want to offer delivery as they do not have the infrastructure to support this. We suggested that we design a click and collect option. Chili & Paprika always have a long line outside which got especially worse due to Covid restrictions. The click & collect option will still provide a more convenient shopping experience to their clients, especially those that fall into the ‘Pablo’ user group and want to shop quickly.
- We needed a banner stating that the shop was for collection only. We didn’t want any customers to not realise until they had already added everything into their basket.
While the scope of our original task was just to develop a mid-fidelity prototype, we wanted to generate a few of the screens in high-fidelity to show to the clients at the end. We decided to go for a more neutral colour pallet compared to our competitors, to prevent any clashing with the striped background of the product photography. The result can be seen below:
Implementation
The week-long project came to an end and in true Bootcamp fashion, we had to move onto the next project. However, we were able to show the results to the owners of Chili & Paprika and they decided to hire us once the Bootcamp finished, to create an online shop for them.
The shop was already using a platform called IZettle for their in-house accounts and as they have an e-commerce platform included they asked us to build it with that.
Although we originally designed the platform in English due to the restrictions of the course, the preferred language of the customer base was German.
Inbetween our design and implementation, the store underwent a rebranding with their logo. We updated the design to fit with the new logo and some adjustments were made due to the restrictions of the platform.
The store asked us to set up the initial store with 60 products, we coordinated the product photography as well as the writing and translating of the product descriptions.
As well as designing and implementing the store, we provided the clients with a handover document so that they can now run the store themselves, including adding new products.
The e-commerce platform first launched in December 2020 and had 15 orders for click and collect in the first week. The feedback the clients have received from their customers is overwhelmingly positive and they hope to add more products at a later date.
The shop can be found here.
Learning
- Non-native speakers do not always understand terms that we believe are clear, this is why research and tools such as card sorting are so important. Accessibility is vital when it comes to UX, this includes the language that we use. Whether something is written in ‘correct’ English or not, is not the most important thing, it has to be understood by the user’s demographic.
- You must be flexible with your design, website builders/commerce platforms have limitations. There was a lot of small concessions that we had to make from our original design due to the limitations of the platform. The main one was that there wasn’t the option to have a different design for mobile to desktop. For example, the options for the logo size were just S/M/L/XL, so we had to pick the option that looked the best over both.
- Coordinating between a group of freelancers with the clients, translations, photography etc becomes complicated. During the Bootcamp, everything went very quickly because it had to (we had 9 weeks). In reality, you end up waiting on things to move forward in projects like this. I think it was really important for me to see how the cross-communication works, knowing when to chase up and when to wait.
