Designing an online store: UX, UI and the customer journey

Is design the most important part of building an online store?

Building an online store is a demanding and extensive process, but also an enjoyable challenge. Of all the elements involved, the website's design is often one of the most engaging. It comes early in the project and can have a considerable effect on the overall schedule.

Over years of developing online stores, we have identified several design topics that deserve particular attention. They all support the same goal: an attractive, user-friendly store that generates revenue for its owner.

1. The offer and the expectations: defining the design scope

Both sides of a project are satisfied when the result meets or exceeds their expectations. For many clients, the look of the store is especially important, sometimes more important than anything else. It is therefore essential to explain from the beginning what can be delivered within each price range.

The design options described in this article are predefined design, standard custom design, premium custom design and deluxe custom design. Their scope differs, so the applicable package and deliverables should always be agreed for the individual project.

Predefined design

In the SHAPE CORE BASIC package described here, the store uses an existing theme adapted through its main visual elements: the logo, colours, banners and font.

The template already defines the layout of the key pages: the homepage, category page, product page and checkout. On the homepage, for example, it determines the logo position, menu layout, banner sizes and banner positions. On a category page, it defines the filters, sorting and grid or list product views. On a product page, it determines the arrangement of the image, name, description, quantity selector and add-to-basket control.

The colour scheme and logo are adapted to represent the retailer's or brand's identity. Appropriate banners and high-quality product photography help create a modern appearance while preserving a reliable user experience.

At the start of the project, we provide examples of live stores using this design level so that clients can see what it means in practice. The template is responsive and adapts to mobile devices.

Standard custom design

Unlike predefined design, standard custom design creates a new visual treatment from the beginning, using predefined wireframes as its structural foundation. The article describes this level as included in SHAPE CORE ADVANCED without an additional design charge.

The client, project manager and designer first review the wireframes. The designer then prepares a homepage proposal using that structure, the client's instructions and their preferences.

Examples of stores the client likes are helpful, particularly international examples that are not direct competitors. If the brand has a visual-identity manual, its standards are applied throughout the design.

What is a wireframe?

A wireframe is a simplified representation of a future page. It shows the arrangement of images, text, icons and other elements without the finished visual detail. It is generally non-interactive and often has no colour, giving the designer a structural foundation.

A wireframe answers four important questions:

• Content: what will appear on the page, such as images, text, icons, videos and products?
• Structure: where will those elements go? The top of a homepage might include the logo, main navigation, search, basket, favourites, product comparison, contact details and language or currency selection.
• Hierarchy: how will position, emphasis and size communicate importance, for example the relationship between a main banner, secondary banners and featured products?
• Behaviour: how should the elements respond to the user, including sliders, hover states and other interactions?

The standard custom package described in the article includes:

1. Design for up to five homepage block types, such as a header, slider or promotional area, featured products, featured news and a footer. A block type can appear more than once with different content.
2. Application of the approved homepage design to category and product pages, followed by static and general-information pages.
3. Responsive design for mobile phones and tablets.
4. Adaptation of the content layout, font sizes, images and navigation for smaller screens.

One round of homepage design revisions is included at this level.

Premium custom design

Premium custom design goes a step further. It is commissioned separately on request rather than being included in a standard SHAPE CORE package.

The main difference is the creation of custom wireframes and a more extensive page-by-page design process:

1. Custom wireframes for up to five pages selected by the client, such as the homepage, category page, product page, basket, blog, about page or contact page.
2. Two initial homepage design alternatives based on the approved wireframe.
3. Up to three rounds of homepage revisions after the preferred alternative is selected.
4. Design for up to ten homepage block types, such as the header, main menu, slider, promotional area, featured products, news, newsletter registration, benefits and footer. Block types can be reused with different content.
5. Design of the remaining pages using the approved wireframes.
6. One revision round for each additional page design, such as the category page, product page, blog index, article or contact page.

The package also includes:

• Testing and support across Edge, Google Chrome, Safari and Firefox.
• Final functional, user-interface and user-experience checks.
• Responsive design for mobile phones and tablets.
• Adaptation of content layout, typography, image sizes and navigation for mobile screens.

To clarify the homepage process: the client chooses one of the two initial proposals, then the selected direction is refined through up to three revision rounds before work continues on the other pages.

Once the visual assets are prepared, the HTML5 implementation is developed and optimised for loading speed and low latency. Performance also matters for the quality of advertising landing pages. The original article highlights response time, loading of the largest element and completion of page loading as important performance considerations.

Deluxe custom design

Deluxe custom design is the most extensive option. It is agreed separately, with pricing based on project complexity and the working hours required rather than a fixed package price.

The scope described here includes:

1. Design of all store pages, icons, buttons and menus.
2. An introductory workshop where the client, project team and designer examine requirements, reference stores, sector-specific needs and the desired direction.
3. Custom wireframes and designs for the homepage, category and product pages, basket, checkout, contact and about pages, static pages, blog index and articles, customer account, loyalty club and other required screens.
4. The required number of block types across the homepage and other pages.
5. Design of all icons and buttons.
6. Design of the main navigation.
7. Three revision rounds for all page designs.

It also includes the premium package's additional checks, together with user testing and feedback collection before final production.

2. Communication, communication, communication

Efficient communication between the project manager, client representatives and designer is essential if the design phase is to run smoothly and stay on schedule.

A shared project space, often in Asana, makes the to-do list, task owners, required client feedback and deadlines visible to everyone. Combined with regular meetings and feedback sessions, it enables quick revisions and clear changes of direction.

Communication also means explaining important UX and UI principles to the client. This gives each design decision a wider context than simply whether an element looks attractive.

3. What are UX and UI?

User experience and user interface are closely connected disciplines in website and mobile-app design. Together, they determine how the product looks and how it works.

What is UI design?

UI design is the visual appearance of a website, online store or app. It covers banners, clickable buttons, text layout, image treatment, icons and the other elements through which people interact with the product.

UI designers often have a graphic-design background. Their task is to combine colours, shapes, button sizes, typography and other components to create the intended impression.

What is UX design?

UX concerns the user's experience and the way they interact with the store. Logical navigation and a smooth journey are very different from an interface that feels disorganised or unplanned.

UX defines the structure, functionality and behaviour of the interface. Put simply, UI focuses on appearance, while UX focuses on how the experience works.

Experience across many projects and ongoing attention to user-experience research help us guide the design process. Our role is to accommodate the client's wishes while maintaining a high standard of usability.

4. The elements of online store design

Before looking at individual pages, it is worth considering a quality that every part of the store should support: trust.

Trust and security

A store can look excellent, but customers will not buy if something makes them suspicious. People care about their privacy, the protection of their personal information and the security of payment.

To build confidence:

1. Clearly identify the company behind the store, including its name, Croatian tax identification number where applicable, address, contact email and telephone number.
2. Link to the store's social-media profiles.
3. Introduce the team with appropriate photographs and information.
4. Explain privacy, personal-data processing and data protection clearly.
5. Make payment, delivery and return terms easy to find in several relevant places. Be transparent about all three.

Use ordinary language that customers can understand, rather than filling general-information pages with unnecessarily complicated legal wording.

Use a valid certificate for an encrypted HTTPS connection. Display security or certification marks only when they genuinely apply to the store.

The original article gives Certified Shop by sMind and Safe Shop by eCommerce Hrvatska as examples of recognisable regional trust marks. A genuine certification can support credibility.

The rest of the content should also look professional and reliable. Do not publish unchecked machine translations. Have spelling and grammar reviewed when needed, use photographs you are entitled to use, and remove broken pages, empty content positions and unverified information.

Once these foundations are in place, reinforce them with truthful reassurance messages on the homepage, category pages and product pages.

What do we design?

The homepage

First impressions form very quickly. The original article cites the first 50 milliseconds as a reminder of how little time a homepage has to establish an impression. It should capture attention and make the product range and market position immediately understandable.

A luxury designer-jewellery store should feel different from a local health-food shop. Typography, colour, photography and calls to action should communicate the brand's positioning.

Remember that every store is also selling its own retail brand. It may stock many well-known manufacturers, but the customer's willingness to buy depends heavily on their perception of the retailer.

A quick homepage check:

1. Is it immediately obvious that this is an online store?
2. Is it immediately clear what the store sells?
3. Does the first impression communicate budget, mid-market or premium positioning?
4. Is there a clear action above the fold, such as “Buy”, “Add to basket” or “Explore the offer”?

If the answer to all four questions is yes, the homepage has a strong foundation. If not, discuss how the first impression could be improved.

Product search and category browsing

Product search deserves careful attention during an eCommerce project. From a design perspective, there are three common ways to present it in the header:

1. A magnifying-glass icon.
2. A magnifying-glass icon with a text input.
3. A prominent search field.

The best option depends on the assortment and the navigation structure. Search does not necessarily need an identical position on every page, but frequent changes can work against the habits users develop.

The original article cites UX research suggesting that as many as 60% of mobile shoppers go directly to search. Its practical recommendation is to make mobile search clear, generously sized and readily available throughout the store.

Think of categories as departments in a large physical shop. They can be organised by audience, brand, product type or season: men's, women's and children's ranges, household appliances, Christmas products or camping equipment from boots to metal mugs.

A suitable platform should make it straightforward to create or reorganise seasonal and permanent categories without manually rebuilding every product URL or filter connection.

Categories should be clearly presented and easy to select. Avoid menus that users have to chase across the screen with a mouse. Keep the hierarchy manageable: the familiar three-click principle is a useful design prompt, and too many subcategories can be as confusing as too few.

The product page

Once a visitor reaches a product page, the main objective is to help them decide whether to add the product to their basket.

People should not have to work out how to take the next important step. Use clear primary actions such as “Buy” or “Add to basket”. Position them prominently, ideally without requiring scrolling, and make them visually distinct through appropriate contrast.

Present the essentials first: photographs, a short description, price and key characteristics. Follow with a more detailed description, specifications and customer reviews so visitors can find what they need without leaving the page.

Reveal the detail in a considered order. Put the most important information near the top, divide long descriptions into sections with meaningful headings, and use tabs or expandable areas where appropriate. This supports exploration without overwhelming the customer.

When a product is added to the basket, provide clear confirmation that the action succeeded.

The basket

1. Show an understandable order summary with every product, quantity, individual price, total, applied discount and, especially, the delivery or collection charge.
2. Let customers change quantities or sizes, remove products and move products to favourites from the basket itself.
3. Place the next primary action near the total. Labels such as “Complete purchase”, “Pay” or “Continue to checkout” make the next step clear.

The checkout process

Should checkout be as simple as possible, or offer more choices? Should it fit on one screen or use several steps? There is no universal answer, but several principles are broadly useful.

1. Allow guest purchases. Mandatory registration can interrupt customers who want to make a quick purchase. A guest option removes that obstacle.
2. Show progress. A step counter such as “2 of 3” or a progress bar tells customers where they are and how much remains.
3. Offer appropriate payment choices. Consider locally familiar options as well as standard card payments. The original article gives KEKS Pay and Paycek cryptocurrency payments as examples to evaluate for the intended market.

The customer account

Retailers with a high proportion of repeat customers should pay particular attention to the account area. It should make it easy to review previous orders, arrange returns and contact support.

The article uses About You as an example of a retailer combining personalised marketing with a convenient returns process and a clear overview of customer activity. These elements support the ongoing customer relationship and lifetime value.

If the store has a loyalty programme, the account is the natural place to explain membership benefits and show the information customers need to use them.

Use branding and interface components consistently so the experience feels coherent throughout the shopping journey.

The main design principles to remember

1. Set clear expectations that match the agreed development and design package.
2. Maintain open communication and regular feedback throughout the design phase.
3. Address both UX and UI. A strong online store needs an effective combination of the two.
4. Review the design across every key page: homepage, category, product, basket, checkout and customer account.

These principles make a project easier to deliver. Design is never permanently finished, however. It should continue to evolve as customer expectations, performance data and the business itself change.