Wireframes
Basic wireframes for review
The design for Explorer should mirror many similarities of Mapillary.
Mapillary CSS is here
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.
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.
Ignore orange bar (just for mockups) should use Mapillary design.
%20V1%20(1).jpg?alt=media&token=a575e1ba-17d2-413d-ba35-0cc4e80f4b21)
We allow for login/sign up using Google social login.
If user already has account when authenticating, they will be redirected to My Sequence page, else if no account the registration page.
%20V1%20(1).jpg?alt=media&token=83ae795f-e358-45ea-abdc-94e7bc456850)
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.
.jpg?alt=media&token=f4b0e57f-cf2a-4753-9a8b-4fc9927af6a8)
This will open up Mapillary OAuth consent window in separate tab.
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.
.jpg?alt=media&token=995700f4-a3ea-465d-b066-0d9be2e1a09d)
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)
%20V1%20(1).jpg?alt=media&token=c442f069-4add-42c7-8c7c-41d56f66a56b)
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
%20V1%20(11).jpg?alt=media&token=fb194b1a-2ef9-4f1f-8017-4e0948b72fb9)
%20V1%20(14).jpg?alt=media&token=af9a236f-3ceb-497b-92cb-f908a645bb89)
%20V1%20(2).jpg?alt=media&token=d1f66995-a8f3-484a-861a-741555c3d653)
%20V1.jpg?alt=media&token=ae21855a-7a56-44f3-b1ec-741e5d5aebd6)
%20V1%20(2).jpg?alt=media&token=f933a5e1-7784-4c7c-916b-c3a645cce5c5)
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
%20V1%20(6).jpg?alt=media&token=62374219-afe3-4e30-94cc-650d7990286a)
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.
Staff area should show:
- User list (search, details and modify)
- Plan list (search, details and modify)
- Sequence list (search, details and modify)
Last modified 8mo ago