Ride Systems XD Wireframe

Davis Dunaway
Sep 4, 2018 · 3 min read

Using Adobe XD, I created a wireframe that more clearly captures how a user interacts with the app.

The Home Page

With the exception of the first time you open the app, this is the page where you will always start. at the top of the page is the page title. The image contained on this is page is of an interactive map that will display the necessary route once a location is searched for. The user can use the quick search bar located at the bottom of the screen or use the full search bar by navigating to it using the icon menu at the bottom of the screen. From the same icon menu, the user can also bring up the settings menu.

The Search Bar Overlay

The Search Bar overlay will appear when the user selects the search icon from the icon menu. It will display different routes as the user types.

The Settings Overlay

The Settings Overlay will appear when the user selects the menu icon from the icon menu. From this overlay, the user can navigate to several different screens, most notably, the Notifications Menu and the Transit Agency Menu.

The previous two overlay appear on the Home Page as follows:

The Transit Agency Menu

Upon opening the app for the first time, the user will be greeted with this screen and asked to select a transit agency. If the user ever wishes to change their desired transit agency, they may navigate back to this screen using the Settings Overlay.

The Notification Menu

From this screen, you may review past notifications as well as change the push settings of the app.

the navigation from the Home Screen to one of the screens on the Settings Overlay appears as follows:

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