t-sample-ui

• Screens
  • # Screen
  • Login Screen
  • News Feed Screen
  • Search Organization Screen
  • Events Screen
  • Create Events Screen
  • Profile Screen

Screens

# Screen

• Screen conveys data pictorially by use of icons.
• Color Scheme blends perfectly with the Talawa logo.
• The # Button is big and bold.
• When user press the # Button, he/she will be registered and will be taken to a page to upload profile picture.
• After profile picture screen, user will be taken to Search/Join Organization screen.
• The design of page is simple, clean and it matches 2021 UI standards

Login Screen

• Similar to # screen.
• I have taken care that out of all UI elements present on screen, user pays more attention on Login Button and Icons.
• After sucessfully loging In, the user will be taken to News Feed screen.

News Feed Screen.

• The UI is clean and minimilastic
• I have taken inspiration from Instagram, Twitter.
• I have taken care for thr future-scope of this screen.
  • The icons, book-mark Post and Share Post are present.
  • Currently, These features are not present, but in future they may be.
  • I have taken care that the UI looks good even without these icons.
• I have added pinned post in UI as mentioned in the Talawa Docs.
  • Here, the profile picture and name of person who pinned the post is visible.
  • The pinned post are placed in carousel Slider, so they will be continously moving (Inspiration Taken from Amazon India App).
  • When user taps on one of the pinned post he/she should be be taken to the Post-Info and the pinned-post should be marked as "SEEN" so the user will not be confused.
• To give a clean look while scrolling through various post, the pinned posts will collapse with app-bar and they will hide.
• There is a bar that remains visible while scrolling, it shows the number of pinned posts and a "top" Button
• The top button (with an arrow icon) should take user to the top of the screen (Very useful when there are lots of posts).

Search Organization Screen

• I made sure that the data is conveyed pictorialy.
• I have moved "Join Organization" button and Organization description to Organization-Details screen.
• Here there is a filter button which when tapped should open up a Modal Bottom Sheet which has filter options.
• There is also a search bar for searching organizations.
• If you see there is nothing above the filter button (and the search bar), I kept space in code so that this space can be used for showing App related announcemts or Ads.
  • This idea is inspired from Amazon India app.

Events Screen

• A very important screen of Talawa.
• The current Interface looks confusing.
• The screen has lot of data, new user may get overwhelmed.
• In order to fix this, data should be conveyed pictorially, through a combination of Colors, Text, Numbers.
• The very important data on this page is the Date. I have highlighed it so user pays more attention on it. Most people can recognize numbers even if they are not literate.
• The space below the Talawa Logo will be used for "My Task" button. Tapping on this button should take users to "My Tasks" Screen where user will be able to see tasks assiged to them,
• Tapping on the event tile should take user to "Event Info Page". Wherein details about Event-members and their tasks should be present.
• The area where the information of colors is shown hides while scrolling to give a clean look.
• In Talawa Docs its written that "Thumbs up/down" is a desired feature.
  • The dislike feels abrupt, the user may loose confidence to create another event if number of dislikes are more than number of likes. In worst case we may loose a user.
  • Making dislikes visible only to coordinator solves the problem, but creates another problem of transparency.
  • I think we should have ratings as a form of feed-back, preferably through stars.
  • Lets say user A is coordinator of an event ,and users B, C and D are members of that event.
  • After completion of event , when users B, C and D open the event screen, a dialogue box should appear asking for reviews.

Create Events Screen

• The person who creates an Event becomes coordinator of it.
• In current UI, a single calendar is used to pick start and end date. This looks fancy but may confuse older adults. Also it will be very tough to add multilingual support here.
• Using 2 different calendars to pick dates solves the problem. Using table_calendar package solves problem of multilingual support.
• I have use cupertino buttons here as they are bold and big.
• I have not added all options here as I was short on time and had to complete the proposal before deadline.

Profile Screen

• I have added number of organizations joined and number of task completed.
• The "Number of Tasks Competed" acts as a reward system and motivates user to complete more tasks which infacts helps the community.
• This also increases user engagement.

The above section section of profile will be visible to public. This means that when someone taps on member info, he/she will be able to see this section of a particular user.