Webflow redesign:
Find out how Papa Outang, an eco-responsible spread, was transformed thanks to a Webflow and Shopify integration.
The company
Papa Outang is a do-it-yourself spread. It takes just 2 minutes to cook. Its mission: to protect the Indonesian forest. With every jar you buy, you save m2 from deforestation!
The project
designed pages
SEO optimized
to Shopify
The project involved creating the site and then exporting it on Webflow to Shopify.
The challenges were as follows:
- create the site in Webflow and set up the various elements for export
- export the site to Shopify using Udesly
- improve the user experience and reduce site loading time
- set up all the technical bases for natural referencing using our SEO expertise.
The stages of the project
Wireframes
UI Design
Dev. Webflow
UI/UX Research and Workshop
- Persona identification: We define personas to understand the needs and behaviors of target users.
- UI/UX workshop: We organize a workshop with stakeholders to discuss objectives, functionalities and user flows.
- Competitive analysis: We study competing websites to identify best practices and opportunities.
Tree structure and Wireframing
- Tree design: We create a site tree to define the structure and organization of information.
- Wireframing: We create basic wireframes for each page, based on the tree structure.
Design and Webdesign guidelines on Figma
- Moodboard: We create a moodboard to define the mood and visual style of the site.
- Color palette and typography: We choose a color palette and typography that match the brand s identity.
- Mock-up design: We use Figma to create high-fidelity mock-ups based on wireframes and design guidelines.
- Customer validation: We present the mock-ups to the customer for validation and adjustments.
Webflow development
- Site structure: We establish the basic structure of the site in Webflow.
- Design integration: We integrate design elements down to the pixel.
- Functionality development: We add interactions, animations and more.
- Mobile optimization: We ensure that the site is responsive.
- Technical SEO: We implement elements for SEO.
Testing and Go-Live
- Functional and compatibility testing: We check that everything works as expected on different browsers and devices.
- Audit: We carry out a detailed audit of the site.
- Customer review: We set up a tool to collect customer feedback easily.
- Final modifications: We make the final changes.
- Deployment: We put the site online.
Maintenance phase
- Monitoring and analysis: We use analysis tools to track site performance.
- Support and updates: We provide regular updates based on customer needs and site performance.
The benefits for the customer
Exporting from Webflow to Shopify enables them to create a totally bespoke website while taking advantage of Shopify s highly advanced e-commerce features.
The redesign gives their Webflow site a more modern, attractive look that can help attract more visitors and improve the company s image.
THE PROJECT IN PICTURES
"With Webflow, Papa Outang has become more than a spread: it s an eco-responsible initiative that protects the Indonesian forest, one pot at a time."
