Challenge Summary
Welcome to the "Technology Stack Interactive Infographic Concept Design Challenge". This time we are looking for your creative talents in order to create a customer experience technology stack for our client to let them showcase the technologies they leverage from their partners to maintain superb CX.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Challenge Objectives
• Creating a visually appealing interactive infographic
• 3 screens with in-between states
• Desktop (with respect to a future mobile implementation)
Round 1
Submit your initial designs for all screens for checkpoint feedbackRound 2
Submit your final designs for all the screens with all checkpoint feedback implementedProject Background
• The purpose of this project is to create an interactive, engaging, modern design for our multinational insurer client that will present the technologies they leverage to ensure great CX throughout their services.
• The infographic will be used to advertise services and technological advantage to prospective clients, so it will act as a marketing tool to promote our client's activities. The design has to be dynamic/modular so in the future client can add/remove tools easily from the hierarchy.
• The infographic is being created to be accessed by a tech-savvy corporate audience.
• The infographic will be used to advertise services and technological advantage to prospective clients, so it will act as a marketing tool to promote our client's activities. The design has to be dynamic/modular so in the future client can add/remove tools easily from the hierarchy.
• The infographic is being created to be accessed by a tech-savvy corporate audience.
Workflow
Please make sure your design incorporates this workflow.
• The visitor arrives at the landing/home page of the technology stack presentation in a browser where he can see the 6 main areas covered.
• He can then drill down to the bottom through areas, technologies and tools involved. At any point the visitor should be able to identify where he is in the hierarchy.
• He can then drill down to the bottom through areas, technologies and tools involved. At any point the visitor should be able to identify where he is in the hierarchy.
Users
Users are potential corporate clients of the brand who would like to see how our client's eco-system brings value to them.
Screens/Features Requirements
Please make sure your design includes the following screens and show the transitions between the screens:
1. Home Screen
This screen is the landing page for the tool we are creating. It should show an illustration of the whole picture - all the tools and technologies our client uses organised into different areas. Come up with an icon for each area that would help the visitor perceive the information. Please refer to the content of the illustration shared by the client.
We will have 6 sections based on a customer journey, the tools arranged underneath:
The tools can also be arranged into 11-12 broader categories, which should be flexible as well:
The idea is that we let the user click on the different levels of information on the screen e.g. on areas or on tools/technologies/partners. We would welcome innovative ideas for animation of the drill-down. Use a popup or open up the space for showing further information, or come up with something to amaze our client. They are opened to your creativity. Try to keep the design over the fold, so the user does not have to scroll throughout the experience.
2. Area Information Shown
The visitor will be able to drill down into the areas. Use some kind of animation / rearrangement to highlight the given area and show an introduction of that. The introduction would contain a title, 2 short paragraphs of text, links and icons. For now you can use a placeholder text, or make up something to make it more realistic.
3. Technology/Tool/Partner Shown
Either from the whole picture (screen 1.) or from the Area introduction the visitor can drill further to the actual tools used by the client. The requirements are basically the same: a smart way to open up the levels to show the information that would again be the same as with the areas (a title, 2 short paragraphs of text, links and icons).
This screen is the landing page for the tool we are creating. It should show an illustration of the whole picture - all the tools and technologies our client uses organised into different areas. Come up with an icon for each area that would help the visitor perceive the information. Please refer to the content of the illustration shared by the client.
We will have 6 sections based on a customer journey, the tools arranged underneath:
- Awareness
- Consideration
- Purchase
- Service
- Claims
- Renewal
- Consideration
- Purchase
- Service
- Claims
- Renewal
The tools can also be arranged into 11-12 broader categories, which should be flexible as well:
- E.g. Front-end technologies, Data and Ops, Design suite, content creation, SEO tools, Social channels
The idea is that we let the user click on the different levels of information on the screen e.g. on areas or on tools/technologies/partners. We would welcome innovative ideas for animation of the drill-down. Use a popup or open up the space for showing further information, or come up with something to amaze our client. They are opened to your creativity. Try to keep the design over the fold, so the user does not have to scroll throughout the experience.
2. Area Information Shown
The visitor will be able to drill down into the areas. Use some kind of animation / rearrangement to highlight the given area and show an introduction of that. The introduction would contain a title, 2 short paragraphs of text, links and icons. For now you can use a placeholder text, or make up something to make it more realistic.
3. Technology/Tool/Partner Shown
Either from the whole picture (screen 1.) or from the Area introduction the visitor can drill further to the actual tools used by the client. The requirements are basically the same: a smart way to open up the levels to show the information that would again be the same as with the areas (a title, 2 short paragraphs of text, links and icons).
Design Direction
Here are some ideas the client could work with:
• The design should reflect atomic design and modularity. Adding (or removing) an item should be easy.
• Think about approximately 30 items to be added to the illustration for now.
• Ideas to experiment with: rotations in a circle, hexagons.
• We shared the client’s brand guidelines, but you don’t have to be super strict about it if it helps you to create a wow effect.
• Think about approximately 30 items to be added to the illustration for now.
• Ideas to experiment with: rotations in a circle, hexagons.
• We shared the client’s brand guidelines, but you don’t have to be super strict about it if it helps you to create a wow effect.
Form Factors
Please make sure your design supports these form factors:
• In-scope
- Desktop screen, 1366px width. Keep it over the fold possibly.
• Out of scope
- Tablet and mobile screens are out of scope, but in the future your design should be able to be transformed to tablet and mobile sizes as well.
Branding Guidelines
Branding guidelines can be viewed here.
Design Assets
Judging Criteria
Your submission will be judged on the following criteria:
Final Deliverables
For submission you have to upload a zip file that contains the following 4 files:
• How well you plan the user experience and capture your ideas visually.
• Innovation in your concepts
• Cleanliness of your graphics and design.
• Overall design, UI and user experience.
• Consistency across the UX/UI
• Innovation in your concepts
• Cleanliness of your graphics and design.
• Overall design, UI and user experience.
• Consistency across the UX/UI
Final Deliverables
• All original source files.
• Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator, Sketch or Adobe XD
• Marvel prototype
• Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator, Sketch or Adobe XD
• Marvel prototype
Marvel Prototype
We need you to upload your screens to Marvelapp.• Please send your marvel app request to pere.viktoria@gmail.com
• You MUST include your Marvel app URL in your declarations.txt (in your marvel app prototype, click on share and then copy the link).
• You MUST include your Marvel app URL in your declarations.txt (in your marvel app prototype, click on share and then copy the link).
Submission & Source Files
Final Deliverables
For submission you have to upload a zip file that contains the following 4 files:
Source.zip – All original source files.
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to be converted to PSD later), XD or Sketch and saved as editable layer
Submission.zip – PNG/JPG files
Submit JPG/PNG image files based on Challenge submission requirements stated above.
preview.png – Your preview image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72 dpi and place a screenshot of your submission within it.
declarations.txt – All your declarations and notes
This file must contain your notes if any, fonts, stock art declarations and your Marvel project URL.
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to be converted to PSD later), XD or Sketch and saved as editable layer
Submission.zip – PNG/JPG files
Submit JPG/PNG image files based on Challenge submission requirements stated above.
preview.png – Your preview image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72 dpi and place a screenshot of your submission within it.
declarations.txt – All your declarations and notes
This file must contain your notes if any, fonts, stock art declarations and your Marvel project URL.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.