Our process of designing a new website

1. We started with the question: What should the website achieve?

Before we sketched the first screens, we defined what the website should accomplish. For us, it was clear - it must clearly explain the entire product, showcase the benefits of loyalty cards, and present a modern and simple appearance.

All of this should look equally good on mobile and desktop.

2. We created a clear content framework

We defined the main sections of the website and considered the order in which they should be displayed, to help visitors understand the product the best way possible. We knew that what works on desktop may not be as effective on mobile, so from the start, we planned the information to be concise, clear, and easy to read on any device.

3. We designed mobile and desktop in parallel

We didn’t take the traditional route of designing the desktop first and then scaling down. We designed each section in parallel, so that no information or experience was withheld from the visitor.

4. Optimization of speed and performance

Before launching, we tested the website on various devices and showed it to people from different age groups. We were interested to see if users could navigate the site easily regardless of age or device. Thanks to this, we could adjust small details that improved the overall experience for everyone.

Why the website must be consistent across devices

Most readers today primarily visit websites via mobile. Despite that, many websites are still designed as desktop projects which are later adapted to smaller screens. This often leads to mobile versions feeling like they lack information, are incomplete, or simply do not function naturally.

Users enjoy browsing the web on mobile, and if the content appeals to them, they will return to it later on a computer. If the web experience is different on each device, users can easily lose orientation or trust. Consistency is therefore key, not only visually but also functionally and content-wise.

When designing a website that works equally well everywhere, it’s good to keep a few principles in mind:

• Clear and consistent navigation - users should be able to navigate intuitively regardless of whether they are on mobile or desktop.

• Visual unity - colors, typography, and overall style should be consistent across all devices.

• Maintaining content structure - the order of sections and key information should always be in the same place or follow the same order.

• Customized interactions based on device - swiping and horizontal scrolling on mobile, wider layouts and hover effects on desktop.

• Performance optimization for each device - loading speed is even more crucial on mobile, so ease and efficiency of the website must be considered.

If these principles are adhered to, users will remember the site as clear, reliable, and comfortable, no matter where they open it. In a time when mobile is the primary device for most people, this is essential for a good website to exist.

What we focused on to make our website truly mobile-friendly

Interaction with the website is important; clickable elements must be large enough and spaced apart to prevent accidental clicks. Navigation should be simple, clear, and not require too many steps to obtain needed information.

In designing our new website, we focused on several key principles that ensure an exceptional mobile experience. One of the main elements of our design is what we call bento grids. On computers, they are displayed in a standard grid layout, which is clear and aesthetically pleasing.

On mobile devices, we designed the bento grids to be scrollable side to side, maximizing space utilization and improving user experience. This solution allows users to easily navigate content without losing clarity, while maintaining a modern and organized look.

In addition to bento grids, we emphasized structure and readability for mobile optimization. Each section is visually separated, with sufficient spacing added between blocks to enhance clarity. Headings are set to clearly define the beginning of a new topic, making navigation quicker during scrolling. Texts are adjusted in size and line spacing on mobile to ensure they are comfortably readable on smaller screens. We also increased the size of clickable elements and adjusted their dimensions to be easily operable with one hand. These adjustments together ensure that the website provides a consistent and intuitive experience regardless of the device.

Conclusion: A website that works equally well everywhere

Designing a website that functions just as well on desktop as on mobile requires more than just technical responsiveness. It’s about understanding user behavior, thoughtful structure, and the details that determine whether someone can truly navigate the site.

You can see the result directly on our new website: www.vexioncards.one - whether on a computer, mobile, or tablet.

If you have feedback, suggestions for improvement, or if you would like to learn more about our product, feel free to write to us at info@vexioncards.one.