Ofrut website

Timeline
April 2023 - May 2023
Company
Ofrut S.A de C.V
Platform
Web, mobile
Role
Product designer
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.
Navigating Key Challenges:
Challenge 1
Branding & Visual Identity
Ofrut lacked a defined brand identity, including a color palette, typography, and style guidelines.
The approach
To address this, I conducted an analysis of their existing material, market trends, and brand essence.
Challenge 2
Visual Content
The company had no photographs of their factory or products, yet they desired a visually captivating landing page.
The approach
I sourced high-quality stock images to present potential options. This helped them decide if they wanted to buy the rights to the photos or hire a photographer, all with a clearer idea of the style they were going for
Challenge 3
Creative Freedom
While this may seem like an ideal scenario, it can be tricky due to the absence of clear direction and subjectivity, as different stakeholders may have varying opinions
The approach
Open communication with the client throughout the design process helped me understand their expectations and preferences
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