Styling
The final design used the inviting colours of the brown colour scheme, combined with bold fonts and large content sizes. This helped to elevate the piece into the type of showcase website the client was looking for.
The Problem
PremiseHQ needed a showcase piece to present to clients. This website would need to serve as both a showcase for a fictional location and a template to be repurposed for other building locations.
Client
PremiseHQ | 2023
Type
Research | UI/UX | Branding
Role
Designer & UX Developer
Created With
This work was built with the help of AI to increase the speed of completion and integrate frontend functionality from the Figma design into the completed webpage.
Timeline
Getting Started
Research
Research began with an analysis of the content and structure of other real estate websites. These sites provide users with a multitude of information about the building, its amenities, and availability. Making the information clearly accessible is key to the user experience.
Research continued with the exploration of typical versus atypical real estate website design. The client was clear that they wanted this showcase piece to be bold and stand out from their competitors.
Results
Of the many websites that were included in the research for this project, there were two that very clearly stood out from the rest. Both of these sites had a few things in common: striking visuals, eye-catching animations, and large sizes for page content.
Both of these sites made dynamic use of their page layouts. Using bold fonts, striking images, and large content widths to draw the viewer's eye around the page.
Design Process
Mood Boards
Two mood boards were originally created for mock-up tests. The brown colour scheme we tested was closer to the colours of the research sites which came in very cool-toned, off-white greys and beiges.
The blue colour scheme was chosen to differentiate our project from the research samples. This colour scheme was quickly abandoned as it felt too corporate and clinical.
Mock Ups
Project mockups and mood boards were all created in Figma, using project library and components to quickly snap together designs in both branding options. The goal of the mockups was to play with bold layouts and large font sizes to strike the right balance of bold and modern.
Final Product
UI/UX Decisions
CMS
With the instruction of the developers on our team I implemented a simple CMS into the project's code. This allowed the website to be used as a template for all of Premise's building locations, with all content of the cms being updated via an online form.
Usability
Due to the large content size, all content needed to scale properly across all device sizes. Individual components were given special attention to ensure their use on mobile, eg: the transformation of the menu bar into a hamburger menu.
