Make the Store Decoration tool easier to use, more flexible, and scalable for future premium layouts.
Background
Tiki is a leading e-commerce platform in Vietnam, and I was part of the design team working on Tiki’s B2B system, developing tools to help sellers manage and sell their products. One key project I worked on was the Store Decorationtool, which allows sellers to customize their store pages to showcase their products.
As part of this effort, we received a request from the Business Team to encourage sellers to purchase a premium package for access to more attractive and customizable layouts in the Store Decoration tool. To support this, we focused on enhancing both the seller and consumer experiences.
Approach
I was in charge of the seller experience, ensuring the updates made it easier for sellers to manage and customize their pages, while also making the system scalable for future premium layouts.
For this project, my approach started with close collaboration with the Product Manager and the designer in charge of the consumer side to understand user needs. We focused on the challenges faced by sellers, especially larger brands that wanted more flexible and attractive layouts. We then reviewed the existing platform to identify areas for improvement based on these needs.
1. Define user needs
Sellers, especially those with big brands, needed more ways to customize their store pages to reflect their unique brand identity. Simply listing products wasn’t enough—they wanted more attractive and engaging layouts to connect 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.
2. Identify limitations of existing system
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.
Existing Store Decoration page.
3. Benchmark leading platforms
The Product Manager and I quickly explored the Store Decoration Tools on competitors like Lazada and Shopee, as well as other Content Creation Platforms such as Behance, WordPress, and Canva for inspiration. From this research, we identified key patterns 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)
Outcome
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.
1. Page layout preview
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.
2. Layout library
We created a Layout Library filled with various layout options to help sellers easily decorate and customize their store pages. For this step, I worked closely with the designer in charge of the consumer side to categorize the layouts into different widget types that cover all the needs of a store, including Banner, Category, Collection, Coupon, and Product List.
Since the drag-and-drop feature wasn’t available at this stage, users could easily access the Layout Library by clicking on Add Widget and selecting their preferred layout.
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.
3. Widget navigation
To make navigation easier and more organized, we removed the tabs and allowed sellers to go one layer deeper into each Widget Content, creating a clearer hierarchy that helps sellers focus on editing and saving each widget step-by-step. Sellers can access the Widget Content by clicking on a widget in the Preview Section or by selecting its name in the Current Widgets Section on the tool’s homepage.
Adoption rate
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.