top of page

Writing Sample User Stories for Housing Application


The following is the practice User Stories that I have written for the “Housing” mobile application, mostly for its search page.



Housing mobile application main screen


It has 9 User stories and 2 API user stories with the UI snapshot for reference. 


User Stories


  1. Search Screen Page UI Development (UI Dev)

  2. Search Screen Title

  3. Search Screen Address Bar 

  4. Search Screen Address Bar's Voice Assistant  

  5. Search Screen Current Location Search

  6. Search Screen Popular Localities 

  7. Home Page Pay Rent Button 

  8. Rent Page Screen 

  9. Home Page Category Selection



API User Stories


  1. Housing’s popularLocalities API Implementation 

  2. Housing’s addressDataCatergorized for Search Page API Implementation 



USER STORY 1 



Housing mobile application search page

 

Title: Housing’s Search Screen Page UI Development  

 

As a logged-in user, I want to see the search screen in the housing app after clicking the rent button on the home screen so that I can search for my requirements.

 

Description

  • The page to search screen on the app needs to be developed as part of this story. 

  • Once logged in, the user should be able to redirect and view the search screen page. 

  • The UI should be as per the attached Figma designs. Screenshots are also attached for reference. 

 

Acceptance Criteria

  • The UI of the "Search Screen" page should be as per the screenshot attached. 

  • The Figma link for reference is: <https:// link to be provided>. 

  • The logged-in user should be redirected to the "Search Screen" page when the rent button is clicked on the home page. 

  • The UI of the page is to be developed as per the provided information

    • Title area at the start of the page

    • Address search bar

    • Current location button

    • Popular localities reference area

    • An arrow button at the top right corner of the page The design is as per the attached UI mockups.

 


USER STORY 2

 


Housing mobile application search page


Title: Housing’s Search Screen Title  


As a logged-in user, I want to see the search screen with my preliminary search details in the housing app after clicking the rent button on the home screen so that I know what I have searched for. 

 

Description

  • Once logged in, the user should be able to redirect and view the search screen page with the required preliminary information. 

  • The UI should be as per the attached Figma designs. Screenshots are also attached for reference. 

 

Acceptance Criteria

  • The UI of the "Search Screen" page should be as per the screenshot attached. 

  • The Figma link for reference is: <https:// link to be provided>. 

  • The following information needs to be displayed from the top of the page; 

    • The default title text is as shown in the first line "You are looking to rent in" as per the design attributes.

    • The second default Title is as shown in the second line "Select Locality or Landmark in ABC" as per the design attributes. 

    • Here, the “ABC” is the default city selected during the registration i.e. user onboarding. E.g. Delhi, Noida, Bengaluru, etc.

  • An arrow button is to be provided at the top right corner of the page, where on clicking the "Arrow" button the app redirects the page to the home page. 

  • API endpoint to access the default city from the user data is: 

  • Reference Link    Swagger Documentation for API: <http://swaggerLink.com/userDefaultData> 

 


USER STORY 3



Housing mobile application search page
Housing mobile application search page


Title: Housing’s Search Screen Address Bar  


As a logged-in user, I want to see and use the address search bar in the search screen of the housing app so that I can search for locality, landmarks, or Projects to view the available apartments or buildings for renting purposes as per my requirements.

 

Description

  • The address bar is placed right below the second title ("Select Locality or Landmark in ABC") on the Search screen page. 

  • The user should be able to directly type in the text in the address bar and related data is shown as a list. The list is displayed based on the keyword relevancy by categorizing the output into three categories 

    • LOCALITY 

    • PROJECT 

    • LANDMARK 

with the required order in the above-stated manner i.e. Locality > Project > Landmark 

  • The UI should be as per the attached Figma designs. Screenshots are also attached for reference. 


Acceptance Criteria

  • The UI of the "Home Screen with address bar" page should be as per the screenshot attached. 

  • The Figma link for reference is: <https:// link to be provided>. 

  • The address bar is placed below the second title ("Select Locality or Landmark in ABC") 

  • Following is the information on the search bar field to be displayed: 

    • Selection from Address Drop-Down Value: 

      • Address Box: String input with a minimum of 3 characters to show any relevant information.

      • The address box should have auto-complete functionality.

      • Example Values: "Locality A", "Locality B", "Project C", "Landmark D. 

      • Validation: Relevant input is required that is searchable.

    • The drop-down list in the search bar should have the following;

      • Specify Region with keyword relevancy and in alphabetical order 

      • Specify Type i.e. LOCALITY or PROJECT or LANDMARK 

    • Search result information flow;

      • For LOCALITY: Complete address in two line

        • E.g. BTM 2nd Stage

        BTM Layout, Bengaluru


    • For PROJECT: Only the project name

    • E.g. BTM Residency

    • For LANDMARK: Landmark name in the first line and City name in the second line

      • E.g. BTM Bus Stop

        Bengaluru



USER STORY 4



Housing mobile application search page
Housing mobile application search page


Title: Housing’s Search Screen Address Bar's Voice Assistant  

 

As a logged-in user, I want to see and use the voice assistant (from Google) inside the address search bar on the search screen of the housing app so that I can search for rental property via voice command. 

 

Description

  • The voice assistant button is placed inside the address search bar. 

  • The user should be able to directly click on the voice assistant which redirects to Google speech services where the user via the voice inputs the value required for the search. 

  • The UI should be as per the attached Figma designs. Screenshots are also attached for reference. 

 

Acceptance Criteria

  • The UI of the "Home Screen with address bar" page should be as per the screenshot attached. 

  • The Figma link for reference is: <https:// link to be provided>. 

  • The voice assistant button is placed on the right edge inside the address search bar 

  • For the first-time app user: On clicking the voice assistant button, it asks for permission as per the default Android app configuration. 

  • For regular users: On clicking the voice assistant button a pop-up is displayed over the app where the required input content is directed to the Google Speech Service (default type in Android phone) 

  • The user posts input via voice and the page is redirected to the search result page. 

  • Further, the search input is stored in the database with the timestamp for future reference. 

  • API endpoint to be used to get the Google speech services: 

  • API endpoint to be used to save the user data is: 

  • Reference Link: 



USER STORY 5

            


Housing mobile application search page
Housing mobile application search page


Title: Housing’s Search Screen Current Location Search 

 

As a logged-in user, I want to see and use the "Use my current location"  in the search screen of the housing app so that the app can automatically search and display rental property near to my location. 

 

Description

  • A button "Use my current location" is placed below the address search bar. 

  • The user should be able to click on the "Use my current location" button, which calls the Android phone's internal location API and provides the current location. The input of the current location is used to provide relevant search details.  

  • The UI should be as per the attached Figma designs. Screenshots are also attached for reference. 

 

Acceptance Criteria

  • UI of the "Home Screen with Use my current location" page should be as per the screenshot attached. 

  • The Figma link for reference is: <https:// link to be provided>. 

  • The "Use my current location" button is placed below the address search bar. 

  • For the logged-in user, who has enabled location sharing:  

    • On clicking the "Use my current location", the Android phone's internal API of the current location is called. The internal API provides the current location.

    • The housing application uses the current location to redirect the page to the search page result with relevant nearby rental properties. 

    • For the logged-in user, who has not enabled location sharing:  

    • On clicking the voice assistant button a pop-up is displayed over the app with the following message "Housing Please allow us to access your location so that we can identify which locality you are in" 

    • Two buttons are displayed at the right edge on the bottom of the popup as "ok" and "Cancel" where;

      •  "ok" enables the location on an Android phone

      • "Cancel" closes the popup and does nothing. 

  • After clicking the "Use my current location" button, the housing app receives the current location data from the internal current location API and is redirected to the search result page. 

  • Further, the search input is stored in the database with the timestamp for future reference. 

  • API endpoint to be used to get the Google location services:  

  • API endpoint to be used to get the search data:  

  • API endpoint to be used to save the user data is:  

  • Reference Link:  

 


USER STORY 6

 


Housing mobile application search page
Housing mobile application search page


Housing mobile application search page



Title: Housing’s Search Screen Popular Localities 

 

As a logged-in user, I want to see Popular Localities based on my selected city in the search screen of the housing app so that I can get insights and search for popular localities in my city. 

 

Description

  • A "Popular Localities" section is below the "Use my current location" button as per the attached UI. A maximum of 6 popular localities is shown as a list. 

  • The user should be able to multi-select a maximum of five localities, which is shown in the address search bar. Further, a “Search” button is displayed at the bottom of the search screen page once a minimum of a single selection is made.  

  • UI should be as per the attached Figma designs. Screenshots are also attached for reference. 


Acceptance Criteria

  • UI of the "Housing’s Search Screen with Popular Localities" page should be as per the screenshot attached. 

  • The Figma link for reference is: <https:// link to be provided>. 

  • The "Popular Localities" is placed below the "use my current location" and uses the default city selected by the user to show the relevant details 

  • The popular localities list consists of a maximum of six relevant localities to be shown as per the UI design 

    • The first column shows the localities' details 

    • The second column is to show ₹ {current price} per bedroom  

    • The data for the list can be obtained by calling propertiesLocation API with the default city as the input parameter. 

  • A plus icon is placed at the beginning of each listed value of popular localities and has multi-selection functionalities.  

    • Once selected, the locality details will be displayed inside the address bar. 

    • A cancel (" X ") icon is displayed next to the selected localities in the address bar to deselect any already selected value. The deselected value will be displayed in the popular localities list post-deselection.  

    • A maximum of five (5) localities can be selected and displayed in the address bar 

    • A “Search” button is displayed at the bottom of the housing search screen page when a minimum of one value is selected.

    • If all the selected value is removed, the search button should disappear. 

    • On clicking the search button, the page is redirected to the search result page.

  • Post-search, the input data is stored in the database with the timestamp for future reference. 

  • API endpoint to be used to get the popular localities data: 

  • API endpoint to access the default city from the user data is: 

  • API endpoint to be used to save the user data is: 

  • Reference Link: 



USER STORY 7



Housing mobile application main screen



Title: Housing’s Home Page Pay Rent Button 

 

As a logged-in user, I want to see an animated "Pay Rent" button on the home page of the housing app so that I can quickly direct myself to the rent page to pay for the rented properties. 

 

Description: 

  • A "Pay Rent" button is visible at the top right corner of the home page.

  • The user should be able to click on the "Pay Rent" button which will redirect the page to the rent page. 

  • UI should be as per the attached Figma designs. Screenshots are also attached for reference. 


Acceptance Criteria: 

  • UI of the "Housing Home Page" page should be as per the screenshot attached. 

  • The Figma link for reference is: <https:// link to be provided>. 

  • The "Pay Rent" button is placed on the top right corner of the home page to the left of the profile logo. 

  • The "Pay Rent" button is animated as per the attached reference file.  

  • On clicking the "Pay Rent" button it redirects the page to the rent page.  

 


USER STORY 8



Housing mobile application search page

 

Title: Housing’s Rent Page Screen 

 

As a logged-in user, I want to access and view a Rent Page in the housing app so that I can pay rent to my properties and conduct related tasks like a security deposit or maintenance payment.  

 

Description

  • A Rent Page I.e. a screen needs to be developed and accessed via the "Pay Rent" button on the home page of the housing application.  

  • The user should be able to view and conduct multiple tasks related to rent payment like paying rent, security deposit, maintenance payment, etc.  

  • UI should be as per the attached Figma designs. Screenshots are also attached for reference. 


Acceptance Criteria

  • UI of the "Rent Page" screen should be as per the screenshot attached. 

  • The Figma link for reference is: <https:// link to be provided>. 

  • The Rent page is divided into two sections 

    • Rental Payments - It is the header as well for the section 

      • Has the following options available 

        • House Rent 

        • Office Rent 

        • Security Deposit 

        • Booking Token 

        • Maintenance 

        • Brokerage 

    • Education Payments - It is a header as well for the section 

      • Has the following options 

        • Education Fees 

    • All the above are clickable buttons that redirect the current page to its specific page. 

    • Default Behavior: When the logged-in user is directed to the Rent Page, the "House Rent" button is default selected with a background color filled in blue (Please refer to UI Designs), whereas the other buttons have a greyish-black background (Please refer to UI Designs). 

    • Only one single option is to be selected i.e. multi-options selection shouldn't be available  

    • When selection is shifted from one button to another, the feedback is shown in the UI via the change of color for active selection from greyish-black to blue whereas the previous selection is from blue to greyish-black. All other options remain in the same default state i.e. greyish-black color.  

  • Labelling Availability: Label options above the icon of the respective button should be provided and dynamic, such that the written content can be modified, added, or deleted as per requirements.  

    • The current requirement for labeling is as per the UI design provided in Figma and mentioned below for better clarity 

      • House Rent: Label - "POPULAR" 

      • Education Fees - "Flat 20%" 

  • Advertisement Section: Below the Education Payments section, an advertisement section as a block should be available to run advertisements on a timely basis.  

    • The advertisement section is a set of images accessed from the AdsCurrentOffer API 

    • The images are displayed in the form of a running gallery as per the given UI designs 

  • "Continue" button 

    • The button is available at the bottom of the Rent Page 

    • Depending on the selected options, it redirects the Rent Page to the required page. 

  • A back "arrow" icon cum button is provided on the top left corner of the Rent Page as per the UI design. After clicking it, it redirects the Rent Page to the Home Page of the housing Application.  

  • A default message is permanently displayed to the right of the arrow button 

    • The content of the message is "Select a category to pay via Credit Card" 

  • API endpoint to be used to get the current advertisements or offers: 

  • Reference Link: 



USER STORY 9

 


Housing mobile application main screen


Title: Housing’s Home Page Category Selection  

 

As a logged-in user, I want to see available categories related to real estate properties on the Home Page of the housing app so that I can get insights on available options and quickly select one as per my need. 

 

Description

  • A category selection section with multiple options as a button is displayed primarily on the home page of the housing application.  

  • The user should be able to select the required option and move to the respective page based on the requirements. 

  • UI should be as per the attached Figma designs. Screenshots are also attached for reference. 


Acceptance Criteria

  • UI of the "Home Page with categories as options" screen should be as per the screenshot attached. 

  • The Figma link for reference is: <https:// link to be provided>. 

  • The section with the required options is placed below the default city as per the given UI designs. 

    • The Categories Section has the following options as a clickable button  

      • Buy 

      • Rent 

      • Commercial 

      • PG 

      • Plot 

    • All the above are clickable buttons that redirect the current page to its specific page. There is a change in the Home Page layout based on the category selected.

    • The categories are placed one after the other in a horizontal style while covering and going beyond the available page bandwidth. The order of the placement from left to right is based on the order listed above.  

    • The entire section can be dragged or moved from right to left or vice versa to show other hidden categories and selections. (please refer to UI Designs)

  • Default Behavior: When the logged-in user is directed to the Home Page, A default category button is pre-selected based on the default data provided by the user at the time of registration or onboarding. 

    • The default selected category is with a background color filled in white (Please refer to UI Designs), whereas the other buttons have greyish transparent background (Please refer to UI Designs). 

    • Only one single option is to be selected i.e. multi-options selection shouldn't be available  

    • When selection is shifted from one button to another, the feedback is shown in the UI via the change of background color for active selection from greyish-transparent to white whereas the previous selection is from white to greyish-transparent. All other options remain in the same default state I.e. greyish-transparent. 

  • API endpoint to access the default category from the user data is: 




API USER STORIES 

 

USER STORY OF API 1 


Title: Housing’s popularLocalities API Implementation 

 

Title: As an application user, I want an API to get the list of Popular Localities for a specific City so that I can get insights into the popular places people are looking to stay.

 

Description: 

The popularLocalities API is needed to show the relevant popular areas on the search page of the Housing App. It should be configurable to get the popular area data for any city

By default, it should show the latest 6 popular area data. 


Acceptance Criteria: 

  • API URI: {base url}/popularLocalities/{city} 

  • HTTP Method: GET 

  • Path Parameters: 

    • City: Specifies the name of the city for which the popular area data needs to be returned. 

      • Mandatory field 

      • Type: string 

      • All the states and cities in India shall be available to select.

      • Example Values (for ref): "Mumbai", "Noida", "Bengaluru" 

      • Validation Messages: "City is missing", "Invalid city", “City currently not serving”.

  • Query Parameters: 

    • perPage: specifies the maximum number of records to return in one request.

    • Type: Integer (number) 

    • Possible values: 1 to 100 

    • Default Value: 6 

  • Response Body: 


Response Code: 200 - Success 

 "apiInfo": { 

 "version": "1.0", 

 "timestamp": 1879374933 

}, 

 "message": "Success", 

 "popularLocalities": [ 

  { 

    "localityName": "HSR Layout", 

    "refPricePerBedroom": "13.1k" 

  }, 

  { 

    "localityName": "Koramangala", 

    "refPricePerBedroom": "10.7k" 

  }, 

  {...} 

 ] 


  • API Validation


Response Code: 400

"apiInfo": { 

"version": "1.0", 

"timestamp": 1879374933 

}, 

"message": "Bad Request Body", 

"description": "Invalid request body", 

"errors": [{}] 


Response Code: 401

"apiInfo": { 

"version": "1.0", 

"timestamp": 1879374933 

}, 

"message": "City is missing", 

"description": "The searched city is not there in the current database.", 

"errors": [{}] 


Response Code: 402

"apiInfo": { 

"version": "1.0", 

"timestamp": 1879374933 

}, 

"message": "Invalid City", 

"description": "The city entered for search is invalid or doesn’t exist", 

"errors": [{}] 


Response Code: 406

"apiInfo": { 

"version": "1.0", 

"timestamp": 1879374933 

}, 

"message": "City currently not serving", 

"description": "The city entered is out of scope", 

"errors": [{}] 


Response Code: 403 

 "message": "Forbidden" 


Response Code: 500 { 

"apiInfo": { 

"version": "1.0", 

"timestamp": 1879374933 

}, 

"message": "Server side error", 

"description": "The server is currently not available", 

"errors": [{}] 

}  


 



USER STORY OF API 2 

 

Title: Housing’s addressDataCatergorized for Search Page API Implementation 

 

As an application user, I want an API to get the list of areas (addresses) with the category for a specific city while searching in the address bar so that I can select the area I am looking for.

 

Description


The addressDataCatergorized API is needed to show the relevant areas with their category in the search page of the Housing App while value is typed ({searchTerm}) in the address search bar i.e. auto-complete functionality. 


It should be configurable to get the relevant area for any city with the required search value I.e. string. The search list will be triggered post input of a minimum of 3 characters. 

By default, it should show the latest 10 address data with category. 


Acceptance Criteria: 

  • API URI: {base url}/addressDataCatergorized /{city}/{searchTerm} 

  • HTTP Method: GET 

  • Path Parameters: 

    • City: Specifies the name of the city for which the address data needs to be returned. 

      • Mandatory field 

      • Type: string 

      • Validation Messages: "City is missing", "Invalid city",  “City currently not serving”

  • Search Term: Specifies the city name for which the address data needs to be returned. 

    • Mandatory field 

    • Type: string 

    • Example values: "Btm", "abc", "layout" 

    • Validation Messages: "Search Term is missing", "Invalid Search Term" 

  •   Query Parameters: 

    • perPage: specifies the maximum number of records to return in one request.

    • Type: Integer (number) 

    • Possible values: 1 to 100 


  • Response Body


Response Code: 200 - Success 


 "apiInfo": { 

 "version": "1.0", 

 "timestamp": 1879374933 

}, 

 "message": "Success", 

 "addressDataCatergorized": [ 

  { 

    "subAreaName": "BTM 2nd Stage", 

   "AreaName": "BTM Layout", 

    "city": "Bangalore", 

   "ProjectName": " ", 

   "landMarkName": " ", 

    "addressCategory": "LOCALITY" 

  }, 

  { 

    "subAreaName": " ", 

   "AreaName": " ", 

    "city": " ", 

               "ProjectName": "BTM Delite ", 

    "landMarkName": " ", 

    "addressCategory": "PROJECT" 

  }, 

  { 

    "subAreaName": " ", 

   "AreaName": " ", 

    "city": " ", 

               "ProjectName": " ", 

    "landMarkName": " BTM Water Tank Bus Stop ", 

    "addressCategory": "LANDMARK" 

  }, 

  {...} 

 ] 


  • API Validation


Response Code: 409


"apiInfo": { 

"version": "1.0", 

"timestamp": 1879374933 

}, 

"message": "Search term is missing", 

"description": "There is no search term to be searched for", 

"errors": [{}] 


Response Code: 410


"apiInfo": { 

"version": "1.0", 

"timestamp": 1879374933 

}, 

"message": "Invalid Search Term", 

"description": "The search data entered is not valid", 

"errors": [{}] 


Response Code: 403 

 "message": "Forbidden" 

}  


 


AI generated Indian programmer WFH

 


ความคิดเห็น


bottom of page