TEXAS REAL ESTATE
DIRECTORY APP

What's the App About?

The Texas Real Estate Directory app is focused on turning the task of finding the ideal real estate agent in Texas as simple as simple and precise as possible. To make that possible, our mission was to make an app that’s  easy to navigate and having only really relevant features.

The app allows users to find agents by their credentials, location, culture knowledge and languages they speak, or find the ones closest to users (via geolocation).
If an agent sign-in, he/she can share its locations making him/her findable to possible clients.
The app also works as a bridge to HAR’s main app, so by tapping a listing he likes, he’s directed to it at HAR app to see its details.

My role in this project was the whole product design. I designed from navigation structure, interactions and visuals, from its visual style to its icons.

The Challenge

It was a 3-week app design project, iOS and Android, so the use of prototyping tools like Invision and FramerJS was essential in the design process. By testing and playing around I could try things before having them implemented, also it helped a lot to communicate with stakeholders and developers.

tred-ios-linetred-ios-line
tred-android-linetred-android-line

Design Solutions

Bottom Navigation

An essencial element to turn app’s navigation the simplest as possible was the use of a bottom navigation bar (known as tab bars in iOS). In my opinion, an app that doesn’t have a frequent use have its features as visible as possible, as they aren’t going to last long in user’s minds.
That navigation resource was used in both iOS and Android.

tred-nav-diagram-2tred-nav-diagram-2

Motion to Create Space 

In order to have an navigation bar, an action bar and still have a tab bar at the bottom (so the app stays easy-to-navigate), we came with the sticky bar that you can see in the example bellow.

Click here to check how it feels like.

That was only possible by using FramerJS and the power of prototyping with code. I don’t think that animation tools like After Effects would help us to understand and feel this interactions in a more accurate way.

Take Aways

1. The more you communicate, the more you narrow.
Clients usually have a lot of ideas and few answers. It’s the designers job to help them to figure them out. Rapid Prototyping  was key to do that.

2. Knowing how to code makes you a better designer. Tons of ideas pops-up during the process of prototyping with code.