Discovery & Definition
Step 1
Client Interview:
An interview session with the client was conducted to understand their vision for the page, objectives, needs, pain points, and key information they wanted to communicate. This information formed the foundation for crafting the design brief.
Client needs:
Brand Awareness & National Reach: Establish a robust online presence to attract new customers and solidify their position as a national leader in bakery fillings.
Product Transparency: Clearly communicate food safety policies and comprehensively display both permanent and seasonal product offerings.
Promote new products and services: A website that can be used to promote new products and services to customers.
Build relationships with customers: A website that allows interaction with customers and build relationships
Value & Social Impact Storytelling: Showcase the brand's philosophy, commitments, and daily actions highlighting their social responsibility.
Step 2
Information Architecture Diagram
A sitemap was created to visualize the page structure and information hierarchy. This diagram was shared with the client for validation and to collaboratively define the sections and specific information to be included.

Inicio (Home page): Serves as the first impression of Ofrut. It provides a clear introduction to who they are, their mission, and their dedication to making a positive impact on the environment and society. Here users can also get a glimpse of the companies already partnering with Ofrut.
Acerca de (About us): This section delves deeper into the company's history, the guiding principles and the core values that drive their mission. Here, users can also submit their resume or browse open positions to explore career opportunities.
Nuestros Productos (Our Products): It showcases Ofrut's diverse range of products across its various sub-brands and allow potential clients to reach out to them for a personalized experience.
Contacto (Contact page): Find contact numbers and emails, and you can also fill out a form with questions to contact the company.
Step 3
Content Sketching:
The client was invited to create a content sketch with the intended text for each section. This facilitated alignment of expectations and paved the way for the visual design phase.
Design solution:
Branding & Positioning:
Brand identity: consistent visual language (colors, fonts, imagery) that aligns with the company's brand essence.
Premium & Trustworthy: Convey a sense of quality and expertise through design elements that inspire trust in potential clients.
User Experience (UX):
Clean & User-Friendly Navigation: Prioritize user experience with a clear and intuitive navigation structure.
Mobile Responsiveness: Ensure flawless functionality across all devices (desktop, tablet, mobile).
Microinteractions: Incorporate subtle interactive elements to enhance user engagement and guide exploration.
Engagement & Interaction:
Clear & Concise CTA: Guide users towards desired actions (contact sales, browse catalogs, etc.) with concise and strategically placed calls to action.
Contact Opportunities: Facilitate communication by including sections for collaboration inquiries, customer feedback, and career opportunities