Overview
Harbour Creative is a Malaysian branding and illustration studio known for its vibrant and bold visual identity. The goal of this project was to create a professional website to streamline client interactions and showcase their portfolio cohesively, emphasizing their expertise in illustration and branding.
©2021
My Role
As the UI/UX Designer, I handled the design process from moodboards and wireframes to interactive prototypes. I worked closely with the team, especially the illustrator and branding designer, to ensure the website aligned with the studio’s branding goals. I also built the website layout on Editor X, focusing on responsive design and ensuring usability across all devices.
Team Involved
- Helmy: Manager
- Iqbal Hakim Boo: Illustrator & Brand Designer
- Zulaikha Salim: UI/UX Designer
- Ilyah Nazrah: Copywriter
Problem
Previously, the studio relied heavily on platforms like Instagram, Behance, and Dribbble for client communication. While these platforms showcased their work, they lacked the professionalism needed to build client trust. Without a central portfolio, it was challenging to present their services cohesively. A dedicated website was essential for improving engagement and establishing a professional presence.
Challenges
- Effectively showcasing Harbour Creative’s core services—illustration and branding—in a way that resonated with their audience.
- Navigating the learning curve of using Editor X for the first time, which required exploration and adaptation to its unique features.
01.
Action
I conducted interviews, brainstorming sessions, design reviews, and testing to align with project goals.
Analysis, Experiments & Testing Prototyping
Created a sitemap, moodboard, and low-fidelity wireframes to guide the design process. I researched and took inspiration from other agency websites, identifying best practices and opportunities for differentiation.
Internal Testing & Refinement
Developed high-fidelity wireframes using Adobe XD, and created interactive prototypes. We tested the prototypes with the team before finalizing the designs.
View the Prototype
02.
Solution
Building a brand Story Through illustration
One of our primary goals was to create a proper online home for Harbour Creative. The homepage was maximized to showcase stunning illustrations, reflecting the studio’s brand philosophy: “BAD BRANDING IS A VILLAINOUS CRIME.”
In this phase, we tested and refined the designs using the staging environment in Editor X, exploring creative solutions based on feedback.
Visual Highlight
Through user testing, we iterated on the design to highlight the best of the studio’s portfolio, allowing for continuous user feedback and iterative improvements. The updated portfolio section helped provide more context and a better browsing experience.
Development
I built the website layout using Editor X, ensuring usability across mobile, tablet, and desktop. I also focused on providing a seamless user experience across all devices.
Mobile First
The entire site was designed responsively to provide the best browsing experience while keeping the primary features intact.
User-Friendly Features
We focused on enhancing the user experience by simplifying client inquiries. After testing various options, we added a floating “HIRE US” button on every page, ensuring it was always visible and easily accessible. Feedback confirmed that users appreciated how the button made it simple to reach the inquiry page without scrolling or searching.
Alongside this, we designed a user-friendly inquiry form, requiring only short details, making it easy for potential clients to submit requests. This combination of a clear call-to-action and intuitive form significantly improved the website’s usability and engagement.
03.
Impact
Unlocking Success Post-Launch
The website successfully facilitated client inquiries, leading to valuable NFT illustration projects through the built-in form.
Featured on WIX platforms as an inspiring example of creative web design.
Earned recognition in “Wix Partner Website Designs That Stood Out in 2022,” solidifying its position as a standout branding studio.
Personal Takeaway
This project demonstrated the power of a well-designed website in enhancing client engagement and showcasing a brand’s core values. By focusing on a user-friendly experience, clear calls-to-action, and responsive design, we were able to create a platform that not only reflected Harbour Creative’s brand identity but also drove real business results. The feedback and success post-launch affirmed the importance of aligning design with client goals and user needs, reinforcing the value of thoughtful, iterative design.
Collaboration Shoutouts
A special thanks to the team for their exceptional collaboration: Iqbal Hakim Boo, Helmy, and Ilyah. We would also like to acknowledge our testing team, Maman Rosnan, Katun, and Idzhar, for their valuable input throughout the process.