A Better Design Approach

Understanding the Goals of a Product and bringing out the value for the users. Based on Devcenter Design Approach

Transcript

1. A Better Design Approach Understanding the Goals of a Product and bringing out the value for the users. Based on Devcenter Design Approach
2. Hello! +Wisdom Anthony I build for the Web and also the Blockchain | @ghost @wisdomanthoni wisdomanthoni
4. Work of a UX Designer Being good at visual design, in our opinion, is the easiest part of the design process. What’s more important is understanding the goals of product owners and how products can add value to their users. The work of a UX designer happens in many different environments—from lean startups and Agile environments where teams work with little documentation, to consulting engagements for third-parties, or large enterprises and government entities with strict documentation requirements.
5. 1. Onboarding Designers to a Product. Product Team or Product Managers play a major role in doing a bit of scoping and research about the problem that needs to be solved and the resources (time, people and tools) needed for the project. ➔ Product Requirement Document A PRD shows detailed goals the client would like to accomplish with the product and the value the product should add to its users.. ➔ High Level Evaluation of the Problem ➔ Competitive Analysis Report Competitive analysis means: “Identifying your competitors and evaluating their strategies to determine their strengths and weaknesses relative to those of your own product or service.”
6. DESIGN PHASE 1 Information Architecture and User flows for the Product to be generated. Tip An information architecture and user-flows for the product being designed is generated. In cases where the product is huge, a customer journey map may be required.
7. 2. Information Architecture An Information Architecture helps us understand how the product will be structured. Should all features of the product be accessible before user’s sign-in or are some hidden until after sign-in? It is the art and science of organizing and labeling a product’s components—to support navigation, findability and usability; they also help you define the taxonomy and user interface. ➔ SiteMap A sitemap is a visually organized model of all the components and information contained in a digital product. It represents the organization of an App or site’s content. ➔ WireFrame Wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. With a purpose of arranging elements to best accomplish a particular purpose.
8. 3. User Flows Think of a user flow as the user working on one task or goal via your product or service, e.g. booking a car on Lyft; a user journey illustrates the bigger picture. A user journey expands beyond tasks, and looks at how a particular customer interaction fits into a larger context. ➔ Experience Maps An experience map is a visual representation that illustrates a user’s flow within a product or service—their goals, needs, time spent, thoughts, feelings, reactions, anxieties, expectations—i.e. the overall experience throughout their interaction with a product. It’s typically laid out on a linear timeline showing touchpoints between the user and the product. ➔ User Journeys User journeys and user flows are more about a series of steps a user takes, and demonstrate the way users currently interact—or could potentially interact with a product..They demonstrate behavior, functionality and the key tasks a user might perform.
9. DESIGN PHASE 2 Personas & HiFi Design (With a little UX Research Report and WireFraming) Tip Once all the goals and results above have been achieved and documented we move on to wireframing.
10. UX designers need to make sure stakeholders understand the needs of the product’s customers. Creating personas to encapsulate and communicate user behavior patterns and conducting user research are tried-and-true ways to do it. Personas are representative of a product’s typical users—by incorporating their goals, needs and interests, they help the team working on the project develop empathy towards the user. There are many types of user research tools and techniques available—it’s all about choosing the right “lens” for the right situation. Tip Before embarking on user research, it’s important to take the time to develop a research plan..
11. 3. Personas Personas are representative of a product’s typical users—by incorporating their goals, needs and interests, they help the team working on the project develop empathy towards the user. User research is also an integral component in the UX design process. It involves a range of techniques used to extract behavioral patterns, add context and give insight into the design process.
12. 4. WireFraming Break products being built down into to sprints. Each sprint typically lasts a week, in cases where a product has a wider scope and/or higher complexity than anticipated some sprints may last for 2 - 3 weeks.. At the conclusion of the user research phase a report translating the research findings into actionable items is generated. The UX team is then set to design the product around those items.
13. 5. HI-FI Design The goal at the end of the sprint is for our designers to have come up with a prototyped hi-fi wireframe for that module. This allows product team and the client, to test the wireframe as if it were the finished product. They’re great tools to quickly ideate beyond sketching, and they come in many different flavors—from low-fidelity (no styling, black and white boxes, greeked text) to high-fidelity (fully styled, color, very detailed).
14. “If you don’t spend the appropriate time at the beginning you will spend it and more later, guaranteed”
15. What if I’m better at UX than UI? Story for illustration purposes only
16. The penultimate step of our product design process is for the designers to test once the frontend engineer confirms he/she has completed a sprint. Tip Ideally, speak of people in very different situations, but where each could benefit from your solution.
17. Thank You! References: UX Deliverables Devcenter Design Approach wisdomanthoni @wisdomanthoni