I was the only UI/UX Designer on the team when I joined PT Yobo Sukses Makmur in early 2024. At the time, the company’s single-page website limited its potential to grow as a multi-product exporter. I took full responsibility for the UI/UX direction of the project — managing everything from early research to user testing using a Design Thinking approach. It was a hands-on experience that helped me grow not just in design execution, but also in strategic thinking, problem-solving, and collaboration with stakeholders. Some of the most meaningful contributions I made include:

• Built the experience from the ground up

I redesigned the website into a multi-page, responsive experience for desktop, tablet, and mobile users. The improved structure enhanced content discoverability, increased user trust, and made it easier for international buyers to navigate products like coconut oil and cardamom.

• Created a comprehensive design system in Figma

To bring clarity and cohesion, I designed a scalable design system with defined typography, color tokens, components, layout grids, and accessibility standards. This ensured visual consistency and made future updates more efficient.

• Led user research using the Design Thinking framework

I interviewed five target users and internal stakeholders to uncover usability issues. Applying Design Thinking principles, I translated feedback into concrete design improvements, which resulted in a 15% increase in task success rates.

• Reworked user flows and information architecture

By rethinking how users explore products, send inquiries, and contact the company, I designed optimized user flows that led to a 10% boost in conversions for core product categories.

As I begin the Design Thinking process, I start with the Empathize phase to deeply understand the user—their needs, behaviors, and the challenges they face when interacting with the company websites. This initial step is essential to ensure that the design reflects what users truly expect and addresses real problems.

To achieve this, I conducted in-depth interviews with five individuals who have relevant experience using export websites. These participants included business owners, UI/UX designers, and global trade professionals. I structured the interviews using the Empathy Map framework, which focuses on what the user says, thinks, does, and feels.

The participants were asked to test the website of PT Yobo Sukses Makmur during the interview. Below is the interface they evaluated:

After identifying key user insights during the Empathize phase, I moved into the Define stage—where I synthesized the data into five clear user personas, each based on a real interview participant. These personas helped me focus on specific user needs, frustrations, and goals that the website must address.

Each persona includes eight core elements: name, photo, location, profession, organization, goals, frustrations, and desired features. Here's a brief overview of the five personas:

• Yoseph – A business owner from Purwokerto, Indonesia, striving to present his company more professionally in global markets. He values structured product categories, modern design, and a clear presentation of product details.

• Kalim – A UI/UX designer from Mumbai, India, who prioritizes visual appeal and relevant content. He seeks features like customer testimonials, complete product specifications, and a clean, intuitive layout.

• Hardik – Another UI/UX designer based in Rajkot, India. He emphasizes the importance of product visualization, such as video demos and galleries, along with a seamless buying process and clear shipping info.

• Nizal – A detail-oriented entrepreneur in Ajman, UAE, who focuses on export regulations and standards. He needs thorough export guides, accurate product specs, and an efficient search function.

• Bogden – The founder of an export-import company in Romania. He looks for credibility, transparent shipping policies, and professional company profiles supported by case studies and certifications.

These personas now serve as anchors for design decisions moving forward—ensuring the platform truly supports users’ expectations and business goals.

The visuals for each user persona can be seen in the images below.

I started the ideation process by grouping the five user personas based on their goals, frustrations, and desired features. From this grouping, I defined six core problem statements that represented recurring challenges faced by the users.

For each problem, I formulated six How Might We (HMW) questions to explore possible design opportunities in a structured and creative way.

These problem statements include:

• Users need complete and easily accessible product information.

• The company needs to appear more professional and trustworthy.

• Users require a simple and clear purchase process.

• Users struggle with accessing information due to poor navigation.

• Users want easy and fast ways to contact the company.

• Users are looking for educational content to support their buying decisions.

Each of these was explored through focused How Might We brainstorming, which you can see in the figures below.

The second step in the Ideate phase was to create an affinity diagram. This method helped me organize patterns and relationships among the solution ideas and problem statements generated during the "How Might We" brainstorming. I grouped the initial ideas into more specific categories and developed them into concrete design solutions. These refined ideas focused on elements of user interface and user experience for the website—covering aspects such as layout, interaction, and features that would be realized in the prototype stage. I structured the affinity diagram around specific features and components aimed at solving user problems effectively. The figure below presents a visual representation of the affinity diagram I created for improving the PT Yobo Sukses Makmur website.

After organizing solutions through brainstorming and grouping them using an affinity diagram, I proceeded to the prioritize idea stage. The goal of this phase was to determine which features should be prioritized in the website development process, by balancing user needs with development constraints. To achieve this, I adopted a user value vs effort approach—assessing how beneficial each feature is for users against the effort required to implement it.

To evaluate user value, I analyzed insights gathered from empathy maps and user personas based on the experiences of five participants interacting with the company’s website. I tracked recurring needs and pain points, then converted their frequency into a 1–5 scale. A score of 4–5 was considered high user value, indicating frequent mention and strong importance, while scores of 1–3 were categorized as low user value.

Next, I assessed effort across three key dimensions: cost, time, and labor. Cost ranged from using standard, no-cost elements to integrating premium, custom resources. Time spanned from tasks that could be completed in under a day to those requiring over a week. Labor was measured by task complexity—from simple, quick fixes to features demanding detailed attention, collaboration, and extensive testing. Based on these factors, I classified each feature as either low effort (total score 3–12) or high effort (total score 13–30).

With both user value and effort scores in place, I mapped features into four priority quadrants:

• Low Effort – High User Value: top priority for implementation

• High Effort – High User Value: important features to be developed gradually

• Low Effort – Low User Value: optional features, implemented if resources allow

• High Effort – Low User Value: deferred or not pursued

The prioritized ideas are illustrated in the diagram below:

A user flow is a visual representation of a user's journey when interacting with the PT Yobo Sukses Makmur website. Its purpose is to ensure users can navigate the site easily and intuitively achieve their goals. I created the user flow based on prioritized ideas and insights from two export-import companies relevant to user needs. The user flow is divided into nine main flows: homepage, about us, single product purchase, multiple product purchase, reading articles, search, quick links, social media, and contact us. Each flow is visualized using circles (user actions), rectangles (screens), and diamonds (user decisions).

Here are the descriptions of each user flow:

1. Homepage User Flow – Begins when users land on the homepage. From here, they can choose to browse content, view product information, or read articles. Their decision determines the next step.

2. About Us User Flow – Starting from the homepage, users click on the “About Us” menu and are directed to a page containing company information. The flow is simple and linear.

3. Single Product Purchase User Flow – Users access the product page, select a single product, view its details, fill in the order form, and submit an inquiry.

4. Multiple Product Purchase User Flow – Similar to the previous flow, but users can add several products to a cart before filling in the order form and sending an inquiry.

5. Reading Articles User Flow – Users open the “Blogs” menu from the homepage, view the list of articles, and decide whether to read a full article.

6. Search User Flow – Begins with the search icon accessible from any page. Users enter a keyword, view the search results, and choose to open a result or perform a new search.

7. Quick Links User Flow – Users scroll to the footer and see quick access links. Clicking them will lead to the relevant pages.

8. Social Media User Flow – Users scroll to the footer, find social media icons, and if clicked, they are redirected to the company’s social media pages.

9. Contact Us User Flow – From the homepage, users go to the “Contact Us” menu, then decide whether to only read the contact information or send a message to the company.

The user flows are displayed in the image carousel below.

After completing the user flow, I created the sitemap to outline the structure of PT Yobo Sukses Makmur’s website. The sitemap consists of several main sections designed to help users easily access key information and perform desired actions.

The Home page highlights product visuals, featured recommendations, marketing goals, and the company’s commitment. About Us provides an overview of the company’s background, vision, mission, product showcase, and office location. The Products section presents a categorized product catalog, leading to detailed product pages that include descriptions, certifications, FAQs, and a purchase button. A Purchase Form follows, allowing users to fill in shipping and payment details.

The Blogs section offers curated articles with previews, full content, and related visuals to strengthen branding. On the Contact Us page, users can reach out via contact info, location map, and a message form with confirmation popup. Additional features include Search to quickly find products or articles, a Cart to manage multiple orders, and a Footer with address and social media links.

The sitemap is shown in the image below.

I created low-fidelity wireframes for three screen sizes—desktop, tablet, and mobile—to illustrate the layout and basic user interaction across devices. These wireframes are rough sketches and do not include detailed UI or UX elements, but serve as a foundation for further design development.

The wireframes cover: Home, Hamburger Menu, About Us, Products, Product Categories, Product Info, Purchase Form, Inquiry Sent, Blogs, Article, Contact Us, Popup Message Sent, Search, Empty Cart, Shopping Cart, Keyboard Interaction.

Watch the videos below for a preview of the low-fidelity wireframes.

After completing the wireframe, I moved on to developing the design system. My goal was to ensure that the website’s look and user experience remain consistent, intuitive, and efficient across all devices. This design system serves as the visual and interaction foundation that I applied during the high-fidelity design stage.

Design System Components I Created:

• Typography: I selected a modern font that enhances readability, with font sizes and scales adapted for desktop, tablet, and mobile devices.

• Color Palette: I used a color palette that reflects the company’s branding—a combination of neutral and vibrant tones applied consistently to text, buttons, and interactive elements.

• Logo: I included two versions—a full logo and an icon—used according to context, whether formal or minimal.

• Buttons: I designed various types of buttons, including primary, secondary, and minimalist, each with interactive states (default, hover, active, etc.) and responsiveness across devices.

• Navigation: I created interactive header and footer components for desktop, along with a hamburger menu for mobile and tablet views.

• Cards: I designed responsive cards for displaying products and blog articles, each with interactive states.

• Product Categories: I used a vertical layout for desktop and an interactive overlay for mobile and tablet views.

• Product Images: I arranged a main display image with additional thumbnails and clickable navigation.

• Forms: I created two types of forms—buying and contact—optimized for different input methods based on device type.

• Search & Pagination: I implemented a search feature with clear results and active pagination indicators.

• Cart: I displayed the shopping cart on desktop to allow users to manage item details easily.

By building this design system, I not only ensured visual consistency but also laid a strong design foundation that reinforces the company’s branding and delivers an optimal user experience throughout the website.

A preview of the design system can be seen in the image carousel below.

After completing the low-fidelity wireframes and building the design system, I created the high-fidelity design to represent the final interface with complete visual details and interactivity.

Key Pages & Features I Designed:

• Home Page: Highlights key products and brand values in a responsive layout.

• Navigation: Includes full menu for desktop and a hamburger menu for mobile/tablet.

• About Page: Introduces company profile, values, and location integration.

• Products Page: Displays product categories and listings with brief info and responsive design.

• Product Detail Page: Shows in-depth product information with CTA buttons like “Purchase Now.”

• Purchase Form: Collects buyer details with an inquiry submission feature.

• Confirmation Pages: Inquiry and message confirmation through dedicated pages or popups.

• Blog & Article Pages: Provide product insights and boost branding through written content.

• Contact Page: Includes company contact info and a direct message form.

• Cart Page: Simple cart interface with empty-state handling and responsive layout.

• Search Feature: Allows users to quickly find products or articles.

• Virtual Keyboard Optimization: Ensures smooth typing experience on touch devices.

The following videos showcase the high-fidelity designs in action.

After completing the prototype development, I continued to the usability testing stage to ensure that the website design truly meets user needs and expectations. My main goal was to evaluate the effectiveness of the design based on real user experiences, not just design assumptions.

I involved five evaluators, consisting of one stakeholder from PT Yobo Sukses Makmur, two UI/UX designers, and two global food business practitioners. I chose this combination to gather perspectives not only from the technical design side but also from the business and end-user sides.

The key indicators I used to evaluate the usability were:

• Learnability – how quickly and easily users understand how to use the website

• Efficiency – how efficiently users complete tasks

• Memorability – how easily users recall how to use the website after a break

• Errors – the rate and type of mistakes made during interaction

• Satisfaction – how satisfied users are with their overall experience

Before measuring these indicators through a questionnaire, I first tested the prototype using the Maze platform. I selected Maze because it allowed me to observe how evaluators interacted with the prototype through mission paths, heatmaps, and task completion time.

I designed 12 tasks that reflect the website’s core functionalities, including browsing the homepage, exploring product details, reading blog articles, accessing company information, making purchases, and sending messages via the contact page. Each evaluator performed these tasks on three different devices: desktop, tablet, and mobile, resulting in 36 test scenarios in total.

The Maze results showed a 100% task completion rate, with no drop-offs or misclicks. Completion times varied depending on the device: for instance, product information was accessed faster on mobile, while reading blog articles was more efficient on desktop. 

Below is a snapshot of the Maze test results