.png)
PBLA Website
UX/UI DESIGN CASE STUDY
Overview
PBLA organisation unites Latvians worldwide in culture, education, and politics, and it has played a pivotal role in the history of restoring Latvia's independence. After years with the current webpage, it was time for a comprehensive redesign incorporating a new strategy, design, and structure.
Goals
Homepage redesigning aims for representative purpose to properly showcase the organisation's essence, history and current events in visually engaging way. Furthermore, reorganising the information architecture will make decades of content easier to navigate and access, enhancing the value of these archives.
Client: PBLA - Pasaules Brīvo Latviešu Apvienība (Latvia)
My Role: UX Designer, UI Designer
Date: 2023
Project Scope:
• current website audit;
• user interviews;
• sorting and restructuring information architecture;
• redesigning the homepage;
• creating new visual style and a UI design library;
• adjusting for responsive layouts.
3 Featured Action Points
.png)
#1 - Enhancing Visual Engagement
How to restructure the homepage to more engagingly represent the organization and its events?
.png)
#2 - Reconstructing Information Architecture
How to reorganize the menu and structure sections for easier navigation amid dense information?
.png)
#3 - Resolving Color Palette Challenge
How to effectively use carmine red in web design despite its alert/danger meanings and bold presence?
#1 - Enhancing Visual Engagement
Adding new short sections to represent information about the organization in a visually easy-to-grasp way.
Adding engaging elements - enhanced with icons, interactive sliders, maps, and quotes for less reading and more visual scanning.
Using colored backgrounds and grouping elements to make it easier for users to scan sections and find what interests them.
Header: Updated header to shrink when scrolled, saving vertical space. Reorganized menu for intuitive navigation. Added a space-saving expandable search option.
First Fold: Emphasized the main event by dedicating the entire hero section to it, ensuring it isn't missed.
News Section: Reduced space for the news, leaving only the latest events to save vertical space.
About Section: Added a new section for quick info on the organization's purpose and key mission at a glance.
History Section: Added a new section to showcase history interactively, highlighting the organization's deep roots in Latvia's independence restoration.
Participant Organizations Section: Added a new section to display the organization's worldwide work.
Personalization Section: Added a new section to give a personal nowday touch with a quote from the organization leader.
Future Events Section: Redesigned future event section to make it more appealing and compact.
Footer Section: Reorganized and redesigned section for easy information architecture.
#2 - Reconstructing Information Architecture
The main menu was streamlined into fewer, well-defined sections, making it easier for users to access content.
Clearer section names meet user expectations by showing exactly what to find with fewer clicks and less confusion.
New interactive UI components, including expandable and clickable elements, were added to reduce vertical space and to make long content easier to navigate.
Decades of information will be organized, considering future content creation capacity. This approach helps maintain consistent updates, preventing the misinterpretation that events or awards have ceased.
#3 - Resolving Color Palette Challenge
It’s quite challenging to use dark red shades in web design as a red color has it’s strong semantic meaning of alerts and errors, but since it is a brand color of PBLA, I surely wanted to incorporate this color as one of the main accent shades.
Finding the right colors to combine with to balance a formal and casual feel was another challenge, especially since red shades are strongly dominant. When combined with other colors, they can easily create a look that is too variegated.
Incorporating brand color - the original brownish red was blended with fresh carmine shades. Since the logo color looked too tired as a primary design color, a complementary palette of red shades was developed for a fresher, more modern look.
Red color semantic perception - since red shades often signals alerts, danger, or delete options in UI design, I had to use it wisely and with caution evaluating how it will be perceived to avoid opposite impact.
Color Usage in Details vs Backgrounds - discovering that red is too alerting in small elements, I found it works best for larger elements and broad backgrounds, where it stands out bold, strong, without being disturbing.
Color combinations - dark red is hard to pair with other colors, except muted neutrals, as it dominates the spotlight.
Initially, I combined it with bluish-grey neutrals for a formal look, but it appeared cool and unwelcoming, missing the organization's essence.
Sage greens were also tested but seemed too calm and botanical, despite being complementary colors.
The final choice of muted purples and soft golds provided a neutral, sophisticated look, balancing warmth and coolness, formality and friendliness.
This worked well because these colors are near red on the color wheel, making them harmonious without being overly vibrant.
Final Result
