About Ikonik Homes

Ikonik homes is a real estate developer and residential construction company based in Surrey, Canada. Established in 2010 and building hundred of homes for people, they provide quality workmanship and exceptional service to their homeowners. Ikonik Homes has developed multiple real estate properties across British Columbia.

Basics

Platform
Website
Role
UX/UI Designer
Time
4 Weeks
Team
Collaborated with another UX Designer, marketing team

Project Summary

My team was responsible for completely restructuring Ikonik Home’s website. We needed to create a comprehensive website that could logically illustrate a wide breadth of construction service that Ikonik Homes provides (ie. homeowner care, on going construction projects) as well as its history (ie. how Ikonik started, past projects, testimonials). To standout amongst other competitors in Vancouver, it was important to come up with a modern and visually appealing design that well represents the brand personality.
Goal
Design a website that makes it easy for users to understand Ikonik’s values, facilitate user experience by improving website’s navigation (make it simple and intuitive). Helping potential customers to find relevant content with ease

Project Analysis

Breakdown of Current Website
Before jumping into project execution, we took some time to understanding Ikonik Homes’ current layout. While doing so, we understood what their website lacks and what changes are needed for improvement. Here are the few pointers about the current layout that we considered to be painpoints:
Painpoints
Competitive Analysis
We first did a competitor analysis to discover strategies that we can take advantage of and also to better understand the market. By analyzing competitor websites’ UX, UI and user flow, we could get a good sense of how competitors are positioning their brands. It also helped us decide what information can supplement Ikonik’s website.
  • Welcomes users with a fullscreen video which makes users feel welcomed and excited about what the company does
  • "Stay Connected" section in the middle of the website
  • Usage of hamburger to keep users from getting distracted
  • Placement of "Request Information" on the right hand corner of the page
  • Simple screen interaction throughout the page to keep users interested and stay longer
  • Usage of black and white color theme to keep the website clean and help the photos to stand out
Targeted Audience
Throughout the years after the previous website has been built, the marketing team and the manager narrowed down their potential customers to the website. The 3 targeted audience they came up with are:
Prospective Audience
  • Current and past projects that Ikonik has done
  • Warranty and services offered by Ikonik
  • Convenient method to contact Ikonik for inquiries
Homeowners
  • Homeowner care services offered by Ikonik
  • Easier way of contacting responsible builders when they face technical problems
  • FAQ
  • Quick way to contact Ikonik Home support team for general solutions and support
Tradesmen
  • Convenient ways to contact Ikonik Homes and start business conversations

Discovery

Sitemap
We restructured navigation by creating a sitemap that shows the overall layout of the website’s navigation. The creation of sitemap helps to provide more clarity while designing wireframes and see what are needed within each pages.
Wireframe (Low Fidelity)
Finally, once all of the planning and foundation was built, we were ready to play with wireframes for the core desktop experience. After sketching on paper, we developed a low-fidelity paper prototype. We designed 4 different low-fidelity wireframes to see which design expresses Ikonik Homes’ brand better.
V1
V2
V3
V4
Wireframe (High Fidelity)
Projects Page
Main Home Page
Projects Selected
Wireframe Final

What's Next?

Now we have created the Sketch design with Webflow in mind, we are now ready to move on to Webflow. For those who don't know what Webflow is, Webflow is a professional responsive website builder made for designers. We are excited to publish Ikonik Homes' new website using Webflow and build a dynamic and responsive website that the company always desired.
Back to Top