The user design process is never complete. A UX designer is always reviewing their process to see how they can create an even better design for their users. UX is an iterative process. A good designer will expect to wash, rinse, and repeat over and over again with the goal of creating an even better product for their user.
The UX design process can be divided into four key phases: user research, design, testing, and implementation but not necessarily in that order. There are nine common deliverables in the UX design process. These deliverables are essential as they provide documentation and serve as a basis for design decisions. They also assist in communicating the research and design ideas developed during the four phases. The nine key deliverables are:
- Personas
- Storyboards
- Custom Journey Maps
- Brainstorming
- User Flow
- Site Map
- Wireframes
- Style Tile
- Prototypes
Understanding and utilizing these deliverables can effectively enhance the user design process. I will briefly discuss each one and its significance in the creation of effective designs that address a user’s needs and how each is important in UX design.
User Personas: User Personas are a fictional person created to assist the development team in identifying the types of users who might interact with a product or website. They are usually created after the research phase of the project and are designed to help the team remember to prioritize features and functionalities of their design based on users goals and pain points. For established brands, they typically represent a sizable proportion of the site’s visitors and product consumers. The fictional character personas usually include the person’s age, gender, occupation, goals, motivations, skills, background, pain points, brands and any other relevant information garnered through the research phase. Most importantly, personas help designers understand and empathize with the users needs, behaviors, and goals and to keep those considerations at the forefront of their development process.
Storyboards: Storyboards are visual narratives which show the user’s journey with the product or website. They illustrate the tasks the users are trying to complete and under what circumstances.They usually consist of a sequence of drawings or images which depict the user’s emotions and challenges. Each panel represents a step in the user’s journey. This helps the designer turn ideas into tangible things and keeps the focus on the user. Storyboards have their roots in the movie industry. They help put a human face on data and research findings.
Custom Journey Maps: A customer journey map is another visual item used by designers. It is a visual representation of the customer’s experience while they are using the product and completing tasks. They provide insight into the needs of potential customers as they interact with the app, website, or product touchpoints. These maps can provide invaluable information and allow designers to remove potential obstacles and make the process more efficient and intuitive.
Brainstorming: Brainstorming is a process where design teams come together to generate ideas to address specific design challenges that they uncovered during the user research phase. It allows for the free flow of ideas in a non-judgmental environment. The goal is to write down as many ideas as possible which can potentially be developed and assist in furthering the design process.
User Flow: User Flow Diagrams visually illustrate the path a user takes through a website or application. It charts or breaks down the actions or steps the user takes to complete a task or goal. A user flow focuses on the user’s needs and the most efficient way to meet them. They detail the possible actions and decisions a user could make and are used to communicate the user’s needs to the team, including developers and product owners.
Site Maps: Site Maps, as the name suggests, help to map or organize the content and pages of a website. They show how a user can navigate through the site or pages or app. They illustrate the overall structure showing the hierarchy of the content and navigation between the pages or product.
Wireframes: A wireframe is a technical document that depicts the page structure, layout, information architecture and user flow of a website. It is a visual representation of a website or app page structure. It can be an illustration or a diagram. Wireframes can be low, medium, or high fidelity and can be as basic as a paper and pencil drawing or sketch. They provide a skeletal representation of a website or application layout and display the functional elements of a website including the allocation of space and the distribution of images and content. They allow designers an opportunity to improve the user experience at nominal cost. As the primary focus is on structure vs aesthetics, designers can develop their navigation and structural elements without worrying about how everything looks. Teams can be creative and can identify challenges in a low stress user centered environment.
Style Tile: A style tile in UX design is a visual reference that illustrates the essential design elements and style of a website or product. A style tile typically includes color palettes, textures or patterns, typography and interface elements like buttons and icons. Style tiles bridge the gap between mood boards and mock-ups essentially providing a more cost effective middle ground. A style tile helps establish a common visual language between stakeholders and designers which can ensure consistency across all stages of the project. They help stakeholders understand the proposed aesthetic without being distracted by layout details.
Prototypes: A prototype is a draft version of your site or product that takes you as close as possible to an accurate representation of your website or product and its user interface before any coding or product development has begun. By utilizing the prototype, the UX team is able to see how the overall design will work together and resolve any inconsistencies or errors. It allows UX designers the opportunity to explore and experiment with ideas and check functionality and usability prior to actual product development. Building prototypes can be effective in that it saves both time and costs. There are three types of prototypes: low fidelity, high fidelity and interactive. Low fidelity prototypes check and test the functionality of a product or website vs its visual appearance. High Fidelity Prototypes test the functionality of the project and include visual designs and take into consideration the size of different screens. Interactive Prototype’s test the functionality of the project and include visual designs and can be fully functional simulations.
The UX process has been essential in the development process of the work with my client project. Being able to utilize wireframes, prototypes, usability reports and develop user personas has allowed me to specifically address my clients needs while incorporating these design processes to assist them in reaching their goals. I believe this will help us both reach the dual objective of customer and user satisfaction which will enable business growth and positive brand visibility.