Project Overview
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.
Information Architecture
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.
Redesign of the 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.
Redesign of the homepage (Desktop)
Content Strategy
The original design of the website did not start off following the approach of "mobile first", so the previous mobile site offered significantly less optimal user experience with much fewer contents. An important component of my new designs was to optimize all the contents for mobile devices. The redesigned mobile site offers similar contents as to desktop and tablet sites, with a few changes. The map section was removed as the interaction map is Javascript heavy, which might slow down the loading speed on lower bandwidth. In addition, compared to the "buy" and "sell" pages, the interaction map is a relatively secondary business goal. Furthermore, some tablets/charts were redesigned and some copies were reduced to prevent infinite vertical scrolling.
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.
Redesign of the homepage (Desktop)
User Flow
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.
Redesign of the map page (Desktop)
Affordance
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.
Redesign of the homepage (Desktop)
Consistency
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.
Redesign of the sell page (Mobile)
Typographic Design
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.
Graphic Design
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.
Redesign of the newsletter page (Mobile)