2. !2
DISRUPTION
Everyday day companies and individuals find
their daily activities and businesses being ever
more disrupted.
AS MORE AND MORE OF US FACE
DISRUPTIVE CHALLENGES, DESIGN &
DESIGN THINKING HAS QUICKLY
EMERGED AS THE TOOL OF CHOICE TO
HELP US, DESIGNERS, AND COMPANIES
NAVIGATE UNCERTAINTY.
DESIGN
3. DISRUPTION
We can talk about design
disruptionwhen we designers are not
just asked to build nice pretty, shiny
new things, but also to help
companies become design centric.
IT SEEMS WE ARE WANTED
NOT ONLY FOR WHAT WE DO
BUT ALSO FOR HOW WE DO IT!
DESIGN
!3
5. THE 8-STAGE PROCESS OF
CREATING CHANGE
1 Establishing a sense of urgency
2 Creating the guiding coalition
3 Developing a vision and strategy
4 Communicating the change vision
5 Empowering broad-based action
6 Generating short term wins
7 Consolidating gains and producing more change
8 Anchoring new approaches in the culture
15. YOUR TEAM SPACE
DESIGN
!15
Create a home for your team to work, play, learn
and host.
First we shape a working space, then the space
shapes us. Embed the with your team culture and
principles.
TAKE OWNERSHIP!
REMEMBER, IF YOU NAME IT, YOU OWN IT.
16.
17.
18. CULTURE
A TEAM VISION, CLEAR OBJECTIVES. A
SHARED SENSE OF URGENCY AND PURPOSE,
ARE ALL CRITICAL FOR SUCCESSFUL
DESIGN TEAMS.
IT’S ALL ABOUT
BEING HUMAN CENTRIC
DESIGN
!18
20. STAKEHOLDER MAPS
SERVICE SAFARIS
SHADOWING
CUSTOMER JOURNEY MAPS
INTERVIEWS
CULTURAL PROBES
THE FIVE WHY’S
ETHNOGRAPHY RESEARCH
A DAY IN THE LIFE
EXPECTATIONS MAPS
PERSONAS
BRAINSTORMING
WHAT IF / DESIGN SCENARIOS
STORYBOARDS
SERVICE STAGING
CO-CREATION
STORYTELLING
ROLEPLAYING
SERVICE VISION
STRATEGY DOCUMENT
FUNCTIONAL REQUIREMENTS
EXPERIENCE MAPS
BUSINESS MODEL CANVAS
TASK FLOWS
MOODBOARDS
BLUEPRINTS
INFORMATION ARCHITECTURE
SITEMAPS
USABILITY REPORT
RESEARCH BRIEFS
FUNNEL DIAGRAMS
WIREFRAMES
VISUAL CONCEPTS
INTERACTION DESIGN CONCEPTS
INTERACTION DESIGN PROTOTYPES
PROJECT PLANS
21. STAKEHOLDER MAPS
SERVICE SAFARIS
SHADOWING
CUSTOMER JOURNEY MAPS
INTERVIEWS
CULTURAL PROBES
THE FIVE WHY’S
ETHNOGRAPHY RESEARCH
A DAY IN THE LIFE
EXPECTATIONS MAPS
PERSONAS
BRAINSTORMING
WHAT IF / DESIGN SCENARIOS
STORYBOARDS
SERVICE STAGING
CO-CREATION
STORYTELLING
ROLEPLAYING
SERVICE VISION
STRATEGY DOCUMENT
FUNCTIONAL REQUIREMENTS
EXPERIENCE MAPS
BUSINESS MODEL CANVAS
TASK FLOWS
MOODBOARDS
BLUEPRINTS
INFORMATION ARCHITECTURE SITEMAPS
USABILITY REPORT
RESEARCH BRIEFS
FUNNEL DIAGRAMS
WIREFRAMES
VISUAL CONCEPTS
INTERACTION DESIGN CONCEPTS
INTERACTION DESIGN PROTOTYPES
PROJECT PLANS
DESIGN SYSTEM
(…)
I THINK WE NEED TO FOCUS
22. Our Experience principles
5
Useful
Building strong connection between
our customers goals and the
functionalities we wish to expose.
Usable
Reducing complexity by aiming for
simplicity, easiness and playfulness
in our work.
Desirable
Creating products and services
capable of emotionally connect and
resonate with our customers.
Valuable
Generating value by improving our
customers satisfaction and our
commercial goals.
Findable
Ensuring that our customers
understand our products and
interfaces unassisted first and with
minimal external guidance.
Accessible
Designing for the majority while
ensuring that all our customers and
platforms are supported.
Credible
Delivering professional and trust
earning solutions that work.
USEFUL
DESIRABLE
USABLE
VALUABLE
ACCESSIBLE
FINDABLE
CREDIBLE
Our Design Mantras
6
Design for Dialog
All interactions represents a flow of actions and responses, as such our
design is to coordinate the different iteractions into one single
continious journey in the same way as a continuous dialog would take
place if we were to face our customers face-to-face.
Mobile First
Our reference design is the mobie interface, desiging for mobile first
ensures that we design the best experience for a small screen which we
can then grow to accomodate all the larger devices and screen
resolutions.
Customer Driven
All our designs should be based and backed up with clear information,
research and documentation about our customers target groups,
mental models, personas and goals. To ensure all the work we do has a
clear, real and well defined customer in mind.
Responsive Design & Interactions
Our work should be based on strong foundations, to ensure that it will be as
fluid and reactive as our customer expect from us. Ensuring that both the
designs and the interactions patterns they carry are fully responsive get us
one step closer to our customers expectations.
Usability
Usability alone won’t do it, but it will ensure greater consistency across
projects. By using the know foundations and rules of usabiluty we maximise
our changes of deliverying greater and simpler design work that our
customers will love to use, times and times over.
ONE UX TEAM
• One stop shop for all UX services;
• One team to link business with customer
needs and expectations;
• One team to ensure visual consistency and
simplification across all our digital touch
points;
• One team to develop and optimise our digital
flows and reinforce behavioural consistency;
• One team to design a unifying cross channel
experience strategy across all digital
interfaces;
• One team to develop and foster a true UX
culture and vision across Vodafone Germany;
4
DESIGN
I
N
T
E
R
F
A
C
E
D
E
S
I
G
N
I
N
F
O
R
M
A
T
I
O
N
A
R
C
H
I
T
E
C
T
U
R
E
D
E
S
I
G
N
S
T
R
A
T
E
G
Y
USABILITY
RESEARCH
UX
UX TEAM KEY GOALS 14/15
3
SURVIVE!
23. VID
VID
GIF
VID
Contemplativemoments
Thoughtfulandreflectivescenesthatcaptureawarm,
sentimentalsenseofbelonging.
Captivatinglight
Intriguingenvironmentsoflightanddepthoffieldthatdrawyou
intothescene.
Shimmeringtheatre
Luminousanddynamicscenesofscintillatinglight.
Intriguingenvironments
Wherenaturemeetsdigitalinanalluringandabsorbingway-
capturingyourcuriosityanddesiretodiscovermore.
Luminoussurfaces
Wherelight-effectsabsorbtheuserinanimmersive
dream-likeway.
Amomentintime
Fleetinginstancesthatcapturethehumanspiritandasenseofjoy.
Overall feel:
ambient intensity
The core:
vivid exchange
The values:
fluid & collaborative
The values:
optimistic & bold fo
TheVodafoneDigitalDesignDNA
DesignDNAistheunifyingdesignphilosophythatconnectsthecorebrand
purposeandpromisewiththedesignlanguageforalldigitaldesignandsensory
equity.Itisnotasetofrestrictivedesignguidelines,butratherit’sroleistoinspire
andguidedesignersandpartneragencieswhencreatingnewexpressionsofthe
Vodafonebrand.
Vodafone’sDesignDNAmodelisbydefinition,uniquetoVodafone.Itismadeup
ofthreekeyelementsthatconstantlyandconsistentlyrefertoeachother:starting
withthecorewhichistheessenceofeverythingthatyoudodigitally.Thevalues
areyourguidingprinciplesandsignaturesaretheactualdesignexpressions.
Theinitialimpressionofdigitalcontentisachievedthroughcarefully
chosenimagery,colourandtone-of-voice.
Itcancaptureeitheranethereal,dream-likespiritorazest-for-life
vibrancy,butbothshouldfeelrealandalive,inaninspiringandin-
triguingway.
Digitalexperiencesareinnatelytechnologydrivenbuttheyshouldnotfeel
techy.Vividexchangeisallaboutputtingpeoplebeforetechnology.
Vividrepresentsourvital,aliveandpercentnetworkconfidentlyconnecting
peoplewhoever,wheneverandwhereevertheyare.
Exchangerepresentshowweactivelyengageinadialoguewithour
customersstrengtheningourrelationships,buildinggreaterloyaltyand
advocacythroughthecreationofreal,inclusiveandempoweringexperiences
thataretrulyinspiringandintegraltopeople’slives.
Fluidisourmomentumvaluethathelpsusalwayslookforward,keepasteady
pace,movewitheffortlessgraceandcreateaseamlessjourney.
Thisiscomplementedbyacollaborativespiritofpartnershipandtwoway
dialogueenablingustoconnectwithpeopleinthemostappropriateand
empatheticway.
Havinganoptimisticattitudemeansweareopentocha
thefutureandarenaturallyup-beat.
Andwedothiswithaboldfocus-makingclearandreso
connectuswithpeopleinarelevant,dynamicandinspi
VID VID
Confidentcomposition
Clean, clear and considered visual layout. Presenting a variety of
content in a format that is easy to read and navigate, while also
encouraging the user to delve deeper into the experience.
Including parallax scrolling, side scrolling and full bleed imagery.
Typeandimageharmony
Boldlayoutsthatcombineimageryandtextinaseamless,
balancedway. Utilizingfullbleedbackgroundimagesin
partnershipwithunclutteredlayouts.
Typecontrast
Reverse-outcopyoverimages,
combinedwithpositivetext
onemptyspacesprovidesa
strongbalancebetweentype
andimages.
Graphic composition:
compelling simplicity
Confidentandclearlayoutrequiresreassuringlybold,engaging
graphicdesign,withageometricclarity.
Allelementsshouldhavepurpose,appealandinvitefurther
interrogationandexploration-andguideyouinanatural
encouragingway.
GIF
VID
VID
VID VID
VID
GIF
GIF
GIF
VID
GIF
VID
VID
Livingbackgrounds
Bringingvisualsandcontenttolifethroughvideoandanimation.
Subtletouchesofmovementtransformsstaticcontent,makingit
feelenthrallingandalive.
Digitalreactions
Thefeaturesthatmakebrowsingandnavigatingamore
immersiveexperience.Theuseofdelightfultransitions,active
graphicsandsubtleinteractionsconvergetobringcontenttolife.
Transitions & movement:
dynamic delight
Theprimaryinteractionsneedtobeirresistiblyengaging,witha
magneticrhythm-toholdinterestandbringdelight,whilstnot
detractingfromtheusabilty.
Theyshouldconveymeaningandunderstandingwitha
languageofmovementthatisrelevanttothetask.
Contentlayers
Layeredoverlays,tintedtilesandcontenttabsshowsinformation
onlyonaneedtoknowbasis,maintainingacleanandbold
graphiclayout.
VID
VID
VID
VID VID
GIF
GIF
VID
Informeddetail
Engaginginteractions,infographicsandiconographyinjectslife
andbringsaconsistentdesignidentityintotransactionalcontent.
Smalltouchesthatbringadigitalexperiencetolifekeepingthe
userbothinformedandinvolvedwiththeinformation.
Familiaricons
Consistentvocabularyoficons
thatareinstantlyrecognizable
andrelevanttofunctionand
aidseamlessnavigation.
Content logic:
tactile clarity
Elegantusabilityshouldexudeexperienceandprovidearealsense
oftangibilityandconnectionwithcontent.
Accesstoclearlyexpressedvisualandwritteninformationmustbe
doneinanintelligentlysimple,satisfyinglyeffectiveway.
24. Steps Tracker
Steps Tracker convey pro
the user where they are in
horizontal and linear whic
depends on the next step
In this example, the user
move to the next. Once t
becomes green.
Steps Tracker B conveys
to the user where they ar
the user has and how ma
In this example, the user
move to the next in the c
a step, the circle become
•
•
Steps Tracker - Desktop_A
Steps Tracker - Desktop_B
Notes Notes
Checkout Header
Checkout header module con
- Etisalat logo
- Title
- CTA link
The checkout header module
Once the user is in checkout,
complete the checkout proces
information, delivery address,
Notes Notes
Checkout Header - Tablet Landscape_A
Cart Item
Cart Item module lives within t
following:
- Image
- Content (product name, prod
- Price
Once the user clicks on the pr
product page, in this example
• Images of the product/se
• The user is notified if the p
informed the standard sh
arrives.
• Content is always placed
price should include the t
counter indicates the qu
• The user is notified if the p
the user has subscribed
informed the standard sh
arrives.
Cart Item - Desktop_A
Cart Item - Desktop_B
Cart Item - Desktop_B - Hover
Notes
Config Section Tab
Config tab consists of tabs no
Each tab will work in a hover s
green. Upon click of the tab, th
In this example, the user clicks
by Etisalat.
Notes Notes
Config Section Tab - Desktop_A
Config Section Tab - Desktop_A - Hover
Config Upselling
Config Upselling consists of 3
Each tile consists of the follow
- Category Title
- Product Title
- Subtext
- Price
- Image
- The icon on the upper right w
information
• Background image of the
• Once the user makes a s
orange and checkmark ch
completion.
• Once the user clicks on th
example.
Notes
Config Upselling - Desktop_A - Flipped
Config Upselling - Desktop_A - Selected
Sticky Config Footer
Sticky Config footer A module
- Price
- 2x CTA
Depending on the where the u
sticky config footer would upd
reminder to the user of the tot
to purchase more products or
the mobile device
configuration process, the use
has the option to either purcha
now” or click on “add phone”
• This module should be vis
checkout process and up
Notes
Sticky Config Footer - Desktop_A
Sticky Config Footer - Desktop_A - Disabled
Sticky Config Footer - Desktop_B
Sticky Config Footer - Desktop_C
Sticky Config Footer - Desktop_D
Config Expansion
Config Expansion A consists o
- Title
- Subtext
- CTA (view more)
- Price
- CTA (Add)
Config Expansion consolidates
accordion is expanded.
In this example, the user clicks
information regarding the “Bas
able to add the package to ca
can click on “view more” allow
accordion.
Config Expansion B consists o
- Title
- Subtext
- Phone number validation
The user must input their phon
sms. This module is usually us
Config Expansion C is a contin
the following:
- Title
- Subtext
- Phone number validation
- Token validation
Config Expansion D lives withi
asked to select a method of p
For further details please refer
Config Expansion - Desktop_A
Config Expansion - Desktop_C
Config Expansion - Desktop_D
Config Expansion - Desktop_G
Config Expansion - Desktop_F
Config Tile
Config Tile consists of a tile made up of title & subtext.
Once the user clicks on “see options”, the content expands and the tile is
black with no checkmark.
Once the user makes a selection, the tile becomes green and the tile updates
with the selection made.
The checkmark is visible only once the user makes a selection.
The config tile module is used to display different options to the user to allow
them to make a selection.
____
Config Tile B consists of a tile and a title. The tile in this module is coloured,
reflecting the different colours of the products available.
By default, the tile is white, with a a little hint of the colour in the bottom.
Once the user clicks on the tile, the tile changes to that specific colour.
The checkmark is visible only once the user makes a selection
CONSUMER BUSINESS
Notes
Config Tile Set - Desktop_A
Config Tile Set - Desktop_B
Notes
Config Section Title
Config Section Title displays section header. The header is placed on the left.
____
Config Section Title displays section header correlating to descriptive text.
The header and text is placed on the left.
When the user has skipped a field after they have advanced through the
configuration an error occurs.
When an error occurs, a helper text appears in red to notify the user to make
the fix necessary.
Error text is displayed only after the user interacts with a field. The user must
correct the error in order to proceed.
____
Config Section Title displays section header (small text).
The header is placed on the left.
CONSUMER BUSINESS
Config Section Title - Desktop_A
Config Section Title - Desktop_B
Config Section Title - Desktop_B - Error
Config Section Title - Desktop_C
Notes
Config Accordion
Config Accordion works just like a vertically stacked list. The user goes
through a series of steps to complete the configuration process. Thus, the
process has been simplified in the form of an accordion.
Once the user clicks on the accordion, the section expands showcasing the
content within. This is an example of one accordion, other examples
showcase multiple accordion showing items one at a time. Once the user
enters a configuration page, the first accordion is expanded by default.
The accordion consists of 3 parts:
- The step the user is in
- Section title
- Arrow (expand/collapse)
____
Once the user completes configuring step 1, the accordion will be marked
as complete. This is clearly indicated by the colour of the accordion, the colour
of the background in consumer changes from white to sand. Also the check
mark and the accumulated price will be visible.
The user can always go back and edit before proceeding to checkout.
• As the user proceeds through the configuration process, the package/
product configuring will be labeled below the section title to allow the user
to follow through.
CONSUMER BUSINESS
Config Accordion - Desktop_A
Config Accordion - Desktop_B
Config Accordion - Desktop_B - Closed
Config Accordion - Desktop_C
Config Accordion - Desktop_C - Closed
Compare Service
This component consists of a list of features that are included within a
package/product. The user is able to compare between different services
and see the benefits of each. In this example, the user is able to see
what items are “free” and what items will cost the user. The list is
followed by a CTA allowing the user the option to subscribe instantly.
CONSUMER BUSINESS
Notes
Compare Service - Desktop_A
Add-ons Grid View
This component consists of repeated pattern of tiles presenting the add-ons
available
to a product. The module typically, as default, has up to 2 rows.
The Add-on tile contains:
- the add-on name
- the teaser text
- the price or and indication if the add-on is free
- the icon on the upper right serves as an entry point to more detail information
once the user clicks on the icon the card flips itself as shown in X.X
The back of the card shows a bullet list describing the main features of the
add-on.The “See details” link will be available only if the add-on has a specific
product page.
If there are more than 6 add-ons the “More details” will be available. By clicking
on the button the system will retrieve the remaining items.
CONSUMER BUSINESS
Notes
Add-ons Grid View - Desktop_A
Form CONSUMER BUSINESS
Capture lead form module is clear with immediate visibility to the user. It is
made short & simple to not overload the users. The user is able to enter
relevant information and submit using the CTA.
The module is made up of text input fields and dropdown menu. This module
is fixed and can not be changed.
Notes
Form - Desktop_A
Form - Desktop_A - Submitting
Form - Desktop_A - System Error
Form - Desktop_A - Submitting Drop
Testimonial
The testimonial module consists of the following:
- Quote
- CTA to read the full story
- Static supporting image
- Arrows & indicators will only be visible with more than 2 banners and will
support up to 4. As the user navigates through the banners, the user is
able to go back and forth.
The testimonial module consists of the following:
- Quote
- CTA to read the full story
- Video
- Arrows & indicators will only be visible with more than 2 banners and will
support up to 4. As the user navigates through the banners, the user is
able to go back and forth.
•
•
Notes
CONSUMER BUSINESS
Testimonial - Desktop_A
Testimonial - Desktop_B
Text and Table
Title + multiple txt — left
Table - right
Image — left
Title + Table + package price - right
The title of the table should be in green.
In this module, the installation price is black while the subscription price is
green.
This will differ depending on the background colour.
Image — left
Title + Table + package price + CTA + stepper - right
The title of the table should be in green.
The stepper allows the users to select up to 4 devices.
The text and table aims to display the user detailed data set for specific
products such as mobile plans usage charges.
The module consists of descriptive text accompanied by a data set on the
right.
The text is separated using a text separator.
The table should not exceed more than 6 rows.
•
•
•
CONSUMER BUSINESS
Text and Table - Desktop_A
Text and Table - Desktop_B Text and Table - Desktop_E
Text and Table - Desktop_D
Plans Table
The module consists of:
- Titles
- Supporting static image (with blur effect applied)
- Flip icon
- Informative text
- Visual informative bars
- Price
- CTA on hover
Title of the package is placed inside each tile under a static blurry image.
The visual informative bars will be coloured with different percentages.
Extra information in form of text is provided together with the price amount in
bottom of the tile.
When the user hovers, “BUY NOW” button appears.
Once clicked, the package described in the tile is added into the cart.
__
- Tiles
- Iconic CTA to flip the “tile”
- Text
- Bullets list
- Price
When clicking on the flip icon, the tiles flips showing the “Plans &
Table_Flipped” module.
In the tile additional information about the selected package/product are
provided.
Extra information in form of text is provided together with the price amount in
bottom of the tile.
When the user hovers, “BUY NOW” button appears.
Once clicked, the package described in the tile is added into the cart.
CONSUMER BUSINESS
Plans Table - Desktop_A - Flipped Hover
Plans Table - Desktop_A - Hover
Plans Table - Desktop_A
Plans Table - Desktop_A - Flipped
The compare module allows the user to browse through the different
packages available, allowing the user the possibility to compare up to
3 packages.
• The compare module default view shows no selection has been made.
• Once the user browses through the different packages, he/she may
click on the package tile itself, in this case, the user has selected to
compare Family package.
• The user can easily edit their selection by either removing/adding a
package. When a selection has been made, the tile becomes green
labelling the name of the package. On hover, the tile becomes orange
and the user can remove a package.
• Promoting different plans could also be applied to the image. ie. price
tag appears on the top right of the image with a coloured background.
• After the user has made a selection, and clicks on the CTA “ compare,”
the page refreshes with a basic overview of the packages selected.
Each package consists of the name of the package, a relevant image,
starting price, and what the package includes. The user is able to read
about the other 2 packages selected and compare.
• If the user needs more information, he/she can click on the CTA below
“show more details” allowing the content to expand in an accordion.
• if the user wants to stop comparing packages, he/she can click on the
CTA “close” allowing the compare module to return to its default view
(no selection).
• Once the user clicks on the CTA “show more details,” the user can
compare in details the different specifications of each package and
whats included. The user can click on the CTA “show less details” to
collapse the accordion and return to the basic overview of the
package.
Notes
Compare CONSUMER BUSINESS
Compare - Desktop_A
Compare - Desktop_A - Opened x 2
Compare - Desktop_A - Opened
Filters
The filters module helps the user search for what they are looking for. It is a
way of reducing the number of products in a product listing.
The filter module is made up of dropdown menus and sliders. The filter could
hold up to 8 categories. The sliders are used to determine the price min/max
User have the option to delete/add categories to continue filtering. In this
example, the users have selected language and price max.
The CTA is available to clear all filters.
Notes
CONSUMER BUSINESS
Filters - Desktop_B
Filters - Desktop_C
Filters - Desktop_A
Help Me Decide Result
Help me decide result showcases the best solution catered to the user.
Help me decide module consists of the following components:
- Promotional price + Txt
- Subtext
- Package features with icons
- CTA to get more information
Help me decide module consists of the following components:
- Promotional price
- Subtext
- CTA to get more information
CONSUMER BUSINESS
Notes
Help Me Decide Result- Desktop_A
Help Me Decide Result- Desktop_B
The module consists of:
- Text
- dropdown lists
- Step counter
- (CTA)
Text is placed on light coloured background (white/sandy).
The user hovers over the dropdown lists, and selects the preferred option
among the provided ones in order to load new lines text and enjoy a fluid and
dynamic journey, without refreshing the page after single step.
A green loading visual followed by a communication phrase appears after each
chosen option, before uploading the new line of text.
On the last step of the process, a “show me the best solution” CTA button
appears, to allow the user to load new modules in the surfed page with some
customised content, tailored according to chosen options.
Help Me Decide CONSUMER BUSINESS
Notes
Help Me Decide - Desktop_A - CTA
Help Me Decide - Desktop_A - Loading
Media + CTA Full Bleed
Media & CTA full bleed in product page directs the user to the configuration
page of buying an Iphone.
The module consists of:
- Header
- Sub text
- Supporting static image
- CTA directing the user to the configuration page
- Highlight Label
Content is placed on the supporting background static image.
The user hovers over the <buy now> button , and clicks the button in order to
land on the Iphone configuration page to land on the next step of the journey.
CONSUMER BUSINESS
Notes
Media + CTA Full Bleed - Desktop_B
Media + CTA Full Bleed - Desktop_A
Media + CTA Full Bleed - Desktop_Av2
Media + CTA Full Bleed - Desktop_Av3
The check availability component aims to show to the user if the product is
available within reach, the component works just like the store locator in terms
of search.
The check availability module consists of 4 main parts:
- title
- Subtext
- The search field
- UAE Static map
• As the user enters a query, the search suggestions appear. Choosing a
suggestion or pressing the return key submits the search. However, the
search experience can be enhanced by clicking on “Use my current
location” link. The system will retrieve the closest stores.
- once clicked model expands
Once the user selects location, the map gives the user an indication if the
product is available or not. if available, the user is able to configure by clicking
on the CTA if the product is not available, the user is able to request to be
notified when it will be available.
The user is notified by entering his/her details in the fields required.
• Notify me when available: The user can fill in the form to be notified when
product is available in the selected address. There will be two possible
forms:
- When there is neither Du nor Etisalat available
- Etisalat is not available but Du (Bitstream) is
Check availability CONSUMER BUSINESS
Check availability - Desktop_A
Check availability - Desktop_A - Search
Product Grid View
The Product Grid View will showcase products or services in a collection.
The user should be able to see 6 products in this module.
Each row shall contain up to three products. 2rows/3columns.
The products are showcased from left to right and top to bottom as the order.
• Just like the carousel module, each product will consist of the brand
name, the model name, the image of the product and the starting price.
Users can interact with the product tile and it will hyperlink to the
respective product detail page.
• CTA “Load more” is only visible when there is more than 6 products.
• Products with badges on them would be products Etisalat would like to
highlight to the user. The badges colour would be transparent and on the
product itself. The colour of the badge should reflect the colour of the
price.
CONSUMER BUSINESS
Notes
Prod grid - Desktop_A Prod grid - Desktop_B
Prod grid - Desktop_C
Cross Nav
Cross Nav allows the user to access relevant pages in the product page such
as support, expert opinions, and plans.
Cross Nav is made up of 3 content tiles, 2 of which are small, and 1 large.
Within each tile consists the following:
- Image
- Title
- Subtext
• Each tile will consist of an image, title, and subtext in different sizes as
seen in this example
• Each tile will have a mouseover effect in which the user is able to click
and access relevant pages i.e.. in this case, the user will be directed to
the support page.
• Promoting different plans could also be applied to the image. ie. price tag
appears on the top right of the image with a coloured background.
CONSUMER BUSINESS
Notes
Cross Nav - Desktop_B
Cross Nav - Desktop_A - Hover
Cross Nav - Desktop_A
Product Gallery - Desktop_B
The product gallery consists of a collection of high-quality images of
the product. This variation consists of 1 static image. This may be
images of products, services, or people using the device.
The product gallery consists of a collection of high-quality images of the
product.This variation consists of 3 images that are displayed in a form of a
carousel.
On a hover state, the image becomes green, and upon click, the image is
expanded while the other 2 images are collapsed. The arrow indicates the
flow of the images. This may be images of products, services, or people using
the device.
CONSUMER BUSINESS
Product Gallery
Product Gallery - Desktop_A
Product Gallery - Desktop_B - Hover
Product Gallery - Desktop_B - State 3
Carousel
The Carousel allows the users to navigate through the different products via
the arrows.
Carousel A consists of the 2 main parts:
- product tile (brand, model, image, & starting price)
- CTA
• Each product will consist of the brand name, the model name, the image
of the product and the starting price. Users can interact with the product
tile and it will hyperlink to the respective product detail page.The carousel
should display at least 3 products, with the center product zoomed in. By
default, the center product displayed should be the hero product.
• Products with titles or badges on them would be products that Etisalat
would like to highlight to the user. The badges color would be transparent
and on the product itself.
• Arrows will only be visible with more than 3 products. As the user goes
through the different products, the user is able to go back and forth by
clicking the arrows
• Upon click “View all Phones”, the user will be able to see phones in
batches of 6, 3 rows/2 columns.
Notes
CONSUMER BUSINESS
Carousel - Desktop_A
Carousel - Desktop_Bv2 Carousel - Desktop_Av2
Carousel - Desktop_B
New in store
New to store is a less “up-selling” promotional placement with more visually
engaging images of various services and/or products that are new to the
store. The users can click on the tile and be directed to the page.
The carousel should have at least 3 products in order for the user to
navigate through. If less than 3 tiles, the arrows will disappear.
The user will need to click on the arrows to view the products/services
detail page.
Each product will feature the brand name & model name.
Notes
New in store - Desktop_A
New in store - Desktop_A - Hover
Breadcrumb
The Breadcrumb module is used for the current page to indicate the
location of the user within the website’s hierarchy.
If the breadcrumb is to contain more than one line, then it should break
with «...» and shorten to fit in one line.
Current page does not show beyond third level.
All text on the breadcrumb are hyperlinked, therefore when the user hovers the text, it
becomes green & underlined. Upon click, the user is directed to the respective page.
CONSUMER BUSINESS
Notes
Breadcrumb - Desktop_A
Breadcrumb - Desktop_A - Hover
The footer emphasizes Etisalats social media presence. Prioritising
social media links within the footer is an effective way of driving users
to their various social media outposts once done browsing the
website.
The footer also consists of other relevant quick links to aid the user to
find information quickly.
The footer should be visible on all pages.
The social media icons works in a hover state. Once the user hovers
over the twitter icon and clicks on it, the user is directed to the twitter
landing page for Etisalat and likewise with the rest of the social media
icons.
The Etisalat Logo should be on the footer at all times. Logo stands
alone. Logo has no hover state nor hyperlink to homepage.
Footer
Notes
Footer - Desktop_A
Media & CTA allows the user to learn more through media rich module
where video/image is embedded.
Media & CTA A module consists of content & media:
- Content: Header + Subtext - Right
- Media: Video
- CTA directing the user to a content page
- Sandy Background
Media & CTA C consists of the following:
- Content: Header + bullet points - should be not more than 5 bullet
points Right
- Media: Image
- Expandable CTA
- Sandy Background
Media & CTA E module consists of:
- Content: Header + Sub text - Left
- Media: Supporting static image
- 2xCTA allowing the user to be directed to relevant pages
Media & CTA G module consists of:
- Content: Header + Sub text - Right
- Supporting static image
- CTA allowing the user to be directed to relevant page
- White Background
Media & CTA H module consists of:
- Content: Header + Sub text - Left
- Supporting static image
- CTA allowing the user to be directed to relevant page
- White Background
> Subtext information is limited to 10 lines
•
•
•
•
•
Media + Cta CONSUMER BUSINESS
Media + CTA - Desktop_A Media + CTA - Desktop_C
Media + CTA - Desktop_G
Media + CTA - Desktop_K
Media + CTA - Desktop_E
Media + CTA - Desktop_H
The Store Locator component aims to show to the user Etisalat’s
stores and the other services provided by the company in the area of
interest.
The Store Locator module consists of 3 main parts:
- title
- The search field
- UAE interactive map
• As the user enters a query, the search suggestions appear. Choosing a
suggestion or pressing the return key submits the search. However, the
search experience can be enhanced by clicking on “Use my current
location” link. The system will retrieve the closest stores near the user’s
location.
- once clicked model expands
The categories should reflect the same color as the list of services on the
map once selected. Once the research is performed the module expands
itself showing:
- a list of stores and services
- an interactive map with markers that identify the locations listed
- a set of filters
• Stores and services list: by clicking on the name or on the related
marker the component shows additional details. The arrows on the
bottom permit the user to move through all the results retrieved.
• Filters: if the user clicks on one of the filters, the list on the left will be
refined according the category selected.
• Icons displayed indicate the location of close by stores.
Store Locator CONSUMER BUSINESS
Store Locator_Desktop_A Store Locator_Desktop_A - Search
Store Locator_Desktop_A - Result
Store Locator_Desktop_A - Search Category
The empty spacer is used to create space between modules if pages looked cluttered.
Spacer CONSUMER BUSINESS
Notes Notes
Spacer_Smartphone_A
Spacer_Desktop_Av2
Spacer_Desktop_Av3
Spacer_Desktop_Av4
The Tab Box module consists of 3 main parts:
- the tab
- image
- content
• Each tab consists of an a title and teaser text. Each tab will work in a
hover style. Once the the user hovers the tab, it becomes green. Upon
click of the tab, the image & content changes.
• The image on the right should be relevant to the content. TBD how the
image moves.
• The content on the left consists of a 1xtitle + subtext + CTA The user is
able to click on the CTA to read more. Once clicked on the CTA, the user
is directed to different page.
• Arrows will only be visible with more than 3 tabs. As the user navigates
through the tabs, the user is able to go back and forth.
Tab Box CONSUMER BUSINESS
Notes
Tab Box - Desktop_A
Tab Box - Desktop_A - Scroll
The tile box module consists 3x tiles with each consisting of a headline & sub
headline. Tiles displayed should be limited to a minimum of 3 tiles.
• Each tile will work in a hover style. Once the the user hovers the tile, it
becomes green.
• Upon click, the entire tile (including headline and sub headline) links to
content pages.
• Arrows & sliders will only be visible with more than 3 tiles. As the user
navigates through the tiles, the user is able to go back and forth.
The tile box module consists 3x tiles with each consisting of a headline & sub
headline with an image. Tiles displayed should be limited to a minimum of 3 tiles.
Tile box CONSUMER BUSINESS
Notes
Tile box - Desktop_A Tile box - Desktop_B
Tile box - Desktop_A - Hover
Tile box - Desktop_A - NO Scroll Tile box - Desktop_A - Scroll RL
Tile box - Desktop_B - Hover
The Editorial Placement module will serve as a promotional showcase,
showing the newest services in Etisalat.
Editorial Placement A consists of 4 main parts:
- Content: (icon+ subheadline+ body text) - left
- Image - right - large
Editorial Placement B consists of 5 main parts:
- Content: (icon+ subheadline+ body text) - right
- Image - left - large
- Price tag
• Price tag appears on the top right of the image with a coloured
background
Editorial Placement C consists of 4 main parts:
- Content: (icon+ subheadline+ body text) - right - large
- Image - left
Editorial Placement E consists of 3 content tiles, each consisting of 3 parts:
- Content (Icon + subheadline + body text)
• The content tile will have a mouseover effect in which the user is able to
read more if needed.
• The image on the right should be relevant to the content. TBD how the
image moves
Editorial Plc CONSUMER BUSINESS
Editorial Plc - Desktop_A Editorial Plc - Desktop_A - Hover
Editorial Plc - Desktop_B Editorial Plc - Desktop_C
Editorial Plc - Desktop_D Editorial Plc - Desktop_E
The action bar displays a number of options to help the user to make the right
decision according to their needs/wants.
The action bar consists of 3 parts:
- Help me decide tab: panel expanding with questions aided to help the
user decide. The questions will be provided from the functional team.
- Filters tab
- Compare packages tab: panel expanding with list of product categories.
The user is allowed to make a selection to up to 3 products.
• Once the user selects a tab, the tab becomes green. This applies to the
1 rest to the rest of the tabs when selection has been made.
Action Bar CONSUMER BUSINESS
Notes
Action Bar_Action Bar_Desktop_A - state 1
Action Bar_Action Bar_Desktop_A - state 2
Action Bar_Action Bar_Desktop_A - state 1
Page nav consists of 2 main parts: - page title + tab bar
• The page title would always be visible on the page nav and would be
consistent throughout the current page.
• In an inactive state, the user is able to view the different sections in the tab bar.
The tab bar should a maximum of 6 labels.
• Through mouse over, the label becomes green and through click, it takes the
user to a different section on the current page. i.e. the user will be pulled down
to that part of the page. The Page Nav becomes a sticky status bar once
scrolled past it. The sticky status bar navigation will showcase where the user
currently is along the page. It will switch to the next one as the user scrolls
down the page.
• Quick buy will allow the users to automatically checkout upon click
Page Navi CONSUMER BUSINESS
Notes
06 Page navi - Desktop_A
06 Page navi - Desktop_A - Active
06 Page navi - Desktop_A - Hover
Context Nav illustrates Context page related links.
This module allows the users to quickly navigate to other content pages.
• Context Nav A consists of 3 x tiles that is accompanied with an icon & a
title.
• Through mouse over, the tile becomes green and through click, it takes
the user to the page i.e. the category page.
Context Nav illustrates Context page related links.
This allows the users to quickly navigate to the content pages.
• Context Nav B consists of:
2 x tiles that is accompanied with an icon & a title.
Notes
Context Navi CONSUMER BUSINESS
Context Navigation - Desktop_A - Hover
Context Navigation - Desktop_A
Context Navigation - Desktop_B
Main text displays section header correlating to descriptive text.
Main text B in this variation consists of 2 parts:
- 2 x Title + Txt - sandy background for both consumer & business
- 2 x Title + Txt - grey background for business
- 2 x Title + Txt - white background for both consumer & business
Main text displays section header correlating descriptive text and call to
action button directing the users to a different page. Main text D in this
variation consists of 3 parts:
- 1 x Title + Txt + CTA - sandy background for both consumer & business
- 1 x Title + Txt + CTA - Image background for business
Main text displays section header correlating descriptive text.
Main text F in this variation consists of 2 parts:
- 1 x Title left + Text right - white background for both consumer & business
- 1 x Title left + Text right - sandy background for both consumer & business
Main text displays section header correlating descriptive text.
Main text J in this variation consists of 5 parts:
- Icon + 1xTitle + txt + order ID code + CTA
• When order is successful the icon is green with a checkmark. When the
order has failed, the icon is red with a cross indicating an error has
occurred.
• When order is successful, the user receives the order ID code and is able
to view order details by clicking on the link below.
• When the user clicks on the link “view order details,” the user is directed
to a different page is able view the order recently purchased.
Main text displays section header correlating descriptive text.
Main text K in this variation consists of 3 parts:
1xTitle + txt + 2 x Price - sandy
CONSUMER BUSINESS
Main text
Main text - Desktop_B
Main text - Desktop_D
Main text - Desktop_K
Main text - Desktop_F - white
Main text - Desktop_J
• The secondary title is in Arabic and will have a smaller font size compared
to the main title in English.
• The main title is in English by default and will have a larger font size
compared to the secondary title which is in Arabic.
• The hero image consists of a slider. The slider will have an auto-rotating
function on it and will include maximum of 3 banners with messages.
Each slide will have a supporting image or video which illustrates these
messages.
• English page title is displayed illustrating the page the user is on.
Homepage hero image should be different than the hero images on other
pages.
Hero Image B consists of 4 main parts:
- Eng Page Title + Arabic title + English title - carousel
Hero Image A consists of 3 main parts:
- Arabic txt + Eng txt - slider
Hero Image D consists of 6 main parts:
Hero Image D - Eng Page Title + Eng title + txt + 2xCTA + price - carousel
• The main title with accompanying text.
• CTA button directing the user to a new page
• Price tag appears on the top right of the image with a
coloured background
• The main title with accompanying text.
• CTA button directing the user to a new page
• Coming soon tag appears on the top right of the image
with a coloured background
Hero Image E consists of 6 main parts:
Hero Image E - Eng Page Title + Eng title + txt + CTA + Coming soon -
carousel
CONSUMER BUSINESS
Hero image
Hero image - Desktop_A
Hero image - Desktop_D
Hero image - Desktop_B Hero image - Desktop_E
Main menu items open the menu on hover on navigational items. The main menu
consists of 4 parts:
- Logo
- Mega menu
- My account
- Search
• The Etisalat logo should be on the main menu at all times on the left.
Logo has no hover state. Hyperlink to homepage.
• The mega menu will be opened from corresponding section to display
its menu items. The items on the main menu do not change. The
menu closes by either hovering outside of the mega menu or the
moment the user scrolls down the page.
• My account label is positioned on the right. Once the user is logged
in, the (my account) label will be modified to the users personal name.
If the user clicks on the personal name, a dropdown menu will appear
displaying the following Quicklinks: Etisalat Mail, Etisalat App, Etisalat
Services, My Rewards, Sign In, Register.
• The search icon should be readily visible everywhere and will be
based on search keywords. ie. the results can have content from
different pages such as from the main navigation or the product page.
• The quick links section consists of a title over an image. Items are
always contextual to the given section and may vary depending on
what Etisalat wished to promote.
• The flyout mega menu appears on the main navigation on hover for
devices with mouse. Disappears on mouse out. If navigation is
clicked, users will be directed to the landing page of that section. ie.
when the user clicks on mobile devices, he/she is directed to the
category page.
• The mega menu is flexible enough to support up to fours columns of
items and five a maximum of 5 rows. Each menu item is limited to a
single line of text that describes the action it will perform when
selected. The text should be a single word or shop phrase.
• The user can access the portal both from quicklinks section in the
menu and from his/her profile.
Main menu CONSUMER BUSINESS
Main Menu - Desktop_A - Opened
Main Menu - Desktop_A - Hover
Main Menu - Desktop_A - Loged in
Top Nav items have a mouseover effect and can only be opened via a click.
Top Nav will stretch 100% wide to the browser window.
Top Nav items are visible on all pages and cannot be changed, except for the checkout flow.
Top Nav items consists of 4 parts:
- Consumer/business switch
- Cart
- Store locator
- Arabic/english switch
• Consumer and Business switch buttons are positioned to the left.
On mouseover we showcase the possibility of a switch.
The user needs to click to activate the buttons.
ie. when user clicks on Consumer, he/she is hyperlinked to the consumer site.
Consumer and Business labels reload to new page.
• Icons are positioned on the right.
In an in-active state the cart icon is static.
When the cart has products in it, it will illustrate the number of items i.e. has
products in it.
B U S I N E S S
C O N S U M E R ا
ﻟ
ﻌ
ﺮ
ﺑ
ﻴ
ﺔ
C A R T S TO R E
1 0
B U S I N E S S
C O N S U M E R ا
ﻟ
ﻌ
ﺮ
ﺑ
ﻴ
ﺔ
C A R T S TO R E
B U S I N E S S
C O N S U M E R ا
ﻟ
ﻌ
ﺮ
ﺑ
ﻴ
ﺔ
C A R T S TO R E
Top nav CONSUMER BUSINESS
Notes
Top Nav - Desktop_A - Badge
Top Nav - Desktop_A
Top Nav - Desktop_A - Hover
Etisalat UAE Modules - Release 1
25. HISTORY
DESIGN
!25
Design is hard to measure. It is easily under-
evaluated and we all agree, that simplicity takes
time and many iterations. Design is also easily lost
and only when looking back in perspective one
can see how much was produced and achieved.
TRACK & PROMOTE YOUR WORK!
BUILD EXPOSURE INSIDE AND OUTSIDE OF
THE DESIGN ORGANISATION.