Web Design: Isala
Project Overview
The Problem
Isala wants to launch a funding website to raise capital for the construction of its proposed luxury condominium and needs financial backing to approve the initial phase of development.
The Product
Isala is a proposed beachfront condominium development project offering premium luxury beachfront properties of varying options to high end investors.
My Role
Web and Graphic Designer
The Goal
Build and launch an informational site to highlight the offerings of Isala and secure financial backing from prospective investors by propositioning premium condominium apartments available for preorder through callbacks from sales agents.
Responsibilities
My responsibilities throughout the project included wire mapping, user flow, hi-fidelity mockups and prototyping.
Tools Used
Adobe XD and Adobe Photoshop, Fonts, Hex Codes, Images and Mockups
Project Duration
August 2022 - September 2022
Starting the Design
Typography
Isala wanted a premium looking font style that was both clean and legible for readers. I went with Century Gothic for both the logo, main headings and supplemental content at varying font sizes based on hierarchy throughout.
Color
Inspired by the cliffside views of Santorini, we went with variants of light blue for CTA and navigational buttons, complimenting the static text and backgrounds with monochromatic grays and white throughout.
Images
Rendered images of the final construction from previous development projects were used to emphasize the look and feel of the projected proposal for investors.
Mockups
With color and images, a UI Kit and sitemap in place, I went to work on designing the mockup screens for Isala’s site navigation and user flow. Almost every page included both a call to action button and a “return to top” feature near the bottom of the page for easy scrolling back to the page header navigation.
Mockup screens for desktop version of Isala.
UI Kit
A UI kit was built for interactivity with the prototype, implementing a hovering effect on buttons and links to signal a call to action on many pages throughout the site.
Sitemap
To help with navigation and a deeper dive in to the important aspects of the site functionality, a sitemap was built to establish the page layout structure.
Refining the Design
Hi-Fidelity Prototype
A hi-fidelity desktop prototype was built to demonstrate navigation and user flow for potential investors, with easy to read text and enticing imagery to signal a call-to-action.
View the Isala hi-fidelity protoype
Conclusion
A desktop website prototype was built for Isala, with a future mobile version in the works. A mobile companion of the home screen was added alongside to compliment the desktop prototype and exampled alternate ways in which investors may discover their content.
Home Screen (Desktop Version)
Home Screen (Mobile Version)