Edwin Rodriguez

UX/UI DESIGNER

The Agency — is a full-service, luxury real estate brokerage and lifestyle company that has redefined and modernized the real estate industry.

Responsibilities:

• Overhauled the design, user experience, and interaction while retaining certain key components in order to maintain current user workflow and stay within the brand guidelines.

• Help establish and highlight important functionality and create a sense of hierarchy to make sections more defined and increase readability and productivity.

• Designed wireframes, mockups, specs using Adobe XD and used Protopie for prototypes.

Redesign: Salesforce CRM

The Agency is building their own custom web version of Salesforce CRM from scratch in order to streamline their day to day data entry and only display tool sets they need. The goal of this project was to reduce the eye sore, increase readability, productivity, and usability, as well as promote and highlight important functionality. In short making sections more defined, easier to read and notice the action items and less of an eyesore for someone staring at it all day.

BEFORE

Just to name a few problems with the page:

• Very contrasting colors like black and white can cause discomfort for the eye when users read the text over an extended period of time.

• There are many CTA of various sizes everywhere and make the page look cluttered and confusing.

• Text is hard to see and sections are not well defined.

• Etc...

AFTER

In order stay within brand guidelines and reduce the eye strain I kept the brand colors and used various grays to not only reduce the eye strain but to separate sections out and create spacing.

I increased the overall font size and adjusted the style to create a sense of hierarchy and sections within each category and be more legible especially for the older users.

Simplified buttons and actions for example I changed “Create Chatter Post” to “New Post,” It doesn’t need to say what section its creating a post since that buttons lives within the section already.

Unified all the styles for the icons and their hover states

Navigation

Their current main navigation is difficult to use and users can get lost and confused at times, here are a few reasons why:

• It opens the sub-menu under each main menu item and pushes everything down and out of view. ( see image on the right )

• The sub-menus stay open even if other nav items are selected and you could potentially have section open, you have to manually minimized it.

• Users cant get to the main page of each section without having to access the sub-menu (having to click twice).

• It’s not obvious which are the main menu categories and which are the sub menu categories other than the icon associated with it and the spacing and font styling is identical.

• When the sub-menu opens it feels sluggish and laggy

New Changes to Navigation

To fix these problems I had to change the way the nav functioned. Instead of the accordion type menu, I made the main menu static and displayed the sub-menu into its own container next to the main nav and it appears on hover.

This made the nav look clean and easier to navigate, it allowed users to get to the main page of each section instantly and view their options with fewer clicks.

In addition, I added a “Recent” section within the sub-menu to display the 5 most recent items from that category, to get to their content they use often faster and

I decreasing the timing and removed the delay of the menu animation to make it feel more responsive and snappy.

Changes to the tables

I wanted to simplify and clean up the tables while also unifying them to make a reusable version. In order to organize the layout and keep everything grouped up I moved all the actions and most functionality to the left side, making it easier for users to find what they want and edit multiple highlighted items at a faster pace.

Their pagination had too many options and in order to simplify it, I first conducted research to verify their data did not exceed x number of entries per table and found out that around 99% of their tables had less than 100 entries per table, further validating the need to simplify it. The tables will display at least 10 entries at a time and can potentially need up to 10 pages. In the example shown you can see that you are able to navigate to a specific page with a single click.