The document outlines a design proposal for a new public-facing website for the Central Planning Office in Qatar. The key objectives of the site are to present information about the CPO, feature projects it is involved in, and build its brand. The proposal includes research on best practices for designing sites for the Middle East. It presents initial wireframes and two versions of the site structure and pages, demonstrating consistency with CPO's existing branding guidelines. The proposal shows the site will be accessible on mobile and developed in both English and Arabic.

1. Central Planning Office
Public facing website
Design proposal

2. Key objectives of the site
• Present information about CPO as an organization to the
public, explaining its role and place in Qatar’s development.
• Feature projects that the organization is involved in
• Building positive image of CPO and increasing the brand
awareness.

3. Site requirements
• Need to be developed in two versions, English and Arabic
(different language and site layout)
• Should be accessible for mobile users:
In 2011 twenty-four percent of internet users in Qatar have
been accessing digital media through a mobile device
(source: Qatar’s Digital Media Landscape 2011)
• Should closely follow existing brand guidelines

4. Research and development phase included:
 Idea gathering process that resulted in creating project mind
map

5. Research and development phase included:
 Building site map to use as a base for web site structure and
building Information Architecture

6. Research and development phase included:
 Initial wireframing as a tool for setting user journeys and
deliver satisfying User Experience

7. Research and development phase included:
 Reading up research material on the differences and best
methods when designing websites for Middle East
Designing Usable Localised Websites: Differences between Western and
Arab Cultures.
Ali H. Al-Badi, Information Systems Department, SQU, Oman
http://www.ibimapublishing.com/journals/IBIMABR/volume2/v2n2.pdf
Investigating the Design of Arabic Web Interfaces Using Hofstede’s
Cultural Dimensions: a Case Study of Government Web Portals
Nouf Khashman and Andrew Large, McGill University, Montreal, Quebec, Canada
http://www.cais-acsi.ca/proceedings/2010/CAIS063_KhashmanLarge_Final.pdf
Arabic Interface Analysis Based on Cultural Markers
Mohammadi Akheela Khanum1, Shameem Fatima2, Mousmi A.Chaurasia,
Information Technology Department, King Saud University
http://arxiv.org/ftp/arxiv/papers/1203/1203.3660.pdf
Globally Designed: a study of international Web user experience
Mohammed Al Dobie, Quinnipiac University
http://globallydesigned.com/home/globally-designed-Aldobie.pdf
Cultural perception of user interface of a website: comparative study
between liberal and prescriptive cultures (British vs. Arab)
Ali Al-Badi, Pam Mayhew, School of Computing Sciences, UEA, Norwich
http://www.iadis.net/dl/final_uploads/200402C044.pdf

8. Phase 1
Web site structure agreed to be delivered with phase 1 roll out.

9. Version 1
Landing page

10. High res version

11. Version 1
Article page

12. High res version

13. Version 2
Landing page

14. High res version

15. High res version
Large carousel
showcasing
projects
Top menu with
active state Language
switch
Project
dropdown
News feed

16. High res version
Space for internal
advertising
kickers
Secondary
content with
links for easy
access to
subsections

17. High res version
Expanded dropdown with
project details and link to
project page

18. High res version
Variation of the top
with different
location of language
switch

19. Version 2
Subsection – Who we are

20. High res version

21. High res version
Decreased
height of the
main image, but
still referring to
Qatar (close up
of one of the
buildings)
News feed
replaced with
secondary
navigation,
indicating
current
subsection
Impactful, big
size images can
be featured in
main area

22. Version 2
Subsection – Press releases

23. High res version
Right column
might be used to
push more
interesting
content to users,
keeping them on
the site for longer
Even shorter
pages can look
dynamic by use
of interesting
but relevant
imagery

24. Version 2
References to existing branding

25. High res version
Current CPO logo in
prominent place
Colour of headers,
links and active
states is the same as
the Maroon used in
print branding
Typeface used across
the design is Swiss
721, the closest
match to Helvetica
Neue (no web
version available)
The triangles used in
the background are
following the
background shapes
proposed in brand
guidelines
Use of white as a predominant colour follows result of the cultural
markers analysis which shows that white colour symbolizes purity and
peace in the Arabian culture,
Source: Arabic Interface Analysis Based on Cultural Markers

26. Version 2
Consistency between web projects – CPO Stakeholder Site

27. Version 2
Consistency between web projects – CPO Holding page

28. Version 2
Inspiration
Some of the sites I looked up for
inspiration while preparing for design
phase
drupal.org/node/977396
www.qatarairways.com
www.arabianbusiness.com
www.dardarkom.com
www.aljazeera.net/portal
www.fastcodesign.com
www.t3.com
www.good.is
The site is using Twitter Bootstrap for
grid - twitter.github.com/bootstrap/

29. Thank you
If you have any questions,
please get in touch
Tomasz Ronda
Senior Web Designer
Tel: +44 (0)1454 663186
Email: tomasz.ronda@atkinsglobal.com