UX Designer

with a Fullstack Background

I am a user-centric designer with 4+ years of experience, specializing in translating complex user needs and business goals into intuitive, functional digital experiences.

Case Studies

SIMBPB Redesign

System Redesign: SIMBPB (Ministry)

Redesigning a complex internal administrative system for non-technical ministry staff.

UX Research System Design User Interviews
View Case Study
HR Dashboard

Internal Tool UX: HR Dashboard

Designing an internal tool to automate HR workflows, saving 10+ hours of manual work weekly.

Internal Tool Dashboard UX Design Automation
View Case Study
E-commerce UX

E-commerce Platform UX/UI

Designing user-centric UI/UX for multiple Shopify & Woocommerce shops to improve conversion.

E-Commerce Shopify Woocommerce UI/UX
View Case Study
Event System

Event Registration System

Designing a full event registration system with a Wordpress backend, including ticketing and user flows.

UX Design Wordpress Event System Design
View Case Study
Affiliate System

Custom Feature & Plugin UX Design

Designing user flows and business logic for custom Wordpress plugins (Affiliate, Payments, Login).

UX Design Business Logic Plugin Wordpress
View Case Study
More Projects

And Many More...

My work includes various other web projects, UI/UX enhancements, and custom developments. Let's talk!

UI/UX Wordpress Web Development
Get In Touch

About Me

Yasyfi Zeyd

My design philosophy is simple: bridge the gap.

I am a UX Designer with the hands-on experience of a Fullstack Developer. This unique background allows me to not only design solutions that are intuitive and user-friendly, but also technically feasible and efficient to build.

I thrive in collaborative environments, acting as the translator between user needs, business goals, and developer execution. I believe the best products are built when these three pillars are in perfect alignment.

  • UX Research & Interviews
  • Wireframing & Prototyping
  • User Flows & Journey Mapping
  • Figma (Components & Styles)
  • Fullstack Development (HTML, CSS, JS)
  • Stakeholder Communication

System Redesign: SIMBPB (Ministry)

Redesigning a complex internal administrative system for non-technical ministry staff.

← Back to all projects

The Problem

The Ministry of Public Affairs was using an outdated internal system ('SIMBPB') for administrative tasks. The system was clunky, non-intuitive, and required extensive manual data entry. This led to a high rate of user error, frustrated employees, and slow reporting processes.

My Role

Lead UX Researcher, System Analyst, and UI Designer. I was responsible for the entire redesign process, from user research to final mockup handoff.

The Process

1. User Research & Analysis

I began by conducting user interviews with 5 non-technical ministry staff who used the system daily. I mapped their existing, frustrating workflows and identified key pain points.

  • **Pain Point 1:** Users couldn't find the features they needed.
  • **Pain Point 2:** Data entry was repetitive and slow.
  • **Pain Point 3:** The system was not accessible on mobile devices.
User Journey Map

2. Wireframing & Prototyping

Based on the research, I designed low-fidelity wireframes in Figma. The focus was on creating a clean, dashboard-centric layout, simplifying navigation, and automating repetitive tasks. These wireframes were tested and iterated upon with the same group of users.

Wireframe 1 Wireframe 2

3. High-Fidelity Design

Once the flow was validated, I developed the high-fidelity UI mockups. I created a simple design system with clear typography, accessible colors, and a responsive layout to ensure the staff could use it on any device.

Final Mockup

The Result

The new system design was presented to stakeholders and the development team. The user-centric design was approved, which led to the development of a modern, intuitive CMS and administrative system that significantly improved usability and optimized data reporting workflows for the ministry.

Internal Tool UX: HR Dashboard

Designing an internal tool to automate HR workflows, saving 10+ hours of manual work weekly.

← Back to all projects

The Problem

The HR team at Coexist.co.id was manually tracking employee attendance and overtime using spreadsheets. This process was time-consuming, prone to human error, and took over 10 hours of manual work each week. They needed an automated solution.

My Role

Lead UX/UI Designer and Fullstack Developer. I was responsible for the entire project, from analyzing the problem to designing the UI and building the functional dashboard.

The Process

1. Problem Analysis

I interviewed the HR manager to understand their exact manual process. The main issue was consolidating data from multiple sources. The goal was simple: create a "single source of truth" dashboard.

2. Design & Prototyping

I designed a clean, data-first dashboard. The UI focused on clarity, allowing the HR manager to see key metrics (Total Overtime, Attendance Rate) at a glance. I used Figma to create a high-fidelity prototype that showed the flow of data.

HR Dashboard Mockup

3. Development (My Technical Advantage)

Because of my fullstack background, I was able to not only design the tool but also build it. I connected the database, automated the data collection, and built the front-end exactly as designed. This cut the project time in half.

The Result

The new internal dashboard was launched successfully. It **automated the entire workflow**, providing real-time data and **saving the HR team over 10+ hours of manual work per week**.

E-commerce Platform UX/UI

Designing user-centric UI/UX for multiple Shopify & Woocommerce shops.

← Back to all projects

The Problem

Clients (like Thesupergrain.id and Graaaund.com) needed e-commerce websites that were not only visually appealing but also easy to navigate, especially on mobile. The primary goal was to improve conversion rates by creating a seamless checkout flow.

My Role

UX/UI Designer & Developer. I was responsible for customizing Shopify and Woocommerce themes, designing user flows, and implementing the front-end.

The Process

My focus was on mobile-first design and reducing friction in the checkout process.

  • Analyzed user flow from landing page to purchase.
  • Redesigned product pages for clarity and visual appeal.
  • Simplified the checkout process, removing unnecessary steps.
E-Commerce Checkout

The Result

The redesigned shops saw a measurable increase in conversion rates, particularly on mobile devices. Clients reported positive feedback on the new, intuitive user interface.

Event Registration System

Designing a full event registration system with a Wordpress backend.

← Back to all projects

The Problem

A client needed a system for users to register for their events, but existing solutions were too complex or expensive. They needed a custom, user-friendly system built on their Wordpress backend that could handle different ticket types and user registration flows.

My Role

Lead UX Designer and System Analyst. I was responsible for mapping the entire event registration user journey and designing the admin interface.

The Process

1. User Flow Mapping

The first step was to map out the complete user journey. What happens when a user lands on the event page? How do they select a ticket? What information is needed? How is payment handled? I created a detailed user flow to visualize this process.

Event Registration User Flow

2. Interface Design (Frontend & Backend)

I designed high-fidelity mockups for both the user-facing registration form (making it simple and frictionless) and the admin dashboard (allowing the client to easily see and manage attendees).

Registration Form Admin Dashboard

The Result

The custom system was successfully developed and launched. The client was able to manage their events independently, and users reported an easy and seamless registration process.

Custom Feature & Plugin UX Design

Designing the end-to-end user flow and business logic for custom Wordpress features.

← Back to all projects

The Problem

Clients needed functionality that didn't exist in standard plugins. They had complex business logic—like an affiliate program, manual payment confirmations, or custom login pages—and needed a simple, intuitive UX for their users (and admins).

My Role

System Analyst, UX Designer, and Developer. I translated complex business logic into functional, user-friendly plugins.

The Process

The main challenge was translating complex business logic into simple user journeys. I mapped out every user flow:

  • **Affiliate System:** How does a user register? How is a visit tracked? What does their dashboard look like?
  • **Payment Plugins:** How does a user submit a "Manual Bank Payment"? How do they upload proof for the "Bank Payment Confirmation" plugin?
  • **Custom Login:** How can the "Wordpress Login" be restyled and moved to a custom URL without confusing the user?
Affiliate Dashboard Mockup

I designed simple interfaces for each of these custom plugins, ensuring they felt like a native part of the Wordpress experience.

The Result

I successfully designed and built several custom plugins that solved specific client problems. The affiliate system, in particular, **created a new revenue stream for the client** by empowering their users to become brand ambassadors.