Blueroof360

Title: UX Designer + Front end Developer
Time: 3 years
Location: Draper, UT + Bellingham, WA
Team Dynamic: Independent work with open team communication

A customized platform for real estate agents and offices, I worked with thousands of clients from Keller Williams to RE/MAX in order to provide the best experience in designing and building their websites.

Below was my design process while working with clients. I will showcase a few examples of this work below as well as other internal work for the company.

 

Design Process

  • Client call

    30 minute design consultation with client and project manager where we discuss wants, needs, and client’s branding.

  • Design mockups

    Wireframe sketch and research designs based around client’s needs. Design high fidelity mockups in Figma and review design with client on Zoom call before starting the build process.

  • Code

    Once design has been approved, move forward with developing the complete website. Use HTML, CSS, and JavaScript and place into our sitebuilder.

  • Test and review

    Test website on all devices, send to project manager to review. Make the client happy with minimal edits, and the site gets launched all within a 30 day deadline.

Real estate agent

Mockups

Designed via pen + paper + Figma

Created low fidelity wireframes and high fidelity mockups, creating multiple iterations in Figma and shown to CEO of company or if it was client work - shown to clients. Once design was approved by either CEO or client, I would then move into build/coding phase.

Tools used: Figma

MacBook Pro displaying a real estate templated web design made by Dani DeSalvio.

Internal Projects

Template Design + Development

In response to outdated website templates, I designed and developed three new templates for the company's Real Estate clientele. The task was to develop two new templates for this project. I was able to complete an additional third template within the project deadline.

Tools used: Figma + Blueroof360 Website Builder
Code language: HTML + CSS + Javascript
Duration: 1.5 months

View template

Additional Templates

 
 

Product Improvements

Figma prototype displaying a new design for real estate agents to easily display their contact information via a slide-out fullscreen page.

The number one request received from our clients was “I want my information to be shown in the navigation bar”. I had already achieved that in previous builds and template designs, but it displayed too bulky on mobile. The solution of my re-design for mobile, where the “Contact Us” button produces a slide-in effect where all of the information is on one page and displayed in a more elegant, interactive, and modern way… felt more successful of an option for all clients.

 
 
Prototype of a real estate website viewing on an iPhone. A contact button is clicked, and a slide out menu bar appears with the agent's phone number, email, and physical address.

Prototype of a real estate website viewing on an iPhone. A contact button is clicked, and a page slides in that displays the agent's phone number, email, and physical address.

Client feedback

“Dani and I were introduced to build out my new website. Having done this a few times before, I now had extra clarity around what I really wanted in terms of both visuals and functionality and Dani grasped my vision with ease.

Dani was my point person and after many trials with other designers, I highly recommend her. It is a rare talent to both render someone else’s vision while truly hearing them. Thank you Dani. I am so grateful our paths crossed”

-Ron Armstrong, Former client + Realtor @ AshevilleAndBeyond