NDA Group
Global Architecture Firm
Re-branding Web UI
Project introduction
Setting Vision to 2030
With the turn of a new decade, NDA Group, who had been rapidly expanding for the last 22 years, was now in need of a total brand overhaul: re-organize and modernize corporate identity to match with the Group’s new vision and extensive growth plan to 2030.
This includes developing a complete new website that reflects their new identity and vision.
Project Workscope:
– Study new brand visual identity, propose design approach
– Design website UI directly on Squarespace
– Optimize responsive for tablet and mobile
What have been done
Project Progress
Workflow
To ensure fast progress and meet the deadline for showcasing the new branding at IAAPA Expo 2023, the team decided to implement the new UI design directly on the Squarespace platform. This allowed for a quicker turnaround while still maintaining creative control over the design.
Website Sitemap
The sitemap structure was aligned with the client’s requests, reflecting the final decisions made after multiple discussions and approvals from the Board of Directors.
To both intrigue visitors and tell NDA Group’s story in a unique way, the website’s navigation was structured around the fundamental “5Ws” :WHY, WHO, WHEN, WHAT, and HOW, instead of the typical menu labels like “About Us” or “Our Projects.” This approach created a more narrative-driven experience, encouraging users to explore the brand through meaningful questions that reflect its values, history, work, and vision.
The downside of this approach on UX and SEO performance, however, remains a consideration and will require further testing and iteration over time.
Design Approach
The visual direction shifted significantly from the previous formal, corporate look to something much more fresh, approachable, and energetic, to be in line with the updated brand identity.
For example, the new “NDA Bubble”, a design element featuring softer, rounded corners and a more dynamic, organic shape, would be used consistently across the site to give the brand a more playful, modern, and instantly recognizable visual cue.
New Website Structure Based On “5Ws”
Application of New Logo Shape to UI Elements
Design Assets
Color Palette
Branding
Base
Functional
Neutral
Typography
MONTSERRAT
Primary Font, applicable for English, Vietnamese
Regular, Italic, Bold, Bold Italic
HEADING 1
48/60
Bold, Bold Italic
HEADING 2
36/48
Bold, Bold Italic
HEADING 3
32/40
Bold, Bold Italic
HEADING 4
28/36
Bold, Bold Italic
HEADING 5
24/32
Regular, Italic, Bold, Bold Italic
Title
20/30
Regular, Italic, Bold, Bold Italic
Subtitle
18/26
Regular, Italic, Bold, Bold Italic
Body Text
16/24
Regular, Italic, Bold, Bold Italic
Label
14/20
Regular, Italic, Bold, Bold Italic
Caption
12/18
Regular, Italic, Bold, Bold Italic
Final Design
NDA Group Website UI
Homepage
About Us
Services
Milestone
News (Blog)
Project Showcase (Category template)
Board of Directors
Client & Partners
Contact Us
Additional Design
NDA's Intranet Landing Page
Besides the NDA Group website, the landing page for NDA’s ERP (Internal Platform) was also revamped to better align with the new branding and improve overall usability.
The updated design focuses on creating a cleaner, more intuitive interface that makes navigation easier for internal teams, while still maintaining consistency with the company’s refreshed visual identity.
Rough sketch of request
Final Design
Desktop
Tablet
Mobile
Thank You For Reading!