ROLE: Web Design, UX & UI
Kerry Group is a global food company headquartered in Ireland that supplies over 15,000 types of food, ingredients and flavours to different companies around the world.
Our agency was appointed to envision a whole new branding for the company and to implement it throughout all their communications worldwide.
For the purposes of this case study I will only focus on Kerry.com
1. INFORMATION GATHERING
Our first task was to understand the information gathered by the agency in relation to surveys, data, interviews, user personas and insights.
Alongside with the Project Manager and Creative Director, we defined the site's Information Architecture and defined a few user journeys.
Because the website was primarily component based, we needed to think carefully about the types of layouts required for each level and to ensure consistency throughout the whole site.
2. WIREFRAMING & PROTOTYPING
Before we proceeded working on wireframes, we showed a more polished design mockup to the client that would help them understand how the new branding would be incorporated into Kerry.com
We then proceeded to define key components that were grouped as follows:
• The first group were global components, meaning they were constant and visible elements throughout the entire site.
• The second group were fixed components, meaning they weren't going to change drastically overtime such as 'About', 'Mission', 'Global Locations', etcetera.
And the third were dynamic components, meaning their content could easily be edited and swapped with a different template variable.
The key deliverables at this stage were the following:
• Wireframes of every single component in high-fidelity.
• Wireframes of every single component in three different views in order to explain their responsive behaviour.
• Interactive prototypes worked inside Invision in order to explain clients and developers how components and user journeys were working in different page layouts.
3. DESIGN & IMPLEMENTATION
Once all the components were defined and approved, we then proceeded to incorporate them into the design phase. In order to incorporate the new branding effectively we created a 'Website Style Guide' that contained the following:
• Grid System
• Colour Palette
• Typographic Elements
• Icon Library
• Form Elements
• Buttons
• Imagery
• Components
There was a lot of testing to be done in this phase, specially when it came to usability. We realised that some of our assumptions on how the website should work and be navigated needed to change. Therefore we made use of Pattern Lab which helped us make agile decisions before implementing the full front-end into the website's development stage.
CONCLUSION
During the different stages of this project I gathered a few key learnings. Collaboration and communication between work colleagues and third parties is essential for a project to become successful. It is vital to have a strong team lead that will unite every front and remain focused in the overall goal. This project is still ongoing but I was happy to have served in it and finally see it grow.
