Challenge Summary
Welcome to "GUARD - Service Comparator Portal Design Concepts Challenge". In this challenge, we need your creative skills and help to create the best UX/UI screens for our new service comparison portal/site that has a goal to help the young adult, urban, millennials choose the right products & services for a given moment in their life.
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!
01) Landing Page Screen (Home)
02) Login Screen
04) Dashboard Screen
05) Product Details Screen
06) Product Comparison Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Landing Page Screen (Home)
02) Login Screen
03) Registration Screen
04) Dashboard Screen
05) Product Details Screen
06) Product Comparison Screen
07) My Profile Screen
08) About Page
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
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!
Round 1
Submit your initial design for a Checkpoint Feedback (Desktop + Mobile)01) Landing Page Screen (Home)
02) Login Screen
04) Dashboard Screen
05) Product Details Screen
06) Product Comparison Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates (Desktop + Mobile)01) Landing Page Screen (Home)
02) Login Screen
03) Registration Screen
04) Dashboard Screen
05) Product Details Screen
06) Product Comparison Screen
07) My Profile Screen
08) About Page
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
With digitalization transforming expectations from customers, we want to create a site/portal where the customers could find insurance products and services related to and based on moments of life.
The overall objective is to help the young adult, urban, millennials choose the right products & services for a given moment in their life. For example, these "moments in life" could be:
- Starting a new job
- Launching a business e.g., self-employed
- Moving into a new home
- Getting married
- Having children
- Going on vacations
- Buying a car
This responsive site will primarily focus on comparing products, but we also include additional advice and recommended services. The idea is for millennials to find, in one place, the essentials they need to know, choose, and do when moving to a new home, for example. It should be only the essentials, to ensure a sleek experience. It should also be about them as individuals with their specific wishes and needs (or "people like them"), not an average person.
The scope of the comparison service portal would be:
- Insurance products: Car Insurance, Home Insurance, Health Insurance, Travel Insurance, and Life Insurance
- Non-Insurance Products & Services to compare: tablets, smartphones, telcos, energy and banking/loans
KEY TO WIN:
- The user experience must be designed specifically for millennials, and be significantly more appealing to them than any existing comparison service.
- We don't want to copycat what others have already done, we want to differentiate strongly.
- The comparison service should primarily be based on a mobile phone app. A website should also be designed, offering as a similar, "app-like" experience.
- The transition between the app and the website should be as seamless as possible.
- Users can be asked to share personal information required to improve their experience and tailor the results of the comparison services.
- Sharing their information should be as simple and pleasant as possible, however, should not be based on voice input.
- On the other hand, the comparison service must use the best combination of visuals and texts.
- The service should "speak millennial", and avoid any unnecessary technical jargon.
Challenge Goals
- Create the best UI/UX for the Service Comparator Portal that provides the most convenient comparison service for a millennial user, helping them compare and obtain insurance coverages, products and services for their home, mobility (car, motor, bike, etc) and WellCare (life, health, etc.).
- Help millennials make smart choices on what they need and don't need (e.g., unnecessary, or double coverage) using this portal/site
User Flow
- Customers enter the landing page
- Customers have the option to register if they are new or log in if they are a returning user
- Can look for products/comparison based on products or moments of life.
- When the user selects a moment of life we need to show different services and products related to it (see the example for "Move to a new home" moment)
- Can access an FAQ page for additional information
Design Consideration
- Needs to focus on what Adult Millennial generation needs only, resist the temptation to broaden the user base
- Responsive website (can work on desktops & mobile devices)
- Build a mobile-first user experience
- Speak millennial: communicate their way, avoid insurance jargon
- Easy to understand flow from page to page, users can go back and exit throughout.
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Design Usability
- Simple; not too many steps involved in any part
- Easy to understand the navigation from section to section
- Not too many clicks from initial page to final confirmation of purchase
- Fast and efficient user experience
Target Devices
- Desktop: 1366px Width with Height adjusting accordingly
- Mobile: 750px x 1334px (iPhone 8)
Branding Guidelines
- Modern, Crisp, Millennial look and feel style
- Follow our Branding Guidelines Document for design style, font, and colors.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Landing Page Screen (Home)
- Marketing page that showcase what this site/portal do
- Show what service available in this portal in a Millennial way, avoid any unnecessary technical and insurance jargon.
- The user experience must be designed specifically for millennials, and be significantly more appealing to them than any existing comparison service
02) Login Screen
- Returning user needs to login first before able to use the app
- Ordinary login form (username, password, forgot a password, remember me, submit button)
- Social media login?
- Need register link
- The login form needs to be able marketing the app purpose
03) Registration Screen
- Form for new users where they need to enter personal information and their Email information
- Users will be asked to share personal information required to improve their experience and tailor the results of the comparison services.
- Set Username and Password for the portal account
- Success registration message
04) Dashboard Screen
- Default screen that will appear once user logged in to the app.
- For first time user, they will need to answer some Questionnaire section called "Find Your Fit" to identify products/moments of life that would be useful to them. Users answer questions, short questions and after users have completed the questionnaire, it will show a list of products, services, and recommendations that are suggested.
- The services that will be shown should be based on the "Moment of Life".
- Specific for this challenge, we want to focus on "moving to a new home" moment. Your design should, however, be conducive to adding other "moments in life" at a later stage (see the moment of life from background overview section above)
- The 'moving to a new home' moment will need to account for "untraditional" situations while remaining extremely simple and convenient. These situations include for example:
-- International relocations, for work or studies
-- Renting for a short period, like just a few months
-- Co-renting
-- Using the place to both live and work.
05) Product Details Screen
- The user can access to details of the 'Moving to a new home' moment
- Example of services for 'Moving to a new home' moment:
-- Advice on moving, including checklists, location-specific tips from peers, info on admin requirements..
-- Convenient access to support if needed (chatbot, call center)
-- Digital safe, including insurance folder, utility contracts.
-- Customer advice (including on needs and non-needs)
-- Comparison of relevant insurance offers to close any gap (liability, content..), not focused on price
-- Reward system (including for families), For ex, Users will get 'coins' (please propose a better name for this) when purchasing from the app. These 'coins' will be real money the users will be able to spend by a large number of partners
-- A sleek way to pay for products/services once the choice is made.
-- User can drill down and see their product comparisons, Links to partners/competitor
06) Product Comparison Screen
- The comparison service should cover electricity/gas, internet, loan to finance the buy/rent, insurance (compulsory general liability, optional insurance of contents)
- This is the main differentiator: the experience should be significantly more appealing to millennials as existing comparison services.
- For each product/service users want to compare, they will receive three options:
-- The cheapest offer
-- What 'people like the user' have chosen
-- The most premium offer
- The presentation of the options should be very simple, very visual. The tradeoffs between the options should also very clear. For example, in the case of insurance policies, users should clearly see what is covered / not covered.
- Other users ratings of the providers should also be accessible, as well as their comments.
- Users should be able to purchase the product/service extremely easily once they have made their choice.
07) My Profile Screen
- Show the products that the user currently have and information about each ex: updates, statuses.
- The user can delete or edit current products and also access other protection services that available within the products that they registered or subscribed.
08) About Page
- Need to show about how our protection ecosystem works
- Needs to be engaging
- Use placeholder content for now
- Explore with various content (video, images, carousel, text, icons, etc)
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Documentation
- Branding Guidelines Document, The design must be aligned with our guideline
- DO NOT USE Client Name directly, use "GUARD" codename in your design
Target Audience
- Young Adult Millennial
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (Need to be converted into photoshop later), XD or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.