UX / UI DESIGN

Real Estate Investment Offerings

RealtyShares is an online real estate investment platform where accredited investors and high net worth individuals can invest in a variety of real estate offerings. When investors find a property they’re interested in, they can access a page with more information about the investment; information about the property itself, the financials, the management team, etc. Our talented team of underwriters does all of the due diligence and presents it on our investment offering pages.

 

CLIENT

RealtyShares

DATE

October 2017

SOFTWARE

Sketch
UserTesting

ROLE

UX Design
Visual/UI Design
User Testing

 
 
 
 

PROJECT GOALS

There were two high-level goals I was tasked with for this project: (1) redesign the customer-facing offering pages for all investment types and (2) design an internal-facing admin tool that would allow our team of underwriters to author and manage offering pages. Ideally, our new design would not only increase conversion for our investors, but also decrease the time and margin for error that came with our existing CMS. I worked closely with product management and stakeholders to narrow our focus and define the core functionality for a minimum viable product (MVP). From there, we established our design objectives.


Design Objectives

  • Design a layout that would work for all investment offering types

  • Design a UI that presents offering data in a digestible format

  • Create an admin tool for managing all offering pages on our site

  • Design a WYSIWYG editor for our internal users to author and edit pages without HTML

 
 
 
 

Research

Gathering Data

I lead the research phase by first conducting a user survey to capture some bulk data. Looking at the results, I paid close attention to which information was most important to investors when reviewing each offering and how they ultimately decide whether or not they want to invest. Once I had enough data, I passed along the results to the rest of the team. From there I was able to start a competitive analysis and create research plans for user interviews and user testing.
 

 
 

Most Important Factor was Sponsor Track Record

graph_5.png

MOST IMPORTANT Factor was Sponsor track record

Most Valuable Feature was Estimated Returns

graph_5 copy.png

Most Valuable Feature was estimated returns

 
 
 

User Interviews

After conducting the survey, I wanted to get more qualitative data via user interviews. I sat down with a few of our existing investors and talked through the current investment offering pages and their process of browsing investments.

I also interviewed our internal stakeholders to review the current process for creating and editing an offering page so that I could get a deeper understanding of their frustrations with the current admin tools.
 

Usability Testing

In addition to interviews, I wanted to conduct usability tests, both with existing and non-existing customers who fit our criteria, in order to identify the biggest usability problems with our current design. This would also serve as a baseline test that I would later use to compare usability metrics after the redesign.

Usability tests were also run with internal stakeholders to understand their biggest frustrations with creating and editing offering pages through the existing CMS.

 

Synthesis

The data gathered from the surveys, tests and interviews helped me identify what features of the offering page were most important to highlight for investors. We also measured how long it took our underwriting team to create an offering page from scratch using our existing tools so that we'd have a baseline to measure against with future improvements.

 
 
f9back.png
 
 

Designing the Experience

Out with the Old

Before I began the design process, I analyzed our current offering pages and admin tools for strengths and weaknesses. After taking detailed notes, I identified a few key issues that needed to be addressed.
 

 
 
 
 
 

Key issues with Previous offering page design:

  • Several components not aligned with current UI style guide

  • Poor use of space

  • Lack of visual hierarchy

  • Lots and lots of text, making it difficult for investors to digest information
     

Key Issues with Previous offering page admin tool and editor:

  • Users required to write HTML to format sections (no standard formatting, no validation, missing tags would often break the entire page)

  • Inability to see edits as they are being made

  • Difficult to find specific offering pages from the admin tool
     

Sketching & Wireframing

I knew I had to address the front and backend design of the offering pages—both how they appeared to our investors and how they would be managed by internal users. I decided to tackle the layout of the offering page design before addressing the editor and admin tool. I began with some initial sketches of the offering page layout and quickly iterated as I gathered feedback from our internal stakeholders and existing investors. Once my sketches were (somewhat) finalized, I began creating digital wireframes and low-fidelity mockups.
 

 
 
wires.png
 
 
 

Prototyping & Testing

I created quick prototypes of the offering pages for each of our funding types so that I could start gather feedback. After gathering feedback from internal stakeholders and investors, I made a few adjustments and prepared to convert my mockups into high-fidelity comps.

 

Designing the Editor and Admin Tool

Once I had an offering page design that was close to final, I began to address the design of the admin tools that would allow our underwriters to create and manage our offering pages. I worked closely with the product manager and end users to identify what features we would need for the MVP. I had the luxury of working in the same office as our end-users, so I was able to get their feedback often to make sure what we built would fit their needs. Their involvement had a huge impact on my ability to quickly design and prototype a solution.

 
 
 
 

The Solution

offering page design

The design aimed to highlight important data and make information easy to find for our investors. Once the initial wireframes and prototypes were validated by various stakeholders, I was tasked with translating wireframes for all of the offering types into high-fidelity comps.
 

 
 
deal page - vernazza.png
 
 
 

Key Metrics

The investment summary box makes it easy to identify important metrics about each investment. The box remains fixed on the page, so the details are visible no matter where users scroll.

 
 
Group.png
 
 
 

Data Visualization

Interactive graphs and charts make the page more engaging for users. Breaking up the walls of text helps make the information more digestible.
 

 
 
Group 2.png
 
 
 

Responsive Design

About 35% of our users browse offering pages from their mobile phones or tablets, so I had to make sure the design would render well on a variety of devices.
 

 
 
devices.png
 
 
 

Admin TooL design

The main objectives of the admin tool were to make offering pages easy to create, edit, and manage. The design also needed to be scalable so that our entire legacy CMS could eventually be retired and replaced with this new system.
 

 
 
Main Offerings admin interface. User can filter and search for a specific offerings or create a new offering.

Main Offerings admin interface. User can filter and search for a specific offerings or create a new offering.

 
Internal users with admin permissions could access the editor tools. We integrated  Froala , a third-party WYSIWYG HTML Editor, to allow our internal team to quickly modify content on offering pages without having to write code.

Internal users with admin permissions could access the editor tools. We integrated Froala, a third-party WYSIWYG HTML Editor, to allow our internal team to quickly modify content on offering pages without having to write code.

 
Users could access the editor tools by hovering over various sections of the page. For example, hovering over the image gallery would reveal an "Edit" button, which would lead users to an editor modal when clicked.

Users could access the editor tools by hovering over various sections of the page. For example, hovering over the image gallery would reveal an "Edit" button, which would lead users to an editor modal when clicked.

 
 
gray-bg.png
 
 

Conclusion

Measuring Success

After the release of the new offering page and editor, we wanted to measure the success of the redesign. We used Pendo to track the number of clicks on our “Invest” CTA before and after the release–our hypothesis was that the improved data presentation, experience, and placement of the CTA (now always visible on the screen) would increase the number of clicks to make an investment. We saw significantly reduced bounce rates on our offering pages in the weeks after launch with a nearly 20% increase in click-through rate!

We also chose to measure how much time we saved internal users to create a new offering page before and after the redesign of the admin/editor. This was difficult to measure accurately due to several variables (varying amount of property research, difference in team member experience, etc.). However, our internal users predict that the redesign lead to a 40-50% time savings in offering page creation. 

 

Retrospective  

If I could do it again, I would bring our end users of the admin tool into the picture way earlier. Sharing quick wireframes with real data would have made it easier to get early feedback and accurately specify the requirements of the tool. This would have saved me time reworking the high-fidelity mockups, which are much more time consuming to modify versus simple wireframes.
 

 
dark-bg.png