Teman Belanja is a website-based application created by Procter & Gamble (P&G) for the Indonesian people to make wholesale purchases. All transactions can be accessed through the teman-belanja.id website.

The challenge

We have provided an existing UI view, but much information is not conveyed correctly to the user in the transaction process. So, my team and I brainstormed to find out what is needed from the business side, user needs, and limitations on the technology side to meet the midpoint.

Approach

There are several ways to make UI enhancements with current interfaces. Some of the ways we do it are:

• Conduct alignment with clients (Project Manager and Developer) to determine whether the resulting application is appropriate and possible to develop.
• Brainstorming with the team to find out what the client needs (turning the brief into a UI).
• Perform benchmarks and competitive analysis for similar applications, such as Tokopedia, Bukalapak, and others.
• Equalize the design style because this application was made by several designers and made in a new style.

Understanding briefs

I made a call with clients to understand their problems and what they want to achieve. From the discussions, there are several points that I can summarize:

• The old version of the design already exists, so it can be used as a benchmark in making new designs.
• Customize the design with the existing new logo, color, and style.
• Create multiple page views, such as login, checkout, and others.
• Create several states as support for end-to-end process completion.

Aligning with Designers

After meeting with the client, I describe the existing product requirements or briefs to other designers so that we can have the same view of the product we will make.

Benchmarking

As part of our benchmarking process, my team and I are looking at how the usual pattern applies in other apps and how we can improve over competitors. Our benchmarking includes Tokopedia, Bukalapak, and other Asian e-commerce applications.

Refreshment

My team and I did a revamp by adjusting the color and style of the latest branding that had been given. We also find out what is the best way for users to reach their goals and minimize confusion in product usage. As a first step to equalize design styles between designers, we design the home page first so that we have a benchmark in designing other pages.

New Face

After completing all the screens, we try to present the application to the client in a prototype form so that they can easily understand the end-to-end flow.

Here is a complete prototype of the revamp results that we have been working on using Figma

Team

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