I’m not sure exactly when, in web development, one realizes that a page needs a graphic and/or UX redesign.
One thing is certain: you can’t just change everything and start fresh as you would with a brand-new page. Regular users have already established habits, and disrupting those habits is something to avoid. Otherwise, users will be unhappy—and rightly so. Who hasn’t grumbled when looking for their jar of jam, only to find it moved three aisles over in their local supermarket?
Since I joined Babbar, YourTextGuru has undergone several redesigns. If you’re not a fan of these graphic changes, well, I might be partly to blame—sorry about that…
The first redesign came with a new version called YTG 2.0, which was more focused on content strategy and, above all, aimed to bring a fresh and modern touch. I’ll let you judge for yourself.
Then there were more targeted redesigns on individual pages. These are the cases we’re going to focus on.
Definition of a graphic redesign
Previously on YourTextGuru (the veterans will remember 👴), you would land directly on the guide list page after logging in. That was the historical homepage. But with the new content strategy-focused approach, the YTG team wanted this entry page to reflect the “project” workflow.
But first, what exactly is a graphic redesign, and why is it done?
A graphic and UX redesign of a website involves revisiting its visual appearance and user experience to better meet user needs while staying aligned with strategic objectives.
There are several reasons to undertake a redesign:
New features to introduce.
User feedback (navigation difficulties, comprehension issues).
Design obsolescence (outdated aesthetics, visual inconsistencies).
Technological or usage evolution (mobile-first, speed improvements).
Engagement metrics (high bounce rate, low conversion).
Key steps to successfully achieve a graphic and UX redesign online
When undertaking a graphic and UX redesign online, it is crucial to follow specific steps to ensure an optimal outcome. The first step involves conducting an in-depth analysis of the existing graphical interface. Identifying weaknesses and areas causing user frustration will help pinpoint improvement opportunities. This analysis should also include an evaluation of the product’s strategic objectives to ensure that every change aligns aesthetics, functionality, and performance.
Next comes the prototyping phase, where the first versions of the new graphical interface are sketched. These prototypes allow for visualizing adjustments and testing modifications with a small group of users before a full-scale rollout. A successful product strikes a balance between innovation and continuity while meeting the expectations of the users who interact with it daily.
The role of colors and visuals in UX
We generally start by displaying the main blocks of elements. Then, we like to add some color—a dashboard can quickly become monotonous. Ideally, with a screenshot of a page, someone familiar with the tool should be able to identify where it was taken.
I’m not saying you should use color excessively. It can be introduced in various ways: through images, background colors, charts, or even simple emojis.
Color can have meaning, and it SHOULD often have meaning. It helps to structure information, evoke emotions, and guide the user’s eye.
For example, if you assign a color to each person in a tool like a calendar, avoid also assigning a color to each event type in that calendar. Similarly, don’t use a green button to save something on one page and then use it on another page to display a tooltip.
In my personal life (mostly from women, to be fair), I’ve often been told not to wear more than three different colors in an outfit, but not to go full monochrome either (shoutout to Neo in The Matrix 🕶️). I think it’s the same in web design—stick to a maximum of three colors (light backgrounds don’t count unless they’re unusual, like black).
Pastel tones are trendy these days, but feel free to let your inner artist shine. However, the most important thing to remember—unlike painting—is that your design needs to appeal to the widest audience, not just to you. Sure, green on a black background might look aesthetic and to your liking, offering a unique style compared to competitors. But it will alienate a significant portion of visitors to your site. Beyond your content or offerings, the first impression of a website is visual.
The goal is to sell, so don’t drive away potential buyers with an overly eccentric UI.
Focus on the Impact of UX Changes on Regular Users
As I mentioned earlier, the historical homepage was the guide list. It is crucial for users to retain their bearings despite an interface change. Therefore, it was necessary to add several shortcuts leading back to this page, even if they became more prominent than other elements. There’s nothing more frustrating for a user than wasting time searching for a feature they’re accustomed to using.
Overall, it’s essential to identify which elements to preserve to avoid disrupting the user experience.
At the same time, don’t neglect new features. Users have habits and are often reluctant to step out of them to try new things. I’ll use the supermarket analogy from earlier in the article because I find it quite relevant: you’re used to buying a specific brand of spread in a certain aisle. What might prompt you to try a different brand is its placement either at the store’s entrance or at the aisle’s endcap, possibly with a discovery discount to catch your eye. If the new brand is buried in the aisle, you’ll likely never notice it.
Similarly, if the store introduces a new line of toast products, it won’t just place them in the bread aisle. Instead, they’ll be positioned along the path to the spreads section, as you are likely the target buyer for this new product line.
On the web, the homepage is an excellent way to showcase a new feature. On YTG’s new landing page, we wanted to highlight the ability to search for metrics on a host or a keyword. It was clear that we needed to add two search fields, visually enhanced, as you can see below, with avatars of our two key figures, Sylvain and Guillaume Peyronnet. Additionally, at the top of the page, we included a summary box highlighting recent updates and new features, presented by Pierre Calvet.
Influenception: The Influence of Influence
As I mentioned earlier, images can add a touch of originality to a page that might otherwise feel too plain. However, these images must be consistent to maintain visual harmony. There’s nothing worse than tools with profile pictures where some are pixelated or black-and-white, while others are vibrant and high-definition.
We opted for illustrated avatars, as they better align with the visual coherence of our tool. Allowing the avatars to break out of their rectangles also adds a bit of depth to the page.
A quick aside: personally, I like to highlight personalities connected to the tool. I’m not a strong advocate of the “influencer” generation, but I think it’s important to have recognizable figures within an application that provides advice and analysis, like YTG does.
In today’s world, it’s valuable to showcase and promote people with expertise by featuring them in the tool. It immediately adds a human dimension to the experience.
Measuring the success of the redesign
After the launch and testing, the next step is to gather user feedback to refine the redesign. Don’t hesitate to monitor social media or sort Google/YouTube results by recent date to catch any user insights or reviews that may have been published.
Other useful indicators include key performance metrics (KPIs): click-through rates on homepage buttons, time spent on the page, and more.
The purpose of a redesign
In conclusion, a graphic and UX redesign is not just a fresh coat of paint to modernize a website. It’s a strategic opportunity to transform the user experience, enhance engagement, and stay competitive in an ever-evolving digital environment. By listening to your users, analyzing current performance, and making thoughtful design choices, you can not only improve your site’s aesthetics but also maximize its effectiveness. So, don’t be afraid of change!
