Ashok Luhar | MA UXUI https://mauxui.com/ Sr. UX/UI Designer, Front-end Coder & WordPress Developer Thu, 24 Sep 2026 14:33:04 +0000 en-GB hourly 1 https://mauxui.com/wp-content/uploads/2022/07/MA-UIUX-Favicon.svg Ashok Luhar | MA UXUI https://mauxui.com/ 32 32 How I Crafted a Tailor-Made WordPress Site with Custom Code – a Step-by-Step Guide https://mauxui.com/how-i-crafted-a-tailor-made-wordpress-site-with-custom-code-step-by-step-guide/ Sun, 30 Mar 2025 11:33:14 +0000 https://mauxui.com/?p=5784 A step-by-step guide to developing a custom coded WordPress website using Underscore WordPress core theme

The post How I Crafted a Tailor-Made WordPress Site with Custom Code – a Step-by-Step Guide appeared first on Ashok Luhar | MA UXUI.

]]>

How I Crafted a Tailor-Made WordPress Site with Custom Code – a Step-by-Step Guide

Step - 1

Reviewing the Design File

I started by reviewing the Figma file in detail to understand the design and layout. I noted down all the necessary steps for development. From there, I exported images in JPG and PNG formats and icons in SVG format as per the project’s requirements.

Step - 2

Setting Up the Foundation

Next, I downloaded the ‘Underscores Starter Theme‘ to serve as the foundation of the WordPress theme. I personalized it to fit the project and set up the basic structure of the theme.

Step - 3

Enhancing WordPress with Plugins

To optimize the development process, I installed the ‘Admin Site Enhancement (ASE)‘ plugin. This allowed me to enable and disable core WordPress functions, such as disabling comments for page, media; Gutenberg blocks for custom taxonomy; REST API in case we don’t use and enabling maintenance mode.

Step - 4

Building the Header and Footer

I started coding with the Header and Footer sections, ensuring they were functional and user-friendly. For easy maintenance, I created widget areas, and used core widgets with small HTML blocks to avoid unnecessary functions.

Step - 5

Customizing with ACF Plugin

To manage dynamic content, I installed the ‘ACF (Advanced Custom Fields)‘ plugin. Using this plugin, I created custom fields tailored to the home page and landing page content.

Step - 6

Adding Main Functionalities

I created a Custom Post Type and Custom Taxonomy to handle specific content needs. Additionally, I configured custom fields in ACF, added dummy data, and developed custom templates for the custom post type’s list and detail pages.

Step - 7

Ensuring Responsiveness

To make the website responsive, I applied proper CSS styles and included media queries for tablet and mobile versions.

Step - 8

Testing and Migration

Once development was complete, I thoroughly tested the website for performance, compatibility, and functionality. After ensuring everything worked perfectly, I migrated the website to the client’s server.

This is how I developed a custom-coded WordPress website using the Underscores base theme and the ACF plugin. Each step was crucial in ensuring a high-quality, tailored solution for the project.

The post How I Crafted a Tailor-Made WordPress Site with Custom Code – a Step-by-Step Guide appeared first on Ashok Luhar | MA UXUI.

]]> Studio Booking App for Content Creators and Photographers https://mauxui.com/studio-booking-app-for-content-creators-and-photographers/ Thu, 01 Aug 2024 06:55:17 +0000 https://mauxui.com/?p=4992 Design a mobile application that enables studio owners to list their studios and allows content creators and photographers to book these studios along with additional services easily.

The post Studio Booking App for Content Creators and Photographers appeared first on Ashok Luhar | MA UXUI.

]]>

Project Overview

Design a mobile application that enables studio owners to effortlessly list their studios, providing detailed descriptions, photos, availability and add additional services. The app should also cater to content creators and photographers, allowing them to search for and book studios that meet their specific needs. The app should feature a user-friendly interface with seamless navigation, making the process of listing, searching, and booking studios and services straightforward and efficient for both studio owners and content creators.

Problem Statement

Content creators and photographers often face challenges in securing suitable studio spaces for their projects. Current solutions lack user-friendly interfaces and often require extensive communication to confirm bookings, leading to inefficiencies and potential missed opportunities.

My Role & Responsibilities

As a UX Designer:
Understand the project requirement, set business goals with stakeholders, market research, create competitive analysis, create personas, user flows, wireframes, prototypes, collaboration with development and testing team.

As a UI Designer:
Define typography hierarchy, create re-usable UI components in Figma for consistency, create mock-ups, gather feedback from testing and development team, create deliverables from final UI design.

Tools Used

Figma and FigJam

SCREENSHOTS

Home
Home-1
Listing
Listing - Map
Listing-2
Listing-1
Details - Screen-11
Details - Screen
Details - Screen-2
Details - Screen-1-1
Details - Screen-1-2
Make Payment
Make Payment-1

Process

R
E
S
E
A
R
C
H

Competitive Analysis

Reviewed existing booking platforms and studio rental services to identify strengths and weaknesses. Found opportunities to improve user interface design, booking transparency, and customer support.

Direct and Indirect Competitors

Reviewed similar booking platforms like BookMyStudio – Studio Rentals, BookMyStudio – Partner and Book My Warehouse, also reviewed similar functionality apps like Badi – Rooms & Flats, Roomster and SpareRoom. Reviewed user flows, booking process, features, payment process and additional services.

Analytics Review

BookMyStudio: Wide variety of spaces, detailed listings, but overwhelming interface and limited additional services.

Book My Warehouse: Unique spaces and good search functionality but limited in certain regions and complex booking process.

SpareRoom: Comprehensive listings and good customer service, but expensive and not user-friendly.

Personas

D
E
F
I
N
E

Stakeholder Interview

Arrange a session with stakeholder to understand specific requirement as per the business perspective. Discussed project brief and basic ideas.

Target Audience

Content Creators & Photographers:
Videographers, social media influencers, and digital artists looking for versatile studio settings. Professional and amateur photographers seeking studio spaces for photo shoots.

Studio Owners:
Studio owners to effortlessly list their studios, providing detailed descriptions, photos, availability and add additional services.

Define Goals

Simplify Booking Process:
Create an intuitive and streamlined booking flow.

Enhance User Experience:
Provide a seamless experience from searching for studios to confirming bookings.

Increase Efficiency:
Reduce the time and effort required to book studio spaces.

Build Trust:
Establish a platform that fosters trust and reliability between studios and users

D
E
S
I
G
N

User Flows

Login & sign-up flow, List studio flow and Booking flow planned in FigJam to understand overall flow of the booking app.

Wireframes

According to information architecture and user flows started creating wireframes to test flows.

Re-usable Components in Figma

Started with creating re-usable components in Figma. Set typography, collect all appropriate icons, set icons in respective size, set icons for categories and footer.

Figma File

UI Design

Login, Signup and List Studio flow

Booking flow and profile pages

Dark mode

T
E
S
T

Prototype & Testing

Prototype Development:
Created interactive prototypes using user-centered design principles, focusing on usability and visual appeal.

Usability Testing:
Conducted usability tests with target users to gather feedback on prototype navigation, booking flow, and overall user experience. Iteratively refined design based on user insights.

Feedback and Iterations:

  • Simplified the booking process by reducing steps.
  • Enhanced the search filter options for better usability.
  • Improved the visibility of additional services in studio listings.

Conclusion

The Booking app successfully bridges the gap between studio owners and content creators by providing a seamless, user-friendly platform for listing and booking studios. The app’s intuitive design, comprehensive features, and efficient usability make it a valuable tool for both parties, ultimately fostering a thriving creative community.

The post Studio Booking App for Content Creators and Photographers appeared first on Ashok Luhar | MA UXUI.

]]> Figma to Functional WordPress Website with Elementor https://mauxui.com/figma-to-functional-wordpress-website-with-elementor/ Sat, 06 Jan 2024 11:43:21 +0000 https://mauxui.com/?p=3938 Figma design to functional website in WordPress by using Elementor with minimum plugins.

The post Figma to Functional WordPress Website with Elementor appeared first on Ashok Luhar | MA UXUI.

]]>

Figma to Functional WordPress Website with Elementor

Figma design to functional website in WordPress by using Elementor with minimum plugins.

COMPARISION

A pixel-perfect design conversion from Figma design to WordPress.

Figma Screenshot

Website Screenshot

Figma - Home page full-screenshot

Website - Home page full-screenshot

What is difference?

The only difference is in line-height. In Figma design the line-height varying in headings. I used 1.2em (120%) in headings and 1.6em (160%) in body text for better readability.

SCREENSHOTS FROM LIVE SITE

Home
About
Product
CTA
Blog
News
Blog detail
Career
Other pages

Desktop & Mobile Menu

The desktop megamenu created with Elementor’s menu (megamenu) element. But the mobile menu designed in Figma was not possible by using Elementor’s menu (Mega menu element). I simply create a custom mobile menu by adding some jQuery and custom CSS code.

PROCESS

Plan:
Reviewed all the pages of Figma file. Global Sections: Created a list of the repetitive sections which have been placed in different pages without any change. Global Layouts: Created a list of the sections which had been similar layout, but the content is different. Headings: Created a list of all titles according to heading tags (h1 to h5). Listed down color-pallet.

Theming:
Started theme by adding global colors; set typography; create headings, buttons and form fields; set typography scale for responsiveness. Started implementation of header and footer. Completed global sections first i.e. CTA, testimonials, mega-menu etc.; and global layouts. Exported all icons and graphics to SVG; and images to webp format for quality result and good performance.

Implementation:
Started implementation of home page design according to desktop, tablet and mobile device. Created and implemented product pages design. Created and implemented other pages and posts pages design i.e. blogs, events, webinars, case studies and use cases.

Testing:
Tested all pages in actual devices i.e. tablet, iPad, android phone, iPhone etc. Submitted to client for Q.A. to check performance.

Finalize:
Completed the changes after received insights from Q.A. team and migrate the website to live.

The post Figma to Functional WordPress Website with Elementor appeared first on Ashok Luhar | MA UXUI.

]]> Community WordPress Theme – Redesign https://mauxui.com/community-wordpress-theme-redesign/ Fri, 30 Dec 2022 01:48:20 +0000 https://mauxui.com/?p=2954 Redesign the BuddyX Pro Community Wordpress theme powered by BuddyPress or BuddyBoss platform, and compatible with LearnDash, LearnPress, WooCommerce, WCVenders, RT Media and BB Press

The post Community WordPress Theme – Redesign appeared first on Ashok Luhar | MA UXUI.

]]>

PROCESS

Define:

Started with analyzing the BuddyPress and BuddyBoss platforms for new features and updates. Analyse compatibility of other plugins i.e. LearnDash, LearnPress, WooCommerce, WCVenders, RT Media, BB Press and others.

Research:

Interviewed the stakeholder, reviewed all existing features, discussed the scope of new features and sat the product design goals.

Design:

Created a mini design system in Figma. Created nav-menus, common widgets and components. Started UI design with BuddyPress and BuddyBoss platforms. Completed UI design with all compatible platforms.

Production:

Arranged a marathon session to review all UI design according to all platforms. Defined new changes in collaboration with testing team, iterated all new changes and submitted to testing team and development team to review. After received and completed final changes, handed over all deliverables to the development team.

Components and Widgets

Create re-usable components and all widgets

Community UI design

Create mockups of all pages according to BuddyPress and BuddyBoss platform

LearnDash

Mockups of all pages according to LearnDash platform

Woocommerce

Mockups according to Woocommerce

Blog Layouts

Blog listing and details page layouts

The post Community WordPress Theme – Redesign appeared first on Ashok Luhar | MA UXUI.

]]> Social Educational Platform for Educators and Learners https://mauxui.com/social-educational-platform-for-educators-and-learners/ Mon, 06 Jun 2022 11:51:14 +0000 https://mauxui.com/?p=1165 A social educational platform that helps educators to create courses in a flexible way and helps learners to access free and paid courses in a more convenient way.

The post Social Educational Platform for Educators and Learners appeared first on Ashok Luhar | MA UXUI.

]]>

PROCESS

Define:
Started with analyzing the similar type of platform’s interfaces and user flows, listing out overall user experience.

Research:
Interviewed the stakeholder and sat the product design goals.

Design:
Created a mini design system in Figma. Created wireframes of user flow and converted them into mockups, created interactive prototypes from all mockups and submitted them to the testing team.

Production:
Created UI design, Iterated new changes found during testing by the testing team. After received and completed final changes, handed over the all deliverables to the development team.

Wireframing

Started with wireframes as per core ideas proposed by client. Create sitemaps and user flows in Miro for the front-end website.

Mini Design System

Create re-usable components in Figma for the entire project.

UI design for website

Create mockups of the landing page, course and search listing, course details, instructor landing page, profile page and blog according to wireframes.

User flow and UI design for admin panel

Create user flow for the back-end admin panel as per the wireframe provided by the client.

The post Social Educational Platform for Educators and Learners appeared first on Ashok Luhar | MA UXUI.

]]> Zento – Mobile App, Website and Admin Panel UI https://mauxui.com/zento-mobile-app-website-and-admin-panel-ui/ Wed, 01 Jun 2022 06:27:29 +0000 https://mauxui.com/?p=1099 24/7 service provider for roadside emergencies like towing services for accidental vehicles, passengers towing services and car repair services.

The post Zento – Mobile App, Website and Admin Panel UI appeared first on Ashok Luhar | MA UXUI.

]]>

PROCESS

Define:
Started by researching the similar types of service providers at the local and national levels, listing out the services and features they provide, reviewing their websites and mobile apps, and exploring the scope of unique features.

Research:
Interviewed the stakeholder, present my research report and set the product design goals.

Design:
Create wireframes of the user flow for web and mobile apps. Create wireframes, prototypes, and UI designs for the back-end admin panel. Create HTML templates for the front-end website and back-end admin panel. Hand over all HTML templates to PHP developers to convert static templates to a functional website managed with a back-end panel.

Production:
Hand over all Figma files to Flutter developer to develop a hybrid mobile app for iOS and Android platforms. Launch website and mobile applications on specific platforms.

Mobile App UI

Website UI

Admin Panel UI

The post Zento – Mobile App, Website and Admin Panel UI appeared first on Ashok Luhar | MA UXUI.

]]> Redesign of e-Commerce Mobile App https://mauxui.com/redesign-of-e-commerce-mobile-app/ Fri, 06 May 2022 00:05:00 +0000 https://mauxui.com/?p=2571 Redesign and Create Custom Checkout Flow of e-Commerce Mobile App for iOS and Android

The post Redesign of e-Commerce Mobile App appeared first on Ashok Luhar | MA UXUI.

]]>

Project overview

The product:

Redesign the popular e-Commerce mobile app with simple and easy to navigate, and create a custom checkout flow with the integration of WhatsApp support in collaboration with the developer team.

My role and Responsibilities:

My role is UX/UI Designer and my responsibilities are creating wireframes, low and high-fidelity prototyping, mockups, collaborating with the developer’s team for custom flow, accounting for accessibility, and iterating on designs.

PROCESS

Define:
Started by analyzing the competitors’ e-commerce mobile applications interfaces, and user flows and listing out the features to explore the scope of new features.

Research:
Sat product design goals after interviewing the stakeholder.

Design:
Created a mini design system in Adobe XD. Created wireframes of user flow and converted them into mockups, created interactive prototypes from all mockups, and submitted them to the testing team.

Production:
Created UI design, and Iterated new changes found during testing by the testing team. After receiving and completing the final changes, handed over the all deliverables to the development team.

Final UI design

View Prototype

The post Redesign of e-Commerce Mobile App appeared first on Ashok Luhar | MA UXUI.

]]> Find Landscape Mobile App UI https://mauxui.com/find-landscape-mobile-app-ui/ Wed, 02 Feb 2022 07:08:25 +0000 https://mauxui.com/?p=1087 Find landscape mobile app UI. Created in Figma.

The post Find Landscape Mobile App UI appeared first on Ashok Luhar | MA UXUI.

]]>
keypixel find landscape ui

Find Landscape Mobile App UI

Find landscape mobile app UI. Created in Figma.

Project overview

The product:
Find Landscape App is for the people who are willing to find a perfect landscape for their home decor very easily and for local photographers who are willing to sell their landscapes.
The goal:
We want to create an App where people can find landscapes from their native places or their own cities, and where local photographers can sell their landscapes.
The problem:
People can’t find easily the landscapes from their native places or their own cities, and where local photographers can sell their landscapes.
My role and Responsibilities:
My role is UI/UX Designer and my responsibilities are create wireframes, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.

Understanding the user

Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was who are willing to find a perfect landscape for their home decor. Also the user group of photographers who are willing to sell their photographs online and make some extra money easily.
Pain Points

Difficulty to find
People are facing difficulty to find a perfect landscape for their home décor

Purchase
People can’t complete the purchase process easily

Persona:

Problem statement:
Nilima don’t know where to find a perfect landscapes for my sitting room

Starting the design

Digital wireframes
Usability study: findings

I have conducted two rounds of usability studies. Finding from the first round, the study helped me to guide the design from wireframe to mockup. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

High-fidelity prototype

The final high-fidelity prototype presented clear user flow for find a perfect landscape and purchase it easily.

Final UI design

Takeaways

Impact: The app helps users to find the perfect landscape for home décor very easily and users can customize frames and purchase them in a few steps.

What I learned: I learned that feedbacks are very important to improving design or product. Usability study plays a big role to make products user-friendly. I also learned that improvement is a step-by-step process, and you need to follow the steps correctly.

Thank you for your time reviewing my work :)

Portfolio

More Projects...

Studio Booking App for Content Creators and Photographers

Mobile UI

Community WordPress Theme – Redesign

Web UI

Social Educational Platform for Educators and Learners

Web UI

Zento – Mobile App, Website and Admin Panel UI

Web & Mobile UI

The post Find Landscape Mobile App UI appeared first on Ashok Luhar | MA UXUI.

]]> Redesign – Holy Cow Restaurant London Website https://mauxui.com/ui-ux/ Wed, 26 Jan 2022 03:06:56 +0000 http://dev.keypixel.in/?p=511 Redesign London based Indian Food restaurant and built on WordPress with custom theme

The post Redesign – Holy Cow Restaurant London Website appeared first on Ashok Luhar | MA UXUI.

]]>

Redesign – Holy Cow Restaurant London Website

Redesign London based Indian Food restaurant and built on WordPress with custom theme

Home page

Other pages

Portfolio

More Projects...

Studio Booking App for Content Creators and Photographers

Mobile UI

Community WordPress Theme – Redesign

Web UI

Social Educational Platform for Educators and Learners

Web UI

Zento – Mobile App, Website and Admin Panel UI

Web & Mobile UI

The post Redesign – Holy Cow Restaurant London Website appeared first on Ashok Luhar | MA UXUI.

]]> WLES – UI/UX https://mauxui.com/wles-ui-ux/ Tue, 28 Apr 2020 16:25:30 +0000 http://dev.keypixel.in/?p=565 UI and Website Development for West London English School

The post WLES – UI/UX appeared first on Ashok Luhar | MA UXUI.

]]>

The post WLES – UI/UX appeared first on Ashok Luhar | MA UXUI.

]]>