KSL Tunnelling
Responsive Website Design
Solo Designer
August - September 2023
UX Analyse
UI Design
Wireframes
Visual Design
Product Strategy
Storytelling
Framer
Photoshop
Illustrator
Project overview
KSL Tunnelling, a leader in the tunneling industry, tackles projects of all sizes and complexities with their team of seasoned experts. To reflect their distinguished brand and collaborative spirit, I redesigned their website, focusing on visual appeal and user experience.
Starting with careful color palette and typography selection, I established a strong artistic direction that aligns with KSL Tunnelling's brand identity. I then created a comprehensive set of website mockups, encompassing wireframes, UI designs, and mobile-optimized versions.
Utilizing Framer, I brought these mockups to life, ensuring a seamless user experience across all devices.
The Design Mission
How might we integrate interactive elements and multimedia content to enhance user engagement and accessibility?
SPOILERS
Final recommendations :
Responsive Web Design
New Design Direction
Interactive Features
01
Understanding Client's Bussiness
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.
Research
This includes desk research (competitor and industry) and stakeholder and user interviews.
Site goals review
I have set some time to investigate what customer and business needs the website must address, and what functionality is required to achieve this.
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 by Framer – 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 further amendments with the client.
03
The Product
LET'S COMPARE AND CONTRAST...
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…
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…
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.
After…
Before…
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.
After…
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…
04
Final Design Recommendations
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
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.