CI Australia Website 2.0
The Team
Senior Full Stack Developer | Front End Developer | UX/UI Designer | Graphics Designer
The Problem
CI Australia’s website needed to be updated for quite some time. The design was outdated and there was minimal flexibility given to the clients, small changes to the website previously had to go through a developer to apply any changes. This was both costly and time consuming for both businesses.
My Role
As a front end developer was to work with my team to create and manage real estate websites.
Amongst other websites, I was responsible for the Initial creation and maintenance of CI Australia’s website until I left Adept business solutions in November 2018.
CI Australia Website 2.0
Home page of CI Australia
Transferable skills
By drawing parallels with object oriented design practices, I found it easier to transition to design as they both share the commonality of atomic design and reusable components. i.e. “building blocks”
*image simulated for illustration purposes.
Reusable Components
Tools Used: Visual studio, Angular, Asp.net MVC framework, Umbraco (CMS), Google APIs
Each Row on the home page is a custom component created based off the client’s requirements. The clients are able to log into the Content Management System to change the content without having to request
Custom Features and User Requirements
Key Feature: Enabling users to search for properties using the map feature.
The feature was designed to provide the users with a visual representation of property listings as well as taking into account the technical capabilities of the user's device.
Challenges: Loading all the property listing onto the map as individual markers caused performance issues and was not visually pleasing to the eye, particularly when viewing dense clusters.
Solution: To combat this we bundled the clusters into groupings signified with different icons and would only show the individual listings when the user was at a specific zoom level.
Responsive Design
Why Responsive design?:
To have the website be accessible to the client’s user’s on demand. It had to be compatible with all common devices such as phones, tablets, laptops and widescreen.
It’s cheaper than having a separate app built for just mobile and tablet.
Transferable Skills:
Keeping responsive design in the back of our minds, the components were built with clear breakpoints set for each device. Each component had a separate look designed specifically for their screen size.
By building for scalability and saving time, we were able to meet the needs of the Client and our business.
Balancing the User’s needs with the businesses needs have resonated throughout this project.
Having the opportunity to explore the idea of problem solving is what led to the interest in UX/UI Design.