Redesign for Fyffes
Fyffes is one of the world's oldest and largest tropical produce importers and distributors. With their head office in Dublin, they employ over 10,000 people worldwide and have offices in 12 countries.
Fyffes is one of the world's oldest and largest tropical produce importers and distributors. With their head office in Dublin, they employ over 10,000 people worldwide and have offices in 12 countries.
To get started, we benchmarked websites that offer similar objectives to have a reference point, compared them to this initial project, and then made improvements and implemented them. Some of the sites we visited were Chiquita, Del Monte, and Dole.
From all of them, we extracted features to consider while working on this project. Although these sites were more focused on the consumer side, they helped us understand the type of customer who would visit a website solely for produce.
Then, we conducted a survey to obtain quantitative and qualitative data to better understand how the media, customers, NGOs, and stakeholders will use a website like Fyffes, what content they expect to see, how Fyffes is perceived in terms of its CSR and sustainability record, and how they think their website and online channels could contribute to all of the above. For this, we used surveys, user interviews, and metrics.
Overall, they expect the website to be more corporate-focused than consumer-focused.Key content they are looking for across the board includes nutritional information, recipes, and competitions.
After collecting information about how Fyffes is perceived, it was necessary to analyse all the data to find opportunities that would allow us to design the best possible website. We defined four personas, one for each area and sector: Sebastian (Customer), Christina (Consumer), Maria (NGO), and Sarah (Media Press).
With clear goals and user needs in mind, we needed to define the website's features and create a sitemap and user flows. This helped us analyze and communicate the information architecture. We decided to divide the information into five parts:
To lay out all the information on the interface of our product, we began with wireframes, starting with pencil and paper to facilitate the visual hierarchies and structure of the screens. Then we used Adobe XD to digitalize them. After completing the wireframes and consolidating the flows and interactions of our new site, I began validating these decisions by creating a low-fidelity prototype.
The visual design process was where we decided on the visual identity of our product. First, we built a moodboard to inspire us during the process, which assisted us in choosing the typography, color, system grids, images, etc. Once the moodboard was done, we created a visual identity system, laying out the design decisions that we thought were relevant for users to feel familiar with the product.
Once the visual identity was defined, it was time to make high-fidelity prototypes (we used InVision) to test the product with real users, based on a script that identified pain points and hypotheses to validate. At this stage, it was important to collect feedback from users at all stages of the process and to interpret and rank the findings in a way that allowed us to modify and improve our product.
After testing, we made a list of modifications that we needed to change or add to iterate screens to improve the product's usability.
