Fringe Capital Partners

Designing a New Feature for an Established Site.

Overview

Fringe Capital Partners is an established real estate investment firm located in Phoenix, Arizona. The firm is midsized, focusing on steady growth. I was the sole Product Designer for this project, however I worked with their initial UX Designer who completed their first web design to gain access to the backend site and materials. Their site’s main objective is to showcase their properties, to offer a form of contact, and to include an investor portal link. 

The Fringe Principal’s asked me to take a closer look at their current site and see where additional information about their properties could be situated.

I elevated a boutique real estate firm’s image and capital acquisition efforts through product and feature launches.

My Role → UX / UI Designer

Tools →   Figma, WordPress, Photoshop, Canva

Scope → 6 weeks with ongoing projects

The Challenge

Fringe Capital Partners lacked information about their properties. They needed a space to describe their proccess, strategy, and ROI (return on investment) for certain properties in order to outline their success trajectory.

How We Found A Solution

User Research

I began the process with an initial meeting with the founders to outline their wants and needs. Additionally, the founders shared their current site and branding materials. I determined that they prioritized:

  1. An organized display of information
  2. Additional images of their properties, including a “before and after” renovation section
  3. Simple user flow with easy navigation
  4. Consistent branding throughout

User Research Findings

The user research consisted of 12 participants with varying knowledge of the Fringe company. I wanted to create a realistic study pool for this research.

83%  of participants deduced the current site is easy to navigate,  with 67%  of participants indicating the site is lacking in information provided.

100%  of participants concluded Case Studies would prove helpful in understanding the Fringe investment strategy.

100%  of participants concluded Case Studies would clearly showcase Fringe's successes thus far.

100%  of participants decided they prefer additional information through Case Studies added to the Fringe site.

User Personas

Below are the user personas I built based on information received from the interviews with the CEO.

Competitive Research

Analyzing other property investment firms and outlining their strengths and weaknesses is important in order to form a well-rounded view of similar websites. This research sheds light on which aspects we need, in order to uphold high quality standards and assist in identifying potential opportunities for Fringe to improve. I evaluated three property investment firms, outlined below, that incorporate a Case Study feature into their websites.

Hover and click through the slides below to visualize the property investment sites.

Breneman Capital

Strengths:

  1. Before and after photos
  2. Strategy clearly outlined
  3. Easy navigation to other case studies

Weaknesses:

  1. No clear sections
  2. Not pleasant to read
  3. “Feature photo” does not draw the user

Jevan

Strengths:

  1. Key metrics outlined well
  2. Beautiful use of feature photo
  3. Well organized sections with clear navigation

Weaknesses:

  1. Non-uniform, some case studies lack property name
  2. Not enough images, no use of “before and after” photos

Landmark Properties

Strengths:

  1. Map and location included in description
  2. Clear sections with images
  3. Accessibility menu feature

Weaknesses:

  1. No “before and after” image section
  2. No clear navigation to other case studies
  3. Hero section is not clear which property the page features

The Takeaways:

  1. Include Before and After photos to help visualize impact.
  2. Create a summary or key metrics section, to appeal to “skimmers”.
  3. Separate information into clear sections to appeal to users looking for certain information.

How Might We...

  1.  How might we structure new feature design and solidify argument for case study feature?
  2. How might we ensure easy flow and navigation through the site?

UI Design

The Fringe founders wanted to keep their original branding, and simply add a feature that would be consistent with their current look. For reference, I’ve gone ahead and created their brand tile.

Information Architecture

My next step was to outline where I would place the new Case Study feature. I created a proposed site map that summarized where I would place the new feature, which you can see below.

Case Study Features

After completing the research and site map, I wanted to include the must-have features for the new case study section:

An overview of the property size, location, and background to help paint a picture of the property.

A summary of the company strategy and investment success was important to showcase their growth.

Additional photos to feature the property and offer a visual aid for progress updates.

Ease of navigating to other case studies and to their contact form was crucial.

Wireframes

Sketching out the sections needed and playing with the placement helped to narrow down overall layout. Since the Fringe team did not want to change their home screen drastically, I had to come up with a simple way to incorporate the new feature. 

After consulting with the team, we decided on a layout in which I designed a Lo-Fi wireframe on Figma to test. My next step was to fine-tune the design and create a prototype to start user testing.

Prototype

I completed the prototype in Figma, focusing on where to place the link to the case study feature. I decided to make each “investment” image a link and include a “SEE CASE STUDY” banner below each card.

We prototyped in Figma, with plans to transfer to WordPress.

Usability Testing

I tested the high-fidelity prototype on eight participants.

Next, I facilitated 12 rounds of usability testing, involving participants with varying degrees of Fringe company understanding.

The goal was to ensure the new feature was functional and clearly addressed the Fringe teams original goal: an organized display of information that is inline with their original brand, including additional photos and ease of navigation.

The Method: 

Zoom & In-Person

The Participants:

n = 8 : Ages = 25-65 years old.

The Task:

  1. Acess a case study via two different avenues

Results of the Usability Testing:

Completion Success Rate
%
Agreed with Branding Decisions
%
Maximum Completion Time
1 min
Suggested Back Button Navigation
%

Iterations

Many rounds of iterations were performed throughout the design process.

1.

The main iteration found after user testing was the need for a back button on the case study page. I added on in the top left corner to promote navigation.

2.

The founders suggested various layouts they preferred with imagery. We settled on gallery view, as you could easily add as many photos as wanted.

Final Prototype

Impact

  1. Led discovery session: identified pain points and strategies, resulting in a new “showcase” feature.
  2. Conducted competitive analysis and user journey research to inform website design decisions.
  3. Elevated a boutique real estate firm’s image and capital acquisition efforts through product launches.
  4. Leveraged existing branding guide to design individual elements and pages for the website, which attracted new investors and funding.

The main goal of this project was to analyze the current site and design an additional feature to display their properties. I believe I completed the task at hand, and was happy to receive excellent feedback from the Fringe founders.

If I had more time...

After several meetings with the Fringe team, we’ve decided to completely re-design their entire site. They hired me to incorporate the new “Case Study” feature into the new, revamped and restructured site.

The Fringe team wants a cleaner, more interactive site to better display their brand.

Stay tuned for updates down the road!