Female Daily Marketplace Case Study

In this project, user can use their account from MPC (CT Corp Ecosystems Apps) and Female Daily Reviews to log in or Connect to the account. With these conditions, we can not use the usual login/register process as normally we do in another project. We need to adjust it to cater to the current Female Daily user database.

Below is an example of a UI from the Login and Register flow, you can see the process above to log in or register with an MPC or FD account.

After numerous iterations, I have finally created a design for the Homescreen of the App. I understand the significance of this screen, as it serves as the main interface for users to access the App’s features and functions. Therefore, I have designed it with a minimalist approach and incorporated the findings from my research to make it more user-friendly and accessible.

Here is a detailed explanation of each element included in the Homescreen design:

Now, let me tell you the problem that we try to solve, the first one is the problem of “Access to Promotions and Discounts”, which solves this problem or features that customers face in other apps. We try to create the Promo section in the Homepage design, so users can notice the discount they had and the discount that they can get on the first screen when their open the Apps for the first time.

Let’s talk and focus on the problem of “Hard to Find the Products based on my preferences”. So in this case, I try to solve this problem. Major users think these features can be helpful, so let’s create this one with a feature that we called Female Daily Beauty Profile. As you can see after a few iterations, we create a section for products that recommend on the homepage based on user profile data like Skin Condition, Skin type, Skin tone, Skin color, etc. I will tell you the flow in the next section. So let’s jump into the Female Daily Beauty Profile Flow.

So this feature is to solve the problem that has been talked above, yes Female Daily Beauty Profile. So let me position myself as a user that wants and needs these features.

1. As a Customer, I can complete my Beauty Profile, so that I can get a proper product recommendation based on my Beauty Profile. 
2. As a user, I want to edit my beauty profile so that I can fix any incorrect beauty profile data which allow me to get a more relevant product recommendation 

Based on the details above, what is the best flow to cater to the user’s needs? Below is the flow that I has been created.

After a few iterations, we come up with this idea for the UI Hi-Fi Design of the Female Daily Beauty Profile. I provide 2 different entries to make users easier and faster to reach when they want to update the beauty ID, the first is from the homepage, and the second one is from the Profile Page. You can see the details below :

The flow that customers do is actually the same as the other usual apps do, from Search Product > Select the Product > Add Product to Cart > Checkout or Select Category > Select the Product > Add Product to Cart > Checkout. But there is another option depending on which entry point that user takes. But I add other information that I think will be useful for users. I will break down the information that you can see on the product listing page (PLP), product search page (PSP), product category page (PCP), and product detail page (PDP).

1. The discount percentage, Users need to know every discount that they can get from the product if they buy the product, and combine it with another product. So I make the discount product more prominent and easy to catch when you see the Product Card.
2. The Female Daily Beauty Awards (On the top right corner of the product image) and Female Daily Beauty Review (On the bottom left of the Product Image: Female Daily has a massive amount of product content that can be shown to customers to help customers decide which beauty product to buy, and one of the contents is the Member Review by Member and Female Daily Beauty Awards. That rich content comes from the segmented beauty community which is the strong point that can differentiate FD from its competitor. So it is important for the Marketplace of FD (Female Daily Beauty Studio) to be able to utilize the rich product content.  
   The utilization can be achieved by integrating with Female Daily Product ID (later on will be called FD Product ID). FD Product ID is an identifier that can link a product to the FD member reviews, FD product award label, FD product article, etc. By integrating this Female Daily Product ID into the created product in the FD Studio, the created product can be automatically linked to the FD Member Authentic Reviews. So I will tell you a glimpse of how to connect FD Member Review with FD Product Marketplace. From Product Creation (Admin and Seller side) to Product Display (Customer Facing). So the product card didn’t show the reviews from orders review in Marketplace but showed the Member Review from Beauty Community.
3. The other data point or information is just the same as any other usual app, like Brand Name, Product Name, and Product Price. But I add a button add to cart in the product list page to cut one step if the user wants to add the product directly and immediately from the product list page to the cart.

So below UI information is how we create the product on the Admin side:

As you can see in the Hubungkan Produk section, there is an option for Product Category and Product Name that listed down all the products on the Female Daily Reviews database. So the user needs to select the product first, then create the product additional information for Female Daily Marketplace.

Below is the UI of the Product List Page and Product Search Page

The current buying process UI and flow, it’s just the same as other usual e-commerce apps do, the process is starting from Shopping Cart > Check Out > Payment. That’s it. But based on the user interviews we come up with the idea, “How about we create a feature that allows users to send the items to different addresses on a single checkout process?” That we called a Send to multiple Address feature on the checkout page.

So we try to do another market research for this feature. And we come up with the insight. Introducing the feature “Send to multiple addresses” in our mobile online e-commerce app can offer several benefits to our customers and improve the overall user experience. Here are some reasons why we might consider implementing this feature:

1. Gifting Convenience: Sending gifts to multiple recipients is a common scenario, especially during special occasions like birthdays, holidays, or weddings. By allowing users to send items to multiple addresses in a single order, you make it more convenient for them to handle multiple gifts at once, saving time and effort.
2. Family and Friends: Families and friends living in different locations often collaborate to purchase gifts or share expenses. Allowing users to ship items to different addresses facilitates group buying (maybe our next feature), enhancing the social aspect of our app and encouraging more engagement.
3. Special Occasions: During holidays or special events like Idful Fitri or Christmas, customers often buy items for multiple people at once. Enabling them to enter different addresses for each recipient simplifies this process and encourages them to shop more on our app.
4. Customer Flexibility: Offering multiple delivery addresses gives users greater control over their orders and enhances the flexibility of our app, catering to a wider range of customer preferences.
5. Enhanced User Experience: Implementing convenient features like this can set our e-commerce app apart from competitors, leading to higher customer satisfaction and increased loyalty.
6. Marketing Opportunities: When customers use the “Send to multiple addresses” feature, they may share the news with others, indirectly promoting our app through word-of-mouth marketing.

And that’s the background of the “Why do we need this feature?” question. But as a team that uses a data-driven mindset, we need to prove this feature will going to work. How to test it? Yep, we need to do Usabilty Testing for these features. I will tell you on the next phase of How we do Usability Testing for our apps or features.

For now, I will tell you the flow of the Buying Process in our apps.

Above is the journey for a user to buy the product from Shopping Cart into Payment.

As you can see, there is an option that we give to users if they want to send the products to multiple addresses at once.

And here is the UI for Shopping Cart, Checkout and Payment.

This one is Order Page when you can track you order and delivery status. I separate the journey from Customer making payment until the order has been received. As you can see on the image below, there is a few status to describe how far the order goes.

1. Need Payment
2. In Progress
3. In Delivery
4. Completed
5. Canceled

And every status has a sub-status to show more details information to the customer.
I will break down one by one :

1. In Progress
   – Payment Has been received
   – Waiting for Seller’s Confirmation
   – Cancellation request is rejected by seller (if customer ask to cancel the order and the seller reject it
   – Your order is now being prepared
   – Your order is ready to be delivered
2. In Delivery
   – Seller is waiting for the courier to pick up your order
   – Your order is now in transit
   – Your order is on its way with the courier
   – Courier couldn’t deliver your order to you. (if the courier failed to deliver the customer’s product, then the courier will try on the next day)
   – Your order has been received by Luigi. Please confirm to complete this order (if the customer has received the product. The status is got by 3rd party logistic API)
3. Completed
   – You’ve confirmed to have completed this order
   – Here’s your ticket number 1431231 (if the customer had a problem with the product)
   – Ticket 1431231 has been closed (if customer problem has been solved)
4. Canceled
   – Payment was Unsuccessful
   – Courier is failed to deliver your order
   – Order is failed to be fulfilled by the Seller
   – Your cancelation request is approved
   – Order is canceled by Admin

And there is a sub-status for every status on the order details page.

As you can see I add the Re-Order button on the order details page when the customer already received the product and complete the order. The re-order button can offer several benefits to both our customers and our business .Let’s explore these benefits:

1. Convenience for Customers:
   The “Reorder” button allows customers to quickly repurchase items they have previously bought without having to search for them again. This saves them time and effort, especially if they frequently purchase the same products.
2. Streamlined Repurchasing Process:
   With the “Reorder” button, customers can initiate the repurchasing process with just one click. It eliminates the need to add items to the cart one by one, simplifying and accelerating the checkout process.
3. Encourage repeat purchases :
   By offering a convenient way to reorder, we encourage repeat purchases from our loyal customers. Repeat business is crucial for e-commerce success, as it helps build customer loyalty and increases customer lifetime value.

And many more.

And that’s a brief explanation for the My Order Details page.

Below is the tracking process flow and User Interface from Need Payment until Completed status :

And that’s the end of the journey from the customer side. I will tell you in the next case study how I design the Admin dashboard and Seller dashboard.

The following images depict the major screens of the app, which have been prototyped at the component level. As a result, the images are free from clutter and provide a clear visual representation of each screen. This prototyping approach allows for a detailed examination of individual components and helps to ensure that the app has a streamlined, user-friendly design.

You can test the happy flow of the Prototype below :