Reflection
Clear communication is essential. Whether with the team or the client, keeping everyone aligned ensures the project moves forward smoothly.
Clear communication is essential. Whether with the team or the client, keeping everyone aligned ensures the project moves forward smoothly.
Clear communication is essential. Whether with the team or the client, keeping everyone aligned ensures the project moves forward smoothly.
Patience matters but so does progress. I learned to balance waiting with knowing when to make decisions and push for progress.
Patience matters but so does progress. I learned to balance waiting with knowing when to make decisions and push for progress.
Patience matters but so does progress. I learned to balance waiting with knowing when to make decisions and push for progress.
I became more confident in making design decisions based on both user needs and client goals.
I became more confident in making design decisions based on both user needs and client goals.
I developed a stronger collaboration mindset, learning how to work more effectively with both team members and the client.
I developed a stronger collaboration mindset, learning how to work more effectively with both team members and the client.
I developed a stronger collaboration mindset, learning how to work more effectively with both team members and the client.
Project Overview
Project Overview
Team
4 People
Team
4 People
Role
UI/UX Designer
Role
UI/UX Designer
Timeline
7 Weeks
Timeline
7 Weeks
Tools
Figma, Wix
Tools
Figma, Wix
Description
E.B. Box Company, a leading manufacturer of paperboard packaging for the food industry, partnered on a website redesign to enhance the user experience, modernize the design, and better showcase its capabilities.
Description
E.B. Box Company, a leading manufacturer of paperboard packaging for the food industry, partnered on a website redesign to enhance the user experience, modernize the design, and better showcase its capabilities.
Design Goals
Communicate the company’s value and credibility clearly through design.
Improve visual hierarchy, readability, and overall user experience.
Implement a contact form for inquires and an easy way to reach company.
Showcase companies capabilities and diverse box offerings.
Create a clean, simple and professional look that builds trust.
Integrate social media link (LinkedIn, Instagram) for better engagement.
Mid-Fidelity Wireframes
Mid-Fidelity Wireframes
What we do → How we do it → Why we’re different → Social proof → Contact.
Focused on user needs and business goals
Emphasized clarity and scroll-friendly flow
What we do → How we do it → Why we’re different → Social proof → Contact.
Focused on user needs and business goals
Emphasized clarity and scroll-friendly flow
What we do → How we do it → Why we’re different → Social proof → Contact.
Focused on user needs and business goals
Emphasized clarity and scroll-friendly flow
Simple layout with a clean contact form
Included business info and location
Removed unnecessary elements to reduce distractions
Simple layout with a clean contact form
Included business info and location
Removed unnecessary elements to reduce distractions
Simple layout with a clean contact form
Included business info and location
Removed unnecessary elements to reduce distractions
Homepage
Homepage
Contact Page
Contact Page
High-Fidelity Wireframes
High-Fidelity Wireframes
Balanced visual simplicity with strong brand presence
Designed clear, visually distinct CTA buttons for user guidance
Applied brand colors and consistent typography
Ensured visual consistency between homepage and contact page
Modernized visual style and hierarchy
Balanced visual simplicity with strong brand presence
Designed clear, visually distinct CTA buttons for user guidance
Applied brand colors and consistent typography
Ensured visual consistency between homepage and contact page
Modernized visual style and hierarchy
Final Product
This is the live implementation of the redesigned E.B. Box website. While the overall structure, layout, and visual design are complete, some content remains as placeholders as the client continues to gather final assets such as certifications, awards, images, and videos.
This is the live implementation of the redesigned E.B. Box website. While the overall structure, layout, and visual design are complete, some content remains as placeholders as the client continues to gather final assets such as certifications, awards, images, and videos.
Due to client preferences, some design choices in the final product differ from the original design vision.
Due to client preferences, some design choices in the final product differ from the original design vision.
Visual Style Guide
Visual Style Guide
#000000
#000000
Colour Palette
Colour Palette
CTA Button
Icons
Icons
Logo
Typography
Typography
Heading Font: Helvetica Neue - Bold
Body Font: Helvetica Neue - Regular
Button Font: Helvetica Neue - Bold
Heading Font
Helvetica Neue - Bold
Heading Font: Helvetica Neue - Bold
Body Font: Helvetica Neue - Regular
Button Font: Helvetica Neue - Bold
Body Font
Helvetica Neue - Regular
Button Font
Helvetica Neue - Bold
#0099CE
#0099CE
#F8F8F8
#F8F8F8
#FFFFFF
#FFFFFF
Button
CTA Button
Button
Logo
E.B. Box Company
E.B. Box Company
E.B. Box Company
Website Redesign
Website Redesign
Website Redesign
Design Goals
Communicate the company’s value and credibility clearly through design.
Showcase companies capabilities and diverse box offerings.
Improve visual hierarchy, readability, and overall user experience.
Create a clean, simple and professional look that builds trust.
Implement a contact form for inquires and an easy way to reach company.
Integrate social media link (LinkedIn, Instagram) for better engagement.
Design Goals
Communicate the company’s value and credibility clearly through design.
Showcase companies capabilities and diverse box offerings.
Improve visual hierarchy, readability, and overall user experience.
Create a clean, simple and professional look that builds trust.
Implement a contact form for inquires and an easy way to reach company.
Integrate social media link (LinkedIn, Instagram) for better engagement.
Visual Comparison
Original Homepage
Original Contact Page
Redesigned Homepage
Redesigned Contact Page
Visual Comparison
Original Homepage
Original Contact Page
Redesigned Homepage
Redesigned Contact Page
Visual Comparison
Original Homepage
Original Contact Page
Redesigned Homepage
Redesigned Contact Page