01
Template-based experience
The store was functional, but key areas still resembled a standard WooCommerce setup and needed a more refined visual direction.
I redesigned and implemented key parts of a live jewellery e-commerce store, focusing on product discovery, gift personalisation, cart clarity, delivery selection and a more guided checkout experience.
KIANU is a jewellery e-commerce store built on WordPress, WooCommerce, Elementor and WoodMart. The store was already live, but the client wanted its shopping experience to feel less generic and more consistent with a premium jewellery brand.
My work focused on several high-impact areas of the purchase journey: product discovery, gift personalisation, cart and mini cart, delivery selection and checkout.
Instead of redesigning the entire store from scratch, I refined the moments where users search for products, review their selections and make key purchase decisions.
KIANU was already operating as a live WooCommerce store, but selected parts of the shopping experience still felt generic and did not fully reflect the character of a premium jewellery brand.
The store was functional, but key areas still resembled a standard WooCommerce setup and needed a more refined visual direction.
Cart, delivery and payment information competed for attention, making the path to completing an order harder to scan.
Dedication, packaging and ribbon options had to remain accessible without overwhelming the product page with additional controls.
Every improvement had to work with the existing theme, plugins, WooCommerce logic and live production environment.
I worked across both UX/UI design and implementation. My role was to translate the client’s expectations into practical improvements that could be introduced safely within the existing WooCommerce store.
Selected solutions were explored in Figma, while smaller interface refinements were designed and tested directly during implementation. This allowed me to adjust the experience to real content, responsive behaviour and technical limitations.
Improving information hierarchy, shopping decisions and visual consistency across key parts of the purchase journey.
Designing interface states for gift personalisation, product discovery, cart actions and delivery selection.
Implementing and refining solutions using WordPress, WooCommerce, Elementor, WoodMart and custom front-end adjustments.
Working directly with the store owner to turn business needs and quality expectations into production-ready improvements.
Existing WooCommerce structure and store logic
Compatibility with the WoodMart theme and active plugins
Changes introduced without rebuilding the entire store
Production stability across desktop and mobile devices
The redesign was guided by a small set of principles that helped maintain consistency across product discovery, personalisation, cart, delivery and checkout.
The aim was to reduce interface noise while preserving the elegant and restrained character of the KIANU brand.
Make the most important information and primary actions easier to identify at every stage of the purchase journey.
Show additional options, such as gift personalisation, only when users need them instead of displaying every control at once.
Use repeatable layouts, selection states and action styles across the cart, delivery and checkout to reduce uncertainty.
Keep the interface calm and refined while ensuring that visual minimalism does not hide important shopping information.
These principles became the foundation for the individual improvements presented in the following sections.
Product discovery was designed to help users move naturally between browsing, searching and exploring related products without losing context.
Search results, suggested phrases and product recommendations were brought together in one consistent discovery layer.
Large product imagery and restrained interface elements keep
attention on the jewellery while filtering remains accessible.
Users can review matching products without immediately leaving the page or losing access to the main store navigation.
Suggested phrases and recommendations help users who know what type of jewellery they want but have not selected a specific item yet.
A dedicated action connects the search preview with the complete results page when users want to explore more options.
Gift personalisation was an important part of the shopping experience, but displaying every available option directly on the product page would add visual noise and compete with the primary purchase action.
I moved the personalisation controls into a dedicated popup opened from a single action on the product page. Users can add a dedication, choose the box and ribbon colours, and confirm their selections without losing the product context.
Additional choices appear only after the user expresses an interest in personalising the gift. This keeps the default product page focused while preserving access to the complete set of options.
A single secondary action keeps the product page focused while making gift options easy to access.
The personalisation interface adapts to desktop and mobile while preserving the same options, hierarchy and confirmation flow.
The completed state summarises the selection and gives users clear options to edit or remove it before adding the product to the cart.
A single secondary action introduces gift personalisation without competing with the main add-to-cart button.
The popup groups the dedication, box and ribbon options into one focused task with an immediate visual preview.
After confirmation, the product page displays a compact completed state with clear options to edit or remove the personalisation.
The complete feature remains accessible while the default product page stays focused on the product and the primary purchase action.
The original cart was functional, but its table-based structure required users to scan across multiple columns. Product details, delivery choices and order information were also distributed across several interface areas.
I reorganised the experience around clearer product summaries, visible selections and a more focused order summary that supports the next purchase decision.
Functional WooCommerce layout with dense information.
Clearer hierarchy and a more product-focused structure.
Basic order preview
Clear product details and primary action
Traditional table-based layout
Product-focused cart and consolidated summary
Each product is presented as a separate unit with its image, selected options, price and remove action grouped together.
Costs, discounts, delivery options and the primary checkout action are grouped within one consistent order summary.
Available delivery methods and the selected destination remain visible before users continue to checkout.
On mobile, product details are reorganised into compact cards instead of compressing the desktop table into a narrow viewport.
The redesigned cart makes selected products, delivery choices, total cost and the next action easier to review before entering checkout.
The original checkout presented billing details, delivery options, payment methods, order information and required confirmations within one long view. Although functional, the interface required users to process many decisions at the same time.
I reorganised the checkout into a sequence of focused stages. Each screen supports one main decision while the order summary remains available as a consistent point of reference.
Customer details, shipping, payment and confirmation competed for attention within one extended checkout page.
The redesigned experience separates account, address, delivery and payment decisions into clearer stages.
Single-page checkout
Account or guest checkout
Users first choose whether to sign in or continue without creating an account. The benefits and consequences of both paths are explained before moving forward.
Contact and delivery information is grouped into one dedicated step, reducing competition with payment and shipping decisions.
Available delivery methods expose their cost and expected delivery time, while pickup-point selection appears only when required.
The final stage keeps payment and order confirmation separate from earlier data-entry tasks, allowing users to review the purchase before completing it.
The redesigned checkout creates a more predictable sequence, reduces the amount of information shown at once and keeps the order summary available throughout the process.
Selecting a pickup point required users to interact with an external delivery interface that felt visually disconnected from the rest of the store. The map dominated the experience, while finding and comparing nearby locations required additional effort.
I redesigned the interface around two complementary ways of searching: a structured list for comparing details and a map for understanding location. Both views use the same controls and remain available on desktop and mobile.
The original interface prioritised the map while location details, filters and mobile navigation were less accessible.
The redesigned selector supports searching, filtering, comparing and confirming a pickup point within one consistent interface.
Map-dominated pickup selector
Searchable list and contextual map
Users can compare addresses in a structured list or switch to the map when proximity is more important than detailed information.
Delivery-provider filters help narrow the available locations without requiring users to search through unrelated pickup points.
On mobile, the list and map become separate views controlled by a persistent switch, preserving usable space for both modes.
After a location is selected, its name and complete address appear directly in checkout with a clear option to change the choice.
The redesigned selector turns an external delivery component into a more consistent part of the purchase flow and makes the selected destination easier to verify before payment.
The redesigned components were implemented in the existing KIANU store and now form part of its live purchase experience. The work improved the connection between product discovery, personalisation, cart, delivery and checkout without rebuilding the platform from scratch.
The store owner accepted the new direction and the collaboration continues through further UX/UI and technical improvements based on current business needs.
Key shopping stages now share a clearer hierarchy, interaction language and visual direction.
Additional options appear when needed, keeping the default product and checkout views focused on the current decision.
Products, selected variants, delivery choices, totals and primary actions are easier to review throughout the flow.
Improvements were delivered within the current WooCommerce ecosystem, preserving the store’s existing content and logic.
WordPress and WooCommerce
Production implementation
Ongoing store development
The project improved high-impact parts of the shopping journey while allowing the client to continue using the existing store, integrations and operational setup.
Working on a live e-commerce store reinforced that meaningful UX improvements do not always require a complete redesign. Focused changes to high-impact moments can create a more coherent experience while respecting the existing platform and business constraints.
A solution is only valuable when it can coexist with the existing theme, plugins, store logic, integrations and responsive behaviour. Understanding implementation constraints helped me make more realistic design decisions.
Complex options do not have to disappear, but they should appear at the right moment. Moving gift personalisation into a focused flow kept the product page simpler without removing functionality.
Improving isolated screens is not enough. Product discovery, cart, delivery and checkout need consistent hierarchy, selection states and primary actions to feel like one shopping experience.
Working across design and implementation allowed me to evaluate ideas against real content, responsive behaviour and WooCommerce constraints before releasing them to production.
The project strengthened my ability to connect UX/UI thinking, e-commerce requirements and practical implementation within an established digital product.