Resi - The true Neapolitan coffee
Resi Trade Inc. dates back to 1936 when Alfredo Resi began to import the finest coffee beans from South America, Brazil, and Africa back to Italy. Not only had Resi produced his coffee for the Allied Armed Forces during the Second World War, but the family name had also become a central landmark in the Neapolitan coffee market. Formerly known as Brascafè, the company has two manufacturing locations in Naples, Italy, and established Resi Trade INC. in NYC to export coffee to the U.S. with a new product line of whole bean, ground coffee, and capsules.
The challenge
To introduce its brand and products to the U.S. market, Resi first commissioned QNY Creative to redesign its packaging, making it more appealing to the U.S. customer while representing Italian tradition and quality values. The result was a love letter to Italy, where the main focus of the packaging was a colorful illustration of the Vesuvius volcano and the Neapolitan bay, evoking the company’s origin. A special focus was set on the color hues that are or have been representative of Italy, such as the Naples yellow, used in the 18th century by old Painting Masters. Each flavor name mixes a word in Italian and another in English to represent the merge of the Italian and American cultures.
Additionally to the new package design, Resi commissioned QNY to develop a new website for their U.S. products. I was tasked to find a design solution, that combines design expertise with a deep understanding of user behavior and expectations on the web.
The design process
The main challenge was to create an intuitive and user-friendly interface that guides visitors effectively through the site, ensuring easy navigation and accessibility. A core problem was how to highlight every product line (Ground, Whole Bean, Capsules) and its flavor with detailed information with a focus on efficient content organization. This all needed to be accomplished while integrating the brand identity that had been already defined by the new package design.
Repetitive elements
To tie the UX experience together visually I used the same typefaces and fonts as on the packaging. Line elements were placed to subdivide the paragraphs and guide the eye through the copy in an easy manner. For the copy backgrounds, only white and dark navy seemed to suit to ensure the readability of the copy. The website was designed so all functions work seamlessly across various devices and browsers, maintaining responsiveness for different screen sizes. Therefore I wrote a detailed sheet for our coder regarding the usability of each CTA, navigation bar, and animated element.
Main page
To ensure an efficient content structure I agreed with the art director to divide the page into four main sections and three subsections for the product lines, of which each was divided into five pages dedicated to each flavor. To engage the visitor the homepage contained a banner that showed a photo of the visuv and Napoli - a hommage to the illustration of the packaging. A focus was set on the three main products and a CTA that would lead to the main product overview page. Furthermore, the main page presented a summary of every main division of the page. This would make it easier for the visitor to navigate to the part he or she is most interested in while scrolling down or using the navigation bar.
Product Page & Subpages
Structuring all content clearly and coherently would make it easy for users to find information quickly and efficiently. Therefore I designed a product page that would combine aesthetic virtue with the maximum accessibility. Every product is represented on the page additionally with a CTA button that would lead to its subpage and further detailed information. On the side of each line, I added a window that showed the grinding. For the subpages pages, I adapted the signature color of flavors to set it as background and emphasize the difference. Little elements like beans are telling about the intensity of the coffee alongside more information that is given. We also decided to showcase the package from all sides to give it a more realistic 3D effect.
A cup of Kindness & How-to-Brew page
In Napoli, traditions run deep and QNY had the great idea to include this heartwarming story as a core element of the About page. It not only shows the values of the Resi brand but also its profound gestures of love for a product and its people which are characteristic of the region of Napoli. As a special, I included the how-to brew instructions to help feature customers of the brand using Resi coffee to its full potential. With its step-by-step instructions, that had been researched by me and double-checked by the art director (we are both coffee obsessed - so that helped) the information created further engagement with the customer. Illustrated icons, of which some were directly adapted from the package design were added as an overview of the brewing characteristics. This was accompanied by images of each brewing device.
Working with Adobe XD
To be able to design the website I was introduced to Adobe XD which I haven't worked with before. Learning step by step how to operate its functions I learned about how to organize wireframes within linked site elements as well as toggle and hover effects. It was a thrilling challenge to reshape my thinking process towards questions of how to choose the optimal font size that would work on all devices as well as the size of images and other elements. Additionally, I learned how to work with the coding department, ensuring all elements are organized logically so they can be used in the next step of website creation.
