Mangofina Website Design

Mangofina Website-19.jpg
 

Mangofina Website Design

Mangofina is a company that exports locally sourced, premium mangoes all over the world. The challenge was to design a website for Mangofina. The final design is sleek, minimal and fun with the Mangofina mascot providing tips.

Mangofina XD Prototype

Client: Mangofina
Role: Worked on this project from the very beginning - Ideation, Branding, Typography, Layout, and UI/UX Design, Prototyping

Tools: Adobe Photoshop,
Adobe XD, FlowMapp, Balsamic
Duration: 2 weeks


The Process

Site Map
I started with mapping out navigation for the website, starting with the company’s introduction and ending on its contact with the various mangoes and offers in the middle.

 
Mangofina Website-14.jpg
 

Low-Fi Wireframes
The wireframes created on Balsamic are the rough layouts of the content of the website.

 
Mangofina Website-13.jpg
 

Typography
The body font was the web font Roboto and its different weights. For the header a serious and serif font like Noto Serif Bold was chosen. Lobster 1.4 and Itim Regular were chosen as secondary decorative and lightweight fonts respectively.

 
Typo 3-19.jpg
 

Color Palette
The color palette included different shades of orange, green and yellow - the different colors of a mango. However, red and its shaded were avoided (unlike in the packaging) since red is a very dominating color.

Patterns
The patterns have been taken inspiration from the foam covers we find on fruits for protection and have adapted the 3 main colors.

 
Color Palette and Patterns-05.jpg
 

Iconography
I created a range of minimal icons which look consistent throughout along with the Mangofina mascot which gives a fun vibe.

 
Iconography.jpg
 

Final Execution
Developing the wireframes further, the final website design was created.

 
The Company 1.jpg
The Story of our Fruit 1.jpg
Monthly Subscription 1.jpg
Contact 1.jpg
 
 
 
 
Thanks for watching.jpg
 
 

Designed @The Magic Beans, Mumbai. 2018.