Reintroducing re : edge.

We have mentioned re : edge, the brilliant architectural firm behind Rose Apple Square, briefly in passing. This time, we're here with a comprehensive case study.

Website Design with Mäd - Rose Apple Square
We don’t just help build websites, we help build a community. Over the years, we’ve been able to bring together influential industry leaders and fill our portfolio. Discover how we Make It Happen.™

Not Your Average Architectural Firm. re : edge is one of the leading architectural firms behind the rise of Cambodia's jutting urban jungle. What sets them apart from other architectural firms is the emphasis that they place human centric design: integrating architecture, interior design, and landscape design into one holistic human experience.

The Art of Rebranding.

As with any branding or rebranding work, we believe it's important to commence the project with a design sprint workshop dedicated to understanding the client's business inside out. The design sprint enabled us to deeply understand re : edge's business, who they are and their core principles.

A Decade of Design.

re : edge has reached a massive milestone of 'A decade of design'. This called for a rebranding, ensuring that were ready for yet another decade of excellence. The brand essence of 'Innovating the future of human spaces' was crafted during the design sprint and perfectly sums up re : edge's most intrinsic purpose.

It was clear from the beginning of the project that minimalism was the ideal design direction for re : edge, allowing all focus to be placed on their work without any distraction from their branding. This minimal direction was achieved by the use of 'white space' throughout the branding, both on and offline, creating a clean and calm brand look and feel.

'Less is More' - Mies van der Rohe.

Brand Concept.

Re-Edge, as the brand name was written before the rebranding, is a combined meaning word which means to 're-think, re-imagine, re-purpose, re-design, re-create, re-do or re-draw' the conventional thinking of an edge, wall, sidewalk, road, building, community or city. Re (re :) also means 'regarding' or 'with reference to'.

We decided to combine the two mentioned concepts, rewriting the brand name as re : edge, or with reference to the edge. This concept has been consistently used throughout the branding (eg. re : principles).

A New Logo for A New Decade.

All successful rebranding projects carry something from the old brand into the new, creating a sense of familiarity for the brand's clients, target audiences and admires. The 'r' of the old logo was unique from the other logo letters in the sense that its leg descended below the baseline. To ensure a sense of familiarities, we decided that the 'r' of the new logo should also possess a unique characteristic.

Old Logo.

Noto Sans was chosen as the basis of the logo due to its simplicity and clean appearance. The typeface was then crafted ever so slightly to enhance its clean nature. The 'r' of re : edge was furthermore manipulated, creating a sharp edge that not only reflects the brand's name, but also represents some of their most iconic design styles and projects.  

Logo Construction.

As you can see, the 'r' in both the old and new logos possess unique characteristic that differentiate them from all other letters in the logo.

Primary Logo.
Logo on a Construction Hat.

A secondary logo and brand icon were derived from the primary logo, creating brand synergy. This was done to ensure that there are various logo options for various branding needs.

Internal Workbook.

Minimum Clear Space.

To ensure visibility and strong logo recognition, a minimum clear space was added around the logo. The height of the 'r' icon as used as a guidelines to determine the most appropriate clear space.

Minimum Clear Space.

A Fluid Logo.

"We are fluid. We are not about a particular style or movement. We are guided by time and space and light."

We decided the inspiration from re : edge's fluid approach to design and dynamic thinking by creating a fluid logo that can be used in various ways throughout the branding. This was done by breaking the logo into two parts - 're :' and 'edge'.

Logo Fluidity.
Letterhead.

Brand Color Palette.

A neutral color palette, with black and white as the primary colors, was chosen to maintain the minimal brand direction. Various shades of grey were added as secondary colors to allow flexibility in brand roll out design without detracting from re : edge's work and projects.

Brand Color Palette.

Brand Typeface.

Noto Sans was chosen as the brand's one and only typeface due to its wide variety of fonts weights and styles, resulting in a monotype brand. This not only ensures strong brand recognition, both and offline, but also allows all written content to call back to the brand's logo.

A Hint of Character.

To reflect the playful nature of re : edge's team, a playful pattern using the 'r' icon was create to add character to the brand.

Brand patterns.

It is all in the Finishes.

To set re : edge apart from its competitors and to ensure a memorable brand, the printing finish of blind debossing has been used for various brand roll out items.

Blind Debossing.

Web Redesign & Development.

The Layout.

The purpose of a web presence is to translate re : edge's products offerings and visions onto the web domain. Therefore, designing with the end users in mind, it's important that the layout simplifies the navigation process in order to lead the users to practical information.

Information Architecture.

Restructuring the Information Architecture.

One of the biggest changes was the decision to have 'Practice' and 'Projects' as the two main categories.

Immediately after the user lands on the homepage, they see two columns: Practice and Projects. The divide serves to aesthetically symbolize an architectural floor plan while also keeping the website structure organized.

The categorization of Practice and Projects in the first landing of the homepage effectively helps with the structure and navigation of the site. It signals to the users upfront that Practice is where you go to find out more about re : edge while Projects is where you go to access their case studies.

Practice.

A firm dedicated to enhancing the human experience, it's no doubt re : edge has many stories to share.

Story. Team. Principles. Careers. & Contact. Each encompassing section in Practice is structured in a column-like appearance to maximize the storytelling effect of conveying the firm's values and culture. We meticulously incorporated interactive elements like the hover zoom image effect, animated lines and underlines to elevate the minimal column-like appearance.

Projects.

We decided that showcasing re : edge's Projects in a portfolio-like structure is the best way to exhibit their case studies.

Retail. Residential. Commercial. Master Planning. All. Each encompassing section in Projects is structured by mixing and matching one column and two column layout and alternating images and text grids. We retain the harmonious look of the column-like appearance in Practice but with a slightly more magazine-like edge.

Interactions & Micro-animations.

Although beautiful, the challenge with minimal designs is the risk of looking uninteresting. This is why details like interactions and micro animations are so important for capturing users' attention and engagement, especially for minimal websites.

We wanted to carry the emphasis that re : edge places on 'human interaction with their spaces' over onto the web dimension. The use of micro animations throughout the website offers the users exactly this; a chance to interact as if they are navigating through the carefully curated architectural space.

As embodied by the loading animation that displays:
re: think. re: imagine. re: purpose. re: edge. simultaneously, as opposed to a static loading screen; the hover to add color effect, the underline animation and the footer animation; we're able to lead the users throughout the website all the while keeping them engaged with the content.

Content.

Aesthetics matter. However, without quality content, a website would have no substance and lasting value. That's why we worked closely with re : edge on quality long form content to communicate their values and ethos concisely.

As a team brimming with ideas, we wanted to share valuable insights behind their previous work and their processes. The content had to blend seamlessly with the beautiful website design, without compromising on quality.  

By examining previous website content, and having multiple deep-dive sessions with the re : edge team, our MarComms department curated humble and informative long form copy inline with the re : edge principles.

Website Content That Speaks Volume
Content is key; but so is simplicity. A minimalistic and crisp content is all you need to produce a high impact website.

During the copy workshops, it emerged that there were two pain points that clearer messaging could help with. Both the hiring process and the client enquiry process took longer than desired, eating up lots of time for key team members.

To solve this, we utilised conversational chat-bot features to guide inquiries through a data gathering process. This solution automated a time consuming activity, and intelligently introduced a screening section for qualifying candidates and candidates that suited the business.

Conclusion.

It's been such a pleasure working with the team at re : edge. The commonality that we share in our approach for human centric design and simplicity has made the entire process a smooth sailing.

Designing for the Lowest Common Denominator.
“The main challenge [are] the assumptions that you must throw out of the window when you are designing.”

It's not the first that we've embraced the challenge of Designing for Designers. And it definitely won't be the last.




Request a Proposal.

If you would like to #workwithmad then send us an email at hi@mad.co and let's Make It Happen.™