Zappa’s No.3 — Redesign of a grocery store e-commerce
UX/UI Case Study
Intro & Briefing
On the sixth week of the Bootcamp we returned to the previous project of the web design to make the UI (the project made in the second week of the Bootcamp, you can read it in this link), but with an important change. One member of each team was going to change from his original group and join another one to develop the UI. In the case of my group, I was the one chosen to start in a new group. At the beginning was a bit confusing but I really liked the experience of joining a group that had already started the UX process and where I had to catch up. My new partners were Andrea and Mario. I know I replaced an important member of the group but I did my best to make it easy for my colleagues.
I had a bookshop project in the previous group and now I moved to a grocery local shop. This grocery shop is called Zappa’s №3, located in the city centre of Madrid. It is a small local shop, one of those long-life shops that sell any quality products needed in a kitchen.
If you want to see how does it look right now, here is the link of the web page: www.ultramarinoszappas.com
Design Process
During this week we have used the following process:
Empathize
As I was new, my colleagues explained to me the whole research process they had followed in the previous week. They had done really well with the user experience research and I just was able to contribute with small changes in some statements of the Lean UX Canvas, because it was poorly expressed for someone outside of the project.
About the Mid-fidelity, they had a bit of a lack of consistency in some of the buttons and cards, but they knew it and we changed it directly in the High-fidelity.
To put ourselves in context, these are some of the insights gained from the surveys and interviews:
Define
Problem: The main problem we have found is the lack of trust and advice in the online experience.
Solution: And how are we planning to solve it? Well, we want to resemble the physical experience in the online web by integrating the following features:
Ideate
At the beginning of the UX process, my colleague Mario was able to talk with the owner of the shop so we could have a more realistic view of the owner’s vision. He told him that he wanted to come back to that long-life shops that the towns used to have, and break away the idea of a delicatessen food shop. So we decided to change the brand image to convey closeness and antiqueness.
His brand colour was a bright blue that rather than transmitting closeness, it conveyed seriousness. We didn’t want to go for a completely different colour but we did want to lower the intensity and find a warmer colour. So we decided to make a Moodboard that would transmit these values to see which colours would be suitable.
Our first stopper came when we started applying the colours to the web site. The previous week we were all doing Apps and now applying the colour to a web site felt so strange. We tried several combinations and none of them felt consistent and attractive at the same time, till we came across with the right one. But, after a while, we got kind of tired about the colours and needed a break to get away from this sensation.
Once we had decided the colour pallete, we started defining the graphic image. We were aware that we needed to do something to show some products but conveying the sensation of an old grocery store. We decided to apply the tiles used in those old shops as a way of storefront.
Then, I show our Style Tile so you can see from a glance the new image of Zappa’s №3. If you are interested in the Atomic Design here is the link.
High Fidelity Wireframes
And finally we could start applying this style in our screens, so we started doing the High Fidelity Wireframes. Here you can see some of the screens:
Prototype
We decided to show how a regular user makes a purchase in our redesigned website
Mobile Application
Apart from the redesign of the e-commerce, our instructors also asked us to develop at least 3 screens in mid-fidelity of the native app. Because, Do you imagine now your life without a phone? We decided to make the screen needed to make a purchase, so we could show a logic user flow.
In addition, we wanted to see how it was going to look in colour.
Thanks!
If you have come this far, thank you very much!
This week has been an unexpected but surprisingly enjoyable challenge. I needed to catch up really quickly to be able to join the group in time to develop the project, but my colleagues made it easy for me and helped me a lot. It has been a great week and I think it is reflected in the work made.
Any suggestions are welcome. You can contact me at larrosa.designs@gmail.com
