Wireframes

Search…

Wireframes

Basic wireframes for review

The design for Explorer should mirror many similarities of Mapillary.
Mapillary CSS is here
​https://github.com/mapillary/mapillary-css​
UX-001 - Public pages
UX-001.01a - Landing map
Unauthenticated index page just shows basemap view with sequences loaded. If user authenticated, show username in top right
Will have all map controls (zoom, layers) and browse / filter sequences / ability to click map point to load in mapillary JS / switch between Mapillary JS and map master view
video-9083061-314c73cdee518a69174a550bdb4b243f.webm
7MB
Binary
If user opens right sidebar, will see all sequences active on the map. As use pans and zooms and filters, the sidebar updates. If user owns sequence, it shows user option to edit sequence.
Should also show if sequence is processing (uploading) or published (kill signal sent)
Should show following data on sequence card in sidebar
Thumbnail
Title/description fields
Capture date
Username
Transport type parent
Transport type child
Tags
Is 360?
Count of photos
Distance in kilometers 
Time in seconds
Date of first image in sequence
When sequence in sidebar clicked, it will zoom into that section of the map with sequence highlighted and first sequence image loaded in Mapillary JS (bottom left)
If user clicks edit sequence, changes sidebar view to edit, allowing user to modify:
name
description
transport type
tags
Delete sequence
In top bar, show filters
Map filter options:
Transport type (parent - child)
Distance (meters min / max)
Time (secs min / max) 
Tags (multi select auto correct)
Camera model (GoPro Fusion, GoPro MAX)
Is 360 / equirectangular (TRUE/FALSE)
Username (text search)
Sequence name (text search)
If user clicks username in bar they will see account information
User cannot modify their username or email (it is linked to Google/Facebook) but we should show them what info we hold.
View should also show a summary of aggregated sequence stats.
User can also modify if they are subscribed to mailing list. If their email is currently subscribed should show as ticked. By unticking will unsubscribe user, by ticking will subscribe user.
​User can also completely delete their account in this view (with confirmation).​
URL filters
We should follow Mapillary and track all action / filters / selections in the URL path. See how Mapillary updates the URL dynamically as user moves / performs actions in the apps.
UX-002 - User management/auth
Ignore orange bar (just for mockups) should use Mapillary design.
UX-002.1 - Login / signup default
We allow for login/sign up using Google social login.
UX-002.1 - Sign up
If user already has account when authenticating, they will be redirected to My Sequence page, else if no account the registration page.
To register user must enter username (unique) between 7-20 chars (A-Z,1-9,"-").
User can also select to have email submitted to mailing list (mailerlite).
In some cases user might already be logged into Google account / Facebook account which is not the same one as they used to create an account with (e.g. work vs personal Google account). Therefore we should also make this clear, so user can go back, log into right Google account in Google, and reauthenticate.
​
UX-005.3 Publish sequence
This will open up Mapillary OAuth consent window in separate tab. 
Note, also link Mapillary sign up: https://www.mapillary.com/app/?signup=true​
Once authorised, take user back to app with success and dummy loading screen.
If not authorised, or abort, take user back to Mapillary auth screen with error message shown so that they can re-authenticate.
Until sequence enters Mapillary upload state, sequence will remain unpublished. 
​
In backend, this will start the upload process to Mapillary. Each time user tries to view sequence whilst in Mapillary uploading state they will see this screen. When complete, user will instead see published sequence overview (UX-006)
UX-006 - Published Sequence
UX-006.1 - Sequence publish state overview
Once user is happy with modification, they publish the sequence. This will stop them from editing any of the sequence information (all options to edit removed and details greyed out), but they can now see:
Upload to an integration
by default Mapillary already exists, as required to complete to publish sequence.
download GPX
download final images
download final video
​Delete Sequence​
UX-006.2a Published sequence add to integration (authenticate)
​User will perform OAuth flow to Mapillary or Street View (Google) as defined in each integration.
UX-006.2 Published sequence add to integration (uploading)
UX-006.3co Published sequence add to integration (completed)
​Against each integration shows the status of the upload to the integrations.​
UX-007 - Creating / managing tours
UX-007.1 - Create tour
​
UX-007.2 - Tour list
This is a list of all tours.
On Your Tours view user can filter by
Distance (meters min / max)
Time (secs min / max) 
Title / description (text search)
Tags (multi select)
Username
Note, user can navigate to this page by also clicking "My Tours" which brings them to page with their username applied.
Each sequence card shows (list view)
Map (with all tour sequence images plotted)
Title/description fields
Create date
Count of photos
Tags
Distance in kilometers 
Time in seconds
Edit button
Only if tour belongs to them
UX-007.3 - Edit existing tours
User can change the tour metadata and remove tours on this page.
User must click save to confirm changes made.
User can also delete tour. User will be prompted to enter tour name to confirm deletion.
To add tours, user can do this from the public sequence view pages.
UX-008 - Staff area
Staff area should show:
User list (search, details and modify)
Plan list (search, details and modify)
Sequence list (search, details and modify)