REMARK

Real Estate Redesigned. Product Design + UI

Summary
& End Results

BACKGROUND & CHALLENGES

Remark was a partnership between Nimbold consultancy and California realtors looking to improve the home-buyers experience through new digital tools.

Beyond viewing property information, its key feature was focused on sharing notes with realtors (called a remark). Because of the enormous amount of programming needed, the team hadn’t prioritized design and was struggling to improve their user feedback around navigation of its basic features.

OUTCOME

Working with developers before the app’s release, I identified three major issues around usability, communication, and search that needed to be improved for a successful MVP. Looking at user data and users I designed several initial solutions, validated assumptions, and rapidly prototyped an MVP. After multiple iterations, the MVP’s new design received full stakeholder approval and was ready for release successful launch.

 

My Role:

  • UX designer

  • UI designer

My Team:

  • 3 Engineers

  • 1 Product Manger

My Tools:

  • Sketch + Invision

  • Adobe Suite

My Timeline:

  • 6 weeks

The Complete Story

Problem and Needs

Remark had researched and established that sharing listing notes and preferences were some of the most significant pain points in buying a home through a realtor. Their solution was to build a powerful home browsing experience akin to Zillow but with added communication between the home-buyer and realtor. What was needed was a way to bring all these features together in an experience that was stress-free and intuitive.

 The Process - Designing a Solution

Discovery

Current state, site maps, and validating assumptions

Starting with an already existing basic layout, I mapped out the navigation throughout the app. This early mapping allowed us to quickly identify areas that were in need of improvements to make as well as surface any areas that were unclear even to the developers. Because of the complexity needed to make the app work and after so many previous versions, this larger map was also vital to ensuring that we were still seeing the big picture.

Once we were confident in the map being complete, we showed prototypes to a small user base of realtors and prospective home buyers. Analyzing their feedback and comments against our own assumptions and learnings so far. The outcome of the map and the early testing validated many of our proposed solutions and highlighted several new improvements as well.

 

*NDA prevents higher quality but the design can be spoken to in detail.

Define

Insights and design principals

Collecting our initial research and testing I compared our findings with the current product road map and the team’s backlog. Because of the short timeline, I wanted to be sure we weren’t covering old ground or solving problems already solved. From this review of what the engineering team had already built and what was already planned, I outlined three design principles that we would need to prioritize:

  1. Intuitive Layout

    • Once a property was selected from a search, much of the information was organized behind small tabs. While this works well for desktop, on mobile (especially small phones), this made navigation incredibly hard. Put simply, the app needed better usability.

  2. Emphasize Sharing

    • One of the app’s primary goals was to provide communication between a home-buyer and realtor, yet currently, there was no functionality to encourage the behavior. What was missing were ways to share, favorite, and leave notes on a property.

  3. Easy Search

    • The search for the app was incredibly cumbersome to navigate and lacked many of the features users would be expecting

Remark had a working structure, but it desperately needed to rebuild older designs and build out the most vital features before it started anything new.

Ideate

New designs insights and design principals

The simplest things are sometimes the most difficult to get right, so building Remark to be more intuitive was no easy thing. To do it correctly I knew some amount of user testing would be extremely valuable. Hoping I could create something fast enough to test with some thoroughness, I started with a somewhat simple layout.

As I building out new prototypes I also began to prepare a list of test users from the team’s stakeholders who might volunteer to help with testing, knowing that I could at least perform the testing on people outside the team. As the prototypes developed and received feedback from the team, we began to formalize a more complete and polished design. Once I began sharing the designs with my volunteer testers, one design was a clear favorite. Quickly moving forward with the preferred design, after a few more weeks we had a very strong design that offered simplicity and shared a clear solution to homebuyer’s problems.

The most significant functionalities were to add communication in the forms of icons for sharing, favoriting, and a new feature called “Remark.” Remarking was adding a specialized note on the property that would immediately be shared with the user’s realtor. After continued confusion about how “Remark” worked, I also added the options to “Call” or “Message.” Lastly, some changes in text hierarchy served to give more information in a much more readable way.

Iterate

Final improvements and checking final validations

While the team was happy with this design and it received positive feedback, it still didn’t feel right. Going back through previous interview notes, I realized that users still had problems with three tabs. In this second version with a few information hierarchy changes we manage to remove the functions of Notes and Tags, and instead added one tab called “Remark.” This had the added benefit of improving the power of the Remark feature give it more real estate.

 
 
 

While I was confident I had made the property pages better, the step before the property pages (searching) was still performing poorly. Again, relying on user testing and gathering feedback, I set out to understand how to improve the search.

After looking at the data and understanding what technical problems I would face, I proposed including set groups for browsing and two forms of search: List and Map. Groups for browsing were often created because the first thing a user did was add a filter or sort, so including this as a feature would make things much more manageable. Additionally, including both a Map search and a List search is a common feature in other apps. As a result, our test users were disappointed not to see it. As a final fix, we created two views.

 
Browse 2 2.png
 
Browse 2 1.png
 

Outcomes

Final Measurements and learnings

Nimbold had a great base already working for Remark app, but the team was failing to make the correct connections before I joined. These improvements took an eye for detail and acknowledgment of the app’s big-picture goals. Some of the most notable improvements were:

  1. Highscore with users

    • After the multiple rounds of changes, the app scored well users tests

  2. Intuitive Navigation

    • The app went from confused users to users who intuitively understood how to navigate the app and what its purpose was

  3. Released within Deadline

    • On a deadline, the app was able to be released at far great quality than stakeholders had expected

Remark is an excellent example of how design is always working forward and that the process is never truly over.

Previous
Previous

Ontra - Design in Legal Tech

Next
Next

CMU's Academic Coaching - Rebrand and Shift