E-Commerce App Inspiration

[nicholasri]

RomeTwo

• What makes an e-commerce app?

  • Ability to purchase items
  • Ability to browse inventory
  • Ability to search inventory

• What kind of e-commerce do we want to do?

  • Steam Powered Store, but take design elements from existing apps
  • The current Steam Powered Mobile app, is just a mobile app that presents the mobile WEB view and is NOT a custom mobile experience

• Why this app? Why this way?

  • To learn how to make an e-commerce app in iOS
  • To learn how to make a cohesive product experience
  • To learn how we can implement different design elements - to make something beautiful and effective
  • To learn CoreData, Security, Apple Pay, etc

• Key Elements

  • Bottom Navigation Bar
  • Shop View
  • Product View
  • Order View (if necessary)
  • Curator Section
  • Cart
  • Search
  • Account (Settings)

• Bottom Navigation Bar

  • Row of buttons that navigate to the other key views
  • Img Ref: App Store 3, Apple 2, Foxtrot 2, Nike 4, Spotify 1

• Shop View

  • This is the main view
  • You should be able to NAVIGATE to any product from the TOP of this view
  • You can show RECOMMENDATIONS, NEW & TRENDING products
  • Shop Navigation View
    • Spotify Filtering (Img Ref: Spotify 2.png)
      • Rounded Capsule
      • Can do multiple filters
      • Genre: Free To Play, Early Access, Action Adventure, Casual Indie, MMO, Racing, RPG, Simulation, Sports, Straetegy
      • Categories: Top Sellers, New Releases, Upcoming, Specials, VR Titles, Controller Friendly
      • Can we do multiple filters? Should we show multiple rows of filters?

• Product View

  • This is the main view for PURCHASING a product
  • I would like for us to take main inspiration from the App Store - it is a very familiar design language on iOS and it is very beautiful, simple, and clean
    • Img Ref: App Store.png
  • The features I like those most
    • When you scroll down the page, the BUY button is persistent at the top of the screen. (App Store 1.png)
      • If our goal is to sell products, it should be really easy for customers to do so
    • I like the stats at a glance (Img Ref: App Store 2.png)
    • I like the ratings (Img Ref: App Store 2.png)
    • We can add ADD TO CART, WISHLIST, SHOP DLC functions as well
    • I like the rounded cards for pictures and videos (Img Reg: App Store 2.png)

• Order View

  • This view shouldn’t be necessary as most if not all purchases should not have any custom options.
    • Img ref: Foxtrot 1.png, Nike 1.png, Uber 4.png

• Curator Section

  • This section would have a “journal” style feel
    • Img ref: App Store 6, 7, 8
  • Contains a description of the game, some game footage, and about the creator
  • Why is this section import?
    • This section provides a different format for users to interact with games
    • This section could be used for user suggestions, could be used for NEW & TRENDING, and RECOMMENDATIONS
    • I feel like this view is a bit more personal and more approachable. It is less about the sell and more about the Discovery aspect
    • This view still contains a persistent GET or BUY button

• Cart

  • This purpose of this view is to walk through the user to complete a purchase
  • Purchases should be as easy as possible and we should lead with AUTOFILL and APPLE Pay
  • The rest of the page displays:
    • What items are being purchase
    • Adding or removing said items
    • Promo code
    • Shipping
    • A Default view if there are no items in the cart
  • Img ref: Apple 4, 5, 6.png, Foxtrot 6.png, Nike 5.png, Uber 5, 6.png

• Search

  • I would say this is a necessary function for most if not all e-commerce apps
    • For buying games, we definitely want this function
  • Can we have partial word search?
  • Can we find similar items?
  • What happens if we can’t find that product at all?
  • Do we offer search suggestions?
  • Can we only search by product name or can we also search by category and genre (maybe this is redundant because we can do this in the main SHOP view)
  • Img Ref: Apple 2.png, Foxtrot 2.png, Spotify 3.jpeg

• Account

  • Img Reg: App Store 9, Foxtrot 7, Instagram 1, Nike 7, Nike 8
  • Ability to modify or view:
    • Past Orders
    • Contact info (email, phone)
    • Payment
    • Extraneous stuff (legal and required docs)