E Lab: Ride Systems Wireframing XD

Vicky Zhou
Sep 3, 2018 · 4 min read
Prototype navigation

Onboarding:

As you open the app for the first time, you are greeted with a quick introduction to the app, which then takes you to this first main screen. This screen prompts you to select a transit service. The search bar serves as a subtle threshold for narrowing down transit search routes, and the several transit route options serve as the main threshold that take you to a new screen. The back arrow is a threshold that takes you back to the original welcoming intro to the app.

Home:

This is the home screen. After you select a transit route service, you are taken to this page, with a map of Pittsburgh as the main focus. The sub thresholds include: toggling between the map view versus satellite view of the map. The main thresholds that are located on this page include: Route button (circle), favorites, refresh, search, menu, and the navigation icon in the upper left hand corner. Clicking on routes will take you to the next page (Screen 1):

Screen 1, Screen 2, Screen 3

Screen 1:

After you click on the routes button, a screen will slide up and display a list of different route options and a search bar. This does not fully transform the screen from the home page, and instead only covers half of the original map. On this page, there still remains the previous thresholds from the home page, however, also include the threshold of toggling to see only running and/or all buses, and click into specific routes.

Screen 2:

After choosing a route, the bottom of the page will change and display the full route. The top half of the map portion remains on top and largely the same, only now it highlights the specific route you chose. The new thresholds include: an information button, a back button, and a button that allows you to click into specific routes to send you push notifications and/or save them to favorites.

Screen 3:

On the bottom bar of all screens in the center of the buttons is a “refresh” button. This threshold allows you to refresh the page at any stage and/or page you are currently on, in order to update bus routes. By clicking on this refresh button, the app takes you to a page with the logo, a route icon, and the words “Loading”. There is, however, no new thresholds presented on this page and it merely serves to tell you that the app is currently refreshing itself.

Settings 1, Settings 2

Settings 1:

Also located on the bottom bar, to the far most right, is a menu button. When you click on this threshold, a menu bar slides over from the right about 3/4ths into the screen. The new thresholds that are then presented are a notifications bar, and several other options.

Settings 2:

After you click on the first option in the menu (notifications), the menu bar slides completely over to display three boxes of information: announcements, stop reminders, and push notifications. Although all three are presented the same way, the only one that serves as another button threshold is “push notifications”. The other new threshold is the “x” button, which takes you back to the menu setting.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade