/ Lessons
This project was a fun experience learning more about Wix Studio's advanced functionality. In the future, I will be more proactive in outlining the site content requirements, as waiting for images and copy delayed the project delivery. I also suffered performance issues designing a content-heavy site in Wix Studio that I haven't had using Framer or Webflow. I will take this into account when scoping future projects.
01
Research & Discovery
Stakeholder Interviews
Stakeholder interviews to identify PMI Properties' problem, audience, success measures, solution goals, and vision for the website. Key points that came up repeatedly were the need to generate leads, focus on community, and encourage repeat visits.
User Profile
The website's target audience needed to be defined. This task was challenging as PMI did not have an active website or a prominent social media presence. I examined PMI's current social presence and questioned PMI leadership to identify families, young couples, homebuyers, renters, and investors as key demographics to target.
Competition
I analyzed competitor platforms to identify best practices and opportunities for differentiation. PMI offered more attractive buildings than some competitors, allowing for a more luxury angle, and they weren’t focused on students, which was very common for similar business models.
Accommod8u, a student housing company operating in Waterloo Region, was identified as an ideal reference for website functionality and layout
/ Research Highlights
Website requires frequent calls-to-action: lead generation.
Community experiences need to be highlighted.
Attractive content based on young renters and families.
Include plenty of property details: description, location, exterior and interior images, virtual walkthrough, and floorplan links.
"High-end" style.
02
Wireframing
I used Figma to create wireframes for the main pages: Home, Residential, Commercial, Why Lease with Us?, and two additional pages for an individual residential and commercial property.
The following image shows the five completed wireframes for the main website pages (plus one early wireframe for the Home page). The final website layout and design adhered closely to these wireframes.
03
Design & Development
The third step was designing and developing the website. PMI Group had asked me to use Wix to design their website, and I specifically used Wix Studio for increased design control.
I designed six pages based closely on the initial wireframes, and after confirming them with PMI, I created copies for each individual property.
/ Design Pain Points
The short project timeline meant research and testing beyond the initial ideation phase had to be cut short. I hope to revisit this in a future update.
Even after beginning design work, I still didn't have all the website content, so I had to use placeholder images and text in numerous areas as I tried to complete the website structure.
/ Advanced Designs
I designed custom property cards in Wix Studio. The left three images show the wireframe progression, and the rightmost image is the final version.
/ Custom Code
I wrote custom code for an embedded Matterport 3D walkthrough. PMI wanted to be able to use Matterport on their website to allow users to explore rental units virtually, so I wrote some custom JavaScript to embed the links and add a custom selection menu on the left side.
© Graeme Robinford, 2025