AgoraAndroid-Prototype

Dummy Prototype build for AgoraAndroid App based on UI Mockups

I will be uploading the whole code here soon....

Here is the explaination for the UI Mockups as explained in !232

App Theme

• Flat Material Style Design.
• Each color of the palette has its own meaning to describe each function.
  

Used standard Roboto Fonts (Bold Medium Regular)

UI States

• I preferred using the Custom Button Layout.
  
• I also revamped the theme of the EditText view.
  
• I have used steps indicator wherever necessary to make it more intuitive
  

Splash and Walkthrough

• I have kept it as simple as possible.
  
• Thinking to include a small animation in the future(if necessary).
  
• Walkthrough comes when the user opens the app for the first time.
  

LogIn and SignUp

• Simple smooth and clean.
  
• Also added Two factor Authentication and Security Question Based LogIn (derived from Agora Web)
  

Home Screens

• With increasing screen size, it became important to add the frequently used controls at the bottom of the Layout.
  
• So I preferred the bottom nav bar over side navbar.
  
• To make it simple I confined myself to include only create election, home and all election buttons on the navbar and added remaining into the Bottom sheet.
  In the profile-section added an option to edit the profile picture.
  

Your Elections

• Here I have added two new options, Sort and Filter.
  
• Sort: Contains options to sort the elections by date, number of voters
  
• Filter: Used to filter of only required elections based on a voting algorithm or a candidate name...
  

Election Details

• Added major points on top as chips.
  
• For Polls user gets and option to generate Voting URL (derived from Agora Web)
  
• Slightly revamped the Invite voters Page.
  

Create Election

• Here I have added steps indicator which helps users to track the progress.
  
• For voting algorithm selection I used an Expandable Dropdown view.
  
• I also included a column where we can add a description of the voting algorithm (from available sources, in the future).
  

Cast Vote

• Followed same layout pattern as of Create Election
  
• Step1: User get to know Details about Election
  
• Step2: Select a Candidate to be added into ballot
  
• step3: Review the Ballot and Cast Vote
  
• Step2 is different for Poll (public election) where user can post scores to each candidate (derived from Agora Web)
  

Empty and No Network States

• According to Material Design Guidelines, Empty States should be designed to prevent confusion of the user.
  
• Empty State appears whenever there is nothing to display on a page.
  
• And No Network appears in case of any network connection issues.
  

Secure LogIn (optional)

• I would also like to add a secure logIn feature, where a user can enable if necessary. (just like WhatsApp and other apps)
  
• Fingerprint or Pin based LogIn
  

Dark Theme (Can-Can, in future)

• Dark themes reduce the luminance emitted by device screens,blah blah... Everyone knows advantages of Dark theme..
  
• So, As every part of designs is constructed following Material Design Principles it will be easy to implement a dark theme for the same in the future.
  

Note: I will soon add link or a video to show the prototype.