UI/UX

Website Design

Responsive

Papan Narapraja Website

Papan Narapraja Website

SCROLL DOWN TO START READING

Papan Narapraja is a property company based in Yogyakarta, Indonesia, with over 18 years of experience in the industry. Specializing in property sales, Papan Narapraja offers a wide range of services, including the sale of ready-to-occupy homes and custom-built houses. In addition to property sales, the company also provides comprehensive construction and renovation services for residential properties, boarding houses, and rental units.

Design a responsive website to serve as the primary portal for showcasing Papan Narapraja’s products, services, and company profile, providing users with a seamless experience across all devices.

Design a responsive website to serve as the primary portal for showcasing Papan Narapraja’s products, services, and company profile, providing users with a seamless experience across all devices.

Create a website that actively engages users and strengthens Papan Narapraja’s brand presence, building awareness and trust among potential clients.

Create a website that actively engages users and strengthens Papan Narapraja’s brand presence, building awareness and trust among potential clients.

Design an admin dashboard connected to the main website, enabling efficient management of all site content, including property listings, services, and informational updates, to keep the platform current and user-friendly.

Design an admin dashboard connected to the main website, enabling efficient management of all site content, including property listings, services, and informational updates, to keep the platform current and user-friendly.

01

INTRO AND GOALS

INTRO AND GOALS

01

01

02

USER AUDIENCE

USER AUDIENCE

The target audience for this project are :

Home Buyers

Individuals who are interested in buying a house or property in Yogyakarta and the surrounding areas.

Individuals who are interested in buying a house or property in Yogyakarta and the surrounding areas.

Renovations Clients

Individuals who own some property in Yogyakarta and need to renovate their property.

Individuals who own some property in Yogyakarta and need to renovate their property.

Construction Clients

Individuals who need a construction service to build properties such as houses, boarding houses, and rental units in Yogyakarta and surrounding areas.

Individuals who need a construction service to build properties such as houses, boarding houses, and rental units in Yogyakarta and surrounding areas.

02

02

For this project, I collaborated with the MajusCode Studio team as the only UI/UX Designer. I handled the design for the main website and the admin dashboard. My responsibilities included creating the wireframes and converting them into High-Fidelity design, implementing the brand style on the website, and creating visual assets such as typography, color schemes, icons, and imagery.

03

ROLE AND RESPONSIBILITY

ROLE AND RESPONSIBILITY

03

03

04

SCOPE AND CONSTRAINT

SCOPE AND CONSTRAINT

In this project, I'll work on the design for the main website and the admin dashboard. The screen sizes that will be used for the main website are desktop and mobile. But the admin dashboard only will be created with desktop size. These are the requirements for both the website and admin dashboard :

Main Website :

  1. Will display the available products (property) to buy by the potential customers.

  2. Will display all the services that Papan Narapraja provides.

  3. Will have a section to show Papan Narapraja's history works or portfolio.

  4. Will allow the potential customer to reach out to the Papan Narapraja admin when they are interested in buying a property.

  5. Will have a section that contain the company profile.

  1. Will display the available products (property) to buy by the potential customers.

  2. Will display all the services that Papan Narapraja provides.

  3. Will have a section to show Papan Narapraja's history works or portfolio.

  4. Will allow the potential customer to reach out to the Papan Narapraja admin when they are interested in buying a property.

  5. Will have a section that contain the company profile.

Admin Dashboard

  1. Will have a feature to track all activity on the main website such as the total stock of available properties, the total of sold property, the total of portfolio project(work history), and the monthly total of website visit.

  2. Will have the ability to manage(add, delete, and edit) the products that was displayed on the main website.

  3. Will have the ability to manage the services that was displayed on the main website.

  4. Will have the ability to manage the portfolio project or work history.

  5. Will have the ability to manage(add and edit) admin account that will can be used on the admin dashboard.

  1. Will have a feature to track all activity on the main website such as the total stock of available properties, the total of sold property, the total of portfolio project(work history), and the monthly total of website visit.

  2. Will have the ability to manage(add, delete, and edit) the products that was displayed on the main website.

  3. Will have the ability to manage the services that was displayed on the main website.

  4. Will have the ability to manage the portfolio project or work history.

  5. Will have the ability to manage(add and edit) admin account that will can be used on the admin dashboard.

This project is started in June 2024 and the deadline for this project is September 2024.

04

04

Wireframe

Main Website Wireframes

Main Website Wireframes

Admin Dashboard Wireframes

Admin Dashboard Wireframes

Challenges

The main challenge I faced in this project was the limited opportunity to meet with my client, as their schedule was quite tight. This made it difficult to consistently gather requirements and receive timely feedback on the designs I created to ensure the project remained aligned with the client’s vision and needs.

The main challenge I faced in this project was the limited opportunity to meet with my client, as their schedule was quite tight. This made it difficult to consistently gather requirements and receive timely feedback on the designs I created to ensure the project remained aligned with the client’s vision and needs.

Mockup

On this study case, I will provide 3 mockups I made, which are :

  1. Papan Narapraja Website - Desktop

  2. Papan Narapraja Website - Mobile

  3. Admin Dashboard - Desktop

  4. Admin Dashboard - Mobile

On this study case, I will provide 3 mockups I made, which are:

  1. Papan Narapraja Website - Desktop

  2. Papan Narapraja Website - Mobile

  3. Admin Dashboard - Desktop

  4. Admin Dashboard - Mobile

05

THE PROCESS

05

05

Papan Narapraja Website - Desktop Screens

Papan Narapraja Website - Mobile Screens

Admin Dashboard

Papan Narapraja Website - Mobile Screens

The Result

After the homepage design is approved by the client, I continue creating the design for the inner pages with the style that I've applied on the homepage. The time I need to complete these designs for the main website from the wireframe phase to the High-Fidelity design is three weeks including the revisions. After the main website design and the handover process to the developer team were done, I started work on the admin dashboard design. For this phase, I don't ask for feedback from the client because our team has been given full access to determine what the dashboard will look like. Our team is only informed about what features our clients want on their dashboard. The process took one to two weeks to be completed from the wireframe phase until it was converted into the High-Fidelity design.

After the homepage design is approved by the client, I continue creating the design for the inner pages with the style that I've applied on the homepage. The time I need to complete these designs for the main website from the wireframe phase to the High-Fidelity design is three weeks including the revisions. After the main website design and the handover process to the developer team were done, I started work on the admin dashboard design. For this phase, I don't ask for feedback from the client because our team has been given full access to determine what the dashboard will look like. Our team is only informed about what features our clients want on their dashboard. The process took one to two weeks to be completed from the wireframe phase until it was converted into the High-Fidelity design.

LET'S EXPLORE ANOTHER STUDY CASE

LET'S EXPLORE ANOTHER STUDY CASE

eDriven Score

eDriven Score

Chicken Joy

Chicken Joy

QueenPixel

Projects

Exploration

My Resume

QueenPixel