PaDi UMKM is an innovative B2B marketplace platform designed to connect Micro, Small, and Medium Enterprises (MSMEs) with State-Owned Enterprises (SOEs). The platform aims to optimize, accelerate, and improve the efficiency of SOE procurement transactions with MSMEs while expanding and simplifying access to financing for MSMEs.
As part of its mission, PaDi UMKM also provides added value through various services such as business development training, legal compliance information, and guidance on utilizing digital technology to maximize business potential. This makes PaDi UMKM more than just a marketplace—it serves as a catalyst for MSME business growth.
However, in the face of rapid technological development, several challenges hinder the platform from reaching its full potential.

Problems

Several key issues with PaDi UMKM, particularly regarding its company profile landing page (Info PaDi UMKM), include:

• Outdated DesignThe current website design feels outdated and does not align with modern design trends, making it less appealing to users. This design fails to convey the platform’s professionalism, especially to corporate audiences such as SOEs and MSMEs.

• Unorganized Information StructureThe landing page’s information is not well-organized, making it difficult for users to understand the platform’s main services and benefits. As a result, the core message of PaDi UMKM is often not effectively communicated.

• Irrelevant InformationSome content on the website is outdated or no longer relevant. For instance, information about programs and features that have changed but have not been updated on the site creates confusion and reduces the platform’s credibility.

• Weak Brand IdentityThe visual elements and messaging on the website are not strong enough to reflect PaDi UMKM’s identity as a trustworthy and professional platform. This undermines users’ trust in the services offered.

• Limited ResponsivenessThe website is not fully responsive across all devices, particularly on mobile phones. Given that most MSME users access information via mobile devices, this lack of responsiveness results in a suboptimal experience.

• Lack of Strong Call-to-Action ElementsThe site does not effectively highlight elements that encourage users to take action, such as signing up or exploring the platform’s features, making it less likely for users to engage further.

Why This Matters

These challenges show that the landing page is not just a digital page but the main gateway for users to understand and trust the PaDi UMKM platform. For a platform with such a strategic mission, ensuring the landing page functions optimally is crucial.The company profile landing page often serves as the first point of contact between users and the digital platform. For PaDi UMKM, this page plays a strategic role in: 

• Providing Relevant Information
  MSMEs and SOEs need a clear understanding of what PaDi UMKM offers, including benefits, opportunities, and how the platform works.

• Building Trust
  As a connector between large entities like SOEs and MSMEs, PaDi UMKM must present itself professionally and credibly through its design and information structure.

• Encouraging User Engagement
  The landing page should attract users’ attention and encourage them to take action, such as exploring features or signing up for the platform.If these functions are not working optimally, the platform’s potential to achieve its goals—both in terms of transactions and community growth—will be hindered. 

Design Challenges

Given the complexity of the problems above, the primary challenge in this project is to redesign the Info PaDi UMKM landing page into a page that is:

Visually Appealing: With a modern, professional design that aligns with current trends and reflects the brand’s identity.

Clear and Informative: Ensuring that users can quickly understand the benefits of joining the platform.

Up-to-Date: Updating content to align with the latest features and services offered by PaDi UMKM.

Brand-Consistent: Strengthening the brand identity, reflecting professionalism, trust, and collaboration.

Action-Driven: Incorporating strong call-to-action elements that drive user engagement.

Target Users and Audience

This landing page is designed with two main groups in mind:

Sellers

Individuals or groups looking for a platform to expand their business reach and gain access to financing and collaboration opportunities with SOEs. Many of these users have varying levels of technological expertise, so the design must be user-friendly.

Buyers

Companies seeking to improve procurement efficiency through collaboration with MSMEs. They require a professional and credible platform for collaboration.

My Role

• Information Gathering : Engaging in discussions with stakeholders to understand the vision, mission, and user needs.

• Problem and Opportunity Analysis : Identifying the current website’s shortcomings and proposing effective design solutions.

• Wireframing and Mockups : Designing the information structure and visual layout with a focus on user experience and brand identity.

• Final Visual Design : Creating a modern, responsive design aligned with PaDi UMKM’s brand guidelines, with a strong emphasis on call-to-action elements.

Disclaimer
In this project, I was responsible for designing the homepage and contact page of the Info PaDi UMKM website. However, the overall process of creating the Information Architecture, setting visual directions for the website, and making strategic decisions was carried out collaboratively with the team and stakeholders. This approach ensured that every design decision reflected the vision of the PaDi UMKM platform and met the needs of its users comprehensively. 

Design Process

1. Gathering Requirements

The design process begins with gathering requirements, where I focus on understanding the problems, goals, and expectations from various stakeholders. This includes offline and online discussions with the PaDi UMKM team.

From these discussions, I gather feedback on:

• Desired Appearance: Stakeholders want a modern, professional design that aligns with PaDi UMKM’s brand identity.
• Clear Information Structure: Users should easily find information about the platform’s benefits, opportunities, and processes.
• Updated Content: Information on the website needs to reflect the latest programs, policies, and services.
• Accessibility: The design must be responsive, particularly for mobile devices, which are the primary access point for many MSMEs.
• Consistent Visual Elements: Integrating design elements from PaDi UMKM’s existing design library to maintain brand consistency.

The insights from these discussions form the basis for crafting the initial design framework, including the structure of information and prioritizing key elements on the landing page.

2. Moodboard Design References Collection

After the requirements gathering phase, the next step is to collect design references or moodboarding. In this stage, I search for inspiration from various sources to ensure that the resulting design can meet the expectations of stakeholders and the target audience. Moodboarding is a crucial step to determine the visual direction and design style that will be applied to the PaDi UMKM landing page.

This process is carried out by gathering relevant design elements from various platforms, websites, and applications that share similarities with PaDi UMKM’s needs. Several elements I focused on during moodboarding include:

• Modern and Professional Visual Design: Searching for references from B2B landing pages or other marketplace platforms that have a clean, elegant, and easy-to-access design. This is essential to create a professional impression that aligns with the PaDi UMKM brand identity.
• Intuitive Structure and Layout: Reviewing how information and key features are organized on other landing pages with easy-to-understand and clear navigation.
• Colors and Typography: Determining a color palette that enhances the PaDi UMKM identity and selecting fonts that support a modern and easily readable appearance.
• Visual Elements that Strengthen the Brand: Drawing inspiration from design elements that can enhance the PaDi UMKM brand image, such as iconography, illustrations, and other graphic elements.
• Using Visuals to Explain Benefits and Processes: Collecting references on how visuals are used to clearly and attractively explain the benefits and processes.

The results from this moodboarding process were compiled into a visual reference board that provides an overview of the desired design direction. This moodboard then served as the foundation to begin creating wireframes and initial sketches for the landing page, which will reflect PaDi UMKM’s brand identity and present information in an effective and engaging way.

3. Competitive Analysis (S.W.C.D.UX.O)

In addition to gathering design references through mood boarding, I also perform a competitive analysis using the S.W.C.D.UX.O method. This approach helps provide a deeper understanding of competitors’ strengths, weaknesses, opportunities, and threats, with a focus on Content, Design, and User Experience.

• Strengths: Positive aspects that competitors’ platforms excel at.
• Weaknesses: Areas where competitors fall short.
• Challenges: Obstacles that competitors face.
• Design: Evaluation of competitors’ visual design.
• User Experience (UX): Assessing navigation, interactivity, and overall user comfort.
• Opportunities: Opportunities that PaDi UMKM can leverage based on competitors’ analysis.

The results of this analysis offer valuable insights into what works and what doesn’t in the design and user experience of similar platforms. This enables me to apply effective strategies and avoid common pitfalls.

Through this analysis, I can:

• Strengthen AdvantagesBy identifying elements from competitors’ strengths, I can incorporate proven effective features and design strategies into the PaDi UMKM landing page.
• Address WeaknessesBy recognizing competitors’ shortcomings, I can ensure PaDi UMKM’s landing page avoids similar issues, delivering a more user-friendly and professional design.
• Identify New OpportunitiesExploring opportunities revealed by the analysis helps me propose new features or elements that can enhance user engagement and the platform’s relevance.
• Improve User ExperienceDrawing on user experience insights, I prioritize designs that simplify navigation, improve comfort, and reduce confusion, especially for users less experienced with digital platforms.
• Refine Visual DesignBased on the design evaluation, I adopt the best visual elements, including illustrations, colors, and typography, to reinforce PaDi UMKM’s brand identity and better engage the target audience.

4. Information Architecture (IA)

After gathering references and performing the competitive analysis, the next step is designing the Information Architecture (IA) for the new Info PaDi UMKM landing page. This involves breaking down the old IA and comparing it with IA from relevant competitor websites.

 Steps in Creating the New IA:

1. Old IA Analysis

I review the old IA of the Info PaDi UMKM website to identify weaknesses in how information was structured. The previous structure made it difficult for visitors to find crucial information, such as the benefits of joining the platform, registration steps, and key features.

2.Competitor IA Study

By studying the IA of competitors with similar marketplace platforms, I identify best practices for organizing information to make it clearer and easier to understand.

3.Creating the New IA

Based on this analysis, I create a new, more structured IA that makes it easy for users to quickly find information related to the benefits of PaDi UMKM,  available programs, the registration process, and other key features. The new IA also incorporates updated and relevant content.Once the new IA is developed, I present it to stakeholders to gather feedback and ensure it aligns with user needs and business goals.

5. Wireframe Creation

Once the Information Architecture (IA) is finalized, the next step is to create wireframes. These wireframes serve as the foundational layout for the page, focusing on elements like headers, navigation, content sections, and call-to-actions.
Steps in Wireframe Creation:

1. Initial Draft

I start by creating an initial wireframe using design tools, mapping out the key elements of the homepage, such as the header, navigation menu, main content areas, and call-to-action sections.

2. Content Prioritization

The wireframe organizes content hierarchically, ensuring that the most important information is prominently displayed to catch users’ attention.

3. Internal Review

After creating the wireframe, I conduct an internal review to ensure that all elements align with the planned IA and the overall user experience goals.
The wireframe serves as the blueprint for developing detailed designs in the next stage—creating High-Fidelity (HiFi) frames.

6. High-Fidelity Frame (HiFi Frame)

The next phase is the creation of High-Fidelity (HiFi) frames, which are detailed visual representations of the final design. These frames include complete visual elements, giving a closer look at how the final landing page will appear.
Steps in HiFi Frame Creation:

1. Design Exploration

I create more different versions of HiFi frames, each exploring various visual styles, including color palettes,  layout, and UI elements.Each version reflects the PaDi UMKM brand identity but with a unique emphasis to provide stakeholders with multiple design options.

2.Presentation and Discussion

These HiFi frames are presented to the team and stakeholders for review and feedback.During the presentation, I explain the design approach, highlight unique elements of each version, and outline the advantages of each design.

3. Selection and Refinement

Based on stakeholder input, one HiFi frame is selected as the preferred design.This selected version is refined further to incorporate feedback, such as adjustments to color schemes, layout changes, or enhancements to UI elements.

4. Responsive Design Development

Once finalized, the chosen HiFi frame is adapted to ensure responsiveness across multiple devices, including desktops, tablets, and mobile phones.

Results and Solutions Achieved

Through a series of structured design stages, the solution developed for the Info PaDi UMKM landing page successfully addressed various problems that had been previously identified.

Problems Addressed:

1. Modern and Relevant Design: The new landing page features a more modern, professional design that aligns with the PaDi UMKM brand identity. This helps create a stronger impression in the eyes of the audience.
2. Clearer Information Structure: With the new information structure, users can easily find the main benefits of the platform, understand the registration steps, and explore the features offered without confusion.
3. Consistently Relevant Information: All displayed content has been updated to reflect the latest developments on the PaDi UMKM platform, ensuring that users receive accurate and up-to-date information according to their needs.
4. Optimal Responsiveness: The responsive design ensures that the landing page is comfortably accessible on various devices, including mobile phones, which are the primary devices for many UMKM actors.
5. Focus on User Action: Strategically placed call-to-action elements, such as the “Register Now” button, encourage users to directly interact with the platform.

With a more targeted and informative design, this new landing page not only enhances the user experience but also strengthens PaDi UMKM’s image as a relevant and trustworthy digital platform. This solution is expected to make a significant contribution toward achieving the platform’s primary goal: bridging UMKM and SOEs in mutually beneficial collaborations.

Reflections and Conclusion

This redesign project for the landing page of Info PaDi UMKM has been a valuable experience in refining visual elements and information structure to meet user needs. By collaborating closely with the team and stakeholders, I was able to create a design that is not only visually appealing but also effective in delivering relevant information.

The focus on responsive design ensures that the page can be accessed comfortably by users on a variety of devices, whether they are MSMEs or SOEs. The project demonstrates that a structured and collaborative design approach can yield solutions that are not just aesthetically pleasing but also impactful in achieving the platform’s business objectives.

Thank you for following along with this design process. If you have any questions or wish to discuss the design approach I used in greater detail, please feel free to contact me.

I believe that good design is not just about aesthetics but about how it meets user needs and drives the platform’s goals.