Notes for App Dev

App Prototype Usage Tips

Please follow how this App Prototype looks like and works like during development, including those micro-interactions and -animations.

  1. Install on your mobile for a realistic app experience.
  2. This prototype is best optimized for iPhone only.
  3. Inspect details of this prototype on desktop browsers that do not have min font size restriction by default. You can turn that off but Safari and Firefox are recommended as they do not have this restriction by default.
  4. Important! The app should support 320px to 479px width on mobile, and max 834px on tablet. For mobile spec, please inspect below 479px of width on desktop browser. Some specs designed for tablets can be different.
  5. Most icons are in SVG format, you can simply copy the <svg> codes to a text editor and save as .svg files on demand. Use a browser extension to grab them easily.
  6. GitHub Lib: SVG library for React Native
  7. GitHub Lib: Lottie wrapper for React Native

Dev Notes

Additional materials:

  1. App Views Map of this prototype, similar to a sitemap.
  2. Remarks of app functions design
  3. Image assets, but not include inline SVG icons.

Scenarios that this prototype may not fully demonstrate:

  1. Planning to make design of Wine Details view a lot different than inventory page.
  2. Quick Edit feature on Wine Inventory page should be initiated one cellar by one cellar (initiate multiple of them is allowed). Bottle counting changes instantly. "Save Changes" needs to be saved one by one as well.

Features that are not for MVP

  • The Vault and Storage: not now
  • Order Services: not now
  • My Investment: not now
  • Edit Profile > Username
  • Taste Profile: We may simply collect and save user's preferences first, but will not use for any feature at this moment.

Prototype Major Updates Log

v6.0.0 ~

  1. Compatible on most Android devices. Please reinstall.

v5.6.0 ~ v5.9.9

  1. Structure overhauled. Please re-install the prototype.
  2. Adaptive layout for iPad.
  3. Defined the types, logics, and experiences of different search scenarios.
  4. Search results layouts.
  5. Use of system fonts as fallbacks, better for non-English.

v5.0.0 ~ v5.5.9

  1. Log in and sign up interfaces.
  2. Overall adjustment of spacing between elements.
  3. Removed excessive wine and cellar details.

v4.5.4 ~ v4.9.9

  1. More sub-pages for options inside Settings.
  2. Welcome Splash Screen.
  3. Delete cellar UI and procedure.

v4.3.0 ~ 4.5.3

  1. Added: Wine Inventory page from searching Collection
  2. Introduced inventory "Quick Edit" experience.
  3. Changing profile pic now has an icon.

Not yet...

  1. Add wine: Add bottles or cases, and add to a cellar
  2. Less wine: + > Consume
    Transfer wine??
  3. Sign-up > First-time app user setup
  4. Add to a Wine List
  5. Security > Change Password
  6. Messages / Notifications
  7. Grid view of Collection screen
  8. Pages with no items yet