Challenge Summary
Welcome to "FAST - 84 Hours - Government Agency New Digital Identity Platform Design Concepts Challenge?". In this challenge, we are looking for you to help design a great user interface for a new digital identity management tool. The purpose of this challenge is to add the visual design layer to a set of wireframes and deliver a brilliant user experience that will be a key component to the adoption of this digital identity management tool. Please check out more details below!
At the end of this challenge, we want to see a clean and modern interface which brings the best combination of UX and UI together. Concepts that are hard to navigate or overly clutter the screen are likely to score less well than a clean, simple, and easy to use application design. As always, please ask any questions in the forum. Looking forward to seeing your design concepts!
During this challenge, we would like for you to take the provided design problem, explore the baseline wireframes, and design an intuitive and beautiful user interface for this digital identity tool.
Challenge Timeline and Checkpoint
- Challenge Starts: 12/3/2016 10:00 AM EDT
- Rolling Checkpoint Starts: 12/5/2016 10:00 AM EDT
- Challenge Ends: 12/6/2016 22:00 PM EDT
Prize Structure
We are offering 4 Prizes Placements! Plus 5 placements for Rolling Checkpoint prizes @ $50 each!
1) 1st Placement: $2000
2) 2nd Placement: $1500
3) 3rd Placement: $1000
4) 4th Placement: $500
* Plus 5 placements for Rolling Checkpoint prizes @ $50 each!
Rolling Checkpoint
- We will provide a quick design review if you submit your initial designs by (10:00 AM EDT 12/05/2016)
- The first 5 qualifying* checkpoint submissions will win $50
* Within the hour, we will provide any design feedback/guidance
* You must watch the forum for your feedback!
* Beyond the first 5, we will still provide feedback until 12 PM EDT 12/05/2016
Background / Overview
Government programs require proof of identification and other attributes when citizens apply, register, or sign up for programs and services. These requirements are necessary to prove that people are who they say they are and are eligible for certain programs. Today there is no single technology solution for identify management and authentication. Additionally, there is no one-stop shop for common government transactions that require proof of identity. Depending on the program, citizens are required to supply different pieces of information and verify different components of their identity. If a citizen has provided one government program with his or her information, this does not mean that this information or identity verification will apply to other programs. Therefore, many citizens are left to manage the various pieces of their identity information manually including which information is required for certain government programs and the applications and renewal of applications for these programs. Citizens have developed complex processes, filing habits, and spreadsheets to track all of this information – leading to headaches, time loss, and possible security issues.
"I definitely did not keep [the identity credential] in a safe place. I think I just made my ID the same as my bank pin number and then stored it in a Word document or emailed it to myself." – End User
"I just spent all that time confirming my identity to secure my loans, and now I have to do it all again to service them. You’d think since it is all the same agency they could share that information." – End User
Challenge Goals
We strive to solve this design problem with a single, dynamic platform that will house various identity attributes, authentication services, and requirements for identity management of various government organizations. The goal is to improve digital interactions between users and organizations by allowing users to proactively assemble and manage their digital identities while also reducing the identity verification burden on organizations. (check "challenge goal diagram.jpg" in attachment)
The goal of this Design Concepts challenge is to take the baseline wireframes from an initial wireframe challenge and apply the visual layer. We want to deliver a great user interface that is simple, intuitive, and very easy for different users to understand and adopt. At the end of this challenge, we want to see a clean and modern interface which brings the best combination of UX and UI together.
Core Functionality
For this challenge, we are designing the visual layer for the citizen end user for this new Digital Identity tool. This tool has two proposed core functions for citizen users:
1. Digital Identity Manager
- A user wants to upload and secure identity information in a central, digital location
- A user wants to add and recall important identity documentation and information
- The tool should provide an authoritative mechanism to authenticate identities and share credentials across multiple relaying parties
2. Government Program/Services Applications
- A user wants to complete common transactions within the tool for partner organizations/agencies (e.g. apply for passport)
- A user wants to be able to use his/her Digital ID and other stored identity information to easily complete forms within the tool (e.g. through auto-population). A user should not have to re-enter the same information twice.
- A user wants to be able to select which organizations and programs have access to various components of his/her Digital ID and identity information
Existing Artifacts
Wireframes – we recently ran a wireframe challenge through Topcoder and have a great starting point for the page layout, information architecture and navigation of this site. It is important to note that these wireframes are a baseline. We are excited to see the new and creative ideas that you bring to the table for this Digital ID platform's interface. You will find the desktop wireframes attached.
Design Considerations
For this challenge, we would like for you to focus on the interface and visual design for the Digital Identity tool. As mentioned above, these wireframes are a baseline. We are looking forward to seeing your creativity and ideas for the interface. Please consider the following as you design the visual layer:
- Promote readability through use of typography and white space
- Be obvious and intuitive
- Be consistent both throughout the interface and with external patterns / conventions
- Be clear - with distinct and easily understood, non-ambiguous messages and labels
- Emphasize the most important elements and minimize clutter
- Focus on creating scalable layouts for an eventually fully responsive website
Required Screens
Below are a list of the final wireframe screens for the Digital Identity tool. Please note that we want to keep the information architecture and the content on each page the same. However, please suggest new interface elements and UI that will make each page clean / intuitive and elegant. If you can think of ways to lay out the functionality and features to improve the user experience, please do.
00) Logo Design
- Create a SIMPLE logo for your application that does not distract from your designs
- Based on your understanding of the solution, create a name for the product
- This is NOT a logo challenge so do not waste a lot of time on this. Create something that is clean and doesn't distract from your application. Depending on the idea you have selected, use the following suggestions to get you started.
- Ideas: A logo that inspires security but also individuality,
01) Landing Page
- WF Reference Landing Page
- This is the landing page for this Digital Identity tool. This page should orient the user to the goals and functionality of the tool. It should be educational, customized, and provide a clear overview of what the tool is able to do. Please refer to wireframes for content and layout. How can you use new design paradigms and patterns to create a visually appealing and exciting landing page? We want this page to really draw people into the site.
02) Digital ID Creation Screens
- WF Reference Digital ID Creation Screens
- When a user visits this site for the first time, he / she should be prompted or encouraged to create a Digital ID. This process should feel secure and give the user a sense of confidence in the security of the information he / she has entered. Please refer to the wireframes for process flow and required information. How can you make these forms readable and user friendly?
03) Digital ID Dashboard Screen
- WF Reference Digital ID Dashboard Screen
- This is the dashboard a user sees after he / she log-in. Please refer to wires for content required on this page. There are a few things we would like for you to consider on this page:
-- There needs to be some sort of visual link between the alerts / notifications / calendar and the Credential Wallet above and in-progress applications below (e.g. color should be tied to credentials somehow). This way a user can tell which credential has applicable alerts. [could also do icons or some other visual cue]
-- We would like to make sure the cards are clear and intuitive. How can you design these? The key information for these cards is to show what the service is (E.g. name), the key information required, and how complete the application is based on the user's current Digital ID.
04) Digital ID Management Screen
- WF Reference Digital ID Management Screen
- Once a user has set up his / her Digital ID for the first time, he / she should be able to continually maintain their identity information and keep their required information up to date. The tool should contain a very easy way to do this, in addition to providing the ability to upload other, non-required documentation
- Please refer to wires – we love the way this was implemented
05) Browse Service Offerings
- WF Reference Government Services Catalogue
- As mentioned above, the other major function for this Digital Identity tool will be to provide a one-stop-shop for government services / program applications.
- Please refer to wireframes for this page. Users should be able to select which of these he/she would like to apply for and begin applications.
06) Application Process Screens
- WF Reference Application status
- Users should be able to use their Digital ID and other stored identity information to easily complete government service application forms within the tool (e.g. through auto population based on current information in the tool)
- In the wireframes, we show an example application for a passport renewal process where a user does not already have a passport credential set up. Therefore, he / she must go through whole process.
- Please follow wires for process / layout / and information required.
07) My Credential Wallet
- WF Reference Credential Wallet
- A user should be able to view each credential he / she has and see any alerts / messages associated with it.
- A user should be able to see which data fields were submitted for this credential (in addition to his / her baseline ID).
- A user should be able to see for which applications this credential was used. (e.g. I used my passport credential once in 2010 to get my passport and once in 2015 to renew it).
- Please refer to wires.
08) Help
- WF Reference Help
- There should be a portion of the tool dedicated to FAQ and information about the tool’s commitment to security
- Outside of this page, how can you make sure the user is comfortable with security measures across the tool and confident in the information’s security?
- Please refer to wires.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Focus on the user experience! Focus on the navigation experience. Keeping consistent visual elements.
Stock Artwork:
We are allowing stock photos but not stock icons for this challenge.
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Target User
This challenge will focus on target end users who are:
- Government citizens
- Predominantly 18 years and older, both male and female
User Needs
Transparency and control in the process:
- "There needs to be a window or a portal to self-check progress. People need to be able to check into the system, see where they are, and better help themselves along in the process." – Agency
- Current user frustration – "It feels like my information is in a black box and I don't really know what is being done with it. Is my PII being handled properly? Where am I in the process?" – End User
Confidence in the security of personal information:
- Current user frustration – "I've never had a good feeling about sharing this information. I don't trust [the government]. So if I need to hold onto something, like a credential, I make a note of it and store it myself." – End User
Convenience & flexibility:
- Current user frustration – "I had to schedule an in-person proof, but all the appointments are from 9-5. I had to totally rearrange my schedule, take off a Wednesday from work, and drive to the site." - End User
User centricity and customer friendly processes
- Current user frustration with existing application processes – "I don't know who their customer is but it certainly isn't me. This process wasn't designed with me or my needs in mind.." – End User
Clean, Intuitive Design:
- Current user frustration with website design today – "The look of this website alone gives me stress..this looks like an Amazon website from the late 90s. It is so much text." – End User
Look & Feel
The goal of this tool is to centralize Digital ID management and enable users to verify, update, and maintain all identity information from one place. Due to the sensitive nature of identity information and the overwhelming government application processes, this tool should give users a sense of trust and confidence.
- Should feel safe, secure, and authoritative
- Should inspire confidence in the process & government
- Should be clean & intuitive (must not add complexity or confusion)
- Should be concise with clear call to actions
- Should feel credible, innovative (for government)
- Should feel personalized and tailored to the user
- Should evoke security and control over the user’s information
Branding Guidelines
- Remember that we want a clean, easy to navigate and understand site
- Color and font usage should be clean and modern
- Use a refined color pallet to keep things consistent and professional looking (consider 1 or 2 primary colors and a clear call to action color)
- Suggested Color palette can be found in challenge attachment (Colors.docx)
Design Inspiration
- Overall site feel / landing pages that we like:
-- Nimbusnine.co
-- Android.com
- User centricity / personalization:
-- Netflix – We like that the Netflix homepage is customized for the viewer based on their browsing history, viewing history, and other attributes. We hope our prototype will be able to provide a tailored list of government programs that will be relevant to the user once he has filled out his initial profile.
-- Grub Hub – We like that this site is personalized for those visitors that have logged-in and feel like it is catering to a visitor's specific needs
-- Money Super Market (car insurance) – embeds the FAQ section on the same page as the application, enabling a more seamless user experience. The "i" button next to application questions provides troubleshooting solutions and also explains why the form is seeking that piece of information, which is important for users concerned about data security.
-- Google (specifically its material design: https://material.google.com/#) – Its bold, intentional yet familiar design helps acclimate users quickly while also proving to be a strong example of technical innovation
- Progress trackers:
-- Turbo Tax - This tool is heavily reliant on users entering a large amount of information into forms. We like that Turbo Tax provides clear indicator of where users are in the process and what else they have to do to accomplish a task.
-- Keeping the goal (carrot) and deadline (stick) front and center helps prevent drop-off and makes it clear that the product is focused on the user's concerns.
-- A consistent and highly visual UI combining icons and text offers a much better experience than a thousand drop-downs, checkboxes, and text inputs.
- LinkedIn Profile completion:
-– We like that the "LinkedIn" progress bar outlines your progress toward the development of a LinkedIn profile. We'd like our prototype to also show how close the user is to completing the requirements for a profile with a particular Agency.
-- Interactive & engaging forms / elements of the tool:
-- Virgin America – The website engages users' attention by asking simple and easily understood questions such as "Where would you like to go?" It has also streamlined the questionnaire process by eliminating the multi-page progression and instead designed everything to fit on a single screen, more closely mimicking the mind of the user. We want to make the process as easy as possible for the users, because we want them to continue to return to the platform.
Attached Documentation
- Wireframes
- 2 user scenarios
- Design inspiration examples
- Colors Suggestion
- Challenge Goals Diagram
Target Devices
- Desktop (1280px)
****Please note**** The final solution will be a fully responsive web application. Please consider this as you design your desktop layouts so that these designs are scalable for other device sizes.
Judging Criteria
Your submission will be judged on the following criteria:
- Cleanliness of screen design and user flow
- Overall design and user experience
- Simplicity of design/strong, clear design concept
- How well your designs align with the objectives of the challenge
- Overall unique idea and concept
Submission and 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
All requested contest requirements/screens as JPG or PNG files at 300dpi.
Source Files
All original source files for the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD or Ai.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback and instructions.
At the end of this challenge, we want to see a clean and modern interface which brings the best combination of UX and UI together. Concepts that are hard to navigate or overly clutter the screen are likely to score less well than a clean, simple, and easy to use application design. As always, please ask any questions in the forum. Looking forward to seeing your design concepts!
During this challenge, we would like for you to take the provided design problem, explore the baseline wireframes, and design an intuitive and beautiful user interface for this digital identity tool.
Challenge Timeline and Checkpoint
- Challenge Starts: 12/3/2016 10:00 AM EDT
- Rolling Checkpoint Starts: 12/5/2016 10:00 AM EDT
- Challenge Ends: 12/6/2016 22:00 PM EDT
Prize Structure
We are offering 4 Prizes Placements! Plus 5 placements for Rolling Checkpoint prizes @ $50 each!
1) 1st Placement: $2000
2) 2nd Placement: $1500
3) 3rd Placement: $1000
4) 4th Placement: $500
* Plus 5 placements for Rolling Checkpoint prizes @ $50 each!
Rolling Checkpoint
- We will provide a quick design review if you submit your initial designs by (10:00 AM EDT 12/05/2016)
- The first 5 qualifying* checkpoint submissions will win $50
* Within the hour, we will provide any design feedback/guidance
* You must watch the forum for your feedback!
* Beyond the first 5, we will still provide feedback until 12 PM EDT 12/05/2016
Background / Overview
Government programs require proof of identification and other attributes when citizens apply, register, or sign up for programs and services. These requirements are necessary to prove that people are who they say they are and are eligible for certain programs. Today there is no single technology solution for identify management and authentication. Additionally, there is no one-stop shop for common government transactions that require proof of identity. Depending on the program, citizens are required to supply different pieces of information and verify different components of their identity. If a citizen has provided one government program with his or her information, this does not mean that this information or identity verification will apply to other programs. Therefore, many citizens are left to manage the various pieces of their identity information manually including which information is required for certain government programs and the applications and renewal of applications for these programs. Citizens have developed complex processes, filing habits, and spreadsheets to track all of this information – leading to headaches, time loss, and possible security issues.
"I definitely did not keep [the identity credential] in a safe place. I think I just made my ID the same as my bank pin number and then stored it in a Word document or emailed it to myself." – End User
"I just spent all that time confirming my identity to secure my loans, and now I have to do it all again to service them. You’d think since it is all the same agency they could share that information." – End User
Challenge Goals
We strive to solve this design problem with a single, dynamic platform that will house various identity attributes, authentication services, and requirements for identity management of various government organizations. The goal is to improve digital interactions between users and organizations by allowing users to proactively assemble and manage their digital identities while also reducing the identity verification burden on organizations. (check "challenge goal diagram.jpg" in attachment)
The goal of this Design Concepts challenge is to take the baseline wireframes from an initial wireframe challenge and apply the visual layer. We want to deliver a great user interface that is simple, intuitive, and very easy for different users to understand and adopt. At the end of this challenge, we want to see a clean and modern interface which brings the best combination of UX and UI together.
Core Functionality
For this challenge, we are designing the visual layer for the citizen end user for this new Digital Identity tool. This tool has two proposed core functions for citizen users:
1. Digital Identity Manager
- A user wants to upload and secure identity information in a central, digital location
- A user wants to add and recall important identity documentation and information
- The tool should provide an authoritative mechanism to authenticate identities and share credentials across multiple relaying parties
2. Government Program/Services Applications
- A user wants to complete common transactions within the tool for partner organizations/agencies (e.g. apply for passport)
- A user wants to be able to use his/her Digital ID and other stored identity information to easily complete forms within the tool (e.g. through auto-population). A user should not have to re-enter the same information twice.
- A user wants to be able to select which organizations and programs have access to various components of his/her Digital ID and identity information
Existing Artifacts
Wireframes – we recently ran a wireframe challenge through Topcoder and have a great starting point for the page layout, information architecture and navigation of this site. It is important to note that these wireframes are a baseline. We are excited to see the new and creative ideas that you bring to the table for this Digital ID platform's interface. You will find the desktop wireframes attached.
Design Considerations
For this challenge, we would like for you to focus on the interface and visual design for the Digital Identity tool. As mentioned above, these wireframes are a baseline. We are looking forward to seeing your creativity and ideas for the interface. Please consider the following as you design the visual layer:
- Promote readability through use of typography and white space
- Be obvious and intuitive
- Be consistent both throughout the interface and with external patterns / conventions
- Be clear - with distinct and easily understood, non-ambiguous messages and labels
- Emphasize the most important elements and minimize clutter
- Focus on creating scalable layouts for an eventually fully responsive website
Required Screens
Below are a list of the final wireframe screens for the Digital Identity tool. Please note that we want to keep the information architecture and the content on each page the same. However, please suggest new interface elements and UI that will make each page clean / intuitive and elegant. If you can think of ways to lay out the functionality and features to improve the user experience, please do.
00) Logo Design
- Create a SIMPLE logo for your application that does not distract from your designs
- Based on your understanding of the solution, create a name for the product
- This is NOT a logo challenge so do not waste a lot of time on this. Create something that is clean and doesn't distract from your application. Depending on the idea you have selected, use the following suggestions to get you started.
- Ideas: A logo that inspires security but also individuality,
01) Landing Page
- WF Reference Landing Page
- This is the landing page for this Digital Identity tool. This page should orient the user to the goals and functionality of the tool. It should be educational, customized, and provide a clear overview of what the tool is able to do. Please refer to wireframes for content and layout. How can you use new design paradigms and patterns to create a visually appealing and exciting landing page? We want this page to really draw people into the site.
02) Digital ID Creation Screens
- WF Reference Digital ID Creation Screens
- When a user visits this site for the first time, he / she should be prompted or encouraged to create a Digital ID. This process should feel secure and give the user a sense of confidence in the security of the information he / she has entered. Please refer to the wireframes for process flow and required information. How can you make these forms readable and user friendly?
03) Digital ID Dashboard Screen
- WF Reference Digital ID Dashboard Screen
- This is the dashboard a user sees after he / she log-in. Please refer to wires for content required on this page. There are a few things we would like for you to consider on this page:
-- There needs to be some sort of visual link between the alerts / notifications / calendar and the Credential Wallet above and in-progress applications below (e.g. color should be tied to credentials somehow). This way a user can tell which credential has applicable alerts. [could also do icons or some other visual cue]
-- We would like to make sure the cards are clear and intuitive. How can you design these? The key information for these cards is to show what the service is (E.g. name), the key information required, and how complete the application is based on the user's current Digital ID.
04) Digital ID Management Screen
- WF Reference Digital ID Management Screen
- Once a user has set up his / her Digital ID for the first time, he / she should be able to continually maintain their identity information and keep their required information up to date. The tool should contain a very easy way to do this, in addition to providing the ability to upload other, non-required documentation
- Please refer to wires – we love the way this was implemented
05) Browse Service Offerings
- WF Reference Government Services Catalogue
- As mentioned above, the other major function for this Digital Identity tool will be to provide a one-stop-shop for government services / program applications.
- Please refer to wireframes for this page. Users should be able to select which of these he/she would like to apply for and begin applications.
06) Application Process Screens
- WF Reference Application status
- Users should be able to use their Digital ID and other stored identity information to easily complete government service application forms within the tool (e.g. through auto population based on current information in the tool)
- In the wireframes, we show an example application for a passport renewal process where a user does not already have a passport credential set up. Therefore, he / she must go through whole process.
- Please follow wires for process / layout / and information required.
07) My Credential Wallet
- WF Reference Credential Wallet
- A user should be able to view each credential he / she has and see any alerts / messages associated with it.
- A user should be able to see which data fields were submitted for this credential (in addition to his / her baseline ID).
- A user should be able to see for which applications this credential was used. (e.g. I used my passport credential once in 2010 to get my passport and once in 2015 to renew it).
- Please refer to wires.
08) Help
- WF Reference Help
- There should be a portion of the tool dedicated to FAQ and information about the tool’s commitment to security
- Outside of this page, how can you make sure the user is comfortable with security measures across the tool and confident in the information’s security?
- Please refer to wires.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Focus on the user experience! Focus on the navigation experience. Keeping consistent visual elements.
Stock Artwork:
We are allowing stock photos but not stock icons for this challenge.
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Target User
This challenge will focus on target end users who are:
- Government citizens
- Predominantly 18 years and older, both male and female
User Needs
Transparency and control in the process:
- "There needs to be a window or a portal to self-check progress. People need to be able to check into the system, see where they are, and better help themselves along in the process." – Agency
- Current user frustration – "It feels like my information is in a black box and I don't really know what is being done with it. Is my PII being handled properly? Where am I in the process?" – End User
Confidence in the security of personal information:
- Current user frustration – "I've never had a good feeling about sharing this information. I don't trust [the government]. So if I need to hold onto something, like a credential, I make a note of it and store it myself." – End User
Convenience & flexibility:
- Current user frustration – "I had to schedule an in-person proof, but all the appointments are from 9-5. I had to totally rearrange my schedule, take off a Wednesday from work, and drive to the site." - End User
User centricity and customer friendly processes
- Current user frustration with existing application processes – "I don't know who their customer is but it certainly isn't me. This process wasn't designed with me or my needs in mind.." – End User
Clean, Intuitive Design:
- Current user frustration with website design today – "The look of this website alone gives me stress..this looks like an Amazon website from the late 90s. It is so much text." – End User
Look & Feel
The goal of this tool is to centralize Digital ID management and enable users to verify, update, and maintain all identity information from one place. Due to the sensitive nature of identity information and the overwhelming government application processes, this tool should give users a sense of trust and confidence.
- Should feel safe, secure, and authoritative
- Should inspire confidence in the process & government
- Should be clean & intuitive (must not add complexity or confusion)
- Should be concise with clear call to actions
- Should feel credible, innovative (for government)
- Should feel personalized and tailored to the user
- Should evoke security and control over the user’s information
Branding Guidelines
- Remember that we want a clean, easy to navigate and understand site
- Color and font usage should be clean and modern
- Use a refined color pallet to keep things consistent and professional looking (consider 1 or 2 primary colors and a clear call to action color)
- Suggested Color palette can be found in challenge attachment (Colors.docx)
Design Inspiration
- Overall site feel / landing pages that we like:
-- Nimbusnine.co
-- Android.com
- User centricity / personalization:
-- Netflix – We like that the Netflix homepage is customized for the viewer based on their browsing history, viewing history, and other attributes. We hope our prototype will be able to provide a tailored list of government programs that will be relevant to the user once he has filled out his initial profile.
-- Grub Hub – We like that this site is personalized for those visitors that have logged-in and feel like it is catering to a visitor's specific needs
-- Money Super Market (car insurance) – embeds the FAQ section on the same page as the application, enabling a more seamless user experience. The "i" button next to application questions provides troubleshooting solutions and also explains why the form is seeking that piece of information, which is important for users concerned about data security.
-- Google (specifically its material design: https://material.google.com/#) – Its bold, intentional yet familiar design helps acclimate users quickly while also proving to be a strong example of technical innovation
- Progress trackers:
-- Turbo Tax - This tool is heavily reliant on users entering a large amount of information into forms. We like that Turbo Tax provides clear indicator of where users are in the process and what else they have to do to accomplish a task.
-- Keeping the goal (carrot) and deadline (stick) front and center helps prevent drop-off and makes it clear that the product is focused on the user's concerns.
-- A consistent and highly visual UI combining icons and text offers a much better experience than a thousand drop-downs, checkboxes, and text inputs.
- LinkedIn Profile completion:
-– We like that the "LinkedIn" progress bar outlines your progress toward the development of a LinkedIn profile. We'd like our prototype to also show how close the user is to completing the requirements for a profile with a particular Agency.
-- Interactive & engaging forms / elements of the tool:
-- Virgin America – The website engages users' attention by asking simple and easily understood questions such as "Where would you like to go?" It has also streamlined the questionnaire process by eliminating the multi-page progression and instead designed everything to fit on a single screen, more closely mimicking the mind of the user. We want to make the process as easy as possible for the users, because we want them to continue to return to the platform.
Attached Documentation
- Wireframes
- 2 user scenarios
- Design inspiration examples
- Colors Suggestion
- Challenge Goals Diagram
Target Devices
- Desktop (1280px)
****Please note**** The final solution will be a fully responsive web application. Please consider this as you design your desktop layouts so that these designs are scalable for other device sizes.
Judging Criteria
Your submission will be judged on the following criteria:
- Cleanliness of screen design and user flow
- Overall design and user experience
- Simplicity of design/strong, clear design concept
- How well your designs align with the objectives of the challenge
- Overall unique idea and concept
Submission and 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
All requested contest requirements/screens as JPG or PNG files at 300dpi.
Source Files
All original source files for the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD or Ai.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback and instructions.
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.