top of page
Work > Ofi
Olam Food Ingredients
Lead UI Designer for new website design of Ofi.com.
Project is a part of continuous engagement with Olam international
Problem Statement
New Site Design
-
Create site design based on brand elements made by agency
-
Make designs AEM compatible
-
Create a Design system
-
Focus on component variations
Design System
Defined a basic Design system based on branding elements
-
Design essence
-
Typography
-
Buttons
-
Input fields
-
Spacing
-
Components
-
Interactions
WS1 - Colors
WS2 - Typography
WS8 - Images
WS1 - Colors
1/5
Development Friendly
Templates and Variations
-
The Design was split into different templates addressing sections of the website
-
Each template have assigned components but can be replaced by other components
-
Components have variations based on image and text position
Design Highlights
12 templates with 39 components
-
Single level navigation was designed
- Templates included​
-
Home Page
-
Category page
-
Sub category page
-
Product landing page
-
Search & Search page
-
Solutions page
-
Research page
-
Company overview
-
News page
-
Sustainability
-
Dealers page
-
Destination pages​
-
Hotel and Destination listing​
-
Profile and Club ITC
-
-
Brand & Experience pages​
Design Highlights #1
Emphasis on Branding
-
Design language should emphasise on OFI branding in every component
-
Purple/orange to be used in design elements
Design Highlights #2
Interactions
-
Simple hover interactions are used to disclose more text or additional content
Design Highlights #3
Component Variations
-
Each component has variations to provide design options to authors
-
The components are responsive and all form factors are optimised for the variations
-
This component has 3 variations based on used the the cards
SIMILIAR PROJECTS
SCROLL
bottom of page