Oro Financial

Oro Financial

Refreshing a financial company’s online presence with responsive design

The Challenge

Refresh the look of 25+ year old real estate company with new branding and website

The Outcome

A new logo and responsive website design that give the company a modern look
Screens from an InVision prototype that was used to share the design with remote clients

A New Logo

When Oro Financial came to me for help, the company did not have a logo to represent their brand. To build consistent branding that could be used across platforms, I set to work designing a logo. Several variations were sketched and presented to the business owner before a final design was chosen. Sticking with the “oro” theme and using the brand’s orange color, the logo depicts golden sun rays.

Grey logos include gold bars, sun, and a local sign
A selection of early logos
Logos in bright red-orange and a yellow-orange
Finalists with added color
Logo with simple orange sun rays above company name
Final Logo Design
Original thumbnail design on the Properties for Sale page

Updating the Website

The original Oro Financial website, which was about 10 years old, was in need of an update. The site, which featured only one image, was lacking visuals. In addition it was not mobile friendly, which could hurt its rankings on google search. Large blocks of text made the content hard to digest.

To address these issues, I worked with the company to create a new responsive website design. New images and orange accents were added to the website to give it more color. Blocks of text on the Loans Funded and Rates & Terms pages were reorganized to make it easier for visitors to find information relevant to their needs. In addition, a tagline a mission statement were added to the homepage.

Step 1

Customize Design

Recreate a customized version of the official Rotaract logo in black and white using Illustrator
Before and After logo design

Step 2

Color Options

Extract colors from beach photos and the Rotary logo to create four logo color schemes
Four Color Schemes for logo

Step 3

Collect Feedback

Present top two options to the club president and apply chosen scheme (rotary colors) to logo
Logo with top two color options

Step 1

Low Fidelity Wireframes

Sketches and digital wireframes were presented to lead broker
wireframe of property thumbnails

Step 2

High Fidelity Mockup

Realistic mockup created based on feedback from the broker

Step 3

Design Implementation

Specifications were sent to the website’s developer to launch redesign
Key Findings

The final website, created with Wordpress, was designed to display well on desktops, laptops, tablets, and mobile phones.  Multiple rounds of testing and revisions ensured that users could access the website on  different screen sizes.

Oro Financial rates and terms page on a laptop, tablet and smartphone
Oro Financial website's responsive design displayed on a laptop, tablet and smartphone
Screens showing the countdown process I mocked up in Adobe XD to communicate my ideas for the interface to team members
Early Paper Prototype
3D CAD Models
Foam Core Prototype
Final Acrylic Prototype

About the Client

Oro Financial of California, Inc. is a direct private residential and commercial lender specializing in non-conforming real estate loans in the state of California.

Visit the website at www.orofinancial.net

Lists of elements found on Rotaract Sites
Lists of elements found on Rotaract Sites
A poster with sketches
A poster containing visual notes from the presentation created by an artist at the event
Wearable prototype worn on an armScreenshot of calendar interface
A buzzing and flashing wearable prototype presented by two developers on the team
A functioning web-based parent calendar was presented by a front-end developer
Notes from research into sites of California Rotaract Clubs
Sketches of Home Page Design
Sketch of Events Page
Notes and low fidelity wireframes of the new PB Rotaract website
A selection of screenshots from the PB Rotaract website when it went live in January 2017

Additional Projects

PB Rotaract

PB Rotaract

Growing a new club from 4 to 20 members in less than a year
View Project
TMG Website

TMG Website

Reducing questions about property availability and saving callers’ time
View Project
Oro Financial

Oro Financial

Refreshing a financial company’s online presence with responsive design
View Project
TMG Website

TMG Website

Reducing questions about property availability and saving callers’ time
View Project
Oro Financial

Oro Financial

Refreshing a financial company’s online presence with responsive design
View Project
Dose Tracker

Dose Tracker

Enabling users to easily track usage of over the counter medicine
View Project
CNS App

CNS App

Creating a new way for therapists to treat chronic pain patients
View Project
Context

Context

Helping autistic children move from one activity to the next
View Project
TMG Website

TMG Website

Reducing questions about property availability and saving callers’ time
View Project
Dose Tracker

Dose Tracker

Enabling users to easily track usage of over the counter medicine
View Project
CNS App

CNS App

Creating a new way for therapists to treat chronic pain patients
View Project
PB Rotaract

PB Rotaract

Growing a new club from 4 to 20 members in less than a year
View Project
Dose Tracker

Dose Tracker

Enabling users to easily track usage of over the counter medicine
View Project
CNS App

CNS App

Creating a new way for therapists to treat chronic pain patients
View Project
Oro Financial

Oro Financial

Refreshing a financial company’s online presence with responsive design
View Project
PB Rotaract

PB Rotaract

Growing a new club from 4 to 20 members in less than a year
View Project
Dose Tracker

Dose Tracker

Enabling users to easily track usage of over the counter medicine
View Project
CNS App

CNS App

Creating a new way for therapists to treat chronic pain patients
View Project