Project Info: Redesigning a real estate responsive website for my freelance client, The Bamberger Group. The website is constantly evolving, so some of the mockups below might be outdated.
Company: The Bamberger Group helps people feel more connected with their local community, and helps them buy and sell homes in the Murray Hill neighborhood when it is time.
Timeline: June 2016 – Present.
Role and Responsibilities: I am leading the UX/UI design of the website across all breakpoints as well as directing and supervising the developer in the front-end development of the website.
The original website had issues of visibility and findability. One of my first redesigns was to reorganize the information architecture of the whole website. Below shows the redesign of information architecture.
For instance, on the previous design of homepage, user can only access the "travel through history" or "history" page through the section highlighted in red on the left image. If user is not on the homepage, they would have to go back to the homepage in order to access the "history" page. Considering the "history" page is an important part of The Bamberger Group's value propositions as being the neighborhood expert, I have grouped the "history" page along with others into one category under "neighborhood" on the global navigation, so that user can access the page easily.
I created the content strategy to not only optimize user experience, but also optimize business solutions. For instance, I added two new sections on homepage, "Recently Listed in Murray Hill" and "Most Recent Newsletters." These two sections show 3 to 5 most updated items from each category, which indicates that the website is up to date and draws users to keep returning to the site.
Another important component of the redesign was to recreate a more intuitive user flow. On the original design of the map page, user is presented with a text-based tooltip that tells them how to navigate through the map. Based on the analytics, few users actually clicked through the buildings on the interactive map. In my redesign, I have removed the whole text-based tooltip. Instead, I added an animated down-arrow that invites user to click through the buildings on the map.
In my new designs, I also improved the affordance of interactive items. The image below shows one example of the redesign. I added drop shadow to those four cards, which more clearly indicate interactiveness.
The original site had the issue of visual inconsistency. Especially several non-links were highlighted in the orange color, which is also used to highlight links. In my redesign, I removed the orange color of all the non-links.
The original typefaces for the website were BPreplay for headings and Helvetica for body text. The problem with this font choice is that the contrast between BPreplay and Helvetica is not strong enough. Moreover, BPreplay Regular has relatively thinner strokes, which makes it less readability in lower screen resolution. In my new design, I have chosen Playfair Display Bold for H1, and Open Sans for other headings and body text.
Furthermore, in order to improve readability, I changed all the texts that were in all uppercase to normal capitalization rules.
A part of my redesign was to finesse visual details. Below is one example of the redesigns. On the original design shown on the left, the page title "The Bamberger Report" has a white textbox, which obstructs the view of the image below. In my redesign on the right, I changed the white textbox to a dark overlay, which is also more aesthetically pleasing.
See the samples here