UI/UX Design

Shop Page

Details

Background

Shop page is a place where sellers can showcase their products and then let buyers browse to know more about this shop. It’s a substitute for their offline/physical shop. This is the place where sellers can communicate their branding and promotions to buyers.

My Role • We worked as a team in this project. I was able to analyze information together, share ideas, join the brainstorming and design sprint session on this project. Even though the final design and implementation was done by my team member, I’m glad I had the chance to supervise development process until the project went live.

Data & Interview

We started by finding what’s important for our buyers and sellers in shop page. Research team gathered data and did the interview, they came up with lists of the most and the least important information from our users’ perspective.

Problems & Opportunities

We had discussion sessions with our stakeholders and found these problems in our current page:
• Statistics and information are not aligned for our sellers/buyers in all platforms.
• Buyers love browsing products, but currently they need to scroll down further to find product lists.
• Sellers need a place to communicate their needs in shop page.

Goals

• Align shop information for both user’s side.
• Enhance buyer’s browsing and buying experience. Increase CVR, number of product view, and user’s time spent.
• Improve seller’s communication.

We want our Shop Page to give insightful information for both our buyer and seller, improve seller’s communication, and buyer’s browsing experience in all platforms.

Solution

Information • To answer the first problem with shop information, we decided to reduce the amount of information to the 3 most useful ones that both buyer & seller understand in shop page landing. We also kept Chat and Follow button. Further information details can be seen in new Info tab.

Below are the changes we made based on our discussion (marked in red).

Browsing • To increase product views in this page, we focused on how products are displayed by giving more space for products, and showing the most important information: product quality star in our product lists. To increase the discoverability of product types, we decided to optimize 5 recent showcases filter on the front. Also, to increase flexibility in searching, we put the search function at the very top of the page and made it sticky so user can easily jump from the page to browse around the shop.

Communication • For the third problem, we built a shop’s showcase section so our seller has the freedom to name, arrange, and promote their top showcases. We actually had lots of ideas to improve seller’s communication, and our team is still trying to implement them in the future.

Results

Our team was pretty pleased with the results of this project. Overall number of product viewed, time spent, and CVR increased significantly.

Check it out!

This October we finally released this page for all device, cheers to our tech and development team! Feel free to experience it in Tokopedia Android, IOS, and Lite.