4. Ideation
The ideation phase is a time when team members brainstorm on a range of creative ideas that address the project goals. During this phase, it’s critical not only to generate ideas but also to confirm that the most important design assumptions are valid.
Product teams have a lot of techniques for ideation — from sketching, which is very helpful for visualizing what some aspects of the design will look like, to storyboarding, which is used to visualize the overall interactions with a product.
Generate Ideas (How Users Will Interact With a Product)
User Journey Mapping
A user journey map is a visualization of the process that a person goes through in order to accomplish a goal. Typically, it’s presented as a series of steps in which a person interacts with a product.
A user journey can take a wide variety of forms depending on the context and business goals. In its most basic form, a user journey is presented as a series of user steps and actions in a timeline skeleton. Such a layout makes it easier for all team members to understand and follow the user’s narrative.
A simple user journey reflects only one possible path during one scenario.
A complex user journey can encompass experiences occurring at different time sessions and scenarios.
Tip:
- Don’t make user journeys too complex: While designing a user journey it is easy to get caught up in the multiple routes a user might take. Unfortunately, this often leads to busy user journeys. Focus on creating a simple, linear journey (the ideal way to get users to the given goal).
Scenarios and Storyboards
After you’ve identified personas, you can write scenarios of interactions. A scenario is a narrative describing a day in the life of a persona, including how a product fits into their life. A storyboard presents the user’s story in a visual way — similar to a movie or comic. It can help product designers understand how people interact with a product in real life, giving designers a clear sense of what’s really important to users.
Tips:
- Build a strong narrative: The narrative in the story should focus on a goal the character is trying to achieve. All too often, designers jump right into explaining the details of their design before explaining the backstory. Avoid this. Your story should be structured and should have an obvious beginning, middle and end.
- Design a clear outcome: Make sure your storyboard leaves the audience with no doubt about the outcome of the story. If you’re describing an unfavourable situation, end with the full weight of the problem; if you’re presenting a solution, end with the benefits of that solution for your character.
User Stories
A user story is a simple description of something that the user wants to accomplish by using a product. Here is a template for user stories:
Tip:
- Use user stories to prevent feature creep: Feature creep is the tendency to add more features than a product requires. When designing a product, try to refuse adding any feature without a user story that explains why that particular feature matters.
Job Stories
A job story is a way to describe features. It’s a description of a feature from a jobs-to-be-done perspective. A job story is an effective technique for defining a problem without being prescriptive of a solution.
Tip:
- Define problems worth solving: At some point, you’ll have several jobs (problems) that you want to create solutions for. Identify which of those problems have the most substantial impact on the user experience or your business goals.
Plan the Structure of a Product
Information Architecture
Information architecture (IA) is the structure of a website, app or other product. It enables users to understand where they are and where the information they want is in relation to their current position. Information architecture results in the creation of navigation, hierarchies and categorizations. For example, when a UX designer sketches a top-level menu to help users understand where they are on a website, they’re practicing information architecture.
Information architecture would benefit from the involvement of users in the IA development process. Product teams typically use a technique called card sorting for this purpose. Designers ask users to organize items (major features or topics of the product) into groups and assign categories to each group. This method helps you find out how users expect to see information grouped on a website or in an app.
Tip:
- It’s possible to conduct a card-sorting session online: Online card-sorting tools allow for easier scaling to a higher number of study participants. One of the most popular online tools is OptimalSort (which is free for card-sorting studies with up to 10 participants).
Generate Ideas (What Will the User Interface Look Like)
Sketching
Sketching is the easiest way to visualize ideas. Drawing by hand is a fast way to visualize a concept — enabling the designer to visualize a broad range of design solutions before deciding which one to stick with.
Tip:
- Use a stencil when sketching user interfaces: When you sketch on paper, it can sometimes be hard to imagine how certain UI element will look like at a realistic size. Using a stencil, it’s possible to draw elements for the actual size of the device you’re designing for. This is especially great when you need to understand whether a UI element you’ve just drawn is large enough for interaction.
Wireframing
A wireframe is a visual guide that represents a page’s structure, as well as its hierarchy and key elements. Wireframes are useful for discussing ideas with team members and stakeholders, and to assist the work of visual designers and developers. Wireframing acts as the backbone of the product — designers often use them as skeletons for mockups.
Wireframes can be presented in the form of sketches or digital illustrations
Tips:
- Keep wireframes simple, and annotate them: The aim of a wireframe is to show the structure of a page’s design — all other details come later. When presenting a wireframe to teams, try to include annotations. Annotations help to create context and quickly deliver key ideas.
- Don’t use wireframes for product testing: Wireframes are hardly used for product testing. Even though they help designers gather feedback on design during initial research, they don’t replace actual interaction with a product (through an interactive prototype).
Validate Ideas
There are two types of ideas: good ideas that lead \to product success, and bad ideas that can lead to failure. Of course, design execution is important, but the idea itself plays a crucial role in the process. A well-executed bad idea is a big waste of time and energy. It’s critical to reveal bad ideas as early as possible. So, how do you distinguish a good idea from a bad one? A technique called a design sprint can help you with that.
Design Sprint
A design sprint is a five-day design framework for validating ideas and solving challenges. It enables product teams to build a prototype that they can put in front of users to validate the initial design hypothesis (to see if it solves the problem for the user).
Design sprints are a process of quickly creating a product’s future state, be it a website or app, and validating it with a group of users, stakeholders, developers and other designers. This whole concept is based on the idea that, by a design team setting a direction and iterating rapidly, it’s possible to design a product that presents the maximum value for people who will use it.
Tip:
- Don’t get stuck with the first solution that comes to mind: In most cases, your first ideas won’t be good enough, because at the early stage of ideation, you won’t yet have a good understanding of the problem you’re trying to solve. Generate as many different designs as possible instead of focusing solely on your first solution.
5. Design
After the ideation phase, the product team should have a clear understanding of what they want to build. During the design phase, the product team will begin to create the solution to solve the client’s problem and implement concepts.
Prototyping
To deliver a good user experience, prototyping must be a part of your design process. A prototype is an experimental model of an idea that enables you to test it before building the full solution. A prototype often starts small, with you designing a few core parts of a product (such as key user flows) and grows in breadth and depth over multiple iterations as required areas are built out. The finalized version of a prototype is handed off for development.
When it comes to prototyping, efficiency is vital. One of the most efficient prototyping processes is rapid prototyping. The process of rapid prototyping can be presented as a cycle with three stages:
- Prototyping: Creating a solution that can be reviewed and tested.
- Reviewing: Giving your prototype to users and stakeholders and gathering feedback that helps you understand what’s working well and what isn’t.
- Refining: Based on feedback, identify areas that need to be refined or clarified. The list of refinements will form the scope of work for your next design iteration.
Prototypes range from rough sketches on a piece of paper (low-fidelity prototypes) to interactive simulations that look and function like a real product (high-fidelity prototypes). Depending on the stage of the design process and the goals of the prototype, you’ll need to select the appropriate prototyping technique. It’s crucial to choose the method of prototyping that minimizes work and maximizes learning.
Paper Prototyping
A lot of digital prototyping tools today help us to create prototypes with the least possible amount of effort, but sketching on a paper still remains the most important tool for any designer. That’s because sketching allows designers to quickly explore a lot of different design alternatives without investing much time and energy in each one. It forces designers to concentrate on the essence of a product’s design (what it does), rather than its aesthetics (how it looks). And what’s especially great about sketching is that it opens up design to everyone — anyone can sketch, and no special tools are required. The fact that anyone can participate in the design process makes sketching an ideal tool during brainstorming sessions.
Tip:
- Paper prototyping allows for rapid experimentation: Different user interface elements can be drawn, cut out, copied to make extras, and then assembled on a new piece of paper. Digital Prototyping With paper prototyping, explaining complex interactions in words can be tough. When a designer needs to explain a complex design detail such as an animation to a developer or wants to run a user research session to validate a design, they usually use a digital interactive prototype.
Digital prototyping is the process of creating an interactive design that other people can experience themselves. Just a decade ago, in order to build a high-fidelity prototype, you actually had to code the solution using programming language. These days, prototyping tools allow non-technical designers to create high-fidelity prototypes that simulate the functionality of a final product in just a few clicks.
Tips:
- Avoid dummy text: Dummy text, like lorem ipsum, should be avoided in early stages of digital prototyping. Use real content to understand how it affects the overall design.
- Use digital prototypes as an up-to-date specification for developers: Prototyping tools such as Adobe XD allow you to spit out specification documentation in just a few clicks. It’s an always up-to-date specification available to developers.
Design Handoff
At the end of the prototyping phase, the design will be ready for production. It’s the time when the designer hands over the design to a developer for coding. During the developer handoff, a designer must clearly communicate to the developer how every piece of the design looks and works. Multiple layers of information and detail need to be conveyed, and it’s critical for designers and developers to be on the same page.
Design Specification
Design specs are detailed documents that provide information about a product, such as user interface design details (colours, character styles and measurements) and information (flows, behaviours and functionality). A developer uses this document to take the design into production and build the product to the designer’s specifications.
To be continued in Part 4 of the series
