When There's A New More Specialized Services, There's A Website Redesign and Revamp
Maybe you don’t know the previous interface and visual appearance of my website before I redesigned it. You can see the “Hero Section” of my previous website below:
At a glance, perhaps you can see that my previous visual appearance is more engaging. But sometimes the labels on the header navigation menu are not clear enough for some people, although I ‘cover’ it with a darker effect. That’s why I decided to change the header appearance, which is no longer transparent.
For an in-depth story, I’ll tell you on the next section below.
The Story Behind This Website Redesign
I started my remote career as a virtual assistant (VA) who mainly does admin tasks and social media management. However, before I became a VA, I once helped a client build his website to sell a herbal product that can boost the human immune system during the post-COVID period.
Apart from that, during my remote career as a VA, I also craft articles about working productivity for remote workers, as I love writing. Until one day, I learned about SEO (Search Engine Optimization), and I was instantly interested in it. I applied what I learned in my articles since then.
And then I get a job from my latest client to create weekly articles using SEO approaches. It then strengthened my knowledge in SEO, from the basics to the advanced level.
Actually, I created SEO-based articles every week, but then I realized that I have natural skills in design systems and flows, as well as building a website, so I decided to switch my specialty to UX Design with SEO approaches, since many people are currently emphasizing the importance of SEO approaches and best practices when designing and building a website.
However, because few people have skills in both areas, I decided to focus on those areas, particularly where they intersect. This was an excellent opportunity for me to contribute further to the development of my clients’ business websites.
As a Digital Experience Architect, I bridge the gap between UX Design and SEO Strategy that will provide value to company branding activities through digital media, especially through websites or applications.
These Are The Points I Went Through During The Redesign Process
Problems:
– The first edition of my website was built without robust SEO fundamentals and quite ignored technical SEO as well. That’s why I struggle to get visitors. I will start over again with new positioning, keywords, and content strategy.
– The practice of the UX and UI was applied, but I need to know whether “do they go well or not?” by conducting a UX audit, and then fixing any issues that arise, with a new face.
My goals for this website redesign are:
– More responsive design.
– Increase traffic up to 100 visitors/month and get some potential leads/book my service.
What happened during the process?
– I conduct a comprehensive UX and SEO audit, covering both the basic and more technical aspects.
– Then, based on the results’ report, I tried to redesign the new version of my website to be more responsive, using SEO and UX best practices.
Here Are The Steps I Did
Redesign focuses on refreshing the site’s layout, navigation, and overall look to make it more engaging and user-friendly. Meanwhile, revamp involves deeper improvements, such as optimizing site speed, restructuring content architecture, enhancing SEO, and integrating better UX practices. Together, these efforts ensure the website not only looks modern but also performs efficiently, aligns with user expectations, and drives higher conversions. To know about the redesign and revamp process I went through, the steps are as follows:
SEO Audit
Actually, I took many steps when I conducted an SEO audit for my website. But I want to show you some of them that have a big impact.
It began with a site performance test using SemRush, which revealed that my desktop load time was slow. After utilizing Screaming Frog, I discovered that several photos on my website are larger than 100 kB in size. This circumstance contributed to a slow loading time, which may result in a high bounce rate.
Core Web Vitals Checking
Then I continued with the Core Web Vitals checking process to examine the website’s page speed using Page Speed Insight in the first image and in Chrome Dev Tools (Inspect Area) in the second image. Actually, this process is still part of the SEO audit process.
The recommended solution is to compress the image using some recommended image compression plugins on WordPress. Currently, I use Shortpixel to overcome those kinds of issues.
The UX Audit
From the first image, I conducted the Heuristic Principles evaluation. The result of the first principle is that the site’s navigation is strong, with clear indicators of the user’s location, a logical hierarchy, and well-structured categories that avoid overlap. However, it lacks an easy way for users to return to the previous page, as navigation options mainly redirect to the homepage.
That’s why I add breadcrumbs to enhance the overall user experience by making navigation smoother and more intuitive.
For the second image, I checked its accessibility, which revealed that the primary issues were related to readability, alt text, or structural elements. While overall, the accessibility was quite good, it needed improvement in contrast and structural consistency due to the low color contrast, which could negatively impact users with visual impairments.
The recommended improvement was to improve the image’s contrast level to increase inclusivity and ensure better compliance with WCAG standards.
Redesign Website Using UX Approaches
Based on the audit results and the need for new positioning, I created a new sitemap, which I ultimately incorporated into wireframes at various levels and also prototyped.
UX design means that we not only design the flow, but also design the system, such as global typography, colors, etc., as part of the UI, because UI is also part of UX.
Overhaul Content Strategy Using SEO Methods and Approaches
Content strategy for a website consists of various processes, such as creating content pillars, content silos, heading structure, meta tags, etc.
This content silo table outlines the core pillars, sub-topics, and keyword mapping that guide the website’s redesign. It ensures a structured content strategy that strengthens SEO, improves navigation, and delivers a better user experience.
The Development and Migration Phase
Next comes the development phase. At this stage, the new design is implemented on the chosen platform (WordPress, Shopify, or a custom CMS). This includes technical optimizations such as caching, image compression, clean code structure, and schema markup to improve performance. At the same time, essential tools like analytics, SEO plugins, and marketing automation are integrated to support tracking and growth.
Once the design and technical setup are complete, the content migration phase begins. This involves updating or moving existing content while maintaining a consistent URL structure, implementing 301 redirects where necessary. Additionally, on-page SEO best practices are implemented, including optimized titles, meta descriptions, headings, and alt text, to ensure user experience and search visibility are maintained.
Disclaimer:
Currently, the design process is 90% complete (the final stage of development and migration). After that, it will continue with further testing.
