We have a mockup at https://networksense.proto.io/share…86b61a&v=8. Currently, there are Magnet apps in both the iOS App Store and Google Play, but they don't include our new visual identity (as found on the website). We want to dramatically improve what we have now.
We are looking for designs for the 5 most important views:
1. Location Details Page, Shopping Cart Page, Invoice Page
2. Nearby Page
3. Profile Page
1. Location Details Page, Shopping Cart Page & Invoice Page
Please find the attached sketch and completely disregard the color scheme. Use it to simply understand the content structure we are looking. We hope users will get to this page after double-tapping the notification on their locked dashboard (image also attached). This will be the primary view that visitors will use to get information and interact with services at the space. Tapping the 'short-description' should open up a full description (maybe accordion style?) with paragraphs and photos. Tapping the 'address' should open up a map. The feature images can be swiped left and right.The campaign call-to-action button will open up a new view (with a survey, video link, etc.). Somewhere in this top section we also need 3 icons (not in sketch) to share the location, follow the location and indicate that you have visited the location.
Tapping the menu will open up a view with left-right swipe-able images for categories. Tapping one will open a list of products - again swipe-able left/right. Tapping a product will query the user for quantity and then will be added to the user's shopping cart.
Once the shopping cart is populated, a new button 'Checkout' should appear above "Browse Menu". The checkout page should have a list of items selected with quantities and a button to checkout, e.g. Pay now with Apple Pay. After the user successfully pays they should be directed to an invoice page (this will also be accessible from the Loyalty Page).
Feedback will open up a customer survey. Loyalty account will open a list of previous purchases. Share moment will allow the user to take/select a photo, add a caption and share on their social networks.
2. Nearby Page
This is the first page a user will see when they open the app (find layout sketch attached). The top-left indicates the city where the user is. The second bar indicates types of locations in that city. The image is a cover image for curated content about a location (e.g. restaurant review). Tapping on the image will open a full screen view with text and images. These images are scrollable left-right and are designed to give the app some 'warmth' when opening. Next, there should be a section asking the user to login with their Facebook account or mobile telephone number (most of the app can be used without an account, but to customize you need to login). Below should be a list of locations that they user is currently at (determined by beacons and other LBS) and a list of nearby locations in the Magnet database. List items should have an image on the left with the brand-location and type on the right. Locations you are present at should be highlighted in the list (perhaps a green background). Tapping these items will open the Location Details page described above.
3. Profile Page
Nothing too complicated here, just something warm and inviting. When users do want to customize their account, they can go to Me (signup1.png). If they choose to signup with mobile tel (signup2.png) they complete a form. Authenticated users get a profile page (signup3.png) that they can edit. This 3rd page is what I would like to have a design for.
Additions to the brief:
- Feel free to re-arrange items in the location details page,
- Please try to make visually engaging with photos displayed prominently,
- The page should be more functional, then information - that is, it should be easy and intuitive for users to get to key actions such as browsing menu and then checking out. There are a lot of actions on this page that we want to present cleanly and simply,
- For sections that reveal hidden content when tapped (e.g. short description, address) there should be some visual clue. Find attached a screenshot from Time Out with how they handle this with arrows.
#2 Addition To Brief
- Please try to avoid only using red and black. It is too dark and imposing. Thanks!