UI/UX Design

Upload Product

Details

Background

I joined Tokopedia in November 2016, and this is one of the biggest project we had for our team in Merchant side. Add product is a vital part in seller’s journey in order to sell their products in order to get profit.

Problems

The main problem we faced was having 20+ fields to be filled by our seller, and the number might still increase. It is important to fill them as detailed as possible, because products with better details have higher chances to be discovered and purchased by buyers. So, our goal is to make an easier, more scalable form for our new & existing sellers.

My Role
I participated in the design sprint and helped brainstorming ideas, collaborated with my team to create the affinity diagram using card sorting method, and gave input on the project. Final product execution was done by my peers, but I helped by checking the design quality until the final design went live.

Design Process

First, we looked at the existing form. We researched and found out that our sellers felt okay with this form, but actually our data said that the error rate was pretty high. So we went back to our list of fields and brainstormed, did some card sorting and grouping, and made the affinity diagram. Sticky notes were very useful at this point.

Wireframing & Prototyping

Next, each of us tried implementing our ideas and assumptions into wireframes and prototypes based on our grouping. We pitched our ideas in a small forum, and gathered feedbacks. We came up with alternative solutions, and one of them is the one click - ultimate design, that was the fun part.

Prototype • You can feel the experience and flow from my prototype below.

Discussion

We sat together and discussed the ideas with our stakeholders: product owner, business and tech; we got many insights about the things that we can and can’t implement. Based on the feedback, we revised the idea several times until most of the stakeholders are happy. Unfortunately, I didn’t get involved in the iteration process until the final UI design.

Solution

Grouping • It wasn’t easy to group 20+ fields while taking scalability into account. There are some similar characteristics among the fields which are easier to group. On the other hand, some of them have unique characteristics. We collaborated with copywriters to come up with more relatable names for the groups. Finally, we reduced the fields into 8 mandatory fields and step-by-step guides.

Autocomplete • Fields are connected to each other, therefore when users fill a certain field, others can be automatically filled. Utilizing this connection to create more autocomplete fields can reduce the number of fields that have to be filled manually when adding a product.

It’s Live

Check out the latest design in Android & Tokopedia Lite