Digital Identity Wallet Mobile App Design Challenge

Welcome to "Digital Identity Wallet Mobile App Design Challenge". This challenge will focus on creating mobile screen designs for our new digital wallet to store user credentials. This app will simplify user's digital life by obtaining digital versions of the credentials they'd normally keep in a physical wallet so that they're there when the user needs them—easily, securely, and privately. This will be a hybrid mobile app that will work for both Android & iOS. 

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 designs for checkpoint feedback
01) Onboarding Screens
02) Login Screens
03) Home Screen
04) Connection List Screen
05) Connection (Chat with Issuer) 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
01) Onboarding Screens
02) Login Screens
03) Home Screen
04) Connection List Screen
05) Connection (Chat with Issuer) Screen 
06) Credentials List Screen
07) Credentials Details Screen
08) Settings Screen

• 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

CHALLENGE OBJECTIVE

• Create a new Digital Identity (DI) wallet to store user credentials 
• 8 mobile screens + interactions screens that is the major features in the app 
• Design hybrid mobile screens for iOS and Android

BACKGROUND OVERVIEW

• We are in a process to replace a 3rd party mobile wallet app that only supports Hyperledger Indy blockchain & does not support other blockchain networks like Hedera, Hyperledger Fabric, Quorum, etc
• It is important to have our own digital identity wallet and make it compatible with other blockchains
• This new DI wallet mobile app will simplify its user's digital life by obtaining digital versions of the credentials they'd normally keep in a physical wallet so that they’re there when the user needs them - easily, securely, and privately
• This will be a hybrid mobile app that will work for both Android & iOS 
• As a note, this Digital Identity platform consist of two different types of app:
  • Mobile: will be used by a Person/Identity Holder. The identity holder has to use the mobile wallet application to connect to the issuer and do verification, the mobile app also will keep, secure, and store the issued credentials
  • Desktop/Web (OUT OF SCOPE for this challenge): will be used by Issuers and Verifiers/Service Providers. The organizations playing the issuer and verifier actor are supposed to use the web application to perform operations related to credential issuance and verifications

TARGET AUDIENCE

• Identity Subject Holder - Person trying to prove their identity to gain access to services by a service provider. This person possesses multiple credentials from issuers such as government ID, etc

PERSONA

• Name: Charlie Sheen
• Occupation: Employee in ACME company
• Goals: Easily verify him self as employee of ACME company, anywhere and anytime
• Frustrations: Verifying Digital Identity takes a lot of time (gathering documents, investigation, etc) and effort (scattered in a different system, not in one place) 
• Wants: An application that able to provide a secure, fast and integrated system to do digital identity verification 

USER STORY

• Charlie is an employee of ACME company that the headquarter office is located in New York city 
• He is currently having a Holiday with his family in Amsterdam and suddenly gets a phone call from the main office to do some urgent work 
• However, since he is on holiday, he does not bring his company laptop to Amsterdam, and the only way to reach his work will be to log in into the company internal network
• Fortunately, there is ACME branch office in Amsterdam that is connected to the internal network of the company
• Charlie goes to the branch office but gets rejected by the front office, he needs to scan QR code and prove his credential. He cannot verify himself as one of the ACME employee due to the automated system that has been implemented there 
• Frustrated, he calls his senior colleague in NYC and gets some advice to apply and get global credential from their company
• Charlie opens the ACME employee website and applies to get verifiable global credentials as an ACME employee. He is instructed to scan the QR code presented to start the process
• To scan the QR code, the website instructed him to use and download the "DI Wallet" mobile app. He downloads the app and then scans the QR code, immediately the DI Wallet shows "Connection Invitation" from ACME company which is then accepted by Charlie 
• Charlie is now able to communicate two ways via chat with the person from ACME company that is responsible to issue the credential. Charlie gives his employee information to the issuer and after several minutes waiting for checking, the issuer comes back to him and says that his information is correct and the issuer already sent the credential offers to Charlie DI Wallet app 
• Charlie goes back to the DI Wallet home screen where he finds one "Credential Offers" action from ACME Company that he can use in all ACME offices around the world, he then accepts the credential offers
• Charlie returns to the ACME branch office and again, being asked to scan QR code in the front office to prove that he is really an ACME employee
• He scans the QR code using the DI Wallet, and presents his "Credential Proof" and is able to enter the branch office to use one of the computer there to get his work done
• Charlie found out that the DI wallet mobile app also supports different types of blockchain networks, which means he can use the DI Wallet for different DI verification from other organizations, not just from his company.

SCREEN REQUIREMENTS

01) Onboarding Screens

• This screen is the first point of contact a user has with an app, it should provide and help guide the user to get them familiarized with the app
• It should be used to educate the user about the functions and benefits of the app, including showcasing these important content informations:
  • You are about to take control of your own identity. Swipe through these slides for a run-down of this app, or click "Get Started" to dive right in.
  • Connect with other organizations and users to begin exchanging information. Scan their QR code to connect.
  • Collect Credentials issued by different organizations. These are pieces of information that prove your identity
  • Once you have a few credentials under your belt, others can request information from you through a Proof Request. You control the information you share and with whom. 
  • Your credentials are stored only on your device. Your personal information can't be seen by anyone, not even us.
• Allow the user to register their login details by provide "Get Started" button
• Button or link to restore saved/backup wallet called "Recover Wallet" (No need to show Recover Wallet flow, we just need the button/link)
• Link to "Skip" the onboarding process
• After showcase features available in the application, user will need to provide several profile informations so the app can tailor and deliver personalised content and notifications: 
  • Choose location/region
  • Enable/Disable Notification
  • Allowe access to mobile phone storage
  • Add Cloud Backup

02) Login Screens

• User needs to log in first before being able to use the application
• User can choose login method, either using ordinary login form using their email/username and password or using biometrics login (fingerprints and/or face ID)
• Need to provide the above screens (login form and biometrics)
• Show error handling interactions for both login options
• Provide forgot password option in this screen

03) Home Screen

• This screen is the default page that will be shown to the user once they successfully log in to the mobile app
• Show the wallet general information (Wallet name, Blockchain network used, Username, etc)
• Need to show all pending actions list that need user attention 
• Show any required actions that needs to be performed by the user:
• If user only have one "connection invitation" or "credential offers" or "credential proof request" actions and there is no other pending action available in the app, show:
  • The required action in popup with the CTA buttons (Accept/Decline or Present/Decline) depending on the action state
  • Button to close the action without accept/decline it, doing this interaction will move the action into pending action list where user can go back anytime to complete the required interaction for the action in the home screen
• If user has multiple pending "connection invitation" or "credential offers" or "credential proof request", show:
  • List of connection invitation from issuer (user can accept or decline the connection invitation)
  • List of credential offers from the issuer. Based on his needs, a user can accept or decline the credential
  • List of user credential proof request to any organization that needs user credential as a proof for specific matter with the organization (user can present their credential to the organization or decline it)
• Needs to provide confirmation message every time user accepts/declines connection invitation, accepts/declines credential offers, or present/decline credential proof
• Main navigation to give user access to various features in the mobile app 
• Ability to perform action to create new invitation
• Recent user history action activity
• Provide a button to scan QR code that will be used by the user to (create the following screens):
  • Scan QR code to create a connection with the issuer. They can also chat with the issuer to get the credentials
  • Scan QR code for presenting credential proof that are  asked by other organizations
• Screen interaction when it’s idle or when "There is no actions to complete"

04) Connection List Screen

• Connections will come from different organizations and this is the first thing that user needs to do in their attempt to get credential from the issuer
• Show list of connection from various issuer that has been accepted by the user in this screen
• Search and Filter area, to find specific credentials if the list have too many item list
• In order to connect with the issuer, user must scan QR code provided by the issuer on their website using the ID wallet app and then accept the connection that showing up as "Connection invitation" in the app
• Ability to delete the connection that no longer necessary
• Feel free to add any other interaction that make sense for this feature

05) Connection (Chat with Issuer) Screen 

• Connection will be used by the user to exchange information with the issuer via chat
• This screen can be created as a messenger/chatting area, where user can do two way communication with the issuer side (person, not bot) in order to verify and get the necessary information as the credential needed by the user 
• Feel free to add any other interaction that make sense for this feature

06) Credentials List Screen

• Show list of accepted user credentials 
• Search and Filter area, to find specific credentials if the list becomes too many
• In each credential list item, show summary informations of the credential such as:
  • Credential name (for example, ACME employee info, Gov ID, etc) 
  • Issuer name (institution name/company name/government/etc)
  • Total number of how many times the credential has been presented 
  • Ability to delete the Credential 
• Feel free to add any other interaction that make sense for this feature

07) Credentials Details Screen

• Need to show details of user credential information. Every credential information from different issuers will not be the same. For example, credential information that user receives from the government will be different from credential information that the user receive from the company they currently work in
• For this challenge, we will use sample credential detail information from the ACME company for their employees, such as:
  • Name of Credential
  • Issued date
  • Employee ID
  • Base Location 
  • Manager Email 
  • Local Contact Email
  • Business Unit
  • Employee Name
• Feel free to add any other interaction that make sense for this feature

08) Settings Screen

• Need a screen where user can manage their wallet configurations
• User will be able to edit/manage the following configurations in their wallet:
  • Wallet Name
  • Network
  • Notification
  • Backup and Restore
  • Export wallet
  • App Permission
  • Biometric Security (Enable/Disable)
  • Contact Us

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=841044

DEVICE SPECIFICATIONS

• Mobile device: 1125px x 2436px

DESIGN GOALS AND PRINCIPLES

• Follow best practice for Hybrid mobile design
• Modern, simple, easy to use, and clean design
• Seamless Navigation and enhanced Features
• Reduce the number of interactions required from users as much as possible
• Use color or great visual comparison to highlight a comparison of important information
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information
• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance

BRANDING GUIDELINES

• Please see and follow our provided Branding Guidelines

JUDGEMENT CRITERIA

• Creativity: Impactful - the solution is different or unique from what is already out there and can be implemented
• Exploration: Out of the box - consider the screen requirements and guidelines as a draft or start point. Provide alternate experiences or workflows to achieve what we are proposing in the requirements and satisfy the user goals
• Aesthetics: Hi-fidelity design - provide a top-notch finished looking visual design
• Branding: Flexible - follow the provided guidelines and suggest improvements where seem appropriate and inline with the goals.

GLOSSARY

• Blockchain: a system of recording information in a way that makes it difficult or impossible to change, hack, or cheat the system. A blockchain is essentially a digital ledger of transactions that is duplicated and distributed across the entire network of computer systems
• Wallet: A logical store of identities and claim ids
• Connection: Secure and digital peer-to-peer communication between any organization/Chamber of Commerce/governments/etc with the user 

MARVEL PROTOTYPE

• We need you to upload your screens to MarvelApp
• Please request your MarvelApp prototype in the respective thread in the challenge forum
• You MUST include your Marvelapp URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload)

FINAL DELIVERABLES

Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources
• Full Details of the Topcoder Policy can be found in this LINK

Source Files

• All source files of all graphics created in any design tools such as Adobe XD, Sketch, or Figma and saved as an editable layer

FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your files, add or remove screens or combine details to create a final presentation.