Share Foods
Website redesign
Sharefoods is an organisation that sells products with a 1+1 principle. For every product purchased by consumers, it gives back to the community and helps a person in need. Following an identity rebrand, Sharefoods required a website redesign. The overall look and feel had to be clean but playful with graphics and colours, respecting the guidelines of the new CI.
I was part of the team responsible for the initial re-design of the brand's website. My role included structuring of the user journey, organising the site map and putting together the design based on the requirements and align with the look and feel based on the rebrand guidelines.
Client: ShareFoods
Year: 2018
Skills: UX, UI, Conceptualization
SITEMAP
As new sections were introduced for the site, thorough planning had to be done to highlight features that were prioritised such as the product QR codes that consumers could scan to find out how they are helping. Many of these added sections lead to a third level page with detailed information.
These sections also included multiple maps, statistics and many other features. Proper planning of the user flow had to be analysed to ensure that users would not be confused by the different tiers of the page. It was also necessary to prevent multiple pages with the same content and minimize load time altogether.
COLOUR & IDENTITY
Keeping to the rebranded CI, I implemented a colour guide that would maintain organisation of the different sections within the site. The colour guide was not only used for the site, but also for any assets that the brand required for campaigns.
WIREFRAMING
One of the technical requirements of the site build was that it had to be done over Wordpress CMS. I researched several templates to find the most suitable one that had dynamic components which fit the content and aligned with the CI.
Working closely with the development team, I put together wireframes based on component compatibility with the desired theme and this aided the process of development. The design concept also had to adapt well to a functional responsive site.
Visual Concept
Following the rebrand, the integration of a colour-block diagonal mask was a requirement to align with all other collaterals. Additionally, I proposed a clean flatlay concept that could compliment the strong visual photography from the NGOs.
Responsive Design
As a QR code exists on every product from Sharefoods, majority of users are expected to access the site on their mobile devices. This meant that the content and design had to be based on a mobile-first concept.
