Everything You Need to Build An App for Navigation and Transportation in Adobe XD

Featured in XD
Everything You Need to Build An App for Navigation and Transportation in Adobe XD

Ridesharing apps have completely changed how many of us get around. As technology revolutionizes how we access transportation, the push is one to create the best user experience for people on the go. Learn the ins and outs of designing an app with navigation with Montreal designer Aurélien Salomon, whose Navigo UI kit gives you 60 customizable screens and tons of different symbols and elements. This weekend, try designing your own app with transportation and navigation components.

Getting Started with The Navigo UI Kit in Adobe XD

Here are the quick steps you should follow to get started with Adobe XD and the Navigo UI Kit:

  • Step 1: Download the latest version of XD and the UI kit. Download the latest version of Adobe XD.
  • Step 2: Download the Navigo UI Kit. Click here to download Navigo. It includes more than 60 customizable screens across six different user flows, full of symbols and others elements to help you to design navigation, profile, social sharing, onboarding, and other experiences for a apps with navigation
  • Step 3: Explore the UI kit and everything it offers. Navigo allows you to quickly put together an app with navigation components, from maps for ridesharing experiences to public transportation schedules and flight information. It’s everything you need to design the navigation of your app. Plus, there are tons of other screen components for experiences like like onboarding, creating an activity feed and profile, stats and info, and menus. Use these components in your app design or as a template you can edit.
  • Step 4: Start designing. Use the UI kit as a starting point to create your own splash screen and combine it with the main screens of your app, such as a login screen, profile, payment information, and navigation screens.
  • Step 5: Time to prototype. Simply wire screens together to create an interactive prototype you can share.
  • Step 6: Publish your prototype and share on Twitter with hashtag #MadeWithAdobeXD.

Aurélien’s Top Tips for Building A Transportation App with The Navigo UI Kit

Aurélien Salomon is the designer with a passion for both UX and cars. Originally from Martinique, he studied engineering in Paris before landing in Montreal, where he now designs for a variety of startups along with top brands like Apple, Google, Lonely Planet, and of course, Adobe. His passions made him the perfect fit to design a transportation UI kit for XD.

“For transportation and navigation in general, the context in which people are using your app has a bigger impact. People might be walking, biking, or driving so their attention span is drastically lowered,” said Salomon.

“That’s why clarity and readability was something considered in Navigo even if building a UI kit it is very different than building an app. You are designing screens for designers, so flexibility start to be an important aspect as well.”

Here are Aurélien’s top tips for nailing the design using Navigo.

Designing The Splash Screen

The splash screen gives people feedback that your application has started and is loading. It was often used to reinforce the brand identity. Nowadays, however, faster loading times mean the splash screen might appear for less than a second. Generally you want the splash screen to be similar to the first screen of the app to create a visual continuity when your app starts.

Designing The Login Screen

For a Login screen, you want to make sure people can go through this process as fast as possible. People often forget their username or the email they have used for your app so you want should provide flexibility for identification. They should be able to use their email, username, or even their phone number as a login. You have to provide them a way to recover if they forget their password as well. Allowing them to login with Facebook, Google, LinkedIn, or Twitter can also alleviate some of the struggles.

Designing Navigation/Map Screens

One of the key aspects that is often overlooked is performance. Trying to navigate a slow map can be a really frustrating experience. You want to make sure that this experience feels fast and smooth. It is tempting to show a lot on a map, but you might end up with a cluttered experience. Prioritizing and showing relevant information at the right time is key.

Tips for Connecting Multiple Users

Generally, you want to identify what pieces of information need to be shared between two or more users. Privacy is critical, so it should be clear what is being shared, sent, and received, and what is remaining private.

More UI Kits, More Ways to Design with Adobe XD

For more ways to design, prototype, and share in Adobe XD, download these additional free UI kits to build travel, gaming, smartwatch, and dashboard experiences for apps and websites. Check out our full resource post, featuring more information about getting started with Adobe XD, and for UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.

Recommended Articles