Week 2 — Laying the foundation

This week we got two big things accomplished, laying out the architecture of the app and wire framing. For both these tasks our first stop was the whiteboard to collaboratively draw/write out our ideas.

Hand-drawn architecture diagram and wireframes by Monsurat and Anna

Wireframe

Fear not, we digitized our sketches. Our wireframes include seven screen views for our app.

Screen 1. Home page where user can select whether they will be on a walking tour or a biking tour

Screen 2. Request access to geolocation.

Screen 3. A list of potential sites to visit on the tour, where the user can select the places they want to go.

Screen 4. A map showing all the sites selected for the tour.

Screen 5. Safety warning for dangerous paths that require extra awareness of the surrounding.

Screen 6. Opens upon arrival at historical site. Displays images of the what the building used to look like, audio guide, and written descriptions.

Screen 7. Opens upon completion of the tour. There will be links to the Medford Historical Society and an option to donate money to the organization.

Architecture

Our architecture consists of three main abstractions, the client, server and database. The client is the mobile app that the user interacts with to start a tour and the CMS (content management system) is what the volunteers at the Medford Historical Society can use to update the app’s content like audio, images, and text. The server consists of the API outputted by the CMS that we use to get information for the app. We also plan on using two other third party API’s including the Mapbox API for navigation to the sites and the Stripe API for soliciting donations at the end of every tour. The database is where we will store the images, audio and text for each of the tour sites. This will be the CMS API’s source of truth.

3rd Party Packages/Apis

• Mapbox Maps & Navigation
• Stripe
• Directus headless CMS

Accomplishments

✔️ Created a map of all the locations we want to include in the app

✔️ Digitized all the location descriptions we got from the paper route brochures

✔️ Brainstormed & sketched some initial wireframes and settled on a unified design

✔️ Contacted the historical society for historical pictures

✔️ Discussed architecture and backend options

✔️ Created a wireframe for the app

Next Steps

• Record Audio
• MVP of essential features — site selection, site description, map of sites
• Set up CMS (content management system)