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.

‍

01 Empathize

Secondary Research

Summary

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.)

‍

02 Define

Feature Roadmap

Summary

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.

Takeaways

• 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

Summary

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.

‍‍
Takeaways

• 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

Summary

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.

‍‍
Takeaways

• 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

Summary

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

‍‍
Takeaways

• 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

Summary

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.

‍

Takeaways

• 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, Jetboost.io, 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.

‍