Johar — UI/UX Designer

Habit Tracker

A UI exploration of a habit tracker app that brings daily routines, mood, and sleep quality into one flow.

Habit Tracker mood check-in asking how you are feeling today

Habit Tracker sleep quality summary with a sleep stages chart

Problem

Habit apps typically separate routines, emotions, and sleep data into different sections. Users have to move between screens to see how these connect.

Approach

Routines on the home screen. The date and today’s habits are visible from the start.
Mood with visual choices. Logging takes a single tap, without the need for a numeric scale.
Sleep in one summary. Score, duration, and sleep stages are shown in a single, easy-to-read chart.

Expected outcome

Daily logging becomes quicker, and users can more easily see how habits, mood, and sleep relate to each other.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Task Dashboard

An exploration of a task management dashboard with a monochrome palette and 3D icons that presents tasks, projects, and work status concisely.

Problem

Task dashboards often show too much information at once. Users struggle to see what needs attention today and what is still pending.

Approach

Status summary at the top. Completed, pending, overdue, and active tasks are visible in one row.
Today’s projects as the priority. Projects due today appear first, with progress and deadlines.
Clear separation. Upcoming and completed projects are grouped separately so they do not distract from current work.

Expected outcome

Users can understand their daily priorities at a glance.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Pilates Mobile App

A mobile app exploration for Pilates that combines warm, dramatic lighting, immersive photography, and bold UI elements to create an experience that feels modern, engaging, and easy to use.

Pilates app home screen held in a hand, next to an upper body session card and a weekly progress card

Problem

Many workout apps feel like video catalogs. Users struggle to see what to do today and how far they have progressed.

Approach

Status summary at the top. Completed, pending, overdue, and active tasks are visible in one row.
Today’s projects as the priority. Projects due today appear first, with progress and deadlines.
Clear separation. Upcoming and completed projects are grouped separately so they do not distract from current work.

Expected outcome

Users can understand their daily priorities at a glance.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Fitness Tracking Mobile App

A mobile app exploration for fitness tracking that brings sleep, heart rate, steps, routes, and activity together in one easy-to-read experience.

Fitness app home with sleep, heart rate and steps, a route planner, a running goal card and weekly activities

Problem

Fitness apps often spread health and activity data across many separate screens. Users find it hard to see their body condition and training progress as a whole.

Approach

Daily condition summary on the home screen. Sleep, heart rate, and steps are shown with scores and simple charts.
Visual route planning. Start point, destination, and remaining time are visible directly on the map.
Clear running goal. Users see pace, cadence, and distance covered in a single card.
Weekly activity with time filters. Users can switch between week, month, year, and all data.

Expected outcome

Users can understand their condition and training progress more quickly.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Finance Dashboard

An exploration of a finance dashboard that presents credit history, transactions, and credit limits in numbers and a stacked bar chart. Suited to fintech products that need a concise yet informative view.

Problem

Users of financial services often struggle to understand their credit position: how much comes in and goes out, how close they are to their limit, and when payment is due. This information is usually spread across several menus.

Approach

Credit history at the center. Income and expenses appear in a stacked bar chart, with time ranges from 24 hours to 12 months.
Credit limit and bills in one card. Users see their balance used, minimum payment, and recommended payment without switching pages.
Quick actions at the top. Top up, send, and request money are available as easy-to-reach buttons.

Expected outcome

Users can understand their financial condition and their next payment step in a short time.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Task Management App

An exploration of a task management app that uses gradient cards, line ornaments, and a combination of Serif and Sans Serif typefaces to create a distinctive yet calm feel.

Task app day view with a weekly calendar and recent activities

Task app statistics sheet with gradient cards for prioritized and additional tasks

Task app add activity sheet with quick duration choices

Problem

Productivity apps often feel rigid and uniform. Users need a lighter way to plan activities and track progress without feeling overwhelmed.

Approach

Weekly calendar as the main navigation. Users can move between days quickly and see ongoing activities.
Guided start for new users. Simple steps help users begin planning without feeling overwhelmed.
Statistics with gradient cards. The percentage of priority and additional tasks is presented in an easy-to-scan visual.
Concise activity input. Task name, duration, and time can be entered on one screen with quick duration choices.

Expected outcome

Users can start planning tasks more quickly and feel more in control of their daily progress.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

VPN Mobile App

An exploration of a VPN app with a calm, trustworthy feel that simplifies connection and location selection without sacrificing functionality.

VPN app home with a secured connection timer and power button

VPN app location list with flags, IP addresses and latency

VPN app statistics with download and upload speed charts

Problem

VPN apps often feel technical and confusing. Users want to know whether their connection is secure and active, but this information is often scattered or overly complex.

Approach

Clear connection status on the home screen. The power button, “Secured Connection” status, and connection duration are visible in one view.
Easy-to-scan location selection. The country list shows flags, IP addresses, and latency so users can choose quickly.
Concise statistics. Download speed, upload speed, and ping are shown with simple charts.
Consistent bottom navigation. Four main sections are easy to reach and always visible.

Expected outcome

Users can understand their connection status and choose a location with more confidence.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Language Learning App

An exploration of a language learning app that combines structured practice, pronunciation, and interactive conversation in one light and engaging experience.

Language app home asking how you would like to practice

Language app pronunciation card with meaning and synonyms

Language app conversation with inline corrections

Problem

Many language apps focus on vocabulary memorization, so learners get limited practice speaking and understanding how words are used in context.

Approach

Clear practice modes on the home screen. Flash cards, skills, speaking, and quick match can be selected directly from the home screen.
Pronunciation with meaning. Each word includes its transcription, definition, and synonyms, along with audio and recording controls.
Conversation with direct correction. Sentences that need improvement are shown alongside a corrected version, so learners improve while speaking.

Expected outcome

Users can practice speaking more confidently and understand word usage better.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Financial App: UI Elements

A collection of UI components for a financial app, including balance, transfers, transaction details, spending limits, and wealth summary, in a clean and easy-to-scan style.

Financial app UI cards: balance, transaction details, card spending limit gauge and total wealth

Problem

Financial apps often display many numbers at once. Users struggle to understand their balance, fees, and spending limits without reading every detail.

Approach

Balance and key actions at the top. Users see their balance immediately and can add funds, send money, or convert currency.
Clear transaction details. Amount sent, fees, converted value, and final amount are presented in sequence, with the received amount as the main focus.
Spending limits that are easy to understand. A semicircle gauge shows how much has been spent and what remains of the monthly limit.
Wealth summary with quick actions. Cash balance, linked accounts, and investment options are accessible from one card.

Expected outcome

Users can understand their financial condition and transaction costs more quickly.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Rental Property Management App

An exploration of a host app for managing availability, pricing, and bookings for rental properties in one simple flow.

Rental host app home with setup steps to move forward

Rental host app calendar with daily pricing

Problem

Rental property hosts often manage calendars, pricing, and booking settings across several places. As a result, the initial setup feels complicated and time-consuming.

Approach

Step-by-step guidance. Hosts complete basic setup gradually, starting with guest rules and booking settings.
Calendar with daily pricing. Availability and rates appear in one monthly view, so hosts can adjust specific dates without switching screens.
Market insights in one place. Local search trends are presented concisely to help hosts set prices.

Expected outcome

Hosts can finish the initial setup more quickly and feel more confident setting prices.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Flight Tracking App

An exploration of a passenger app that displays flight status, airport weather, and routes in one concise experience.

Flight app airport screen with current weather and visibility

Flight app departure details with terminal, gate and delay status

Problem

Passengers often need to check several sources to see schedules, delay status, and airport conditions. Because this information is scattered, it is hard to monitor before departure.

Approach

Airport conditions on the home screen. Weather and visibility are shown in a summary that passengers can understand quickly.
Flight list with visual routes. Routes and schedules appear on a map, so passengers can grasp their journey at a glance.
Clear departure details. Time, terminal, gate number, and delay status are grouped in one card.

Expected outcome

Passengers can track their trip more quickly and notice important changes before departure.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Formula 1 Fan App

An exploration of a fan app for motorsport enthusiasts that presents driver profiles, standings, and team summaries in one visual and concise experience.

Problem

Race fans often switch between schedules, standings, news, and driver profiles. Because this information is scattered, it is difficult to follow the season’s progress as a whole.

Approach

Driver profile as the focal point. Season position, points, and key statistics appear at the top.
Easy-to-scan team standings. Rank, team name, and points are arranged in a clean list.
Team summary with strong visuals. Key team statistics are presented alongside vehicle imagery to create a strong identity.

Expected outcome

Fans can understand the season’s progress and driver performance more quickly.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma

Freelancer Earnings Dashboard

A dashboard exploration for freelancers that shows income trends, active projects, transaction history, and collaboration suggestions on one screen.

Freelancer dashboard with an earnings chart, current projects, transactions and collaboration suggestions

Problem

Freelancers often struggle to track earnings, payment status, and ongoing projects because the information is spread across different menus and records.

Approach

Income trends at the center. A bar chart with period filters shows how earnings change over time.
Active projects with payment status. Rate, work location, and payment status appear in one card.
Transactions with clear status. Completed, pending, and failed payments are color-coded for quick scanning.
Collaboration suggestions on the side. Users can explore new opportunities without leaving the main view.

Expected outcome

Freelancers can track their finances and projects more quickly and avoid missing pending payments.

Role

Research, flow analysis, and UI design were carried out independently.

Design Tool

Figma