Teman Belanja ∙ Enhance the experience of buying wholesale goods

Teman Belanja is a web-based application developed by Procter & Gamble (P&G) to simplify wholesale purchases in Indonesia. The platform’s existing UI struggled to convey transaction details effectively, leading to user frustration and missed opportunities for engagement. My team and I took on the challenge of revamping the interface to improve usability and align it with the new branding.

The Challenge

The primary challenge was improving the existing UI while addressing:

Missing or unclear transaction information.
Alignment between business requirements, user needs, and technological constraints.
Unifying disparate design styles created by multiple designers.

Approach

We followed a systematic approach to enhance the UI:

Client Alignment
- Conducted discussions with the Project Manager and Developers to align on feasibility and project expectations.
Team Brainstorming
- Analyzed business objectives and user needs to translate briefs into actionable UI designs.
Benchmarking & Competitive Analysis
- Evaluated leading e-commerce platforms, including Tokopedia and Bukalapak, for design inspiration and best practices.
Design Style Refresh
- Standardized the design style to reflect the new branding and ensure consistency across pages.

Getting to know the brief by calling the client via Zoom

Understanding the Brief

In a series of calls with the client, I clarified the project’s scope and requirements:

Use the old design as a benchmark while incorporating new branding elements like logos, colors, and styles.
Design multiple key pages, including Login and Checkout, while covering various UI states for a seamless user journey.
Ensure the UI supports the end-to-end process effectively.

Aligning with Designers

After gathering requirements, I collaborated with the design team to ensure a unified vision for the project. This involved:

Sharing the product brief and aligning on the expected outcome.
Setting the homepage design as the benchmark for maintaining consistency across all pages.

Benchmarking & Insights

Our competitive analysis of platforms like Tokopedia and Bukalapak provided insights into:

Common UI patterns and navigation flows.
Areas where competitors excel and where we could differentiate.
Strategies to improve user engagement and reduce friction during transactions.

Before and after. The new look refreshes the design style by thinking about the best approach to displaying Poin, Pesanan, and other features.

Refreshing the Design

To create a cohesive and user-friendly design:

Branding Alignment: Incorporated the updated logo, colors, and styles provided by the client.
User-Centric Approach: Focused on intuitive layouts and navigation to minimize confusion.
Style Consistency: Standardized design elements across screens by starting with the homepage as the foundational template.

Final Outcome

Once the screens were complete, we created an interactive prototype using Figma to present the revamped design to the client. This prototype showcased the end-to-end flow, allowing the client to experience the application’s functionality firsthand.

Access the complete prototype below.

Teman Belanja Prototype in Figma

Conclusion

Through this revamp, Teman Belanja now offers a more intuitive and visually consistent user experience that aligns with business goals and user expectations. By addressing transaction clarity and unifying the design style, the platform is better positioned to meet the needs of its users and enhance its competitive edge in the wholesale market.

Team

Muchtarruddin (Rudi) · Product Designer Rhasya Bintang Rizqi · Product Designer Maulana Farhan · Product Designer