diff --git a/docs/DeveloperGuide.md b/docs/DeveloperGuide.md
index 6659e3a45de..c5d56a4d18a 100644
--- a/docs/DeveloperGuide.md
+++ b/docs/DeveloperGuide.md
@@ -196,50 +196,40 @@ and removes it from the database.
If the deleted Elderly or Volunteer has existing pairing, the associated
pairs will be automatically removed as well.
-### Command Recommendation and Autocompletion
+### Command Recommendation and Autocompletion of Field's Prefixes
-Autocompletion and command recommendation are crucial features that help to improve the user experience when interacting
-with our application. By predicting the set of words that the user intends to type based on a preset of words such as
-in-built commands and field prefixes, the `CommandRecommendationEngine` helps to save user's time and effort while
-ensuring accuracy.
+Both autocompletion and recommendation is facilitated by `CommandRecommendationEngine.java`. The Logic component registers
+individual command parsers, which implement the Parser interface, to enable recommendations of command inputs. Each parser,
+such as `{XYZ}CommandParser`, specifies how recommendation should differ for a specific command by overriding the
+`Parser#getCommandInfo` method. When the user types a valid command, the `CommandBox` UI component detects the keystroke
+through its `KeyPressedHandler` and triggers the `CommandRecommendationEngine#generateCommandRecommendations` method.
+This method then returns the relevant recommendations. When a `KeyEvent.TAB` event is triggered, autocompletion builds
+on the method and replaces the user input with the recommended values.
-#### Implementation
+Using the longest prefix match algorithm, the engine first **identifies** the related command and then **verifies** the
+fields associated with it. If there are ambiguities in the recommendations, the recommendation will rank the commands
+using lexicographical ordering.
-To provide autocompletion, the `CommandRecommendationEngine` uses an event listener attached to the `commandTextField`
-When the `TAB` key is triggered, it autocompletes the user's input by replacing the input with the recommended values.
-
-Similarly, to provide recommendations, an event handler, which parses the user input and returns the recommendation, is triggered
-on each key pressed. Using the longest prefix match algorithm, the engine first **identifies** the related command
-and then **verifies** the fields associated with it. If there are ambiguities in the recommendations, the recommendation
-will rank the commands using lexicographical ordering.
-
-To facilitate the implementation, `CommandRecommendationEngine` uses the concept of **Full Attribute** commands and
-**Complete** commands. A _Full Attribute_ command means that all fields of the command, optional and compulsory,
-have been specified. On the other hand, a _Complete_ command indicates that a command has been fully typed, but the arguments
-may or may not have been entered. This distinction helps the engine to provide more accurate recommendations based on the user's input.
+In order to simplify implementation, we differentiate between two types of commands: "Full Attribute" commands and "Complete" commands.
+A "Full Attribute" command is one in which all the fields, both optional and required, have been specified.
+A "Complete" command, on the other hand, means that the command has been fully typed, but the fields may or may not
+have been entered. This distinction assists the engine in giving more precise suggestions based on the user's input.
The following activity diagram describes the activity flow:
-Adding on, the same event handler can be used to provide immediate input validation. Developers can choose to customize the
-behaviour of the validation for each command. This feedback mechanism helps to minimize errors and ensure that users
-input the correct command attributes.
-
-Finally, the `CommandRecommendationEngine` provides a `registerCommandInfo` method that allows developers to register new commands
-and turn on command recommendation for them. This flexibility ensures that the engine can adapt to changes in the application
-and provide accurate recommendations even as the application evolves.
-
#### Design considerations
Aspect: How recommendation executes:
-- Alternative 1 (current choice): Using a `LinkedHashMap` for word search
- - Pros: Quick and Easy to implement.
- - Cons: May have performance issues in terms of memory usage.
-- Alternative 2: Using a `Trie` for word search
- - Pros: Will use less memory (Only required to store unique prefixes).
- - Cons: Relatively harder to implement, and might introduce bugs.
+**Alternative 1 (current choice)**: Custom recommendations for each command
+ - Requires each `{XYZ}CommandParser` to override the `Parser#getCommandInfo` method, specifying the exact behaviour on how recommendations should behave.
+ - Recommendations will be more relevant to the current command, and user input can be validated against the set of possible prefixes specified in the overridden method.
+
+**Alternative 2**: Store all possible prefixes and recommends based on user input
+ - Cannot enforce that user only inputs relevant prefixes as there is no reference as to what the "correct" prefixes are.
+ - Likewise, such design is unable to recommend all relevant attributes, which can greatly reduce the user experience.
### Edit by index & NRIC
diff --git a/docs/UserGuide.md b/docs/UserGuide.md
index ac7a9e716d6..de9c2849389 100644
--- a/docs/UserGuide.md
+++ b/docs/UserGuide.md
@@ -3,19 +3,23 @@ layout: page
title: User Guide
---
-## Table of Contents
+
-* Table of Contents
-{:toc}
+FriendlyLink **streamlines volunteer and elderly management** for single administrators of small VWOs.
+With FriendlyLink, administrators such as yourself can easily manage your data and pair volunteers with the elderly
+as you wish, all through an intuitive, user-friendly interface. Our goal is to make volunteer and elderly management
+simple, efficient, and effective, so that you can focus on making a difference in your communities.
-----------------------------------------------------
+With our easy-to-use **text-based interface** and contact management features, say goodbye to manual record-keeping and
+hello to a more efficient and organised way of managing the volunteers’ and elderly’s contact details!
-## Introduction
-FriendlyLink **streamlines volunteer and elderly management** for single administrators of small VWOs. With FriendlyLink, administrators such as yourself can easily manage your database and pair volunteers with the elderly as you wish, all through an intuitive, user-friendly interface. Our goal is to make volunteer and elderly management simple, efficient, and effective, so that you can focus on making a difference in your communities.
+----------------------------------------------------
-With its easy-to-use **text-based interface** and contact management features, say goodbye to manual record-keeping and hello to a more efficient and organised way of managing the volunteers’ and elderly’s contact details.
+## Table of Contents
+{:.no_toc}
-With FriendlyLink, you can record elderly and volunteer information and pair them up automatically. You can also update and delete records easily, and see a summary of all records in FriendlyLink!
+* Table of Contents
+{:toc}
----------------------------------------------------
@@ -502,7 +506,8 @@ Examples:
### Command Recommendation
FriendlyLink provides command recommendations for registered [commands](#command) and [field's](#field) [prefixes](#prefix).
-This feature helps to facilitate user input, therefore achieve better efficiency and input accuracy.
+Autocompletion and command recommendation are crucial features that help to improve the user experience when interacting
+with our application.
diff --git a/docs/images/Banner.png b/docs/images/Banner.png
new file mode 100644
index 00000000000..d5463113a2b
Binary files /dev/null and b/docs/images/Banner.png differ
diff --git a/docs/images/Ui.png b/docs/images/Ui.png
index 7c133ef1f8f..eadac4b1d76 100644
Binary files a/docs/images/Ui.png and b/docs/images/Ui.png differ