WEBSITE DESIGN
Origine
By having strong hold of added value and traceable ingredients, Origine is bringing differently good and feasible sustainable agriculture practices to wholesale business. Personally foraged from the field.
The project was to create the website and user interface design that represents the company value and vision.
Final UI
This project page is made only for documentation purposes. All product photos and multimedia in this current page are copyrighted to its rightful owner © Tripper Inc.
OVERVIEW
With its headquarter located in the heart of Bali Island, Origine has a unique and added-value role in the traceable wholesale and food services products worldwide. Formerly Tripper, Inc, this company is rebranding its identity to better reflects the authenticity of their products.
Launching Origine new website with fresh design is one of the main marketing strategy to reach out to their longstanding customers, as well as attracting the new potential ones. To connect, build and maintain long relationships with farmers, families and partners. Also to bring out the deep connection to the natural source that the company founders value the most, because Origine is not just business, it is a relationships of good sustainable agriculture practices.
Challenges.
What is challenging for this project is how to bring fresh air and appealing design solution while still keeping the company culture that has been growing over decades. How to deliver an innovative and modern approach, but not losing the personal touch which is the company treat.
My goal is to build a business and company website that is not boring or too formal, so it could be more appealing for the users. The website should be able to convey the deep-rooted company stories to the viewers in a refreshing and interesting way.
Tools.
Adobe XD, Adobe Illustrator, Photoshop, Adobe Premiere, Drawing Pen, Pencil and Paper.
Roles.
In this project, I am responsible only for designing the overall website looks with all its User Interface elements, until hi-fi clickable prototype. Logo and branding style guide are provided by the clients, which have to be complied.
• Illustrations • Art Direction & IA
• Graphic Layout & Icon Design • Final Website UI
• Photo Selection & Editing • High-Fidelity Prototype
Date
June - July 2018 (6 weeks)
Branding and Style Guide.
The re-branding of company identity was already provided by the clients, in the brand style guide. It contains the guide for fonts and color styles that's being used by the company in their whole marketing design tools. So naturally, I complied to the guide while making this website design. But as for the website theme, button and icon style were carefully developed and enhanced to match in this whole design package.
ILLUSTRATIONS
In this website project, illustration was one of the important design elements. It was created to represent personal touch and telling stories on how the company usually run their relationships with stakeholders. May it be close communication with the farmers on the field, or with customers who experience the hand-crafted magic of "Origine' natural ingredients.
There are three styles of handmade illustrations that I made for this project, especially created for this website design competion such as icon design, vector illustration and manual hand drawing in black and white sketch style.
Icon Designs.
All the icon design in this website are personally crafted from scratch for clients. The black line icon with slight orange color addition as a design accent, was chosen because of its clarity and stand-out looks in white background page. Since this is a company or business profile website, I chose this style because it is clean and has a formal looks. Moreover, the round line edges also emphasize the fun and cartoony feel which could make this website not looked too boring or serious.
Vector Illustrations.
Vector style illustration also added into the website design elements. Colored illustration was used on the natural ingredients, to make it more outstanding and eye-catchy. They are used on the illustrative map, combined with photos and caption text. These are the premium food services products that 'Origine' personally foraged from its natural source, which are consistently promoted in their publications and marketing tools.
Spice Ingredients - Traceability icons
Career Page - Job vacancy
Hand-drawing Illustrations.
What's better than to tell story in pictures? It is fun and less boring, and also great to substitute long long text of history (which viewers rarely want to read anyway). That's why I choose to draw them out into a story book! It should be more memorable as well in people's mind.
About Page - Founder's and Company History
Handmade illustration sketch are used to represents the originality and natural feels of the ingredients, especially using the plants and organic drawings. Due to its complexity, the drawings will stay as black and white sketch, and mostly will be used as background and location scene. The purpose was to add more texture on the web page, but not enough to distract the viewer or customer from the messages that want to be conveyed to them.
Natural ingredients and spices sketch
'Origine' Packaging Size
'Origine' Contact Location Cards
WORK IN PROGRESS
Wireframes and Plan.
Doing a rough sketches as the initial UI/UX process is how I usually start for the content mapping and planning. Personally, I find it easier to do brain storming and to get the idea flowing naturally without having to be limited with digital technique. Pencil and paper are still my best preferences to get started :)
Raw Sketches of Initial Ideas
Origine website - Fixed ideas sketches
FINAL UI DESIGN
Landing Page.
'Origine' is a wholesale and food services company with lots of authentic story to tell. Visual approach is what I choose to convey that message because sometimes, picture speaks more than words. That's why I choose to use a montage video as landing page, the first page that audience will see when they visit origine.com
The objective of this landing page video is to give the vibes of natural and tropical land, where the magic ingredients were personally foraged. Building up the mood of nature and freshness. It also shows the farmers and their life in community and later, showcases each products in their natural habitat, being processed and crafted into the premium products that reach their customer's door.
Main UI Pages.
After arriving on the landing page, customer could choose between wholesale (B2B) product section or retail (B2C) section which is in 'coming soon' and unpublished status at the time when this website was designed. Below is the main user interface design of the website frameworks, such as: B2B Homepage, About, Sustainability, Blog and Contact page.
Website Pop-Up Cards.
Some of the important element in this website is the pop-up cards which are used to minimize the amount of website pages. It also could give the sense of more dynamic approach and slight animation for the website, adding more attractiveness to its motion.
Product Pages.
There are six main ingredients that are being showcased specifically in this website, and also one page dedicated for various ingredients. Each main products are described thoroughly in each of their webpage. Since all the products of Origine is never only as a wholesale commodity, but each stories are also important to convey its traceability, process and the person behind the products (foragers).
Starting from showing the products certification to ensure the quality, and then video about the ingredients, different form of products being offered and available to customers for various applications, packaging size for order enquiry, traceability map, closer looks of the four stages of product processing, and lastly another link for website visitors to explore other products.
Other Pages.
Another subpages being carefully showcased in the website are the programs of the company as well as their value and company's vision mission. Career page also plays significant role in interacting with visitors, giving clear description of the job desk, task, responsibilities and general requirement or condition of the company which will be useful for the job applicants. As for the sustainability pages, it has four sections which are the platforms of Origine's feasible sustainability programs, not only accomplished by staff or farmers but also their community. Building the balanced relationship between people, environment and economic value is what made this company special.
PROTOTYPE VIDEO
Due to some unpublished information and section of the actual website, direct link of full prototype will not be provided here.You could check some sneak peak on the prototype from this video below and video at top page. Prototype video and works are recorded and done, using Adobe XD CC.
