Artwork by Simona Toader
As online commerce, food delivery, and peer to peer services continue to grow at a rapid pace, managing logistics becomes an ever more important key to success for those companies. An important part of any logistics operation is managing a fleet of vehicles, and drivers to ensure that goods and services are delivered efficiently, and effectively.
Historically, design teams working on these applications have hit roadblocks when working with map-based interfaces, as prototyping maps in common design tools wasn’t a feasible option. To achieve interactivity, and fidelity, often these applications would have to be prototyped in code, costing more time and energy to validate simple ideas.
Thanks to Scroll Groups in Adobe XD, creating rich map based prototypes is now possible, and quite easy to accomplish, right inside an experience design tool. This tutorial will walk through how to apply Scroll Groups to a map based fleet management design, and what can be achieved by layering in elements like Component States.
To follow along with the tutorial, download the starter Adobe XD file.
Getting started
With the starter file opened, several elements will be visible, including waypoints, paths, and other map overlays. Several navigational elements are also included to get you started.
Create the interface frame
The first step is to build out the skeleton of what this application screen will look like. This includes the left hand navigation bar, and the vehicle list drawer that are both available in the starter file.
Start by creating a 1920 x 1080 sized artboard using the artboard tool, and then position the left navigation bar on the left hand side of the artboard, aligned to the top, bottom and left. You can choose to lock this layer while editing the rest using CMD + L (CTRL + L on Windows) or just leave it as is. Locking an element or group just prevents it from being moved or nudged accidentally when editing other elements around it.
Next, position the vehicle list drawer onto the page, aligning it to the right, and the bottom of the artboard. To ensure precise alignment, the controls at the top of the property inspector on the right are very helpful.
Your artboard should now have what appears to be three blocks, the navigation, the list, and an empty space in the top right corner where the map itself will go.
Sourcing a map
The key to this design is the map itself, so it is important to create a map that fits with the design well, and is a high enough resolution to look great. Depending on the fidelity of your design, or which type of mapping interface you’re creating, you may take different approaches. If you’re working in autonomous vehicles, you will likely want to use your own internal maps. For broader applications, a high resolution image of a map, or a vector based street map is going to be the best bet.
Using Google Maps, and taking a screenshot of an area of interest, or at random is an easy starting point. You can also go as far as to use developer tools to remove map overlay elements to get a clearer shot of the map.
If you’re looking to match a map style to the aesthetic of a design like in this tutorial, using map generation tools like Mapbox or Snazzy Maps can help you create a map image using fully customized styles or themes. Once a map is styled as desired, you can simply take a screenshot like with Google Maps.
To save you time, a sample map has been included in the file.
Building the map element
With the map image added into the XD document, there is some work to be done on the map before adding it into the artboard. Position the map image to the right of the artboard so that it is easier to work with, since the image should be much larger than the artboard itself.
The goal is to make this map ‘pannable’ using Scroll Groups, but it will also have interactive elements within the scrolling area. To make this easier, the scroll will be applied last.
Adding waypoints and vehicles
The first step is to start adding in waypoints, and vehicle indicators onto the map to make it feel like there is a fleet being managed.
Included in the starter file are three elements, a path line, a destination marker, and a waypoint component. The waypoint component has a few states, including hover, selected, and endpoint. States can be toggled in the component menu in the top right of the property inspector.
Start by positioning the waypoints, or vehicle indicators onto the map in various locations, three or four is a good number to start with.
Next, do the same with the destination markers, placing them in positions that aren’t too far away, but also not too close to the vehicles. The goal will be to link these together with paths after.
It is a good idea to modify the names and text on these elements to create some variety in the data. Change the vehicle numbers in the tooltip, and the destination and duration in the destination element. For the waypoint, remember to modify the vehicle number for each state so that the number doesn’t change when hovering or selecting.
Creating route paths
The next part takes some care, but is important for bringing together the routes of the vehicles being managed in the fleet management application. To create a path, the line tool will be very helpful here. A styled line is included in the available assets and can be copied and then pasted onto the map to get started.
To make the line follow the road curves and turns, hit enter to create a path out of the line. Using the cursor, clicking on the line will add a new vector point that can be moved and positioned accordingly.
Continue adding points and positioning them so that the line follows the road. To create smooth curves, double click on any vector point to adjust the curve symmetrically. If you hold the option key while dragging the handle, this will convert it to an asymmetrical curve.
The lines are likely sitting on top of the waypoint elements. To fix this, either drag to reorder them in the layers panel, or use CMD + the square brackets to move them up and down in the stack. Since they should be just above the map layer, and under everything else a shortcut is to use the following command SHIFT + CMD + [ to position the paths below the map, and then CMD + ] to move them up one layer above the map image.
Repeat the process with the other routes to fill in the rest of the map.
Grouping it all together
To make the map easier to move around and position, using your cursor drag and select the map image and all of the elements that were just added. Once selected, use keyboard commands or right click and select Group to group the elements into one unit. Give the group a name like Map Layer to make it easier to find in the Layers panel.
Making the map scroll
With the map layer group selected, drag it into position on the artboard, aiming to get the center of the map positioned in roughly the center of the open space for the map.
Once again use the Layers panel or hotkeys to position the map at the bottom of the layer stack (SHIFT + CMD + [) so that it sits behind all the other elements on the page.
Now, with the map layer still selected, navigate to the right panel, just under the properties controls and select the horizontal and vertical scroll option. It’s the button that looks like a window with four arrows. Once enabled, four blue handles will appear on the map layer.
Adobe XD will attempt to position the handles where it thinks the scroll area is intended to be, but if it doesn’t line up, simply drag the handles to align to the top and right of the artboard, as well as the right of the navigation bar, and the top of the drawer. Clicking away will reveal a cropped map layer.
On preview of the prototype, click and drag around in the map to experience the panning effect, or using the scroll wheel on your mouse to scroll one axis at a time. The larger your map image, the more scrolling or panning space there will be.
Not only can the map now scroll, but the vehicle components included will also respond to the hover effect, and the click state that came pre-configured in the starter file.
With a few clicks using Scroll Groups, a map based design can go from static imagery to an interactive experience, all within Adobe XD.
Learn more about Scroll Groups and how to integrate them into your designs or dive deeper into using them to create scrollable tables, charts, and maps.
