project-stepp-v1-compressor

HERMAN-SCHEER / 2017

Stepp Commercial.
A professional real estate platform for high-end apartment buying and selling.

Stepp Commercial.
A professional real estate platform for high-end apartment buying and selling.

Stepp Commercial.
A professional real estate platform for high-end apartment buying and selling.

Stepp Commercial.
A professional real estate platform for high-end apartment buying and selling.

ROLE

I was in charge of refreshing the current Stepp Commercial logo. I also help the art director designing support pages using the same style guide from the homepage. In addition to that, I also work with the in-house development team to design and build a custom interactive map listings.

I was in charge of refreshing the current Stepp Commercial logo. I also help the art director designing support pages using the same style guide from the homepage. In addition to that, I also work with the in-house development team to design and build a custom interactive map listings.

I was in charge of refreshing the current Stepp Commercial logo. I also help the art director designing support pages using the same style guide from the homepage. In addition to that, I also work with the in-house development team to design and build a custom interactive map listings.

I was in charge of refreshing the current Stepp Commercial logo. I also help the art director designing support pages using the same style guide from the homepage. In addition to that, I also work with the in-house development team to design and build a custom interactive map listings.

THE BRIEF

Refresh the current Stepp Commercial logo to be more simplistic and use the logo plus the new color palette to design a new website with an interactive listing map feature.

Refresh the current Stepp Commercial logo to be more simplistic and use the logo plus the new color palette to design a new website with an interactive listing map feature.

Refresh the current Stepp Commercial logo to be more simplistic and use the logo plus the new color palette to design a new website with an interactive listing map feature.

Refresh the current Stepp Commercial logo to be more simplistic and use the logo plus the new color palette to design a new website with an interactive listing map feature.

TARGET AUDIENCE

Apartment owners and entrepreneurs interested in investing in premium apartment complex and need guidance from a team of real estate experts.

Apartment owners and entrepreneurs interested in investing in premium apartment complex and need guidance from a team of real estate experts.

Apartment owners and entrepreneurs interested in investing in premium apartment complex and need guidance from a team of real estate experts.

Apartment owners and entrepreneurs interested in investing in premium apartment complex and need guidance from a team of real estate experts.

project-stepp-v1-2-compressor
Stepp-2-2-compressor

LOGO REFRESHED

LOGO REFRESHED

The new Stepp logo is simplified with brighter colors to represent a new and refreshing change to the long lasting Stepp Commercial brand. Our team agree to remove the word "Commercial" and simplify the building illustration, to make the logo versatile for smaller brand collaterals.

The new Stepp logo is simplified with brighter colors to represent a new and refreshing change to the long lasting Stepp Commercial brand. Our team agree to remove the word "Commercial" and simplify the building illustration, to make the logo versatile for smaller brand collaterals.

The new Stepp logo is simplified with brighter colors to represent a new and refreshing change to the long lasting Stepp Commercial brand. Our team agree to remove the word "Commercial" and simplify the building illustration, to make the logo versatile for smaller brand collaterals.

The new Stepp logo is simplified with brighter colors to represent a new and refreshing change to the long lasting Stepp Commercial brand. Our team agree to remove the word "Commercial" and simplify the building illustration, to make the logo versatile for smaller brand collaterals.

THE PROBLEM

The client wanted to show more than 6 listing map markers on the map, but since we are only showing 6 listing thumbnails on the left, showing more map markers on the right will be confusing to the users. If we have to show all map markers, once the user click on them, how will the left hand side listing thumbnails react? Do we refresh the left hand side listing to match the listing they clicked on, or simply take them to the listing detail page without updating the left side. 

The client wanted to show more than 6 listing map markers on the map, but since we are only showing 6 listing thumbnails on the left, showing more map markers on the right will be confusing to the users. If we have to show all map markers, once the user click on them, how will the left hand side listing thumbnails react? Do we refresh the left hand side listing to match the listing they clicked on, or simply take them to the listing detail page without updating the left side. 

The client wanted to show more than 6 listing map markers on the map, but since we are only showing 6 listing thumbnails on the left, showing more map markers on the right will be confusing to the users. If we have to show all map markers, once the user click on them, how will the left hand side listing thumbnails react? Do we refresh the left hand side listing to match the listing they clicked on, or simply take them to the listing detail page without updating the left side. 

The client wanted to show more than 6 listing map markers on the map, but since we are only showing 6 listing thumbnails on the left, showing more map markers on the right will be confusing to the users. If we have to show all map markers, once the user click on them, how will the left hand side listing thumbnails react? Do we refresh the left hand side listing to match the listing they clicked on, or simply take them to the listing detail page without updating the left side. 

project-stepp-v1-3-compressor
Stepp-2-3-compressor

MAP SOLUTION / DETAIL WIREFRAME

MAP SOLUTION / DETAIL WIREFRAME 

Our solution to this problem is to first add a "view on map" button to the listing thumbnails on the right, this will solve the confusion of not knowing where the listing is on the map. We will also be showing all map markers on the right, adding in a modal functionality so that once you clicked on the marker, the modal will show listing information.

Our solution to this problem is to first add a "view on map" button to the listing thumbnails on the right, this will solve the confusion of not knowing where the listing is on the map. We will also be showing all map markers on the right, adding in a modal functionality so that once you clicked on the marker, the modal will show listing information.

Our solution to this problem is to first add a "view on map" button to the listing thumbnails on the right, this will solve the confusion of not knowing where the listing is on the map. We will also be showing all map markers on the right, adding in a modal functionality so that once you clicked on the marker, the modal will show listing information.

Our solution to this problem is to first add a "view on map" button to the listing thumbnails on the right, this will solve the confusion of not knowing where the listing is on the map. We will also be showing all map markers on the right, adding in a modal functionality so that once you clicked on the marker, the modal will show listing information.

project-stepp-v1-4-compressor
Stepp-2-4-2-compressor

PHOTOGRAPHY / HEADSHOTS

The Stepp team wanted to be represented as trust-worthy and professional, a team with years of experience in the industry. One way to show that is through nice and clean headshots. Our team put together a photo style, shot, and then edited all Stepp headshots for a consistent look. This will match the new brand identity and site's layout and bring the whole site together.

The Stepp team wanted to be represented as trust-worthy and professional, a team with years of experience in the industry. One way to show that is through nice and clean headshots. Our team put together a photo style, shot, and then edited all Stepp headshots for a consistent look. This will match the new brand identity and site's layout and bring the whole site together.

The Stepp team wanted to be represented as trust-worthy and professional, a team with years of experience in the industry. One way to show that is through nice and clean headshots. Our team put together a photo style, shot, and then edited all Stepp headshots for a consistent look. This will match the new brand identity and site's layout and bring the whole site together.

The Stepp team wanted to be represented as trust-worthy and professional, a team with years of experience in the industry. One way to show that is through nice and clean headshots. Our team put together a photo style, shot, and then edited all Stepp headshots for a consistent look. This will match the new brand identity and site's layout and bring the whole site together.

project-stepp-v1-5-compressor

WEBSITE DESIGN

Designing the Stepp Commercial site was a big learning experience because we had to think a lot about all the functionalities that the site needed to have. In addition to that, we also try to figure out how to implement these functionalities without slowing the site down. This was successfully accomplished because we were able to work side by side with our in-house development team. It taught me to pay attention to my developer inputs and value their knowledge in the field. Thousands of users will now have access to a great looking site, filled with information about the Stepp Commercial team and the services they offered.

Designing the Stepp Commercial site was a big learning experience because we had to think a lot about all the functionalities that the site needed to have. In addition to that, we also try to figure out how to implement these functionalities without slowing the site down. This was successfully accomplished because we were able to work side by side with our in-house development team. It taught me to pay attention to my developer inputs and value their knowledge in the field. Thousands of users will now have access to a great looking site, filled with information about the Stepp Commercial team and the services they offered.

Designing the Stepp Commercial site was a big learning experience because we had to think a lot about all the functionalities that the site needed to have. In addition to that, we also try to figure out how to implement these functionalities without slowing the site down. This was successfully accomplished because we were able to work side by side with our in-house development team. It taught me to pay attention to my developer inputs and value their knowledge in the field. Thousands of users will now have access to a great looking site, filled with information about the Stepp Commercial team and the services they offered.

Designing the Stepp Commercial site was a big learning experience because we had to think a lot about all the functionalities that the site needed to have. In addition to that, we also try to figure out how to implement these functionalities without slowing the site down. This was successfully accomplished because we were able to work side by side with our in-house development team. It taught me to pay attention to my developer inputs and value their knowledge in the field. Thousands of users will now have access to a great looking site, filled with information about the Stepp Commercial team and the services they offered.

RECOGNITIONS & CREDITS

Credits: Danny Solomon - Art Director/Lead Designer , Tessa Smith - Project Manager, Chapin Herman - Headshot Photographers

Credits: Danny Solomon - Art Director/Lead Designer , Tessa Smith - Project Manager, Chapin Herman - Headshot Photographers

Credits: Danny Solomon - Art Director/Lead Designer , Tessa Smith - Project Manager, Chapin Herman - Headshot Photographers

Credits: Danny Solomon - Art Director/Lead Designer , Tessa Smith - Project Manager, Chapin Herman - Headshot Photographers

TO VIEW THE COMPLETED SITE, CLICK BELOW

Let's Connect.
I'm available for any interesting freelance projects and I'm also looking for a new workplace. 

Let's Connect.
I'm available for any interesting freelance projects and I'm also looking for a new workplace. 

Let's Connect.
I'm available for any interesting freelance projects and I'm also looking for a new workplace. 

Let's Connect.
I'm available for any interesting freelance projects and I'm also looking for a new workplace.