Open Flutter Project: E-commerce App Use-Cases and Features
We are moving to the Flutter Clean Architecture within our E-commerce App. That brings us to a different level of abstractions. This approach has its own benefits and brings some complexity to the app development. It is hard to move on without any documentation and list of features available in the app. We have a distributed team is all over the world and need a concrete game plan to complete the app within the scheduled time. The best way to proceed right now is to describe each use-cases that we will have within our app. The use-cases should be simple to reflect a separate task and clear enough for a developer to start implementation. Therefore we decided to describe all the actions use can do in the app in a list of detailed and short use-cases. Let’s dive into them.
1. Home Screen
1.1. Home Screen 1 use-case: Use loads the app, list of new products for home page are loaded and displayed in the app.
1.2. Home Screen 2 use-case: Use loads the app, list of new products and products for sale for home page are loaded and displayed in the app.
2. Categories and Products
2.1. Display category list use-case: Use on the home page clicks “View All”, categories are loaded and displayed in a list. Then use clicks view all items at the top list of categories and gets to a page of categories in a tile view with tabs.
2.2. Display product list use-case: From the category list use clicks on a category and gets to the list of products in the list view. Use clicks on tile view
and gets to product list in a tile view.
2.3. Sort products use-case: use clicks on sort by filter
and use list is reloaded in sorted according to selection.
2.4. Filter products use-case: User clicks on filters and gets to product filters screen, selects filters and clicks apply. The changes are applied and products are filtered accordingly. User clicks on Filters, selects filters and clicks discard. The products are filtered without changes.
2.5. Filter products by brand: User clicks on Filters, then clicks on brands, selects brands and clicks apply. The list of products is filtered according to selected brands. User clicks on Filters, then clicks on brands, selects brands and clicks discard. The products are filtered without changes.
2.6. Hashtag filter use-case: Use clicks on one of the hashtag buttons at the top and sees list of products filtered by that tag.
Product categories and product list discussions.
3. Product details screen
3.1. Product view use-case: User clicks on product tile or list element and gets to according product screen. List of common products is loaded at the bottom of the screen.
3.2. Add product to favorites use-case: User clicks on favorite button on the product details screen, the popup with size and color selection appears, user selects size and color and clicks “Add to Favorites”. The product is added to favorites, favorite button changes to selected view and size and color changes on product details screen.
3.3. Add product to cart use-case: Use clicks on product details screen, a popup with color and size selection appears, user selects size and color and clicks “Add to cart”. Product is added to cart table (local database) with selected size and color and user being redirected to Product Cart Screen with list of added products with according selection.
4. Product reviews screen
4.1. Product Review List use-case: User clicks on start rating on the product details screen. List of review is loaded with summary at the top. An API call is made to update list of review for current product. New Reviews are shown at the bottom.
4.2. Filter by photos use-case: User clicks “with photos” checkbox. If checked then only reviews with photos are displayed. If unchecked then all reviews are shown.
4.3. Write a review use-case: User clicks “Write a review” button. A popup appears with ability to add review, rating and photos. User clicks button to add new review. The review is added to local database. User is redirected to the list of reviews for current product. API call is made to add review to the server.
5. Product Cart screen
5.1. Product cart use-case: List of products in the cart is displayed. If there is a promo code set as default and was not used yet then it is applied to current order in the cart.
5.2. Change product quantity use-case: User clicks on “+” or “-” buttons and changes quantity. The cart item price changes and total amount changes.
5.3. Add product cart item to favorites use-case: User clicks on top right icon of the product cart item and clicks “Add to Favorites” in the popup. The product is added to favorites with the same color and size as the cart item.
5.4. Remove from cart use-case: User clicks on top right icon of the product cart item and clicks “Remove from Cart”. The item is removed from cart and local database cart. Total amount is recalculated.
5.5. Enter promo code use-case: User clicks on button next to “Enter your promo code”. The promo code popup appears with the list of promos available for the user. User can enter promo code into the input in the popup or click “Apply” button in the promo tile. If the code entered in the input is valid or user clicked “Apply” button then the popup hides and selected promo code appears in the “Enter your promo code” input. The discount is applied to each product (product price is crossed and new price shown) and affect total amount.
Product cart and checkout discussion.
6. Checkout screen
6.1. Checkout start screen use-case: User clicks “Checkout button” from the Cart Screen and gets to Checkout screen. The default shipping address, payment method and delivery method is displayed. The delivery price is added and affect the Summary.
6.2. Checkout change shipping address: User clicks “Change” in the shipping address tile on the Checkout Screen. List of shipping addresses is displayed.
6.3. Add new shipping address in the checkout use-case: User clicks “+” button on the shipping address list screen in the checkout. The Add Shipping Address Form appears. User fills in the form, fields are validated to be at least 3 chars long. User clicks “Save Address”. The shipping address is added to local database. User is redirected to back to list of shipping addresses.
6.4. Change shipping address in the checkout use-case: User clicks “Use as shipping address” checkbox in the list of shipping addresses in the checkout. The new shipping address is set for the order. User is redirected to checkout start screen.
6.5. Edit shipping address in the checkout use-case: User clicks “Edit” link in the shipping address tile in the checkout. User is redirected to form to edit details on shipping address. The fields are validated to be at least 3 chars long. User edits fields, clicks save, shipping address is updated in local database. User is redirected back to list of shipping addresses in the checkout.
6.6. Checkout change payment method use-case: User clicks “Change” in the payment method tile. List of available payment methods is displayed. User clicks on “Use as default payment method” and changes default payment method and for the current checkout process.
6.7. Add payment method in checkout use-case: Use click “+” button in the list of payment methods. The form to add new card is displayed. User adds card information with validation and clicks “Add Card”. The card is added to local database and set as payment method for the checkout process. User is redirected to checkout start screen.
6.8. Change delivery method in the checkout use-case: User clicks on one of the delivery methods available in the “Delivery Method” section of the screen. The delivery price changes and affects summary.
6.9. Submit order use-case: User clicks “Submit order” in the checkout start page. Request to server is made and the card is used to pay and returns success/error. The order is submitted to the backend too. If the payment was successful user is redirected to success screen. If an error appears user stays on the checkout start page with an error message “Payment was not processed.” (answer from the backend).
Product cart and checkout discussion.
7. Product Favorites Screen
7.1. Favorite product listing use-case: User clicks favorite icon at the bottom menu. The list of favorite products is displayed from local database. User clicks on tile view and tile view is displayed with all the latest price updates.
7.2. Favorite product filter use-case: User selects filters and clicks “Apply” button. Products in the favorite list are filtered according to selected filters. User selected filters and clicks “Discard”. Nothing changes.
7.3. Favorite product sort user-case: User clicks sort by. The popup with sort by options appears. User clicks variant of sorting (current variant can be selected). Products in the favorite list are sort according to selected value.
7.4. Remove product from favorites use-case: User clicks delete icon in the top right corner of the favorite product tile. The product is removed from local database and the list.
7.5. Add favorite product to cart: User clicks “Add to cart” icon
in the list of favorite products. The product with size and color is added to cart (local database) and user is redirected to product cart screen.
7.6. Hashtag filter use-case: Use clicks on one of the hashtag buttons at the top and sees list of products filtered by that tag.
8. Sign In / Sign Up Screens
8.1. Sign in using email use-case: User enters email and password. The credentials are checked on the server (call to server API). If login was successful then user is redirected to home screen. If an error appeared then user sees error message.
8.2. Sign up using google account use-case: User clicks google icon, user google account credentials are checked. Successful result creates an account for the user locally and makes an API call to the server to add new account. User gets redirected to the home screen.
8.3. Sign up using Facebook account use-case: User clicks Facebook icon, user Facebook account credentials are checked. Successful result creates an account for the user locally and makes an API call to the server to add new account. User gets redirected to the home screen.
8.4. Send password reminder use-case: User enters email on the Forgot Password Screen and clicks “Send” button”. A Server API call is made to check if use exists and to send forgot password email. If it is successful user is sees message from the server (like “An email with password reminder was sent to email@mail.com”). If an error appears user see that error.
8.5. Sign up use-case: User fills in the fields on the Sign Up Screen and clicks “Sign Up” button. API request is made to create new user account. If successful then local record for that user is created and user is redirected to home screen. If an error appears then user sees it on the Sign Up Screen.
9. My Orders Screens
9.1. My orders use-case: User click “My Orders” on the Profile Screen. User is redirect to list of user orders from local database. An API call is made to the server to check for new orders. Top tab clicks (Delivered, Processing, Cancelled) shows according list of orders.
9.2. My order details user-case: User click “Details” button in the order tile on My Orders Screen. User is redirected to Order Details Screen. An API request is made the server to check updates for that order.
9.3. Reorder user-case: User clicks “Reorder” button on the My Order Details Screen. All products with parameters are added to the cart. Previous products already added to the cart stay there too. User is redirected to Product Cart Screen.
9.4. Leave feedback use-case: User clicks “Leave Feedback” button on My Order Details Screen. A popup with an input and a text area to enter feedback appears. User enters title and text for the feedback and clicks add. The feedback is sent to the server. User is redirected back to the My Order Details Screen.
10. Shipping Address Screen
10.1. Shipping address in the profile use-case: User clicks “Shipping addresses” on My Profile Screen List of shipping addresses is displayed. If there are no shipping addresses available then user is redirected to the Add New Shipping Address Form Screen.
10.2. Add new shipping address in the profile use-case: User clicks “+” button on the shipping address list screen in the list of shipping addresses. The Add Shipping Address Form appears. User fills in the form, fields are validated to be at least 3 chars long. User clicks “Save Address”. The shipping address is added to local database. User is redirected to back to list of shipping addresses.
10.3. Change default shipping address in the profile use-case: User clicks “Use as shipping address” checkbox in the list of shipping addresses in the checkout. The new shipping address is set for the order. User stays on the same screen.
10.4. Edit shipping address in the profile use-case: User clicks “Edit” link in the shipping address tile in the list of shipping addresses. User is redirected to form to edit details on shipping address. The fields are validated to be at least 3 chars long. User edits fields, clicks save, shipping address is updated in local database. User is redirected back to list of shipping addresses in the profile.
10.5. Remove shipping address in the profile use-case: User clicks “Remove” button in the list of shipping addresses in the profile. The shipping address is marked as removed from the database and according API call is made to the server. User is redirected to Add New Shipping Address Form if there is no shipping addresses left.
11. My Payment Methods
11.1. Payment Methods in the profile use-case: User clicks “Payment Methods” on My Profile Screen. List of available payment methods is displayed. If there are no payment methods available user is redirected to New Payment Method Form.
11.2. Change default payment method in the profile use-case: User clicks on “Use as default payment method” and changes default payment method.
11.3. Add payment method in the profile use-case: Use click “+” button in the list of payment methods. The form to add new card is displayed. User adds card information with validation and clicks “Add Card”. The card is added to local database. User is redirected to the list of payment methods.
11.4. Remove payment method in the profile use-case: User clicks remove button in the list of payment methods. The confirmation popup appears. User selects cancel button. The Payment method stays. User clicks remove button in the list of payment methods. Confirmation popup appears. User clicks “Confirm” button and payment method is removed. According API call is made.
12. My Promo Codes
12.1. Promo Codes in the profile use-case: User clicks “Promo codes” on My Profile Screen. An API call is made to get list of promo codes. List of promo codes is displayed with “Apply” button.
12.2. Apply Promo Code from the profile use-case: User clicks “Apply” button in the list of My Promo codes. The promo code is applied to current cart. If there is no products in the cart then promo code is set as default to be used in the future.
13. My Reviews Screen
13.1. Reviews list use-case: User clicks “My Reviews” in the profile and sees list of reviews from local database. The remote API is called to pull other reviews of current user. They are added at the bottom once loaded.
13.2. Remove my review use-case: User clicks “Remove” button in the list of “My Reviews” in the profile. The confirmation popup appears. If the removal is confirmed then the review is removed from local database and remote API call to remove it from the server is called.
14. Profile Settings Screen
14.1. Profile Settings use-case: User clicks “Settings” in My Profile. Settings screen is displayed.
14.2. Change profile use-case: User changes full name field. Updates are saved locally.User changes date of birth field. Updates are saved locally.
14.3. Change notification use-case: Use changes notification for sales, new arrivals or delivery status changes. When changed from ON to OFF a confirmation popup appears and only if confirmed then changed to OFF.
14.4. Update remote profile settings use-case: User leaves Settings Screen. A remote API call is made to update settings.
Questions for discussions
- Should we synchronize the product list, details and review in the background? How often that should happen?
- Should we synchronize anything else in the background?
The list of use-cases above will be solved as separate issues in our GitHub. Check it out.
Regards,
Andrey
