Skip to content

4. View UIUX

Jump to bottom
Kate Carlton edited this page Apr 21, 2021 · 46 revisions

UI/UX

flow-diagram

Marvel Mock-up (Link)

Select Venue

GitHub Links: Welcome Scene Storyboard, Welcome Scene Main file, Selection file, Venue Definition file, Connection to the backend file.

Features:

  • List of all venues sorted by distance or name (change with buttons)
  • Search bar to find a venue by name
  • Each venue in table cell contains venue name, description, distance away, and image
  • Click a table cell to learn more about venue

Reasoning:

The user can filter by alphabetical order to easily find specific venues they may have in mind or by location to find whatever venues are closest.

Destination Landing Screen

GitHub Links: (Description Landing Scene Storyboard, Description Landing Scene Swift File)

Features:

  • Venue name at top of screen
  • Location, website URL, and phone number of venue in 'About' section
  • Venue-provided description with images of venue and its destinations

Reasoning:

Users will be very interested to know what the venues will be like and the estimated time of arrival to decide whether they want to pick it as their destination.

Destination Screen

GitHub Links: (Destination Scene Storyboard, Destination Scene Swift File)

Features:

  • User's location represented by red circle on map of surrounding area
  • Click a blue circle (destination) to pull up a snapshot of its info
  • Click 'Map!' within destination info to start mapping experience
  • Slide up on screen to reveal search bar where users can find destinations by name

Reasoning:

Users will want to go to specific venues within that location. They will want to see all the available destinations and see the distance range of these destinations when choosing where to navigate to.

Mapping Screen

GitHub Links: (AR view (Storymap), AR view (Swift file))

Features:

  • AR mapping view with beacons (black arrows) and end destination (red pin)
  • Turn-by-turn directions at top of screen
  • Mini-map at bottom of screen to indicate to user their current route
  • Time to destination and other info at bottom of screen
  • Click 'End' to choose a different destination to map to

Reasoning:

The beacons provide intuitive directions based on surroundings where the user is facing, and the display times allow for real-time ETAs.

Arrival Screen

GitHub Links: (Arrival Alert Swift Code)

Features:

  • Upon arrival at end destination, pop-up notification alerts user of arrival
  • Click 'End Mapping' to find a new destination

Reasoning:

Upon arrival, the user may want to either return to navigation (to be quickly directed to another sub venue) or see near by destination (to find another destination of interest).

Clone this wiki locally