Micuci

Designing Early Startup Project: Laundry Partners Apps

Role

UI/UX Designer

UI/UX Designer

About Micuci

Micuci (Rewash) is a partnership platform and laundry business investment aimed at empowering home-based businesses, particularly housewives, during these challenging economic times. This project was support by Rewash (Part of Elemes Group)

Micuci (Rewash) is a partnership platform and laundry business investment aimed at empowering home-based businesses, particularly housewives, during these challenging economic times. This project was support by Rewash (Part of Elemes Group)

Executive Summary

Executive Summary

I became the sole designer and successfully created an end-to-end design for laundry apps (mobile, landing page, and admin dashboard) to achieve the user and business objective.

I became the sole designer and successfully created an end-to-end design for laundry apps (mobile, landing page, and admin dashboard) to achieve the user and business objective.

Have ever you seen Ride-Hailing in Laundry Version?

Have ever you seen Ride-Hailing in Laundry Version?

Sure, you didn't read it wrong. This is a case study that I worked on so that users can order a partner (mitra) to wash their clothes for women's empowerment (business terms).

Sure, you didn't read it wrong. This is a case study that I worked on so that users can order a partner (mitra) to wash their clothes for women's empowerment (business terms).

Background Story

Background Story

After performing well at Lajoe, Rewash (a part of Elemes Group) offered me an opportunity for a new project called Micuci.


I assumed the role of the sole designer responsible for creating designs for brochures, forms, clothing, logos, partner bags, ID cards, branding, and communicating with stakeholders regarding UI design (mobile, landing page, and admin dashboard) and its user experience to achieve business goals.

After performing well at Lajoe, Rewash (a part of Elemes Group) offered me an opportunity for a new project called Micuci.


I assumed the role of the sole designer responsible for creating designs for brochures, forms, clothing, logos, partner bags, ID cards, branding, and communicating with stakeholders regarding UI design (mobile, landing page, and admin dashboard) and its user experience to achieve business goals.

Business Goals

Business Goals

The goal of this business project was to attract partners and customers/users, leading to transactions between them. My focus, therefore, was on:

  1. Developing an application that would captivate users, encouraging them to engage with the app.

  2. Creating a seamless transaction experience within the application.

The goal of this business project was to attract partners and customers/users, leading to transactions between them. My focus, therefore, was on:

  1. Developing an application that would captivate users, encouraging them to engage with the app.

  2. Creating a seamless transaction experience within the application.

Kick Off Project

Kick Off Project

I discussed with the Senior Business Development and Project Manager regarding what needed to be done. Following our discussion, I began designing the fundamentals, including the logo, colors, and more. You can check brand guideline Click Here

I discussed with the Senior Business Development and Project Manager regarding what needed to be done. Following our discussion, I began designing the fundamentals, including the logo, colors, and more. You can check brand guideline Click Here

Upon finalizing the design and deciding on the logo and colors, I proceeded to create materials to support business interests. These materials included banners to enhance brand awareness, brochures for door-to-door product campaigns, and vibrant forms to attract potential partners

Upon finalizing the design and deciding on the logo and colors, I proceeded to create materials to support business interests. These materials included banners to enhance brand awareness, brochures for door-to-door product campaigns, and vibrant forms to attract potential partners

Before jump into MVP 1.0

Before jump into MVP 1.0

The Project Manager, in collaboration with the Business Development Team, worked together to create the MVP (Minimum Viable Product) for Micuci using a WhatsApp group for partners. So, the business has started running.


Meanwhile, I initiated the planning of the design for the Micuci mobile application.

The Project Manager, in collaboration with the Business Development Team, worked together to create the MVP (Minimum Viable Product) for Micuci using a WhatsApp group for partners. So, the business has started running.


Meanwhile, I initiated the planning of the design for the Micuci mobile application.

Dissecting Ideas: 2 User Flow for Users and Partners

Dissecting Ideas: 2 User Flow for Users and Partners

I began by creating two simple user flows: one for users and the other for partners (mitra).


The primary objective is to enable users to order a laundry service from partners (mitra cuci) for the pickup of their laundry, and for partners (mitra) to efficiently pick up the laundry. It may sound simple, but it is not an easy task, because prest to PM and Business Team.

I began by creating two simple user flows: one for users and the other for partners (mitra).


The primary objective is to enable users to order a laundry service from partners (mitra cuci) for the pickup of their laundry, and for partners (mitra) to efficiently pick up the laundry. It may sound simple, but it is not an easy task, because prest to PM and Business Team.

The challenge is to create a simple user flow to attract users and achieving business objective (placing orders for partners (mitra).

The business objective is to enable users to order a laundry service from partners and facilitate transactions, and generate revenue from users and partners.


After a lengthy discussion with stakeholders, blend user needs (user and partners) and business goals with Business Development Team and Project Manager, the flow has been finalized and is ready for UI design👇🏻.

The challenge is to create a simple user flow to attract users and achieving business objective (placing orders for partners (mitra).

The business objective is to enable users to order a laundry service from partners and facilitate transactions, and generate revenue from users and partners.


After a lengthy discussion with stakeholders, blend user needs (user and partners) and business goals with Business Development Team and Project Manager, the flow has been finalized and is ready for UI design👇🏻.

The difference with the previous user flow is that the user chooses a partners (Mitra), in the current user flow the washing partner is directly selected by our system. This is to speed up the process of ordering washing partners.


Apart from that, another difference is that users do not choose the time to be picked up, but users can directly order a washing partner at any time, the reason is that in some cases there are users who want their laundry to be picked up straight away without a definite time.


Using "code" in User Flow prevents fraud or other people claiming to be partners (Mitra) other than washing partners (user feels secure).

The difference with the previous user flow is that the user chooses a partners (Mitra), in the current user flow the washing partner is directly selected by our system. This is to speed up the process of ordering washing partners.


Apart from that, another difference is that users do not choose the time to be picked up, but users can directly order a washing partner at any time, the reason is that in some cases there are users who want their laundry to be picked up straight away without a definite time.


Using "code" in User Flow prevents fraud or other people claiming to be partners (Mitra) other than washing partners (user feels secure).

For User flow partners there are many additions such as the figure on below👇🏻

User flow partners were initially just partners takes orders>partners comes to user.


However, this creates problems if partners happen to open their phone just to check their account and suddenly get an order,


Additionally, there are several improvements such as:

  1. Partners can be given the option to take orders or not

  2. Provide order details after entering the code from the user

  3. Provide users with laundry progress on partners

User flow partners were initially just partners takes orders>partners comes to user.


However, this creates problems if partners happen to open their phone just to check their account and suddenly get an order,


Additionally, there are several improvements such as:

  1. Partners can be given the option to take orders or not

  2. Provide order details after entering the code from the user

  3. Provide users with laundry progress on partners

Combining 2 user flows into one business entity

Combining 2 user flows into one business entity

Combining these two user flows resulted in a seamless match between users and partners during the ordering process. The aspects considered in this combination included:

  1. Observing the real-life sequence of their interactions (storyboard).

  2. Considering the business aspect: facilitating transactions as quickly as possible.

Facilitating quick transactions equates to attracting more user engagements.

Combining these two user flows resulted in a seamless match between users and partners during the ordering process. The aspects considered in this combination included:

  1. Observing the real-life sequence of their interactions (storyboard).

  2. Considering the business aspect: facilitating transactions as quickly as possible.

Facilitating quick transactions equates to attracting more user engagements.

Convert User Flow Into High-Fidelity Design: User

Convert User Flow Into High-Fidelity Design: User

Based on user flow that I made. I created high fidelity for first focus on attracting users to make orders. First of all, my focus is making onboarding for users attract to our product without thinking what the product is.

Based on user flow that I made. I created high fidelity for first focus on attracting users to make orders. First of all, my focus is making onboarding for users attract to our product without thinking what the product is.

Onboarding Design For Attract User

Onboarding Design For Attract User

Based on user flow that I made. I created high fidelity with our internal design system for first focus on attracting users to make orders.


First of all, my focus is making onboarding for users attract to our product without thinking what the product is.

Based on user flow that I made. I created high fidelity with our internal design system for first focus on attracting users to make orders.


First of all, my focus is making onboarding for users attract to our product without thinking what the product is.

After the user has completed viewing the onboarding process we provided, we don't immediately prompt them to log in. Instead, we give them the freedom to explore and get a feel for the application first.


It's only when they click on a feature or a button that requires an action that they are directed to the login screen. This approach allows users to familiarize themselves with the app's functionalities before committing to logging in.

After the user has completed viewing the onboarding process we provided, we don't immediately prompt them to log in. Instead, we give them the freedom to explore and get a feel for the application first.


It's only when they click on a feature or a button that requires an action that they are directed to the login screen. This approach allows users to familiarize themselves with the app's functionalities before committing to logging in.

Ordering Partners (Mitra)

Ordering Partners (Mitra)

When creating this high-fidelity design, the primary focus is on guiding partners to easily order laundry services with elaborate user flow

When creating this high-fidelity design, the primary focus is on guiding partners to easily order laundry services with elaborate user flow

The design must be clear and straightforward, ensuring that users can quickly and effortlessly place their orders from the very beginning.

The design must be clear and straightforward, ensuring that users can quickly and effortlessly place their orders from the very beginning.

Convert User Flow Into High-Fidelity Design: Partners (Mitra)

Convert User Flow Into High-Fidelity Design: Partners (Mitra)

From the carefully crafted user flow, it becomes clear that partners (Mitra) have key priorities: activating their accounts, accepting, rejecting, and providing updates on their progress orders.


I created homescreen for partners (mitra) could take orders with 3 status.

From the carefully crafted user flow, it becomes clear that partners (Mitra) have key priorities: activating their accounts, accepting, rejecting, and providing updates on their progress orders.


I created homescreen for partners (mitra) could take orders with 3 status.

Each status on the home screen serves a different function:

  1. Inactive: When the status is inactive, the partner account has not yet activated the option to receive orders.

  2. Active: In this state, the partner account is ready and able to receive orders.

  3. Disabled: When disabled, the partner account is currently processing orders that are in progress for cleaning.


Understanding these conditions helps partners manage their tasks efficiently and ensures smooth operation within the system.

Each status on the home screen serves a different function:

  1. Inactive: When the status is inactive, the partner account has not yet activated the option to receive orders.

  2. Active: In this state, the partner account is ready and able to receive orders.

  3. Disabled: When disabled, the partner account is currently processing orders that are in progress for cleaning.


Understanding these conditions helps partners manage their tasks efficiently and ensures smooth operation within the system.

Take Orders: Give Reason If you Reject It

Take Orders: Give Reason If you Reject It

In some cases, several partners were deliberately not picking up laundry orders without providing clear reasons, often failing to give any explanation at all.

In some cases, several partners were deliberately not picking up laundry orders without providing clear reasons, often failing to give any explanation at all.

With this hypothesis in mind, our focus, besides ensuring that partners pick up orders, was to provide reasons if they declined to take orders and to prevent the use of passive-aggressive language when rejecting orders.

With this hypothesis in mind, our focus, besides ensuring that partners pick up orders, was to provide reasons if they declined to take orders and to prevent the use of passive-aggressive language when rejecting orders.

Take Order: Start Take Order's Laundry

Take Order: Start Take Order's Laundry

When partners received an order to pick up a user's laundry, they were provided with information about the user who placed the order.

When partners received an order to pick up a user's laundry, they were provided with information about the user who placed the order.

To transform it into a High Fidelity Design, some elaboration was needed since the user flow was only a rough outline.


The elaboration focused on the section "adding laundry details," which involved incorporating modals/alerts to ensure the laundry order was accurate

To transform it into a High Fidelity Design, some elaboration was needed since the user flow was only a rough outline.


The elaboration focused on the section "adding laundry details," which involved incorporating modals/alerts to ensure the laundry order was accurate

Progress Orders by Partners (Mitra)

Progress Orders by Partners (Mitra)

The main goals of the partner providing laundry progress updates was to give users peace of mind and feel safe by showing that their clothes were currently being processed.


The process itself consisted of five steps, starting from taking photos of the laundry and pick-up, to delivery order.

The main goals of the partner providing laundry progress updates was to give users peace of mind and feel safe by showing that their clothes were currently being processed.


The process itself consisted of five steps, starting from taking photos of the laundry and pick-up, to delivery order.

Dashboard is ready to be developed

Dashboard is ready to be developed

On other side, i have design dashboard for admin manage their order. Dashboard such as:

  1. Dashboard: Overview for dashboard

  2. Mitra Manajemen: Manages Partner (Delete, input, and filters)

  3. Order Manajemen: Manages revenue stream from apps

  4. Admin Manajemen: Manages admin who can access dashboard

On other side, i have design dashboard for admin manage their order. Dashboard such as:

  1. Dashboard: Overview for dashboard

  2. Mitra Manajemen: Manages Partner (Delete, input, and filters)

  3. Order Manajemen: Manages revenue stream from apps

  4. Admin Manajemen: Manages admin who can access dashboard

Everthing is Set: Ready to Market!

Everthing is Set: Ready to Market!

After designing onboarding, orders, profile and history for MVP 1.0. We are designing banner to launch our apps to Playstore

After designing onboarding, orders, profile and history for MVP 1.0. We are designing banner to launch our apps to Playstore

In fact, I'm already done for MVP 2.0

In fact, I'm already done for MVP 2.0

MVP 2.0 is contain several improvement for progress laundry from user perpective, rating for partners, more history category, and payment method from digital wallet for next development.

MVP 2.0 is contain several improvement for progress laundry from user perpective, rating for partners, more history category, and payment method from digital wallet for next development.

Order Partners, Progress, Codes, and Payment

Order Partners, Progress, Codes, and Payment

In MVP 1.0, ordering laundry only provided a code to the user, and the order codes were sent via WhatsApp messages from our admin. The payment method was COD (Cash on Delivery), so the payment was made directly between the user and the partners (mitra) on the spot.


In MVP 2.0, there will be an application progress, order codes, and payment integrated into our mobile app. This means users will be able to see the progress of their orders: waiting for partner confirmation, QR Code (Order Codes), payment methods via digital wallet (Dana) or COD (Cash on Delivery), and Progress Orders or Laundry

In MVP 1.0, ordering laundry only provided a code to the user, and the order codes were sent via WhatsApp messages from our admin. The payment method was COD (Cash on Delivery), so the payment was made directly between the user and the partners (mitra) on the spot.


In MVP 2.0, there will be an application progress, order codes, and payment integrated into our mobile app. This means users will be able to see the progress of their orders: waiting for partner confirmation, QR Code (Order Codes), payment methods via digital wallet (Dana) or COD (Cash on Delivery), and Progress Orders or Laundry

Order Partners

Order Partners

I was preparing several improvements to the MVP 2.0 design for partner orderings. These improvements included features like partner ratings, aimed at providing a clearer picture of each partner.

I was preparing several improvements to the MVP 2.0 design for partner orderings. These improvements included features like partner ratings, aimed at providing a clearer picture of each partner.

Waiting for Partners Confirmation and Code Order

Waiting for Partners Confirmation and Code Order

After the user placed an order, the partners were on their way to the user's location, and the user could provide the order code displayed. The user could also make the payment afterward.

After the user placed an order, the partners were on their way to the user's location, and the user could provide the order code displayed. The user could also make the payment afterward.

Payment Method: Digital Wallet or COD

Payment Method: Digital Wallet or COD

In MVP 1.0, the payment method was still Cash on Delivery (COD). During various case studies, we realized that since our target market was primarily young people, a digital payment method was essential from a business perspective. Thus, we provided this in MVP 2.0.

The digital wallet payment method utilized a Digital Wallet API that was previously integrated into the profile > payment method section. However, we retained the COD option to ensure that partners (Mitra) still had access to cash transactions.

In MVP 1.0, the payment method was still Cash on Delivery (COD). During various case studies, we realized that since our target market was primarily young people, a digital payment method was essential from a business perspective. Thus, we provided this in MVP 2.0.

The digital wallet payment method utilized a Digital Wallet API that was previously integrated into the profile > payment method section. However, we retained the COD option to ensure that partners (Mitra) still had access to cash transactions.

Progress Laundry

Progress Laundry

Previously, during the development of MVP 1.0, the progress of laundry was communicated to customers via WhatsApp through our admin. For the next phase, in MVP 2.0, the laundry progress will be integrated into the mobile app.


This means that users will be able to directly monitor their laundry or orders by navigating to History > Card Progress Order.

Previously, during the development of MVP 1.0, the progress of laundry was communicated to customers via WhatsApp through our admin. For the next phase, in MVP 2.0, the laundry progress will be integrated into the mobile app.


This means that users will be able to directly monitor their laundry or orders by navigating to History > Card Progress Order.

My work was finished. The project was completed.

My work was finished. The project was completed.

My work was finished, and so was this project, especially the design phase, which was achieved in 1.5 months.

My work was finished, and so was this project, especially the design phase, which was achieved in 1.5 months.

But …

But …

The project that had been meticulously designed by the PM and Business Team encountered funding issues from investors. Consequently, the project was discontinued. The team, which had been built over several months, eventually disbanded.


However, my Project Manager and Senior Business Development were proud of me as a UI/UX Designer for the progress I had made on the project.

The project that had been meticulously designed by the PM and Business Team encountered funding issues from investors. Consequently, the project was discontinued. The team, which had been built over several months, eventually disbanded.


However, my Project Manager and Senior Business Development were proud of me as a UI/UX Designer for the progress I had made on the project.

Conclusion

Conclusion

From the project I worked on, I reached several conclusions:


  1. The project was delivered successfully in terms of design (as the PM said).

  2. I was able to create the design for the next version of the MVP, even though the initial stage MVP was still in development.

  3. It became evident that further funding was necessary for this project.

From the project I worked on, I reached several conclusions:


  1. The project was delivered successfully in terms of design (as the PM said).

  2. I was able to create the design for the next version of the MVP, even though the initial stage MVP was still in development.

  3. It became evident that further funding was necessary for this project.

Leason Learned

Leason Learned

This is the best project so far to me as Designer. but i have learned a lot, such as:


  1. I'm so confident the project will be good in the future but there is something we can't control

  2. Communication is a key, especially for stakeholder

  3. Embrace all unit to reaching a goals

  4. Discuss request design or pushing back that request

This is the best project so far to me as Designer. but i have learned a lot, such as:


  1. I'm so confident the project will be good in the future but there is something we can't control

  2. Communication is a key, especially for stakeholder

  3. Embrace all unit to reaching a goals

  4. Discuss request design or pushing back that request

Thank you

Thank you

Another Design in this Project

Another Design in this Project

Here are some designs I've created for this project👇🏻

Here are some designs I've created for this project👇🏻

Improvement Login and Onboarding for User

Improvement Login and Onboarding for User

The improvement of user logins between MVP 1.0 and 2.0 that I created for this project. I had been improvising with flat design to reduce loading times during onboarding.

The improvement of user logins between MVP 1.0 and 2.0 that I created for this project. I had been improvising with flat design to reduce loading times during onboarding.

Improvement History Orders

Improvement History Orders

In this design, several improvements were made, such as adding sections for ongoing, completed, and canceled bookings.

In this design, several improvements were made, such as adding sections for ongoing, completed, and canceled bookings.

Rating on Homescreen

Rating on Homescreen

Sometimes, users would forget to rate their partners, even though this rating was crucial for informing the partners about their performance.


Recognizing this issue, I designed a partner rating feature directly on the homescreen to ensure users wouldn't miss the opportunity to provide feedback.


The decision to place the rating feature on the homescreen stemmed from its strategic position—being an area frequently accessed by users. This way, users were constantly reminded to rate their partners, making the feedback process seamless and effective.

Sometimes, users would forget to rate their partners, even though this rating was crucial for informing the partners about their performance.


Recognizing this issue, I designed a partner rating feature directly on the homescreen to ensure users wouldn't miss the opportunity to provide feedback.


The decision to place the rating feature on the homescreen stemmed from its strategic position—being an area frequently accessed by users. This way, users were constantly reminded to rate their partners, making the feedback process seamless and effective.

Create a free website with Framer, the website builder loved by startups, designers and agencies.