KSL Tunnelling
Responsive Website Design
Role
Solo Designer
Timeline
August - September 2023
Team
UX Analyse
UI Design
Wireframes
Skills
Visual Design
Product Strategy
Storytelling
Project Management
Tools
Framer
Photoshop
Illustrator
Project overview
HAHA GROUP is a one-stop shop for all things agricultural technology in Malaysia. As the authorized agent for NaanDanJain Irrigation Ltd, they offer a wide range of irrigation tools, farm project consulting, accessories, and fertilizers. Their team of experienced professionals provides cost-effective and customized solutions to help farms and plantations achieve optimal results, from concept to implementation.
Full website design
Copywriting
Call-to-Action (CTA) Optimization
Search Engine Optimization (SEO)
Google Business Profile Optimization
Thus, the question asked:
How might we integrate interactive elements and multimedia content to enhance user engagement and accessibility?
SPOILERS
Final recommendations :
1/ Responsive Web Design
2/ New Design Direction
3/ Interactive Features
Take me to the final design recommendations !
01
Understanding Client's Bussiness
RESEARCH
HOW DID I FIRST APPROACH THE PROBLEM SPACE?
Early on in the design phase, we tested the features with a small group. We wanted to see how they would use the site navigation. We noticed that many people would go to the search field and look for the same specific content. I used that insight to make that content as prominent as possible, effectively discouraging people from using the search field. Couraging them to explore more on the main page of the websites.
Research
This includes desk research (competitor and industry) and stakeholder and user interviews. We look at existing analytics and use tracking tools like Crazy Egg and Full Story to give vital information about user behaviour within the existing website.
Site goals review
To fully grasp the existing website's content landscape, I conducted a content audit. This meticulous process involved cataloging all available information and functionalities. Through collaborative discussions with the team, we strategically determined which elements to retain, ensuring a seamless user experience. We then planned the integration of the chosen content within a more intuitive information architecture.
Sitemap creation
I start with identifying key pages (like a contents table), as well as the hierarchy of the pages. With this comes the decision-making process on which pages to keep and remove and may also effect the restructuring of top-level navigation to improve user experience.
02
Piecing It Together
DESIGN PROCESS
Content and SEO
Populate site with content – we work with the client to add the agreed content throughout the site.
Creative and User Interface (UI)
High fidelity wireframes – Start to develop more realistic content, fonts, image dimensions or button styles.
UX and UI designs – Begin building content for the site (animations, photography, copy etc.).
Clickable prototype – I 'm able to easily collaborate with clients and content creators, as all parties can review and explore the draft website.
Website Development
Populate site with content – I work with the client to add the agreed content throughout the site.
Cross browser and device testing – we test that the website works perfectly on all browsers, such as Chrome, Safari, Internet Explorer, Edge or Firefox, as well as across devices, including desktop, tablet and mobile (iOS and Android).
User acceptance testing – we invite small groups of users to our testing lab to gain feedback, create a bug list and discuss any amendments with the client.
03
The Product
LET'S COMPARE AND CONTRAST...
1/ Home Page
Re-curate and completing necessary website contents.
The initial website has no structure and less contents for users to read to. I drafted the copywriting for the website and series of back and forth reviews with the clients were made to ensure i have the accurate representation of story telling that reflects the business.
Omitting Unecessary Page
There were few pages that seems redundant and less appealing as it has so little content. I was guessing that previous designer were waiting the client's content. I decided to group several pages that can be related together so the website will look more put together.
Before…
After…
2/ Project Page
Adding attractive and relevant visuals
The previous project page only listed the projects done by the clients. If the website guests are not familiar with the project they will struggle to grasp the scale of project this client had done.
Combining the project page + gallery page to create a more dynamic page content
After scheming through the gallery, I asked the client if they can categorise the pictures from their gallery according to the project and also additional pictures relevant to the projects. The clients had also helped me to add the on-going project listings and pictures will be added to it gradually as the project progress.
Before…
After…
3/ Services Page
Inserting interactive animation
The previous page contents has too many white space it looks awkward in view. I added a clearer hero image and included clickable pictures for guests to read more on the service details.
Before…
After…
4/ Careers Page
Adding necessary page
I added a job vacancy page for guests to see what are the available openings and its brief requirement for the client's company. The clients asked to include a form directly in the page but alast we agreed to just add a button to the client's email.
Before…
After…
5/ Contact Page
Creating a focussed and simplified CTA
The previous contact page seems fine to me, but I revamp it a bit so that the CTA form and button are more enhanced by limiting the scrolling action for the guests.
Before…
After…
5/ About
Creating a focussed and simplified CTA
The previous contact page seems fine to me, but I revamp it a bit so that the CTA form and button are more enhanced by limiting the scrolling action for the guests.
Before…
After…
04
Final Design Recommendations
SPOILERS
Responsive Web Design
Responsive website design is crucial for modern websites in today's digital landscape. With this, the new website design enhances user experience across different devices, and has better performance optimization, and efficiency which spirals into creating a stronger brand image.
New Design Direction
The new design ideas address existing usability issues, creating a smoother and more intuitive user experience. It also prioritizes mobile responsiveness, ensuring optimal viewing and interaction on all devices.
Interactive Features
There were no interactive features on the previous website. I decided to incorporate some to create a unique experience and prevent passive browsing by the users to keep them immersed in the content and brand experience. The interactive features also set the website apart from static, text-heavy competitors.
05
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.