Case Study | Nannarella, Gelati Alla Romana
An online experience can be sweet and tasty
In these early weeks as a UX/UI Design student at Ironhack, my thoughts were focused essentially on ice cream. Weird, isn’t it?
Not at all…
We were challenged to improve the digital presence of a local store at the São Bento area, in Lisbon.
Build a useful and pro-active e-commerce activity for a local shop it’s not easy. Make people buy online products from a local store is even harder, because customers are used to physically go there and the places themselves do not invest much in online information. But we like challenges and we decided to raise the level and choose an ice cream store.
ABOUT NANNARELLA
Best italian makers have a soft spot for Lisbon, and they’ve opened up some delicious places in town. One of that places is Nannarella, which is already a well-known gelato brand, by locals and tourists, and considered one of the best in town. Whether it’s raining or sunny, there are always queues at the door. It’s not hard to see why: they use the best quality Portuguese ingredients (such as local fruits, port, ginja from Óbidos or Castro Marim salt) and the ice-cream tastes super good.
But once we inspected their website, we thought it would be a good idea to help them. If a potential customer comes to their site they will not be well informed:
What we observed:
- Visual pollution: poorly organized structure and lots of different fonts;
- Lack of pictures of the products;
- The site is in italian and portuguese, with no other language option;
- Not user-friendly interface, it’s difficult to understand the website usability: not simple, not clean, not intuitive;
- It’s not possible to order ice-cream.
So, with all the arguments to help this great gelato store, we used the UX Design Thinking process:
Surveys and Interviews
We shared the survey we made to understand the profile of an ice cream consumer and came up with some insights that helped us detail the face-to-face interviews with users. We spoke with several people about their ice-cream eating habits and about ordering this product online.
In order to emphasize with the costumers at this early stage and to organize the information taken from the survey and interviews we made an Empathy Map and a Affinity Diagram:
Some research results were curious and made us realized that there are common points for almost all consumers of artisanal ice-cream, for example it’s not their custom to ask for new flavors or never think about ordering online: they think it’s not feasible to order just one gelato and because of the melting problem. And if people really want an ice-cream they leave home to go to a artisanal store or go to the supermarket to buy industrial. Ok, we thought “we have work to do here: try to change these people’s perceptions”.
Other facts we also noticed: people are very fond of this type of gelato because they feel that the products used are fresh, organic and with quality. It’s curious to know that adult consumers do not like to put toppings on their ice-cream. And some find it interesting to participate in workshops on how to make homemade ice-cream.
HMW
We can describe our problem statement with our friend here, the delivery guy:
To come up from the guy from the left to a cool confidant delivery guy (right) bringing “cold and not-melted” ice cream to the convenience of those who don’t want to leave home but want the quality of a Nannarella gelato we defined our How Might We:
How to bring people to Nannarella website and convince them it’s ok to order ice-cream online? And convince them to try new flavors?
And with all this analysis, our user-personas were born:
Sitemap and Card Sorting
Brainstorming helped us to define the information architecture and to organize the Nannarella website structure. This was our first version:
But it was with the Card Sorting strategy that we came to the final version: it made us realize how much someone else’s perception can show us that we needed to simplify even more the structure.
I explain: we gave randomly to users categories and the sub-categories of our sitemap for them to organize. Very different versions came out, showing us once again that testing is essential.
Getting feedback from multiple people is crucial to realize what we needed to eliminate and to redefine spots to keep a more intuitive and clean website (=user-centered) in mind.
Our final outcome (quite different, isn’t it?):
User-Flows
The next step was to understand how our users would interact with the site and we sketched user-flows for two simple tasks also to be easy for us to have a clear perception of the functionality: the payment process doesn’t include a login and sign-up layout to encourage casual costumers to order online. They just need to add their address, email and card information and the receipt will send them by email; the flow of booking a Workshop has the same easy payment method, with or without group discount.
From Sketching to Wireframing
Use the technical exercises Round-Robin and Crazy8 was key to reach the final concept of the pages before starting wireframing because brought even more ideas about functionality and how to have a better user experience.
These were the solutions we found to attract users to our cleaner site:
- Use a CTA: the order button is the first thing the user sees. And bring to the landing page a catchy slogan above;
- Discounts for Workshops;
- The user of tags to better find the type of ice-cream;
- Easy and quick payment that doesn’t require log in or being membership;
- And super important: a simple menu well structured that puts each subject in its place.
Then, we finally started materializing our site into a Wireframe with our best friend Figma. We tested our prototype with some users, asking them the simple tasks of order an ice-cream flavor and book a workshop. Again, their feedback was essential to find weak points and to change some iterations before presenting the final wireframe:
Final Design
We were keen to see what would be the result of our work with a final design. As we had time, we tried to do the last version for the user-flow of ordering an ice-cream flavor. Some versions were designed while the teachers were giving us their viewpoints.
It is curious to see that even after the wireframe was done, the final version was slightly different. It is proof that new insights never cease to appear and that it’s an ongoing process to always try to improve the user experience. That’s what happened with our payment process: we decided to brought the payment feature to the personal information page to make the process shorter and catchy to the eye.
This project opened my door to the world of UX Strategy (and the opportunity to practice UI Design): trust the process of design thinking, is crucial for an understanding between what user needs and the goals of the business;
- Research (a lot) the market and know the user (very much)> Define problem > Test > Fail test > Repeat until finding a validate solution.
