Hallo everyone !!
Here's case study I made for web design the apartment with solar power named Ideal Peel. I play the role of a UI Designer in this case study.
Description
Ideal Peel is a property development company committed to bringing sustainable housing with integrated solar panel technology to the community. This case study aims to design the Ideal Peel website to be effective in promoting and explaining the benefits of the solar power technology they offer in their apartments.
Objectives
1. Create an attractive and informative UI design to increase awareness and interest among prospective tenants and investors in Ideal Peel apartments.
2. Provide comprehensive information about the solar power technology used within the apartments and the potential energy savings that renters can achieve.
3. Increase website visitor conversion into interested prospective tenants or investors.
Scope of Work:
The list of the pages that I designed was :
1. Landing page
2. Apartment selection page
3. Apartment detail page
4. Contact page
Design Process
User Flow
1. Visitors access the Ideal Peel website's homepage.
2. Visitors can choose to explore the apartments, understand solar power technology
3. If choosing to explore apartments, they can view property details, photo galleries
4. Interested prospective tenants or investors can contact Ideal Peel through a contact form or other provided contact information.
Sitemap
After understanding the user flow, the next step that I took when we have a deal was creating a sitemap so everyone can see the whole structure of the website. This sitemap is very useful to see how big the scope is and also as my guide when designing the pages.
Websites for inspiration
Most of these websites belong to companies that offer similar products, namely apartments. I found some great visualizations and ended up using certain layout and design approaches from these sources of inspiration. Many of these inspirations were sourced from Dribbble.
Challenges
The most challenging aspect is that this project is truly in its initial stages of Ideal Peel's online presence, so they don’t have logo, branding, and style guideline. So I was struggling choosing what main color to use as CTA button and what color as complimentary color.
The design brief only provides information that the brand color is red, so I need to come up with logo design and color palette.
Defining Colors and Design Elements
This UI design reflects the values of luxury and environmental friendliness. The design should visually represent the luxury of the apartments and the advantages of solar power, inspiring visitors to explore further.
Color and Visual Design
The brand's red color is used dominantly to create a strong and exclusive impression. The color palette also includes black and white for a contrast and associated with sophistication and elegance. Poppins typography is used to add clean and modern touch. Incorporating wood texture can add a warm, organic, and natural feel to the interface, creating a sense of comfort and authenticity. Apply wood texture as the background of user interface to give a sense of depth and texture.
Icons
I download free icons from Plugin Iconify, then I modify the color so it match with the Ideal Peel brand.
Design Decisions
First, I designed the entire landing page section by section to establish the overall style and feel of the future web design. However, here I will only highlight the design process of the hero section, features section, and gallery product section.
Hero Section
In the hero section, they wanted to show the product. Header with the "Ideal Peel" logo using the brand's red color and a navigation menu that includes options such as "Home," "Apartments," "About Us," and "Agents." The "Contact Us" button has the text "it's free" added to encourage potential customers to click, so they can get initial information about this product.
Features Section
In the features section, instead of just listing the apartment features, I believe it's necessary to provide brief explanations of the features using images so that consumers can better visualize the benefits they can gain at Ideal Peel.
Gallery Section
A large banner image featuring a view of luxurious apartments and solar panels, along with a prominent "Explore All" button in the brand's red color. A list of available apartments with images, descriptions, prices, and a "View Details" button for more information.
Layout
The header with the brand's red color remains visible at the top of every page. A large banner image with a red background dominates the homepage. The list of apartments and image gallery follow an aesthetic layout.
This is the result of the design for four web pages
What are your thoughts?
Feel free to share your feedback and express your appreciation by giving it a thumbs up.
I hope you all enjoy it. Thank you!
If you're interested in collaborating on a project, let's initiate the discussion:
Email: pdhimasdwi@gmail.com
