UAEUSA United
UAEUSAUnited.com is a website supported by the Embassy of the United Arab Emirates to highlight diplomatic ties and partnerships between the UAE and the USA. The campaign site breaks down stereotypes about the United Arab Emirates by highlighting commonalities for Americans who do not know a great deal about the UAE and the country’s positive impact on the USA. All content aims to push users to understand how the countries are similar rather than different.
Problem
Website was not currently keeping users engaged enough to browse past the landing page
Task
Update the aesthetics and navigation of the campaign site
Make it easier for users to quickly understand the partnerships and shared values between the UAE and USA
Have users leave the site with a more positive view of the UAE
Goals
Increase content shares to all social media platforms
Increase user's time spent on site
Achieve a modern aesthetic across the site
Team
Liviu Avasiloiei Art Direction
Ariana Velazquez Design
Designed at REQ
Scroll down for full case study or jump to the product design.
research ~ TArget audiences
Targeting young America: Well-educated professionals and Gen Z
UAEUSAUnited exists for the younger American generations. Geographically, the site should target the US population between the coasts that has less exposure to diversity of foreign cultures.
We created primary and secondary personas to represent these audiences:
Primary
Dana, 36 | Architect Chicago, IL
Brad, 18 | College Student/Part-Time Retail Employee Iowa City, IA
Secondary
Jeff, 58 | Senior StafferWashington, D.C.
Dhruv, 29 | Tech Entrepreneur Oakland, CA
REsearch - landscape
Discovering commonalities between four different location campaign sites
We studied four campaigns with similar objectives. Upon delving deep into their results and approaches, we found a few key qualities:
Audience-driven
Customizable
Quality photography and video content
Shareable
Authentic
strategy ~ Analyzing old site
Devising a plan for the new by evaluating the old
Upon inspecting the current campaign site, we did a top-to-bottom inspection of the experience that led to us restructuring the site. A few major fixes we wanted to prioritize were to:
Add clearer content-driven tabs on the main nav for easier access
Incorporate subpages organized by topic and type of content rather than by brand pillar which might be confusing the audience
Expand cultural content to live on its own tab, this content will be most likely to attract users
Remove heaviness from the pages by achieving a better balance in layout between the copy and photography
strategy ~ Analyzing old site
Devising a plan for the new by evaluating the old
Upon inspecting the current campaign site, we did a top-to-bottom inspection of the experience that led to us restructuring the site. A few major fixes we wanted to prioritize were to:
Add clearer content-driven tabs on the main nav for easier access
Incorporate subpages organized by topic and type of content rather than by brand pillar which might be confusing the audience
Expand cultural content to live on its own tab, this content will be most likely to attract users
Remove heaviness from the pages by achieving a better balance in layout between the copy and photography
Design - style tiles
Establishing a new, fresh look with internal support
The Embassy internally developed a new logo, color palette, and font for us to utilize in our designs. We were able to expand upon these elements to create a system for the identity with a few key requirements:
Create opportunities for large-scale photography whenever possible
Provide the ability to add in context without leaning too text heavy
Make the pages scanable
Homepage - 2019
Dual-level navigation bar took up too much vertical space
Text laid over image: Difficult to read and spanned too far across the screen, making it more difficult for the reader to scan
Too much copy, potentially risking overwhelming the user and increasing bounce rate
Homepage - Revised
Invisible nav bar is legible without taking away from the photography
Headline copy was shortened for clarity, added in a CTA that leads to "about" for more context
Carousel was introduced to easily rotate current photography
Stories Page - 2019
Text overlay is difficult to read
Extremely large story banners cause too much work when browsing, preventing the user from getting a general overview of the content
Separate tabs for each pillar restricts the user and could possibly prevent them from reading an article from a different pillar that they were more likely to share
Stories Page - Revised
Introduced a featured story section to better highlight specific content if desired
Stories filter welcomes a more customizable experience that lives on one page rather than 3 different tabs
Grid layout gives room for full-length photography and 2-column layouts, providing the opportunity for more content to be viewed at once
Individual Story Page - 2019
Simple one-column layout could be evolved to better suit the content
Spacing and distribution issues between photography and copy
Text hierarchy does not help guide the user through the articles
Individual Story Page - Revised
Introduced story templates to easily customize content flow with layout
Introduced a text hierarchy supported by the modular layout we created
design - Product
Building out the rest of the site
After rounds of feedback, we were able to make adjustments that moved us into the mockup phase. From here I created every screen using Adobe XD and the Embassy's photography.
