Abu Dhabi: A city undergoing a tech transformation
Find Wonder was a campaign by the Abu Dhabi Government Media Office to help publicise Abu Dhabi as a modern start up city and access point to the wider Middle East for business. This campaign involved traditional marketing, film, social media and a campaign website as a hub that brings the vision to life. Content for the site would include a series of interviews and aspirational videos, rich media articles and a comprehensive ‘How-to’ section that could answer questions and demystify UAE life and business.
ROLE & RESPONSIBILITES
My role was as a User Experience Director within the selected agency to deliver the campaign website from strategy, UX, design and build. I was hands on working and leading a team of UX and UI designers from project activation through to post-live improvements as the campaign evolved.
UX strategy including personas, user journeys, sitemaps.
Content management and scalability with creating supporting framework for full taxonomy and tag planning as the campaign grew
UX design from concept sketches and scamps through to wireframes, prototypes and specifications.
UI design leading designers to deliver against objectives and working between our agencies design team and an external agencies design team who were running the wider campaign.
Strategy
To kick off the project we did a 6 week discovery and strategy phase to plan out the initial launch and light the runway for post-MVP scaling and setting a Northstar. We hosted a series of workshops to help define business and user needs based on research from the agency and the Abu Dhabi Government and to gather information on key journeys, top tasks, information architecture prioritisation and taxonomy. This included stakeholder interviews to ensure we captured all information needed before moving into the UX phase.
We created a large persona matrix that categorised different user archetypes and content needs to help define full user journeys and information architecture. We intentionally made this document more focused on needs and requirements that influence design decisions rather than trying using these personas to help drive a narrative.
Persona matrix
We created a series of user journeys that mapped journeys through the content of the site, key decisions and influences within the journey and how it maps to their personal dimensions and content needs. These journeys were prioritised by business needs and used as the blueprint for the initial wireframe prototypes.
User journeys
We created sitemaps for MVP, Phase 2 and Phase 3 of the growth of the campaign to show how the information architecture was scalable and grow from a campaign website into a content hub around Abu Dhabi tech businesses.
Sitemaps
To create a scalable IA and a smarter, dynamic system based on tags to help personalise content we began work with the Abu Dhabi government on outlining the taxonomy for the website as well as prioritising content relationships so we could build it into the system.
Taxonomy
Creative Concepts
Towards the end of our strategy phase we began work on creating a Northstar that helped realise the ambition of the campaign. I worked with a Creative Director and UX and UI designers to help create a series of UI designs to illustrate a future content hub focused around Abu Dhabi tech businesses.
UX/UI Production for MVP
Once we had sign off on our strategic approach and the Northstar designs we began design production for the MVP. This involved multiple sprints tackling different user journeys and key page templates in both UX and UI design. We took a modular approach to the website and always had a cost-effective eye on functionality to ensure all modules could be repurposed for differing content needs.
We created a series of mobile and desktop wireframes to illustrate all pages and journeys. Each page helped outline content goals and were amalgamated into a large InVision prototype to be shared with the client for feedback and iterate upon.
Wireframe pages
UI designs would follow alongside UX deliverables with a short stagger to ensure we had important content discussions with the client before moving into full design. Throughout the project, UX and UI designers would be working together through both wireframes and designs to get the best out of both disciplines.
Page Designs
Another specific challenge of this project was it needed to be available at launch in multiple languages. This was more complex than a site wide language switcher as it also meant all components needed to be flipped to read from right-to-left for native Arabic speakers.
Multi-Language Design
As we were moving through production, completing journeys and page designs we were creating our full modular toolkit specification. For every new module we would specify the rules, variations and interactions to define how it works on both the front and back end with the help of our agency tech team.
toolkit & Specifications
Visit Live Site
The Live Site is up for a limited time as the Campaign has now ended.