Tiki is one of the top e-commerce platforms in Vietnam. I was part of the design team for their B2B system. We built tools to help sellers manage and sell their products more easily.
One of the main projects I worked on was the Store Decoration tool. It lets sellers customize their store pages to better showcase their products.
As part of this project, the Business Team asked us to encourage sellers to buy a premium package. This would give them access to more attractive and customizable layouts in the Store Decoration tool. To support that goal, we focused on improving the experience for both sellers and shoppers.
I was responsible for the seller experience. My goal was to make it easier for sellers to manage and customize their pages, while also keeping the system scalable for future premium layouts.
To start, I worked closely with the Product Manager and the designer handling the consumer side. Our main focus was on the challenges sellers faced – especially larger brands looking for more flexible and eye-catching layouts.
From business insights, we saw that sellers – especially big brands were looking for more ways to stand out. Just listing products wasn’t cutting it anymore. They wanted store pages that better reflected their brand identity and helped build stronger connections with customers.
Proposed Solution
To fulfill these needs, we decided offering pre-designed templates that sellers could choose from and modify. This approach would give them the flexibility to change the layout, adjust the content, and showcase their products in different ways.
Importantly, this solution would allow sellers to change layouts easily, without needing layout design knowledge, making it accessible for everyone to create visually appealing store pages.
Limited layout options: The tool used a single fixed layout for store pages, preventing sellers from adding or customizing different layouts. This made it difficult for them to personalize their store pages to fit their brand.
Unclear widget navigation: The way the “All Widgets” (overview) and “Widget Detail” (settings) sections were arranged was unclear. The tabs kept switching every time a seller clicked a widget, which made it hard to manage and edit long content or multiple widgets.
Small mobile preview: The mobile preview screen was too small, making it difficult to see the whole store layout, especially when there were more than five widgets. This limited how well sellers could review and adjust their page design.
Limited on real-time preview: The live preview was useful, but it didn’t always reflect real-time changes accurately. Sellers couldn’t get an instant preview of how their customizations would look after publishing.
Confusing publishing workflow: The publishing section worked, but it wasn’t clear when changes were ready to be published. This caused confusion about when customizations were final and live on the store page.
The Product Manager and I started by looking into similar tools on other platforms. We explored Store Decoration tools from competitors like Lazada and Shopee. We also looked at content creation platforms like Behance, WordPress, and Canva for inspiration.
From this research, we found several key patterns that were common across these platforms, such as:
Pre-designed templates, user can modify individual elements (like text, images, and layout) to personalize content
User-friendly navigation
Real-time preview
Drag-and-drop functionality
Clear guidances, such as visual cues or tooltips that help users understand the impact of their changes.
Responsive and allow users to seamlessly switch between devices (e.g., desktop, tablet, mobile)
After gathering insights, we brainstormed ideas to improve the Store Decoration tool. However, due to technical limitations and time constraints, we couldn’t implement all the desired features. Instead, we focused on enhancing the following key areas to launch and test first.
Real-time preview: Provided instant, real-time updates to the preview with interactive features, allowing sellers to see their changes live and ensure accuracy before publishing.
Larger mobile preview: Expanded the mobile preview window, added real-time device-specific previews, and enabling dynamic resizing for a better and more accurate layout review.
Improved widget layout: Reorganized the widget structure to make it easier to connect and navigate between the widgets and the preview sections.
We built a Layout Library with a variety of layout options to help sellers easily decorate and customize their store pages.
For this step, I teamed up with the designer working on the consumer side. Together, we organized the layouts into different widget types that covered all key store needs – like Banner, Category, Collection, Coupon, and Product List.
Since the drag-and-drop feature wasn’t available yet, we made it easy for users to access the Layout Library. They could simply click Add Widget and choose the layout they liked.
Widget Types
Banner: Displays large images or promotions to catch customers’ attention.
Category: Organizes products into categories (e.g., “Electronics,” “Fashion”) for easier browsing.
Collection: Groups related products together, like “Best Sellers” or “New Arrivals.”
Coupon: Shows discount codes or special offers to encourage purchases.
Product List: Displays a list of products, which can be customized to highlight specific items.
To make navigation easier and more organized, we removed the tabs and added a deeper layer to each Widget Content. This created a clearer hierarchy, helping sellers focus on editing and saving each widget step by step.
Sellers could access the Widget Content in two ways: by clicking on a widget in the Preview Section or by selecting its name in the Current Widgets Section on the tool’s homepage.
After a month of launching the Store Decoration Library, 100% of premium sellers got access to premium layouts, and 25.25% of them started to customize their store pages.