Tunnel Fluids Pte. Ltd.
Responsive Website Design
Role
Solo Designer
Timeline
August - September 2023
Team
UX Analyse
UI Design
Wireframes
Skills
Visual Design
Product Strategy
Storytelling
Tools
Framer
Photoshop
Illustrator
Project overview
Tunnel Fluids was established several years ago but it lacked any sort of branding and style-guide. It also lacked an online presence, including a proper website, social media that present their service well to a wider audience.
My role is to craft and launch a centralized website, providing easy access and navigation over the company's various services, serving as a comprehensive repository.
Over a four-week period, I crafted and developed the website page to achieve their intended visual outcome. The successful completion of the project, fulfilling its primary objective, brought immense satisfaction.
Thus, the question asked:
How might we leverage the website to build trust and credibility with our target audience?
01
Understanding Client's Niche
RESEARCH
HOW DID I FIRST APPROACH THE PROBLEM SPACE?
The journey begins with a collaborative stakeholders meeting, to immerse myself in the heart of the client's business.
1/ Research
I actively explore the nature of their business, the data and documentation they shared and also googling their possible competitors to know the minimum kind of information required to be on the landing page and how to strategies the content to be more appealing.
2/ Content Audit
I conducted a content audit To gain a comprehensive understanding of the existing website and its content,. Through collaborative discussions with the team, we strategically determined which elements to retain, which to remove, and how to integrate the remaining content within a more intuitive information architecture. The main issue found from the audit was :
a) Content lack value : The landing page should express the power and the simplicity of the product. like add more visualisation, content flow and hierarchy
b) Discoverability : Add a sample project
3/ Sitemap creation
The collaborative process culminates in a well-structured sitemap architecture, the foundation for a user-friendly and goal-oriented website that drives success for the company.
02
Piecing It Together
1/ Design & Developement
I struggle designing this website because the company has no design guidelines to follow. The logo given was monotoned but they prefer the website to have thematic shades or color to it. That's fine and I take it as a problem to be solved later, as I can focus on building the structure of the website, the Lofi design, and animation first.
I started with low-fi prototypes and tested them quickly with users to hash out how I thought the flow should work. Once I had worked out the high-level overview, I iterated over the details together based on back-to-back comments session.
To be honest I made several color options for the boss to choose from. (Highly not recommended!) But during that time, due to time contain this was the only option I could think of.
From the selected color scheme, I progress forward to a visual symphony of colors, imagery, fonts, and icons that capture the essence of the organization's optimistic vision. The vibrant color palette echoes this sentiment, anchored by a bright red hue.
See the other color option I made for the website***
3/ Test & Launch
We tested the site on different devices to ensure a no glitch and smooth launch, even Android & iOS.
Throughout the project, I learn how to adopt an Agile/Scrum methodology, fostering tight collaboration with the client. This collaborative approach allowed me to seamlessly integrate their feedback throughout development, delivering polished elements and pages ready for launch with minimal adjustments.
By incorporating early testing and client feedback, we can effectively minimize the risk of last-minute surprises.
03
Reflections, reflections
As a person who is new with this web design field, I was extremely anxious to deliver all 6 websites in 3 months. Here's some of the reflections I learn while designing my forth website.
Wearing Multiple Hats :
Being The Designer and Developer At The Same Time
1/ Fear of being "a master of none"
Frequent context switches between creative bursts and technical problem-solving can be mentally taxing. Often I feel I might ended up as a "master of none" in both realms, potentially sacrificing depth for breadth. However, by exercising good time management, spending more hours late night to do more research, I'm glad I've found a delicate balance between both worlds.
2/ Understanding SEO, Google Search Console and Google Business Profile
When I first published my 4-first-websites, I didn't know anything about websites. And no surprise, all the 4 websites didn't show up on google. Its been a lot of trial and error for me to figure myself out how to fix this issue but I'm glad after all the Youtube, reels and Tiktok's binge watching, I finally are able to see the websites rank went higher day by day on the google search engine.
3/ Web Page Optimisation
I tried to find a way to make the landing page performance as best and possible, that's when I find out about Page Speed Insights which helps me a lot to monitor the page's performance and see if there is any fix or improvement that can be done for both desktop and mobile version of the landing page.
04
Post Design Commitments
SPOILERS
1/ Monitoring and maintenance
This includes keeping the website up-to-date with the latest security patches and software updates, as well as fixing any bugs or glitches that may arise.
2/ Content creation and updates
This could involve adding new blog posts, articles, or other types of content to keep the website fresh and engaging.
3/ Search engine optimization (SEO):
This involves optimizing the website's content and structure to improve its ranking in search engine results pages (SERPs).
4/ Social media promotion
This involves promoting the website on social media platforms like Facebook, Twitter, and LinkedIn.
5/ Analytics and reporting
This involves tracking website traffic and user behavior to measure the effectiveness of the website and make improvements as needed.