The business and user problem
As Beautyhaul continued to grow, reliance on third-party e-commerce platforms started to create strategic challenges. Transactions through external platforms came with additional costs and limited control over the end-to-end customer journey. From a business perspective, this made it increasingly important for Beautyhaul to gradually shift users toward its owned digital channels—website and mobile app.
However, the existing digital experience was not strong enough to support this transition. Inconsistent UI, suboptimal performance, and an outdated checkout flow gave users little incentive to move away from third-party platforms, despite the brand’s growing maturity.
Core tension: BeautyHaul was growing, but its owned experience did not yet give customers a compelling reason to move away from familiar marketplaces.
Key challenges:
Outdated design and customer journey that no longer reflected the growing brand.
Inconsistent key visuals between online and offline experiences (e.g., BeautyHaul Indonesia events).
Heavy reliance on marketplace traffic (Shopee, TikTokShop, Tokopedia) that increased admin costs and reduced brand control.
Urgent timeline to revamp the web and launch the mobile app simultaneously.
Why this mattered
Marketplace fees were increasing, while BeautyHaul had limited control over the customer journey on third-party platforms. Building owned channels gave the business a path to reduce long-term exposure to platform costs, establish a direct customer relationship, create a consistent brand experience beyond its offline stores, and build a stronger foundation for first-party product insight. These were strategic objectives—not measured outcomes of the redesign.
My contribution
As the Senior UI/UX Designer in a two-person design team, I owned the experience end to end across web, iOS, and Android—from the homepage and product-detail experience through cart, checkout, order details, and product reviews. The Junior UI/UX Designer supported selected pages and cases, which I reviewed to maintain quality and cross-platform consistency.
I worked closely with the Product Manager and Engineers throughout feasibility discussions, handoff, and implementation review. Major product and brand decisions were reviewed with cross-functional stakeholders and the business owner. This governance shaped the solution and required the team to balance user needs, technical feasibility, brand direction, and business priorities.
The design challenge
How might we make BeautyHaul’s owned channels easier and more credible to shop from, while launching mobile and modernizing the website within the same urgent timeline?
Primary goals:
Improve site performance and simplify user flows.
Unify brand visuals across all touchpoints.
Shift traffic and sales from external marketplaces to BeautyHaul’s owned platforms.
Establish scalable UX foundations for future product development.
What informed the direction
1. Prioritize without a full research cycle
The timeline did not allow for a full discovery cycle. We combined a heuristic evaluation with input from Business, Marketing, and Customer Support to identify the most critical usability and operational issues. This was a pragmatic prioritization method, not a substitute for direct user research.
2. Use familiar commerce patterns selectively
We analyzed competitors such as Sociolla, Sephora, Shopee, Tokopedia, and Blibli to identify familiar patterns that users are already comfortable with. The goal was to balance familiarity with BeautyHaul’s unique branding.
3. Connect discovery, checkout, and brand trust
We restructured the user flow to make product discovery and checkout more seamless. The new UI direction adopted the updated brand guidelines — clean layout, refined typography, and modern key visuals.
4. Validate quickly with internal expertise
We reviewed the experience with Product, Engineering, Business, Marketing, and other internal stakeholders to align usability, feasibility, content, and brand priorities. Because of the tight timeline, the project did not include external customer research or formal usability testing. Internal review helped the team move quickly, but it also limited the strength of our validation evidence.
The design argument
The redesign focused on the full commerce journey rather than isolated screens. We created clearer discovery from the homepage to product-detail pages, reduced unnecessary decisions from cart to checkout, and extended the experience through order details and product reviews. A reusable visual and interaction foundation kept these flows consistent across web, iOS, and Android.
Decision 1 — Build a coherent discovery path
Homepage content, navigation, and product-detail information were treated as one connected journey so customers could move from exploration to evaluation without relearning the interface on each platform.
Decision 2 — Reduce friction near purchase
Cart and checkout were redesigned as a continuous flow with clearer information hierarchy and fewer ambiguous interactions. The goal was to help customers review their purchase and proceed with greater confidence—not to claim a conversion improvement without data.
Decision 3 — Support the relationship after checkout
Order-detail and review flows extended the owned experience beyond payment, giving customers clearer access to order information and a direct way to contribute product feedback.
Decision 4 — Design once, adapt deliberately
Shared patterns created consistency, while layouts and interactions were adapted to the needs of web and mobile instead of forcing identical screens across platforms.
Key Design Decisions
Clearer discovery patterns connect homepage exploration with product evaluation across platforms.
Clearer discovery patterns connect homepage exploration with product evaluation across platforms.
A continuous cart-to-checkout flow clarifies purchase details and next actions.
Shared visual and interaction patterns support consistent cross-platform delivery.
Outcome
The mobile apps launched in 2024, establishing BeautyHaul’s first owned mobile-commerce experience, followed by the revamped website in early 2025. Together, they created a consistent owned commerce journey across web, iOS, and Android and aligned the product interface with the refreshed brand direction.
What changed
From website-only owned commerce to an ecosystem spanning web, iOS, and Android.
From disconnected page-level updates to an end-to-end journey covering discovery, product evaluation, cart, checkout, order details, and reviews.
From an outdated and inconsistent interface to shared visual and interaction patterns aligned with the refreshed brand.
From relying solely on third-party shopping journeys to providing customers with a direct BeautyHaul commerce option alongside its offline stores.
No quantified conversion, performance, cost reduction, or channel-shift result is claimed. Validation was primarily internal, so the launch confirms delivery and organizational alignment—not yet a measured improvement in customer behavior.
Reflection
This project strengthened my ability to make deliberate design choices under an urgent timeline and across several stakeholder groups. The main trade-off was speed versus research depth: heuristic evidence and internal insights enabled progress, but future iterations should add direct customer research and behavioral data.
Post-launch measurement plan
The project did not have a complete measurement framework at the time. The following is the framework I would establish after launch; these are recommended metrics, not reported results.
Primary metric — Purchase completion rate
What it tells us: Whether customers who begin checkout can successfully complete a purchase on BeautyHaul’s owned channels.
Calculation: Completed orders ÷ checkout sessions × 100.
This is the primary experience metric because it covers the journey closest to purchase while remaining actionable for Product and Design. It should be reviewed separately for web, iOS, and Android.
Supporting metrics
1. Product-detail-to-cart rate
Customers who add an item to cart ÷ customers who view a product-detail page. This helps identify whether product information, variants, pricing, and calls to action support confident evaluation.
2. Cart-to-checkout rate
Customers who start checkout ÷ customers who view the cart. A low rate may indicate unclear costs, promotion issues, inventory changes, or hesitation in the cart experience.
3. Checkout abandonment by step
Customers who leave at address, delivery, payment, or confirmation ÷ customers who reach that step. This identifies the exact part of checkout requiring investigation.
4. Repeat purchase rate
Customers who make another purchase within a defined period ÷ customers who completed a purchase. This is a broader product and business signal influenced by experience, assortment, price, promotion, and service quality—not design alone.
5. Experience quality signals
Track page or screen-load time, crashes, payment errors, and support contacts mentioning navigation, checkout, payment, orders, or reviews. These signals help explain changes in the funnel metrics.
6. Owned-channel transaction share
Orders completed through BeautyHaul web and apps ÷ total digital orders across owned channels and marketplaces. This indicates progress toward the business objective, but it must be interpreted alongside pricing, promotions, assortment, and marketplace campaigns.
How I would use the data
Establish a baseline for each platform before judging improvement.
Review the funnel weekly after launch and experience-quality themes monthly.
Segment results by platform, new versus returning customers, and major traffic source.
Investigate meaningful changes with session evidence, customer feedback, or usability testing before proposing a design fix.
Evaluate the redesign together with Product, Engineering, Business, Marketing, and Customer Support because pricing, campaigns, inventory, and technical reliability also affect commerce performance.