This problem inspired me to create uixperiment. It took about a month, and I did everything from research and analysis to design and coding the website. My goal was simple: to make a place where UX designers can practice product thinking in real-world, company-like settings, using common industry standards.

The Problem: More Than Just Pixels

I noticed a clear pattern: designers were getting stuck. They were good at creating designs, but they didn't fully understand the 'why' behind a product—the strategic thinking needed for successful user experiences. This wasn't completely their fault; resources and chances to practice this important skill were limited or often too abstract.

Who I Wanted to Help

The main users for uixperiment were beginner and intermediate UI/UX designers. But the platform was also open to those who recently switched careers to UI/UX, as well as experienced UI/UX designers looking for a new way to practice their skills.

The Core Challenges Designers Faced

Through my observations and early discussions, I found several common challenges that designers often faced:

• "I don't know where to start." Feeling overwhelmed by a blank canvas and not having a clear path to follow.

• "What should I work on?" Struggling to find meaningful projects that are more than just hypothetical and disconnected scenarios.

• "I'm afraid my ideas are too far-fetched and unrealistic." Worrying about failure or creating something impractical, which impacts their confidence..

My Research & Insights: Discovering the Gap

To really understand these challenges, I did detailed research. I looked at discussions in different UI/UX designer groups, did several online interviews using Google Meet, and reviewed existing UX design challenge platforms. I also used Google Forms (and sometimes Tally) for surveys to get broader views.

"My research showed a strong need for challenges that felt 'real'—not just abstract prompts, but situations based on real product issues and industry practices."

The findings confirmed what I initially noticed. Designers faced the exact problems I mentioned. Plus, when I looked at similar platforms, I found a big gap: many challenges were too broad or focused too much on visual design. They often didn't provide the depth and context needed to truly develop product thinking, leaving designers unsure about the strategic impact of their work.

This insight made me more certain that there is a real need for a platform to fill this gap. It should provide challenges that are both interesting and closely connected to product strategy and real-world use.

The Solution: Introducing uixperiment

With a clear understanding of the problem and confirmed insights, I created uixperiment. This platform is a UX design challenge site focused on promoting product thinking. Here's how uixperiment approaches challenge briefs:

• Real-World Application: Challenges are based on real-world apps like YouTube, Netflix, and GoPay. This makes the problems relatable and helps designers think of practical solutions.

• Industry-Standard Briefs: Each challenge uses a structured format with a clear Background, Context, Target User, and Constraints. This reflects how projects are presented in the industry, helping designers meet professional standards.

I developed uixperiment to help UI/UX designers, especially beginners and intermediates, practice product thinking and experience working with real-world and industry-standard briefs.

My Process and Tools

My journey through this project followed a clear path:

1. Research: I used Google Meet for interviews and Google Forms (and sometimes Tally) for questionnaires to gather both numbers and opinions.

2. Design: I used Figma for all design tasks, from basic sketches to detailed prototypes.

3. Coding: I built the website using TRAE. When I encountered problems or bugs, I used AI helpers like GPT and Claude to debug and find solutions.

The goal was simple but ambitious: to create a place where UX designers can practice product thinking in settings similar to real company environments, following common industry standards.

Impact & Results: A Growing Community

It's really satisfying to see uixperiment making a real difference. As of now, the platform has published about 15+ unique challenges, each designed to help designers think beyond just visuals and focus on strategic product thinking. The feedback has been positive, with over 50 designers subscribing to the newsletter, and I believe this number will grow as more people discover the platform.

This early success shows that the main idea of uixperiment is right: designers really want practice that focuses on meaningful products. Seeing designers work through the challenges and begin to present their solutions with a better understanding of user needs and business goals is the most rewarding outcome.

Reflections: Lessons Learned and Future Paths

Building uixperiment has been a challenging, month-long journey of learning and growth. I've gained valuable experience in understanding complex problems, not just spotting them, but really digging into their root causes. This project taught me how to turn those problems into practical, useful solutions—creating something that isn't just nice to look at, but actually serves a purpose.

On the technical side, coding had its own challenges. Handling and fixing bugs was a constant learning experience, which improved my problem-solving skills and taught me the persistence needed in development.

What I Would Do Differently

Looking back, one important lesson stands out. I spent too much time planning the features in advance, which unintentionally delayed the project. When I first started building uixperiment, I thought many ideas were worth adding—feature A, feature B, and so on. While ambition is important, this approach ended up slowing down the project significantly. In the future, if I have the chance to do this project again, I will start with the basic features first.

This experience showed me how important it is to develop in steps and to "ship early and often." It's better to give users a working product and improve it with their feedback than to try for perfection before launching. uixperiment proves this, and I'm excited to keep working on it, always aiming to help UX designers think like product creators.

Visit uixperiment to find fun and challenging UX tasks you can practice for free at https://uixperiment.com.

As a UI/UX designer, I often communicate with clients in English, but I’m not completely fluent. When discussing projects or receiving briefs, I found that tools like Google Translate often provided awkward, unnatural translations that didn’t fully capture the context. This made it harder to communicate effectively & understand important details.

I then tried AI chat tools like GPT & Gemini, which understood context better but gave long explanations instead of direct translations, making things complicated.

I realized I needed a tool that understood context & gave natural translations without extra explanations, so I decided to create my own. This was not only to solve my problem but also to learn web development.

Building the Design

When I imagined how my translator should look, I didn't want the typical layout with just a text box & a button. Since I was already using AI chat tools like GPT & Gemini for translations, I thought—why not make it look like a chat interface?

So, instead of a regular translator design, I created it in a chat-style format. Users type text like they would in a messaging app, & the translation shows up in a separate chat bubble. This way, it feels more natural & easy to use. It also gets rid of unnecessary UI elements, leaving a simple, clean chat interface with message bubbles for both input & output.

Why I Chose a Chat UI

The main reasons I chose a chat-style UI instead of a typical translator layout were:

• It looks modern & stylish. (This is just my personal opinion, but I like modern designs, & chat UIs feel more natural.)

• It acts like a history feature. While it doesn't permanently save translations, I can scroll up to find & copy a previously translated sentence, which is very convenient.

• It eliminates unnecessary steps. There's no need to press multiple buttons or manually clear text—just keep typing & translating.

Designing the Interface

For the design process, I went straight to Figma & created a simple mockup. I kept the interface clean, inspired by modern chat UIs like those of Gemini & GPT. with soft, rounded chat bubbles & a simple, distraction-free layout. The translated text stands out to make it easy to read, & I added a one-tap copy button because I often need to paste translations into emails or messages.

Once the design was done, the real challenge was turning it into a working app.

Turning the Design into Code

With my design ready, it was time to tackle the real challenge—building it into a working web app. As a UI/UX designer, I was familiar with creating interfaces, but I wasn't a developer. However, I had some basic knowledge of HTML, CSS, & JavaScript from my vocational school days, where I made simple projects like a basic web calculator. Even so, I had never worked on a fully functional web app before, so this was my first deep dive into web development.

Since I wanted this to be a web-based translator, I needed to pick the right technologies. After some research, I chose:

• Astro.js – a modern frontend framework that helps build fast & optimized websites.

• Gemini API – for AI-powered translations with better context understanding.

• JavaScript – for managing interactions & API requests.

At first, I thought, "It's just a simple translator. How hard could it be?" But when I started coding, I faced several challenges.

I struggled to turn a static design into an interactive chat interface, learn Astro.js for handling components & routing, connect to the Gemini API for AI responses, & ensure translations were fast with minimal delay.

To overcome these issues, I studied documentation & tutorials, tested small features, sought help from a frontend developer friend, & used AI tools like v0.dev & Claude for debugging & code suggestions.

After a lot of trial & error, I managed to create a chat-based interface where user input & translations show up as chat bubbles. I linked it to the Gemini API for smart translations, got used to Astro.js for managing the frontend, added quick responses with smooth transitions, & included a one-tap copy button for easy access to the translated text.

This was my first real web development project, & even though it wasn't perfect, I finally had something that worked! The next step was to test it & make improvements based on real use.

Testing & Refinement

After getting the translator to work, I started using it in real conversations to see how well it performed. Since I built it mainly for myself, I didn't do formal usability tests, but using it every day helped me find areas to improve.

To deal with occasional slow loading speeds, I added a loading animation so the app wouldn't feel stuck & included a retry option in case the API request failed.

I made small UI improvements, like better text contrast for easier reading, more space between chat bubbles to prevent long translations from feeling cramped, & a clearer copy button for easier copying of translations.

Even though I made this mainly for myself, I shared it with a few friends, including my frontend developer friend who helped me before. He gave feedback on how to make it run faster & handle the API better.

One idea I got was to add a translation history feature instead of just scrolling back. I haven't done this yet, but I plan to think about it for future updates.

After using it many times, fixing small bugs, & making improvements, the translator became good enough for daily use. It wasn't perfect, but it was much better than before—a quick, chat-style translator that gave natural translations without extra explanations.

What I Learned from This Project

Building this translator wasn't just about fixing my problem—it was a big learning experience for me as a UI/UX designer getting into web development.

I learned that design & development are very connected. As a designer, I used to only think about making interfaces that look good & are easy to use. But when I started coding, I realized that technical limits can affect design choices. Some things that seemed easy in a design tool were actually quite hard to do in code.

I also learned that debugging is just part of the process. At first, I got frustrated when things didn’t work, but over time, I got better at solving problems, reading error messages, & finding solutions. Asking my friend & using AI tools really helped. I realized that even experienced developers don’t know everything—they just know how to find the answers.

Working with Astro.js & the Gemini API helped me understand modern web development tools better. I learned how APIs work, how to manage state in a chat-based UI, & how to improve performance for a better user experience.

Most importantly, this project showed me that learning by doing is the best way to grow. Instead of just watching tutorials, I built something real that I use every day. It boosted my confidence in my ability to not only design but also turn ideas into code.

This project may have started as a simple tool for me, but it became an important milestone in my journey as a designer learning web development. Honestly, I can't wait to build more.

If you want to try it, visit the translator link below. Please don't overuse it, as I'm using a free API.

https://ait.akbarpekat.com

Here's a little sneak peek—I'm working on another web development project. This time, it's on a much larger scale, so stay tuned!

In Indonesia, homeowners and skilled workers often have trouble connecting for local projects. Homeowners need a reliable way to find workers, while workers have difficulty finding steady job opportunities. OneTukang fills this gap with a digital platform that helps make connections and simplifies project workflows.

This case study highlights my role as a UI/UX Designer at s.p Digital, where my responsibilities included:

• Researching user flows of similar platforms to learn best practices.

• Conducting design research to create interfaces that work well for both homeowners and workers.

• Developing personas to understand the goals and challenges of different user groups.

• Creating user flows to outline the interactions for key tasks like posting projects, showing interest, and choosing workers.

• Designing both low-fidelity (lo-fi) and high-fidelity (hi-fi) prototypes to visualize and refine the platform’s functionality.

Context and Goals

Context

In Indonesia's local services market, homeowners often have trouble finding reliable workers for their projects, while skilled workers struggle to gain visibility and secure steady job opportunities. This imbalance shows the need for a platform that connects homeowners and workers in a trustworthy and efficient way.

OneTukang tackles these problems by letting homeowners post project listings and allowing workers to show their interest. Further communication between them occurs outside the platform. The system works by having the worker pay the platform to access the homeowner's contact details after being chosen.

Goal

Primary Goals: Focus on creating smooth workflows for homeowners to post projects and for workers to show interest and connect with clients.

Design Goals: Focus on mobile-first design, easy navigation, and trust-building features such as verified profiles and reviews.

Design Research

The client offered initial guidance to streamline the research process by sharing reference websites. These websites helped shape the basic understanding of the platform's functionality and design styles.

1. Werkspot: A platform that connects homeowners with workers, featuring project posting and worker profiles.

2. MyBuilder: Similar to Werkspot, it emphasizes trust-building through reviews and offers a streamlined process for connecting users with service providers.

3. Apple.com: Known for its clean, minimalist interface, focusing on clarity and premium aesthetics.

4. Booking.com: Prioritizes usability with simple navigation and search features designed for a wide range of users.

5. Tripadvisor.com: Highlights user-generated content like reviews and ratings to build trust.

Using the references provided by the client, I analyzed the following aspects to guide the design:

From Werkspot and MyBuilder:

• Streamlined workflows for posting projects and selecting workers.

• Clear display of reviews, ratings, and worker profiles to build trust.

• Mobile-friendly interfaces designed for both service seekers and providers.

From Apple, Booking.com, and Tripadvisor:

• Clean, visually appealing layouts that reduce clutter and improve readability.

• Hierarchical content presentation to guide users smoothly through their journey.

• Focus on trust-building through user reviews and seamless interactions.

The insights from these reference platforms directly influenced the design approach for OneTukang:

1. Simplified Workflows
   Inspired by Werkspot and MyBuilder, I focused on creating easy-to-use flows for key tasks.

2. Trust and Transparency
   Drawing from Tripadvisor, I prioritized features like verified reviews, ratings, and detailed profiles to build confidence in the platform.

3. Visual Aesthetics and Usability
   Inspired by Apple's clean aesthetic and Booking.com's usability, I ensured a balance between elegance and functionality in the designs.

Personas

Based on the insights gathered during design research, I created personas to represent the platform's two main user groups: Homeowners and Workers.

These personas helped guide design decisions by keeping the users' goals, motivations, and challenges at the forefront throughout the design process.

User Flows

User flows were created to outline the journey of both main user groups—Homeowners and Workers—as they used the platform. These flows made sure that important tasks like posting projects and showing interest were easy and efficient.

1. Flow homeowner posting a project

   Objective: Help homeowners post a project, ensuring they provide enough details for workers to assess the opportunity.

   • Home Page: User logs in and selects the type of project they want to post.

   • Project Details Form:

     • Enter basic details (e.g., location, budget range, etc.).

     • Optionally upload images.

   • Review & Submit: User reviews the form and submits the project.

   • Confirmation Page:

     • Shows a confirmation message and an estimated timeframe for workers to express interest.

     • Project is now visible to relevant workers.

2. Flow for Workers Expressing Interest & Getting Homeowner Contact

   Objective: Enable workers to quickly find relevant projects and show their interest.

   • Dashboard: The worker logs in and sees a list of project opportunities that match their skills and location.

   • Project Details Page:

     • The worker clicks on a project to view details such as the title, budget, and homeowner description.

   • Express Interest:

     • The worker clicks the "Interest" button to join the list of interested workers.

     • The worker needs to pay to access the homeowner's contact information.

   • Contact Details Access:

     • After successful payment, the homeowner’s contact details are shown.

     • Workers can now contact the homeowner via phone or WhatsApp.

Visual Design

High Fidelity

User App

Worker App

User Web

Worker Web

Reflections

Working on OneTukang gave me the opportunity to make a significant contribution to building a user-friendly platform that makes it easy for homeowners to connect with local workers. By researching similar platforms, I adopted successful workflows and customized them to meet the needs of our target users. By designing user flows and personas, I ensured that both homeowners and workers have intuitive and efficient interactions with the platform.

Lessons Learned

1. Designing for Dual Audiences

   Balancing the needs of two different user groups (homeowners & workers) was challenging but rewarding. It required careful prioritization of features to ensure both groups could achieve their goals smoothly.

2. Leveraging Client Input

   Starting with client-provided research and references saved a lot of time and allowed me to focus on improving the platform’s user experience.

3. Importance of Mobile Optimization

   Realizing that both user groups relied heavily on mobile devices highlighted the need for a mobile-first approach, which influenced every design decision.

Finally, thank you for taking the time to read this case study. I truly appreciate your interest in my work and the journey behind designing OneTukang. I hope this case study has given you valuable insights into my approach to UI/UX design, from research to execution.

If you have any feedback, questions, or want to discuss similar projects, feel free to connect with me. I’m always eager to learn, grow, and collaborate on meaningful projects that make a difference.

Thank you once again for your time and attention—it means a lot! 😊

Then, when you get the vacancy, you must need detailed info, for example, if you are accepted for a job, what is the scope of your work, then roughly what is my salary range, with the same scenario but your status has just graduated, do you think the vacancy will accept fresh graduates or not? You must be in a dilemma, confused, dizzy (nope, kidding), it must be confusing, right?

So initiating from the above, it was decided to improve the work application flow so that you can get as clear information as possible (no confusion, dilemma, stress) and of course keep it updated with the application you have sent.

User Journey

In general, when you want to apply for a job, more or less you will first find out what position you are interested in and according to your profile, then you read the details of the vacancy, if you feel it fits, you apply, and wait for a call from the company’s HR.

Because it was basically like that, in-depth interviews were conducted with several participants at that time, the goal was to know which steps needed to be improved.

Understandings

When conducting in-depth interviews, there were 2 interesting things about them, this was already mentioned at the beginning of this article, namely:

• Applicants are confused with the details of the vacancies

• They also find it difficult to know the status of the application

So, how to help them with this problem?

Visual Improvements

The method is to make improvements to the appearance of the Job Page on KarirLink, Here there are changes to the information contained in the vacancy card.

If you look at the card there are changes in the information, such as there is a label that informs the user if the vacancy is specifically for Interns, there is also a badge “Partner Kampusmu” which informs that the vacancy is only for graduates of the campus partner of the company concerned.

In addition to the Jobs Page, the detail view for vacancies is also updated.

Significant changes seen are the information displayed is more “focused” and also on the “Lamar Sekarang” button located below.

There’s one more

Then, the next problem is how to keep applicants connected with the applications they bring to the company. After discussing with the team, it will be tested with automation.

The concept is the same as the scenario above but your application is ignored by HR, so your application will automatically be sent back to HR (within a certain time).

Then what if the vacancy is closed? If that happens then your application will automatically be rejected. (If this method is successfully realized, I will also make an article)

Thank You

Thank you for reading to the end, if you like it, you can 👏🏼 clap this article. If you have comments, you can be happy to write them in the comments section.

I also want to thank the entire KarirLink (GOTG) team who have guided me to do this project, there are Mas Yayan, Mas Wahyu, Mas Ichsan, Mas Valda, Mas Zharfan, Mbak Ferani.

And don’t miss the Antman Team, Mbak Dhea, thank you for helping with writing and research too, Mas Sam helped a lot during Research.