Bright Rich

Markup and styles refactoring + UI/UX improvements

November 2022
Bright Rich - homepage screenshot

The company

Bright Rich is a member of CORFAC International, an international association of professional brokerage companies. As of today, their portfolio of transactions is higher than 1.9 million sq. m. The branches are located in Dubai and Almaty, Moscow and St. Petersburg.

The goals

The site had accumulated a lot of problems, which were slowly fixed by an in-house specialist. The company was planning to expand into Kazakhstan and the United Arab Emirates, so we were tasked with getting the site up and running as quickly as possible. For this purpose we planned to:

  • manually test the existing website to detect unrecorded issues;
  • migrate the website to Evernet's in-house CMS developed for the real estate industry

Page types

  1. Homepage
  2. Offers list (3 views)
  3. Property page
  4. Particular offer page
  5. About page
  6. Blog
  7. News list
  8. News page
  9. Services list
  10. Services by type
  11. Service page
  12. Vacancy list
  13. Vacancy page
  14. Contacts
  15. Error 404
Page types

So... we need more pages!

Two additional page types were added during the migration. They required branding using existing design tokens and components.

  1. Residence page
  2. Analytics by district
Residence page - preview
Residence page
Analytics page - preview
Analytics page

So...we need more icons!

Over 40 icons related to the infrastructure were selected and given a consistent style.

Icons for the residence page

Global issue: unused code

The site's use of the Bootstrap library was excessive and unproductive. Only grid-related classes were used consistently, while styles for other elements were often redundant and overriding the library's default styles. The HTML code contained excessive nesting.

Solution: write the markup and styles from scratch

Some elements changed as a result of the audit, requiring code refactoring in any case. It was also planned to introduce new page types and elements. Rewriting the code from scratch will ensure future scalability and easy maintenance.

The new website was developed with Smarty Templates and SCSS.

An interim version of the rewritten code is available on GitHub.

Partial code on GitHub

Not only the code

Other issues were usability related

  • unclear or inconvenient navigation in some sections
  • performance issues
  • incorrect work of scripts (for example, there was confusion in applying the slider on large and small screens)

Offer card changes


Before

Offer card - before

After

Offer card - after

Other issues examples

Problem

The image preview button appeared only on hover. It was difficult to understand that there are move offers below because the scroll appeared only on hover as well.

Offers table - before

Solution

The icon was replaced with the real photo. Offers list is no longer truncated. If the list is too long, you can view the full list using the "view more" button.

Offers table - after

Problem

Vertical slider depending on scroll had a very bad performance. The number of items was unpredictable for user and the button for skipping this functionality was unnoticeable.

Slider - before

Solution

A classical slider with an autoplay and manual scrolling options.

Slider - after

Problem

A title with the functionality of the select. A very subtle dropdown arrow. It's impossible to predict which options you might find.

Services - before

Solution

All possible options are shown at once through tabs.

Services - after

Example of a ready-made page

Contains lots of sliders, tabs and other interactive elements

Result

-50%

the style files have been reduced

+12%

the performance increased

100+

fixes and improvements

2 weeks

working on front-end has taken

Bright Rich mobile version screenshot  - 01
Bright Rich mobile version screenshot - 02
Bright Rich mobile version screenshot - 03

More case studies