Download as PDF, PPTX
Uploaded byPedro Custódio
Design transformation - IXD Dubai Launch
This document provides information and examples of different design elements for a checkout and configuration process. It includes summaries and screenshots of steps trackers, headers, cart items, tabs, upselling options, footers, and expansions. The goals are to clearly guide users through the checkout and configuration, display relevant product and pricing information, and provide calls to action. Imagery, layouts, interactions, and responsive design are emphasized to create engaging, intuitive digital experiences.
More Related Content
Similar to Design transformation - IXD Dubai Launch
Design transformation - IXD Dubai Launch
- 1.
- 2. !2 DISRUPTION Everyday day companiesand 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 talkabout 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
- 4.
- 5. THE 8-STAGE PROCESSOF 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
- 6.
- 7. TRANSFORMATION WHO WHAT WHEN WHERE WHY !7 DESIGN 5 GOLDEN W’s knowwhat you are up for
- 8.
- 9. Grow their Market Refocus Business Improve Customer Experience Increase Brand Differentiation Innovate Be more Effective Builda Better Company Increase Revenues Decrease Costs Outpace Competition Become Better at what We do Discover New Opportunities Update Current Processes & Tools Look Nicer (…)
- 10. 3 Months 6Months 12 Months
- 11.
- 13. A DESIGN TEAM 1+ InHouse Hybrid FullOutsourcing Partner / No Partner BUILDING !13
- 14.
- 15. YOUR TEAM SPACE DESIGN !15 Createa 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.
- 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
- 19.
- 20. STAKEHOLDER MAPS SERVICE SAFARIS SHADOWING CUSTOMERJOURNEY 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 CUSTOMERJOURNEY 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 Buildingstrong 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 Thecore: 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 Trackerconvey 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 hardto 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.
- 26. There will bedragons
- 27. BE BOLD. GO FORIT. LEARN. BE BOLDER. GO FOR IT AGAIN! #MAKEITCOUNT. !27
- 28.