7 Steps to Planning a Fantastic User Experience

Digital User Experience (UX) covers every interaction a user has with a digital product or service from the moment they download an app (or pick up a physical product from the shelf). As such, it encompasses a wide range of skills from broad outward focused skills (e.g., gathering market research, understanding brand positioning, etc.) to specific technical tools and technologies (e.g., working with Bootstrap admin templates and UI kits, etc.)

This article focuses on what can be broadly defined as the ‘planning’ phase of UX design. In terms of the overall

Step 1: Develop User Stories

Assisting clients to understand their target user is a key skill mastered by top User Experience designers. Drawing from the client’s market research – their actual conversations with their customers – User Experience designers and their clients can help to develop a persona: a realistic (albeit generalized) customer profile.

Creating a persona makes it easier for you and your client to avoid bias and guesswork and identify real UX pain points. Only then can they design effective solutions.

Once a persona has been decided upon, the design and marketing teams can work together with the client to flesh out a typical user story. It will help if the client has carried out some in-person usability studies.

A user story focuses on a narrative with the user at the center – as the hero or heroine. This avoids the trap of taking an overly dry and analytical view of things (customers are real people with emotions after all).

Throughout the process, the design team should always ask the following three questions:

• What does the user need?
• What will their experience be at this point?
• Will our proposed solution meet their need and provide a positive experience?

Step 2: Define User Flows

The UX design team then need to carefully map the user story with the app or website they are creating. This is a balancing act between staying in tune with the narrative and accurately matching specific user actions with states and screens.

Understanding and mapping user flow can enable a designer to pinpoint where the user first comes into contact with the product so that they can optimize this experience.

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

At this stage, the team is still working in terms of textual descriptions of what the user is seeing and doing and how this progresses them through various pages or screens.

Before exploring visual design concepts, there is one more critical step: defining and prioritizing so-called ‘red routes.’

Step 3. Prioritize Red Routes

Red routes are those sections of the user flow that are critical to the success of your business. If every other screen and page dropped off your app and website, the red routes would still enable the customer to carry out a purchase or otherwise fulfill the primary goal of the business.

As an example, if you wanted to buy a book on Amazon, the red routes would cover the log-in screen, the category search function, the product page, and the checkout process. It wouldn’t include features such as recommended products, wish list integration, customer review pages and the like.

In line with the Agile philosophy, red routes would be those parts of the design that are given the most weight when decisions have to be made around limiting workload.

Red routes are most relevant when working on a big, complex website or app as it enables the design team to place constraints on time allocation.

Step 4. Brainstorm and Sketch

Once the design team is evident on the user flow, it’s time to begin the visual and functional design process. The first stage of this part of the process is all about being innovative and generating ideas. Therefore, it is a good idea to hold this session in a room conducive to creativity (i.e., not your typical working environment).

You might want to book out the board room or even move to an external venue. As long as there is scope for carrying out the practical part of the activities (e.g., a whiteboard, markers, comfortable seating, low noise levels), the actual location isn’t as important as the atmosphere created.

There obviously will need 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 gray areas when the deadline is looming.

A voting system or Agile-like score weighting system would both be fair and objective methods of deciding between competing concepts.

Step 5. Wireframing

Wireframing is one of the fundamental skills that a UX designer will be expected to master. It is the next step up from simple pen and pencil sketches and, in fact, a properly structured drawing can be considered a wireframe.

In practice, most design teams use digital software to create wireframes for a more professional look.

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.

Wireframes are used as a platform for graphic designers, developers and the client project team to flesh out.

The tool of the trade:-

Balsamiq Mockups is a popular wireframing tool. It is easy to use with a large canvas and plenty of drag and drop elements. The low-fidelity wireframes created makes it very clear to clients that they are only looking at basic design and usability concepts at this stage.

At the time of writing, a single user license for Balsamiq Mockups was less than $90.

Step 6. Create Mockups

Mockups are a stepping stone between wireframes and prototypes. They are high fidelity representations of app screens or webpages containing content and design elements as well as descriptions of function.

Mockups, like wireframes, are static and often used by clients to present the design to stakeholders to ensure the project is heading in the right direction. Mockups can also be used as marketing materials for clients to preview their new app or website to their end users.

Tools of the trade:-

Sketch, Adobe Illustrator and Adobe Photoshops are commonly used by designers to create attractive looking mockups.

At the time of writing, a personal license for Sketch was less than $100 per year while a subscription to Adobe Creative Cloud (including all products) cost less than $60 per month.

Step 7. Build Prototypes

The final stage of the planning process is prototyping. Prototypes demonstrate the connections between wireframes and include navigation elements. It is here where the interaction between the user and the system can be experienced and tested for the first time.

UX designers are expected to have the skills and mindset necessary to rebuild prototypes quickly in response to feedback to keep the workflow on track. The most valuable designers will be those who can think on their feet and promptly create and recreate prototypes to fulfill a fluid brief.

The tool of the trade:

The freemium tool InVision is one of the most well-known prototyping and digital product design platforms out there. It includes powerful collaboration tools to help remote project members to work together seamlessly.

At the time of writing, InVision offered the option of unlimited prototypes for $25 per month.

Following the prototyping phase, the project is well on its way towards final refinement and completion.

Image Credit: DepositPhotos