Mobile shopping apps are an essential component of any omnichannel commerce strategy. With over half of e-commerce sales occurring on mobile devices, brands and retailers looking to stay competitive need a way to engage shoppers in a more seamless manner than what is possible through a mobile website browser.
When people download a mobile app, they expect more than the standard shopping experience that's common on a computer. They expect an immersive and almost magical experience that warrants downloading the app and creating a direct connection with the brand.
To meet these expectations, there are numerous functional requirements that are vital to any modern shopping app. In this post, we'll examine these e-commerce requirements and how they fit together to create an e-commerce mobile app that your customers will love.
E-commerce Mobile App Requirements
1. Log in
Logging into a customer’s account should allow them to see their rewards status, order history, and payment information. When logging in for the very first time, the mobile app should remember the user’s information for subsequent sessions.
Log in fields should include username or email, and password. Users should have the option to use touch ID or face recognition to log in on subsequent visits. Users should also be able to log out of their account.
Users should have a home screen that is personalized to them. The homepage can be in a card design with each card representing a different action. The page should scroll to allow for additional cards that are stacked in the order of importance (personalized) to each customer.
From this home screen, the user should be able to access a settings menu and product search bar. They should also be able to access their product cart.
Users should have the ability to search for products and information while using the app. The search bar should be type ahead, allowing the user to get recommendations while they type and select the options that appear.
Users should be able to search for products and also information like shipping rates, return policies, sizing guides, etc.
In addition to type ahead, when a user taps on the search bar, a simple drop-down menu should appear that shows the user’s past searches, trending searches, and similar searches, and/or a streamlined site taxonomy. This would allow a user to tap an option instead of typing it out.
The search bar should also have a microphone that, when tapped, brings up the native Siri microphone tool so they can use voice to search.
The search bar should be sticky when the user reverses the scroll direction. This would allow the user to have more screen space as they scroll down, but also the ability to quickly access the search bar by simply reversing direction.
4. Search Results
Users should have the ability to see all of the products for a specific search term. When they land on the search results page the user should see high-quality images of the products they searched for, and basic product info. The search results page should be lazy loading so that the initial results appear fast, and then as the user scrolls, the page calls for additional products.
The customer also should have the ability to sort and filter the product search results based on the following criteria:
- Women, Men, Girls, Boys
- Size & Fit
- Price – High to low
- Price – Low to high
5. Browse/Product Taxonomy
Users should have the ability to browse the product catalog without having to search for a specific item. In order to make browsing easy, the mobile app should have browse entry points in multiple locations.
A browse entry point should be available within the app menu. When a user selects the menu, they should see a basic taxonomy (including gender, age, sale, etc) that allows them to enter a category.
Additionally, when a user taps on the search bar, they should have the ability to see a streamlined taxonomy allowing them to quickly jump into a product category or selection.
6. Product Info
When a user searches for a product or lands on a product detail page, they want to see all relevant information for a specific product.
Product information includes:
- Product Name
- Product images
- Ft information (size/fit)
- Shop the look
- Customers also love
- Promo information
7. Product Detail Pages
When a user lands on a product detail page, they should see all relevant information for that specific product.
In addition to the relevant product information, they should see all the product images that are associated with each product. The user should be able to scroll through the various images and tap on an image to enlarge it. The images should be high fidelity, large images of the products.
The user also needs the ability to see the associated product color options, and switch between each color. When they select a different color, they should see the color change reflected in the images. The user wants the ability to toggle the new images with the appropriate colors.
Additionally, the user wants the ability to see what sizes are available for the product they are looking at. The size/product/color combination availability should be reflected in the UI/UX so that the user can quickly understand which combinations are available.
Users also need the ability to add a product to their cart. When the user selects a product and adds the product to their cart. The cart icon on the page should update with a badge to reflect the product has been added to the cart. When the user adds a product to the cart, the add to cart button should change to “go to cart”.
Users also like the ability to add a product to their wish list from the Product detail page. If they select this option and are not logged in, the app should prompt them to log in to their account.
Users need the ability to quickly see the products they have in their cart. When the user selects the cart, they should land on a page that shows all of the products they have placed in the cart.
The information they should see includes:
- Product image
- Product name
From the cart, users want the ability to edit the products they have placed there. Tapping the edit button should bring the user back to the Product detail page. Users also want the ability to remove the product from their cart entirely.
The user should also see the price of the product and be able to update the quantity of each individual product they have in the cart.
Additionally, the user should also see the total price of all the products they have in the cart and how close they are to qualifying for free shipping or any other promotion.
Customers should also have the ability to enter a promotion code or gift/rewards card information.
Finally, the customer wants the ability to checkout from the cart. The customer should have multiple options to checkout.
- Secure checkout
- Buy with Apple Pay
Within the cart, customers also want the ability to select if they want to pick the product up in a store near them (BOPIS.) This should default to the nearest store to their phone, but the customer can also select to change the store.
If the customer selects that they want to pick the product up in a store, they then should have the ability to enter the information of the person picking up the order.
When the user selects secure checkout, they should have the option to sign in (if they are not already), continue as a guest. Signing in can be done by entering the user’s email address or password, or signing in with Touch ID / Facial recognition.
When a user enters secure checkout, they should have the option to enter their personal shipping information. Fields include;
- Full Name
Users should also have the ability to enter their payment information. The user should be able to type in the credit card information or take a photo of their CC.
Users also want the ability to select if their shipping information is the same as their billing. If they toggle the selection to no, they will then have the ability to enter a different billing address.
After the user enters all the relevant information they will then be prompted to confirm their order and then checkout.
Once the user checkouts, they should be prompted with a confirmation screen.
10. Customer Loyalty Dashboards
Customers want the ability to see their rewards profile. This profile should appear as a dashboard for the customer in a card design (same as homepage.) When the user enters the Loyalty screen, they should see their username, their loyalty number, and the total number of loyalty points they have.
When the user is looking at the total number of loyalty points they have, they should see it separated by the total number and the total number that is redeemable.
From this loyalty page, they should also see a card that shows how many rewards or coupons they have acquired in the past. This should appear to the user as a wallet.
The user should also be able to get information on the loyalty program. If they select the information button, they should see an overlay of the loyalty program.
11. Purchase History
From the menu, customers should be able to see their order history. Users want to see what they have ordered in the past and be able to revisit those products or check the status of orders.
The order history page should show all of their orders for the past 12 months, and also allow the customer to filter those orders. Filter options should include time (Years.)
When on the order history page, the user should see a product image, and the status of that order (processing, shipped, etc.) If the user taps on a product image, they should land on a more detailed view of the order.
12. Order Detail Page
If the user taps on the order details from within the purchase history, they should land on a page that includes a timeline of the order status, shipping information, order details.
If the user taps on order details, they should see an overlay of the order summary including
- Order date
- Order #
- Order price
- Payment information
- Billing information
- Shipping information
If the user taps on the product image, they should land on the Product detail page. Users should also be able to cancel the order from this screen.
Users want the ability to find more detailed secondary information. This information is in the menu. When a user enters the menu, they want to see all of the relevant information to themselves. Those items include:
- Purchase History
- Loyalty Dashboard
When the user taps on any of those items, they should enter the individual screens or flows.
14. Wish List
When a user wants to save products for a later date, they should be able to add them to their wish list.
When the user enters their wish list, they should see the product images of all the products they have added to their list.
When the user taps on a product in their wish list, they should see some options on how they can interact with that item. The user should see the product name, price, and they should also be able to visit the Product detail page, share the item, and even add the product to their bag.
At the bottom of the wish list, the user should have the option to add all of the products to their cart.
When a user taps on a link from a marketing email, push notification, or SMS marketing message, the user should be taken to the right page within the mobile app.
Users should have the ability to receive push notifications on their mobile devices. Basic transactional notification types include order status, promotions, and events.
Users should also have the option to unsubscribe from the push notification from within the settings screen.
17. Native Payment
Users should have the ability to pay within the app using Apple Pay or Android Pay.
Build an E-Commerce App Strategy
This post laid out the key e-commerce requirements for a mobile shopping app. If you want to learn more about building an e-commerce app, check out this detailed guide on how to create a successful app strategy and launch plan.