6 Steps To Planning A Great User Experience

Creating a persona makes it easier for you and your client to avoid bias and guesswork, and identify real user pain points. The persona becomes the centre of a user story, focusing on a workflow with the persona at the centre. This avoids the trap of taking an overly dry and analytical view of things (customers are real people with emotions after all).

Examples of User Stories may be:

1. As a Police Officer I want to see real-time nearby incidents as both a map and a list.

2. As a GIS Professional I want to determine the optimal route for a new train line.

3. As a parent, I can find school catchment areas and apply instantly so that I don’t have to download more documents.

The development team then need to map the user stories with the app they are creating. This is a balancing act between staying in tune with the business goals and accurately matching specific user actions with widget and data states.

The team can also find out where user flow is sub-standard or where there is a disconnect between the product and the user story, and then focus on bringing that specific area up to scratch.

During this step the chosen Apps & Products used to deliver the solution can be discussed.

E.g. is this going to be:

• • • a custom JS Application

    • a Web AppBuilder Implementation

    • an Esri Story Map or Operations Dashboard

Once the team is agreed on the user flow, it’s time to begin the visual and functional design process.

This will involve all member of the team and everyone’s input is equally valued, as long as the steps taken previously are being used to guide the ideas.

There obviously needs to be a time limit on this brainstorming process. This should be decided at the outset and procedures put in place to make decisions should there still be grey areas when the deadline is looming.

Wireframing is the next step up from simple pen and pencil sketches and, in fact, a properly structured drawing can be considered a wireframe.

Wireframes are simple representations of webpages or app screens, which are designed to illustrate how a single app screen or webpage will work. All elements of the interface are present in basic form, usually in grayscale, using simple lines and boxes.

These wireframes are used as a basis for graphic designers, developers and the client project team to flesh out the detail.

Note: wireframes are only beneficial for non-OOTB apps and products or ones that allow a high degree of customisation (like Web AppBuilder).

Mockups are a stepping stone between wireframes and prototypes. They are high fidelity representations of app screens or widgets, containing content and design elements.

Mockups, like wireframes, are static and often used by Project Managers to present to stakeholders - to ensure the project is heading in the right direction. Mockups can then be used as marketing collateral for clients to show their new app to their end users.