Project Overview

01 Summary

After Mark of HurstX Solutions presented me his concept for Property Hacks, I worked with him to scope out a UX/UI Design & Development project to create a semi-functional MVP under a tight timeline that he could showcase at an upcoming PropTech conference.

02 The Challenges
  1. Tight turnaround time! The project officially began on September 13th and the MVP website needed to be designed, developed, and semi-functional by October 4th.
  2. No existing branding, and so creation of a Style Tile was necessary to establish a brand aesthetic.
  3. The client had attempted to start on his own in Webflow before bringing me in for this project. While I have experience with and enjoy using Webflow, there are currently some limitations with the platform, especially as it relates to Membership/Community focused websites, that required third-party integrations.
03 Users & Audience

With the initial MVP, the audience we were targeting for Realtor Hacks are real estate professionals with an interest in tech, ideally skewing to a younger demographic. As the project progresses and we continue to pivot the audience may shift accordingly.

04 Role(s)

UX/UI Designer, Web Developer, User Researcher

Interested in exploring further?
Case Study

The Process

Due to the timing of my involvement and the tight deadline to get an MVP Developed to showcase at the Blueprint conference, the process that my client and I took during Phase 1 of this project most closely resembles a combination of the Design Thinking & Lean Startup methodologies.

Blending Methods

01 Empathize

Secondary Research


Prior to my involvement, Mark had numerous conversations with his peers in the real estate and property tech community regarding his concept for Realtor Hacks. While this was by no means a substitute for holding in-depth user interviews, it gave him a better idea of how he wanted to shape the first iteration of this concept.

Based on those conversations and his own observations he then had created a detailed Product Requirement Document that outlined details like the project background, Objective, Problem Statement, Target Audience and more which he shared with me.

From my perspective as a designer, I was really keen on diving into the competitive landscape further and identifying some potential design patterns that we could employ to achieve the functionality outlined in the requirements document. As such, my first deliverable within the scope of work was to prepare a Secondary Research Document that provided an overview and takeaways on these areas of focus, in addition to my own research on the target audience (more so to get me up to speed.)

Studying The Filtering Approach of A Competitor

02 Define

Feature Roadmap


While I had already created a scope of work for Mark as part of the agreement process, creating a more in-depth Feature Roadmap allowed us to expand on the details and get alignment on priorities for this Phase as well as future iterations.

Feature Roadmap Document
  • This was my guiding compass at numerous stages of the project, especially during Development when I could get distracted working on something and lose sight of the bigger picture
  • During this exercise, I was also looking into numerous third-party integrations to accomplish the functionality outlined

03 Ideate & Design

Style Tile


The client was already working with a Graphic Designer to create the Realtor Hacks logo when I started working with him, and while they had discussed some color options, there was no established branding guidelines or overall aesthetic to speak of.

During our initial scoping conversations, Mark was hoping to have me jump into his Webflow project right away but I stressed the importance of starting in Figma to establish the foundation of the design with a Style Tile featuring typography, color palette, component designs etc. as well as UI Designs for key pages on both desktop and mobile.

Style Tile V2

  • Giving the client a Style Tile and some commonly featured components made him feel more comfortable with me taking the reigns on developing pages that I was not providing UI Designs for (in the interest of time and cost)
  • Gathering some examples of inspiration that the client liked allowed us to align on the gradient aesthetic and the orange cutout style in the hero banner

UI Design


While creating and gathering feedback on the Style Tile, I started the UI Designs which I provided on both desktop and mobile. In the interest of time and ensuring that we were aligned on the direction I was headed in, I shared early and often while working on the Home Page Desktop UI. As I started to send the UI Designs for the other pages in batches, we created a working Google Sheet document where the client could compile feedback for my review to minimize back and forth in email chains.

UI Examples 1
UI Examples 2

  • I was very glad that we aligned on working in Figma to get alignment on the UI Designs before jumping into Webflow! It not only made Development much more straightforward, but there were some substantial adjustments requested by the client in between iterations that would have been far more time consuming if they were already Developed
  • Working on the UI Designs in Figma also gave me, and in turn the client, better clarity on what was static content and what would be dynamically generated content from the CMS

04 Prototype/Development

Webflow Development


After receiving approval on the revised UI and Style Tile, I had 6 business days to get everything developed and semi-functional in Webflow before the Blueprint conference. In order to be as efficient as possible with my time, I focused on getting the frontend static and dynamic content developed on key pages rather than focusing too much time on the backend automations with Zapier, Memberstack, Uploadcare etc. While Mark was at the conference, I continued to work on the website to get it ready for User Testing once he returned.

You can view the staging website below, and please note that it is a work-in-progress as we continue to pivot and iterate based on our learnings and feedback from Usability/Desirability Testing.

View the In-Progress-Website Here

  • During the Development, I started to see some of the limitations that Webflow currently has with Membership style websites and adding content from form submissions into the CMS. I am hopeful that both of these will be addressed by Webflow in future rollouts
  • I spent a LOT of time watching tutorial videos, browsing Webflow showcase, and reading forums to accomplish some of the needed functionality based on the UI I had designed

05 Test & Iterate (In Progress)

Usability/Desirability Testing


After the conference, Mark sourced participants for me to conduct Usability Tests with. As I was working on creating the script, I consulted with one of my UX Mentor's Toni Rosati to seek her guidance on approaching this process for an MVP project. We discussed the importance of incorporating questions and prompts that keyed in on the overall desirability of the website and concept, not just focusing on usability.

Walking A Participant Through Testing

  • By gearing some of the focus on desirability with questions and tasks, Mark and I got some great insight on what was or wasn't generating interest, in addition to what we could improve upon with the current design
  • After compiling my findings and presenting them to the client, I was a lot more confident in challenging some of his preferences and assumptions that came up in earlier stages as I had verifiable data to work with to help me state my case

What's Next

After taking an opportunity with United Airlines, I helped transition this work to another freelance designer to assist Mark. This MVP project has been put on hold since.

Top 5 Things I Learned

Partnering with Mark to design and develop the MVP website for Realtor Hacks was an interesting and rewarding challenge. Here are some of the top things I learned during the project:

  1. Product Roadmap: One of the earliest deliverables that Mark and I worked on was building out a comprehensive Product Feature Roadmap spreadsheet and getting alignment on it. I frequently went back to this resource to make sure I was focusing on the right priorities, especially in Development.
  2. Style Tile: Initially I struggled a bit with creating the Style Tile and associated components and realized that I needed to start working on an actual Home Page UI Design and work backwards in order to make some progress.
  3. UI Design: While Mark came to me with a rough draft of the website in Webflow, I was adamant about getting the design foundations in place with a Style Tile and UI Designs in Figma, which proved to be wise! We pivoted on design patterns on several occasions and had numerous iterations in the early stages which would have been far more time consuming if done right in Webflow.
  4. Development: During this project I was constantly learning in the Development stage, especially as it relates to working with new tools like Memberstack,, Zapier, Airtable, and more.
  5. Testing: During the user testing we were not only focusing on key usability tasks but also were keen to get feedback on the overall desirability of Realtor Hacks in this early MVP stage.

"Exploration is curiosity put into action" - Don Walsh
Want to explore the possibilities of working together?
Get In Touch With Me