Designing a Mobile Mapping Interface using Figma

Designers go through different phases of the design process, depending on project requirements. This could include conducting research, competitor analysis, creating user flows and sketching low-fidelity wireframes to refer to before creating them in Figma.

Low-fidelity wireframes are gray-scale mockups or blueprints of screens for an app you are creating with a focus on content structure, overall layout and functionality (i.e. navigation). They don’t include high-fidelity design elements such as color, logos, images, depth, styles and anything that can take the focus away from the information architecture and flow.

The goal of low-fidelity wireframes is to provide a visual representation of what needs to be conveyed to users and ensure proper usability before bringing in design elements that might distract from the goal. It also provides an understanding of the user flow and the placement of content and features, allowing teams and stakeholders to easily iterate on the design before building the final product. 

The low-fidelity wireframes showcased in the tutorial video are focused around a simple mapping interface, providing users with basic interactive tools. When designing for mapping mobile apps, it is important to consider:

• A basemap, a reference map on which you overlay data from layers and visualize geographic information, that best suits the purpose of the app (i.e. navigation map for a real estate company).
• A static display of an ArcGIS map that reflects user location. It is likely to be zoomed into a localized area on a mobile app, especially with location services enabled.
• Addressing whether you are designing for a map-centric app, where the map is the main feature, or non-map-centric app.
• Basic map features, such as home, location and zoom, as well as the search bar.
• Other map features, such as widgets that can help the user navigate (i.e. dropping a pin on their location or accessing the legend).
• The tools needed to accomplish data visualization or data input. 
• Showing multiple screens in different user states, such as when a user clicks on a call-to-action item.

The tutorial video walks you through the process of creating a couple screens for a mapping app. Here are some key tools in Figma to keep in mind: