Solo Designer
August - September 2023
UX Analyse
UI Design
Wireframes
Visual Design
Product Strategy
Storytelling
Framer
Photoshop
Illustrator
Project overview
LTCC Pte Ltd is a frontrunner in the construction industry, specializing in build-only construction, maintenance, and renovation services.
The company seeks to enhance its online presence and attract new clients by developing a compelling landing page and optimizing its Google Business Profile (GBP).
Over a four-week period, I crafted all the website pages and collaborated closely with developers to achieve their intended visual outcome. The successful completion of the project, fulfilling its primary objective, brought immense satisfaction.
The Design Mission
How might we create a visually appealing and memorable website that reflects the organization's brand identity?
01
Understanding Client's Niche
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 business model, lead generation strategies, and overarching goals, ensuring the website design is tailored to seamlessly support their vision and empower the clients. Through engaging discussions and creative brainstorming sessions, I have delved deeper into their unique value proposition and overcome any initial learning curve with agility.
2/ Site goals review
I have set some time to investigate the client and business needs that the website must address, and what functionality is required to achieve this.
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/ Wire framing
I embarked on the crucial step of wireframing the website's structure after the sitemap and content strategy has been firmly established.
This allows me to meticulously curate the content on the landing page, ensuring a seamless and intuitive user journey. Secondly, it provided the users with a clear visual roadmap of the website's architecture, fostering open communication and rapid iteration to refine the user flow and achieve an optimal experience for all users.
The wireframe was done in Framer.
2/ Design & Developement
I orchestrate a visual symphony of colors, imagery, fonts, and icons that capture their essence by selecting accessible, uplifting, and friendly sans-serif font, subtly mirroring the organization's optimistic vision. The vibrant color palette echoes this sentiment, anchored by a bright red hue.
The website's front-end is built within Framer, which allows me to craft a responsive framework. This ensures a seamless and adaptable experience for all visitors, regardless of their device or screen size. Whether they're browsing on a desktop, tablet, or mobile phone, they'll encounter an optimized display and intuitive navigation.
3/ Test & Launch
Following the planning, design, and development process, I conducted rigorous testing across diverse mobile and desktop devices and browsers. This rigorous testing ensured a universally accessible and seamless experience for all users, regardless of their technology.
Throughout the project, I learn how to adopted 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 minimized 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
Beyond the initial project scope, there are ongoing monthly tasks associated with this project, such as:
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.