UX Archives - Danchi Studio

Go2Joy’s Hotel Profile Setup

Danchi — Tue, 21 Jan 2025 13:55:01 +0000

Background

Hotel Profile Setup is a feature for Go2Joy’s Super Admin that helps set up and manage hotel profiles on the platform. It allows internal staff to update and create hotel details, room information, pricing, and facilities.

This project was developed in response to the Business Team’s feedback. They reported that setting up hotel profiles took too long and required extensive training for new staff. The process was inefficient and needed improvement to save time and resources.

Approach

My approach began with understanding both the users and the system. Product Manager and I collected user feedback and data to identify their needs and pain points. Then, I mapped out the system’s Information Architecture (IA) and identified the key areas for improvement.

I was the design lead on this project and worked closely with the Junior Designer, giving direction and sharing design solutions while he was responsible for the actual design work.

1. Empathize with the users

We interviewed 2 internal staff members who hold Super Admin roles to gather feedback on the hotel profile setup process.

We sat with them as they walked through the task, observing and asking for their thoughts. This helped us identify pain points and areas for improvement. Afterward, I summarized their feedback and key issues.

2. Understand the current system

Based on insights from user interviews, I decided to map out the current system’s Information Architecture, focusing on the site-map to visualize the overall structure and user paths for creating hotels and hotel groups, as well as content hierarchies to see how information’s organized.

Existed Site-map and Content hierarchies for Hotel and Hotel Group creation.

Below were the two main issues we discovered from the site-map and content hierarchies.

Issue 1:
Poorly structured Hotel Creation Form

The hotel creation form was poorly organized. All the information was listed in a long, unstructured flow, making it hard for users to find important fields quickly. This caused confusion, frustration, and errors, as users had to scroll through a lot of information without any clear grouping or hierarchy.

Issue 2:
Confusing structure for Hotel and Hotel Group creation

The system was confusing for users because there were two ways to create a hotel profile. One was through ‘Hotel Group Management’ for hotel chains. An other one was through ‘Hotel Management’ for individual hotels. The confusion was made worse by the system allowing users to create a hotel group inside a hotel.

Design Solutions

For Issue 1: Poorly structured Hotel Creation Form

I focused on helping users concentrate on one section at a time by breaking the form into clear sections and grouping fields logically. This approach allowed users to process each part step by step without feeling confused or stressed.

Proposed Hotel Creation Inputs

- Basic Info: Hotel Name, Address, Phone, Location Hints, Location on Google Maps, Description, Hashtag.
- Room Info: Number of Rooms, Room Types, Photos.
- Operational Info: Opening Hours, Term and Conditions.
- Payment Info: Account Number, Account Name, Bank Name, Branch.
- Main Contact Person: Full Name, Position, CCCD or Passport, Phone, Email.
- Contract Details: G2J ID, Tax Number, Business ID, Business Name, Contract Status, Type, Code, Duration, Commission.

Proposed Hotel Group Creation Inputs

- Group Name
- Hotel List

For Issue 2: Confusing structure for Hotel and Hotel Group creation

To address the issue, I drafted two user flow options. Option 1 was chosen for a quick fix and easier development. Option 2, on the other hand, was proposed to streamline the setup flow, offering more flexibility and removing unnecessary steps. We decided to include this option in the enhancement sprint, as it requires more time for development.

Option 1: Simplified Flow
I removed the option ‘Create a Hotel Group’ function inside individual hotel creation flow. Users first create an individual hotel, then separately create a Hotel Group and add hotels.

Option 2: Hybrid Solution
I removed the separate ‘Create a Hotel Group’ flow and merged it directly into the hotel creation process. When users create a hotel, they can either select an existing Hotel Group or create a new one simultaneously.

The post Go2Joy’s Hotel Profile Setup appeared first on Danchi Studio.

Tiki’s Store Decoration

Danchi — Fri, 17 Jan 2025 16:31:49 +0000

Background

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.

Approach

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.

1. Define user needs

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.

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 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)

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 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.

3. Widget navigation

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.

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.

The post Tiki’s Store Decoration appeared first on Danchi Studio.

Tiki’s Brand-store Ad

Danchi — Fri, 17 Jan 2025 08:47:08 +0000

Background

Tiki Ads is a tool that helps sellers drive more traffic to their stores and products. One of its key features is the Brand-store Ad. This feature boosts visibility by showing the seller’s store name and tagline at the top of Tiki’s search results page

For this project, the goal was to make the ad slot in Tiki’s customer app more engaging. The aim was to use it in a way that drives more traffic to store pages.

Approach

In this project, I had limited context on what exactly to design. The only request was to create design options for an ad slot that would drive traffic to the store page.

So, I looked at traditional offline ads for inspiration. Then, I checked out what competitors were doing to see what worked well. After that, I moved on to wireframing the layout and interactions. I also created some quick sketches to bring the visual design for the ads to life.

1. Brainstorm on traditional offline media

To make our ad slot more engaging, I set up a brainstorming session with the product manager. We wanted to explore traditional offline media for inspiration. The goal was to understand how these ads capture attention and communicate effectively in physical spaces.

We focused mainly on outdoor events and billboards. We thought some of their concepts could be adapted into the digital space using our current technology.

Notes from brainsotming session, forcus on Billboards and Outdoor Events

2. Benchmark on competitor ad slots

I quickly checked out how competitors use ad slots on their search result pages and noticed a few trends. Some show store logos and names, while others display product lists or a scrollable carousel with more items. Most of them had a similar style.

Outcome

After all the exploration, I concluded that adding subtle movement could help the ad stand out without being too distracting. For the Brand-store Ad, I felt the focus should be on the brand’s image and message, rather than showcasing products. This would help avoid overlapping with our Product Ad format.

Below are the 3 design solutions I proposed to the team. We wanted to see which one would be the most feasible. If we chose options 2 or 3, the Marketing team would develop the visual elements to make sure they align with our brand image

Option 1

This design was inspired by dynamic billboards. At the top of the search results page, there was a vertical carousel. On the left side, it showed static store details like the logo, name, badge, and rating. On the right, it displayed the store’s message – this could include text, an image, and a CTA. That part auto-scrolled every 5 seconds to keep things fresh and eye-catching.

Option 2

This design was inspired by outdoor events. It featured a background image of a Vietnam cityscape to set the scene. A plane flew across the top of the search results page, carrying a banner. The banner displayed the store’s message, name, logo, and a CTA.

Option 3

This design option was inspired by Outdoor Events. It features a hot-air balloon flying from the bottom to the middle of the search page, carrying a banner with the store message, name, and CTA.

The post Tiki’s Brand-store Ad appeared first on Danchi Studio.

Lazada’s Multi-seller

Danchi — Tue, 14 Jan 2025 16:50:12 +0000

Background

The Multi-seller feature was a small addition to Lazada’s Product Description Page (PDP). It allowed users to connect with other sellers offering the same product. These sellers often had different deals or prices.

The main goal was to help users choose the best option. By showing prices, deals, and other details from different sellers, users could easily compare and make informed decisions

Approach

To make comparisons easy, we organized key information clearly and grouped relevant details into intuitive categories. This allows users to quickly scan and compare options, whether on the PDP or the Multi-seller page. Below are the steps we took to develop this design solution.

1. Define the User-flow

We started by defining the user flow to make sure everything was smooth and easy to navigate. On the PDP, users could click to get to Comparison Mode – also known as the Multi-Seller Page. There, they would see a list of sellers offering the same product. Users could then filter and compare options to find the best deal.

2. Define Information Architecture for comparison

→ We began by identifying all the key information users would need to compare on the PDP. We then organized this information into three main categories: Seller info, Delivery info, and Service info.

→ Next, we defined the specific comparison criteria for the Multi-Seller page. This made it easy for users to view and compare all the relevant details.

→ Finally, we prioritized each element on the page. This helped highlight the most important information, allowing users to make quick and informed decisions.

Outcome

PDP: We reorganized the Delivery, Service, and Seller info into separate sections. The goal was to make everything clear and well-structured. This way, users could easily understand the information when they moved to the Multi-Seller Page.

Multi-Seller Page: We displayed a list of other sellers in a card format to make choosing easier. Each card showed the Seller info at the top. Other details like Delivery, Service, and Promo info could be scrolled through in a carousel on each card.

The post Lazada’s Multi-seller appeared first on Danchi Studio.

Lazada’s Desktop Header

Danchi — Tue, 14 Jan 2025 07:36:11 +0000

Background

Lazada is one of Southeast Asia’s top e-commerce platforms, offering everything from electronics to fashion and home goods. I had the chance to work on their website header, where the goal was to make space for ads while reorganizing key features like notifications, cart info, and access to product categories.

Although it was a small project, the challenge was finding a solution that worked seamlessly across the entire site, from the Home Page to Product Pages, My Account, Cart, and Checkout.

Approach

We decided to hold a workshop with the designers and product managers involved in those projects. The goal was to rethink the order of the header elements and use feedback from ongoing work to improve the design.

Below are the steps for planning, preparing, running the workshop, and designing. The workshop included 3 main activities

1. Benchmarking on competitor designs

In this step, we focused on identifying header design trends from 2017. We reviewed 36 e-commerce desktop headers and voted on the ones we liked and disliked. Afterward, we discussed the reasons behind our choices, comparing what worked and what didn’t in the designs of our competitors.

Based on the discussion, here are my notes on what we liked and disliked.

Liked

Style: Minimalist design was considered the most user-friendly trend.

Space: Proper white space between elements made them easy to spot and gave the design a clean, visually appealing look.

Elements: Simple, functional, and easy to use. The user-profile icon for registration/login and the heart icon for the wishlist were preferred.

Promo Banners: Hero banners captured attention immediately, while mini pop-ups above the header served as simple reminders with a message, link, and close button.

Dimensions: Full-width headers with a height of 100-140px were the standard across most e-commerce sites.

Typographic Hierarchy: Clear and consistent use of fonts and colors for headlines, sub-headers, links, and CTAs, making the content easy to read and navigate.

Disliked

Style: Overuse of the brand’s colors in headers, headings, links, CTAs, and banners, without considering proper proportions or white space.

Elements: Poorly placed elements made navigation confusing, and decorative items were mixed with key action icons, making the header less effective.

Typographic Hierarchy: Links and labels lacked distinction, making it hard to differentiate between elements.

Promo Banners: Banners with busy background images and different font styles for headings were distracting.

Dimensions: Large, fixed headers over 150px in height, which felt bulky and took up too much screen space.

2. Element exploration on our current header

In this step, we focused on prioritizing the elements that have the biggest impact on the user. We discussed about the key elements that impact the current header, like login states, lists, notifications, and promotions.

We discussed the main elements that affect the current header, like login states, lists, notifications, and promotions. Then, we did a ranking exercise where each person ranked them from #1 (critical), #2 (important), to #3 (nice to have). After that, we calculated the percentage of importance for each element to decide which ones to prioritize.

Element Ranking Results

Critical: Brand, Category Navigation, Search, Cart, Login/Signup, My Account, Wishlist

Important: Customer support, My orders, Selling on Lazada, Liveup, Country / Language

Nice to have: Follow brands/stores, Channel selection, Official stores, My reviews, Promo

3. Wire-framing

The goal was to create draft wireframes for the desktop header based on the key trends and most important elements we defined in Steps 1 and 2. We came up with two design options.

Option 1: This design focused on campaigns and promotions, with the header highlighting special offers, sales, and deals for easy access. It was designed to emphasize marketing messages and limited-time offers

Option 2: This design centered around category-based navigation, with the header clearly organizing product categories to help users quickly find what they’re looking for. It was designed to highlight our wide range of products and provide a more straightforward browsing experience.

Outcome

After drafting the concept ideas on the whiteboard with the team, I began laying them out in Axure to make the designs clearer and more structured.

The post Lazada’s Desktop Header appeared first on Danchi Studio.

UX Archives - Danchi Studio

Go2Joy’s Hotel Profile Setup

Feature Enhancement

August 2022

1 week

UX Lead

Go2Joy's Product

Background

Approach

1. Empathize with the users

2. Understand the current system

Design Solutions

For Issue 1: Poorly structured Hotel Creation Form

For Issue 2: Confusing structure for Hotel and Hotel Group creation

Tiki’s Store Decoration

Feature Enhancement

April 2021

2 weeks

Product Designer

Tiki's Product Design

Background

Approach

1. Define user needs

2. Identify limitations of existing system

3. Benchmark leading platforms

Outcome

1. Page layout preview

2. Layout library

3. Widget navigation

Adoption rate

Tiki’s Brand-store Ad

Ad Placement Design

March 2022

1 week

Product Designer

Tiki's Product Design

Background

Approach

1. Brainstorm on traditional offline media

2. Benchmark on competitor ad slots

Outcome

Option 1

Option 2

Option 3

Lazada’s Multi-seller

Comparison Feature Design

April 2017

21 days

UI/UX Designer

Lazada's Product Design

Background

Approach

1. Define the User-flow

2. Define Information Architecture for comparison

Outcome

Lazada’s Desktop Header

Desktop Header Redesign

Oct 2017

8 days

UI/UX Designer

Lazada's Product Design

Background

Approach

1. Benchmarking on competitor designs

2. Element exploration on our current header

3. Wire-framing

Outcome