Atlas Redesign
(RED Atlas)
Latin America’s leading real estate data platform — to reflect its innovation, credibility, and commitment to empowering professionals with smarter, faster decisions.
REDESIGN
ORIGINAL
PROJECT SUMMARY
Tasked with refreshing the RED Atlas website, I focused on refining the brand’s look while simplifying the landing page for a cleaner, more intuitive experience.
research
Analyzing the current design
When receiving this project, I was given full creative reign to restructure and change whatever I thought could improve, even the name and the color/branding.
I took advantage of this. I saw that their signature red would be challenging to design with since its psychological meaning is that something is wrong or an error has occurred - at least in UI/UX. So, I started by analyzing their mission and objective with the product, as well as their target audience to effectively identify their brand’s archetype to do their complete rebranding and construct their new design system. Taking as a reference my conversation with the stakeholders of the company and my research, RED Atlas’s mission and objective is to help real estate professionals across Latin America make smarter, faster decisions; by combining reliable data with powerful technology, they wanted to create a platform that makes it easier to access property insights, understand the market, and move with confidence.
Before I proceed to the brand archetypes I had identified for the company, I’d like to briefly define it’s meaning - a brand’s archetype is a mixture of the essence of a brand and their mission behind why they were created. Every time I do a branding exercise, I always like to visit a website that has an article that has every brand archetype listed with its definitions and examples of each one. This is the website: https://justcreative.com/brand-archetypes-ultimate-guide#:~:text=In%20a%20nutshell,%20brand%20archetypes%20allow%20you%20to%20zero%20in
Doing this, I successfully identified that their brand’s archetypes are: the Creator, the Caregiver, The Magician and The Hero. Here you can see them circled in the image below, taken from the website mentioned previously.
I chose these brand archetypes because they each reflect a core part of the platform’s purpose and personality.
The Creator represents RED Atlas’s innovative spirit — constantly building, refining, and designing tools that make complex real estate data accessible and useful.
The Caregiver reflects the brand’s genuine desire to support professionals by providing trustworthy, accurate information — it’s about guidance, not just data.
The Magician captures how RED Atlas transforms raw information into powerful insights, helping users see opportunities and make smarter decisions with ease.
And the Hero speaks to the brand’s bold mission to lead change in the Latin American real estate space, empowering users to take action and succeed.
Together, these archetypes create a brand that feels visionary, supportive, and driven — just like its target audience.
Following this branding exercise, I was able to identify that the best color to fit RED Atlas’s mission was blue, but I know you might be wondering why. I mean, the name itself has the name of a color and is also clever because it stands for “Real Estate Data”, but they are more than just that. They have a cause and a purpose, not just to display Real Estate Data, they really want to help other real estate professionals with their information, presenting it in the most accurate and reliable way to meet their business goals (Caregiver) while they’re also constantly maintaining their tools to make this data be in their hands “The Creator”, I knew this color was going to work well for their redesign - it would make their essence stand out.
Execution
Redesigning their logo
ORIGINAL
REDESIGN
As you can see above, I removed the “RED” acronym and just named them, Atlas, keeping their font the way it was, but using their signature triangle with the ring on top as the ‘A’. If you look closely, the ‘A’ looks like a house and the ring like a magnifying glass.
Creating their new design system
Here’s the Figma link to the Design System I created for Atlas’s Redesign: https://www.figma.com/design/6BMsPTYhuVwF62nYyiLZJd/Atlas-Design-System?node-id=1-3&t=Hkiuy7k80tQvSKKj-1
I chose MUI (Material Design) components/framework to create Atlas’s new design system. Here’s a link to the framework itself for further reference: https://mui.com/material-ui/all-components/
First, I started generating the color palette with one of MUI’s trusty color palette generators, which I’ll also reference: https://www.figma.com/design/s4ML7PmL9VhVHXangqum8d/Material-Theme-Builder-playground--Community-?node-id=0-1&p=f&t=7V56YCN46uDyYwdL-0
This is one of Figma’s playgrounds using MUI. I used the help of AI to give me a hex code to be the primary color for the new Atlas’s Redesign. This primary color would be used in the Primary buttons of the redesign. The hex code was #0178D7. Below is the color palette I created for the new design system:
For the font, I wanted to keep consistency and chose to use a google font. Another helpful resource I use to keep the font hierarchy and register them in the design system’s file is this one: https://m2.material.io/design/typography/the-type-system.html#type-scale
It uses a standardised system where it provides proper sizing with a specific purpose to the font you get to choose, which it has to be a google font for it to be accurate. I also want to briefly mention that using google fonts is an easy and safe approach when deciding upon a font for a brand or any design system, since they have a wide variety and they’re free source, meaning that you won’t face any legal issues regarding copyright.
Following this, I chose the google font called “Lato”, shown below:
I chose Lato because it is the perfect balance between modern and approachable. It’s clean and versatile, which supports the brand’s innovative side, while its soft curves add a sense of trust and warmth, making it ideal for a platform that empowers and guides real estate professionals with confidence.
designing atlas’s ui
I had first defined in the requirements gathering phase with the stakeholders, 3 key device sizes for the design to take place: 1512px (Desktop), 1024px (Tablet) and 375px (Mobile). These are standard sizes which with the use of auto-layout, they can be used throughout other devices to make the design responsive.
To create the map to keep the niche of RED Atlas alive in the Atlas redesign/version, I searched in the Figma community the google maps responsive components. This link was the closest one I could find to the Figma Community link I had used at the time of the design: https://www.figma.com/design/WDTAs2fT4nPP23h9Tg73QI/Google-Maps-UI-Kit--Community-?node-id=0-1&p=f&t=TNoc7CulID4OIrxH-0
Figma’s community is filled with lots of useful components to design with, which are free source and made to make a designer’s life easier.
Using the design system’s file, (after having registered all colors and font, after having attributed all colors and font to all components, and after having published the design file to be able to use it in other design files), I was able to start the whole redesigning process.
end result
Designs: Desktop
Logged Out View
Logged In View
Designs: tablet
Logged Out View
Logged In View
Designs: mobile
Logged Out View
Logged In View
