Creating the User Journey Map of Screens As Core UX Design Practice ItCraft Blog

Mapping out of apps screens is one of the core activities in UX design. A screen map is useful far beyond the design process and makes for a valuable asset throughout the development.User Journey the road to be taken within the app to do what you want to do, requires a proper map.

The better the map, the more enjoyable the Journey.What is a screen map?A screen map is a diagram showing individual application screens, their location (hierarchy) and interrelationships.

Why make screen maps?The map allows you to visualize how many screens the app will have and show the relations between them. It is invaluable in estimating the workload for the UX / UI design process.

How is a screen map made?Screen maps can be created using virtually any sketching tool. From good old pen and paper all the way to graphics software like Adobe Photoshop or diagram creators like draw.

io or Whimsical whats important is that the map is easily and quickly edited, and is clear and legible to designers, developers and clients alike.Turning user stories into a journey mapIndividual User stories are sorted into groups to be included in specific screens of the application. Next, the screens are marked on the map to reflect the hierarchy between them and to visualize actions (transitions) performed by the user.

Examples of screen mapsThe first example of a screen map is one we made for Truckersky, itCraft-created mobile solution for truck drivers.Another example is the product of our UX/UI workshops for a scooter sharing app.What is a User Flow?

User flow is a diagram showing the path(s) a User can take in the application. It visualizes the decision making moments and presents all use-case scenarios. The User Flow is helpful in analyzing the ways Users reach their intended destinations or achieve particular goals.

User Flow roleDesigning User Flows allows us to adjust and perfect the operation of the app and avoid flaws in interaction between Users and the software. We are able to identify the Pain points of the system and improve the process well ahead of development.What is a low-fi wireframe?

Low-fi (low fidelity) Wireframes are a simplified view of the structure of the application screens. The screens are usua presented in grayscale and without details. Instead of a detailed design, our goal here is to plan appropriate distribution of key UI elements, and their hierarchy.

The screens propositions should be easy to draw, edit and copied. Low-fi wireframes creation should be a quick process of establishing a base for team discussion, adjustments and clarification of requirements. They can be prepared on a piece of paper or in a dedicated program such as: Sketch, Proto.

io, UXPin, Axure, Balsamiq. The choice of tools is up to you.What is a high-fi wireframe?

High fidelity wireframes expand the low-fi version by refined, platform specific UI elements (iOS, Android, Windows), content and graphics reflecting future appearance of the application.low-fi to high-fi wireframesThe main difference between these two wireframes is the level of detail. The low-fi wireframes focus on the general appearance of the main functionalities, without detailing of particular elements, content or pictures using placeholders instead.

Low-fidelity wireframes are not a reflection of the final look of the app. They present the general idea and vision of the application, and need to be made as quickly as possible. They help in discussions with the team and the client in the conceptual process, when determining the scope of work required.

In high-fidelity wireframes, we refine the low-fi screens. Hi-fi is more labor-intensive, as we need a higher level of detail shapes, content, UI elements, the screen composition and relations between them all must now closely reflect the final look of the app. High-fidelity wireframes are a more sophisticated representation of what the applications final look.

When designing an application interface the UI for either Android or iOS, you should always keep in mind the differences in appearance between platforms. Some elements of iOS, Android UI differ significantly in both looks and the way they work. Buttons, date pickers, text fields, notifications are all designed differently.

The makers of mobile systems Apple and Google provide complete design guidelines on their websites, as well as ready-to-download components.To simplify the design process and save time, we dont usually create new elements from scratch. Designers often use ready-made UI kits and libraries.

They contain ready-made elements that can be imported into projects and customized according to needs. Depending on whether you are designing a low or hi-fi wireframe, a variety of UI Kits are available for both iOS or Android platforms. SummaryEstablishing a good base for the UI/UX design benefits your mobile app development in many ways:The customer saves time and resources (quick way to verify the product concept),A small number of specialists needed to start the process, which translates into lower costs,The client takes active part in the design and provides invaluable input on the functionality and appearance of the application,The client can verify that the application design is according to requirements and best practices,Faster application development time the team will have a clear picture of how the application is supposed to work and look,Ability to test the application early in the production process.

A clickable prototype lets you experience the operational functionalities of the app before programming starts,Flexibility of the design process changes and adjustments can be done quickly and without the need of engaging developers work.Originally published at com on September 12, 2019. Read this story later in Journal.

Wake up every Sunday morning to the weeks most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter