Downloaded 1,585 times
Uploaded byDMI
UX & UI Design - Differentiate through design
The document discusses the importance of user experience (UX) and user interface (UI) design in creating effective and user-friendly products. It emphasizes that UX is a problem-solving approach that involves understanding user needs and context, while UI complements UX through visual elements. The text also highlights various stages of the UX process, including planning, design, usability testing, and collaboration among cross-functional teams.
More Related Content
Similar to UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
- 1. (Replace with fullscreen background image) UX & UI Design Differentiate through design
- 2. (Replace with fullscreen background image) Why UX Matters With a UX focus we can build beautiful and desirable products, whether apps or mobile websites, differentiated by usefulness and usability. The Batmobile is an example of a product where the user experience is a crucial component. This durable vehicle has wheels, an engine and it can take you from point A to point B. But the thing is, if we at any certain point of the project only look at these features separately, we might as well end up with something completely different...
- 3. (Replace with fullscreen background image) Design is problem solving To design is to plan and make something for a specific use or purpose – design is problem solving. With a UX mindset we design for a user in a context, not for separate features in a list. The VW Camper is indeed, like the Batmobile, a very cool vehicle, and they both have many features in common (wheels, an engine, the ability to transport you between places, to name a few features for example). However, the usefulness and usability are optimized for totally different situations.
- 4. (Replace with fullscreen background image) Ultimate UX As UX professionals it is our responsibility to deliver the best possible user experience within the project constraints. By assigning a senior UX designer to lead as early as possible in the insights and planning phase, we ensure that UX is part of the planning and estimation and that the whole/full project of the app or mobile website has an optimized UX strategy.
- 5. Based on projectspecific aspects, the UX design lead will select a set of ideal UX activities and design deliverables. They then appropriately balance that against the project constraints, weighing in factors such as budget, time available, delivery deadlines, project life span, resource availability, information availability, related projects, access to tools and legal documentation, etc.
- 6. (Replace with fullscreen background image) UX is NOT a step in the process... ...it is in everything we do. UX is more than anything a project philosophy, not just a set of tools, methods and deliverables. With a holistic approach of this type, UX will permeate all the steps of a project from planning through production to quality assurance. The key principle for a UX project is to ensure that we involve the users in the process. The beauty of this is that there is always some value that can be added, regardless of the project constraints. The trick is to work out how to make best use of your time.
- 7. (Replace with fullscreen background image) Something that looks great but is difficult to use is exemplary of great UI and poor UX. While something very usable that looks terrible is exemplary of great UX and poor UI UI complements the UX UX Design is a more analytical and technical field and UI complements the UX with look and feel and interactivity of a solution. In analogical terms, UI design produces a solutions’ skin. Both, UX and UI are crucial to a product and work closely together. The content is not only for viewing, but also to interact with, so UI Designers should also consider animations, transitions, gestures and device ergonomics in order to communicate the best possible way for users to access this content.
- 8. (Replace with fullscreen background image) In the screens above you can see examples for both, poor UI versus good UI solutions. In the first example the user’s experience when interacting with the interface will be affected by small type sizes and unclear call to action. In the second example the text is more legible due to choosing a proper type size for mobile devices. It’s also more clear for the user what is the main action expected from him by differentiating chromatically the buttons and guiding him to perform a specific task, in this case buying a product.
- 9. (Replace with fullscreen background image) 6. USABILITY TESTING 1. PLANNING & IDEATION 2. UX/UI DESIGN 3. DEVELOPMENT 4. QA 5. MEASURE & ENHANCE Our Project Philosophy THE USER EXPERIENCE PROCESS
- 10. (Replace with fullscreen background image) MINI STANDARD FULL Level of UI customization Minimal UI Customization Minimal adaption of the native UI components. Moderate/Standard UI Customization A few selected components, animations or transitions will require the use of non-native solutions. Full UI Customization A large part of the UI design will need non-native components and/or a substantial amount of customization.
- 11. (Replace with fullscreen background image) SINGLE FOCUS TYPICAL FOCUS COMPLEX CONCEPT App Concept Single Focus Concept One main focus such as Notes or Reminders. Typical Concept One main purpose, but also a few more or less loosely related features. Complex Concept Complex apps that will need to accommodate complex information structures or multiple elaborate task sequences.
- 12. (Replace with fullscreen background image) The Production Team Ideally we want to work in small, agile cross-functional production teams starting from the very beginning of a project. This sets the scene for creative collaboration, fast turnover of ideas and allows skills from different knowledge areas to cross-pollinate. This in turn increases the general understanding of the product as well as guaranteeing all quality aspects. Many of the UX activities presented in the following pages should preferably involve all members of the production team, in addition to the client, when applicable.
- 13. (Replace with fullscreen background image) Scoping & Design All projects must have a dedicated scoping & design phase. During this planning phase it is all about understanding what we have been asked to do and working out the best combination of activities that will give us the outcome we need- within the time, budgetary and resource constraints of the project. The goal for this phase is to have a clear scope and design direction approved by the client, and an unambiguous roadmap for the production team to start the development.
- 14. A solid UX/UIwork will result in… 1. Better products. 2. Cheaper to fix problems. 3. Less risk. 4. Better ability to deliver to deadline and avoid scope creep. 5. Deeper insights. 6. Products that are easy to use make more money. 7. User-led projects can get products to market more quickly. 8. Ease of use is a common customer requirement.
- 15. UX/UI Terminology Activities& Deliverables
- 16. (Replace with fullscreen background image) 1. Stakeholder Interviews Prior to scoping and design most projects have a data gathering phase to understand the user, requirements and objectives. This phase includes stakeholder interviews and research but also other data gathering. E.g. usage data and demographics from an existing website or app. Hold individual talks with key stakeholders to understand the business requirements. This structured way to gain insights into the reasoning behind the project will result in invaluable findings.
- 17. (Replace with fullscreen background image) 2. Expert Reviews Deeper evaluation of an application or website to indentify usability issues. It includes an evaluation of the efficiency of the flows and an assessment of the best practices in navigation, layout, behaviour, interface and others attributes.
- 18. (Replace with fullscreen background image) 3. Requirements Workshop Gather key stakeholders together for a group discussion around the project brief and conduct group exercises designed to gain a deeper understanding of the project. Often the important insights come from the conversation itself, rather than the output of the exercise. A successful requirements workshop leads to a shared understanding of the project.
- 19. (Replace with fullscreen background image) 4. Competitor Benchmarking A structured way of evaluating competitor products to determine their strengths and weaknesses and opportunities to innovate with your own product. The results may be presented as a spreadsheet checklist, a more detailed analysis or as annotated screenshots.
- 20. ...to create andedit my profile. ...to enter my account details. (Replace with full screen ...to store background my credit card image) information. ...to select my current location. AS A USER I WANT... ...to select my favorite locations. 5. User Stories User stories are short narrative texts that describe an interaction between the user and the app focusing on the value a user gains from the app. It also provides enough detail to make a reasonably low risk estimate of how long the story will take to implement. The user stories will benefit from being accompanied by an additional list of requirements and acceptance tests (according to a classic agile software development approach).
- 21. LAUNCH 101. SplashScreen ICON Background image (Replace with full screen background image) Brand Logo 6. App Map & Information Architecture Presented as a high-level hierarchical diagram representing the information hierarchy within the app. This document is focused on what screens the app will contain and how the different screens are linked together by labeled arrows and boxes. 201. Login Screen Remember password checkbox Access to Login Access to Remember Password Access to Skip 301. Home Screen Shows images and information Swipe left to access to News Access to Search Access to Calendar After remember password First time
- 22. (Replace with fullscreen background image) Listen Events Radio Discover Label s Settings 28 Radio Smart Radio House Drum & Base Live Radio Techno Chill Out House Song Name Artist PURCHASE 7. Wireframes Wireframes are schematic blueprints that represent an app as a skeletal framework. They show navigation structures, representative or dummy content, calls to action, dummy imagery, form elements and advert placement and they usually lack typographic style, color, and final imagery. This allows us to explore the content, navigation, and interactions separately from visual content.
- 23. Radio Smart Radio Live Radio (Replace with full screen background image) Listen Events Radio Discover Label s Settings 28 House Drum & Base 8. Wireframe flow chart Techno Chill Out The Wireframe flow chart is a document containing interconnected wireframes. It describes at a high level of detail the main paths the user can take when interacting and navigating through the app.The wireframe flow chart should also cover the main user stories. House Song Name Artist PURCHASE Purchase Process Artist Name Album Description goes here. Full Name Card Number Expiration Month Year CVC Credit Debit $$$ BUY NOW
- 24. (Replace with fullscreen background image) 9. Mood Board A mood board is a type of poster design that may consist of images, fonts and samples of objects in a free composition of any kind. When a client wants to create a new look & feel for a specific mobile solution (or no brand guidelines exists), a mood board is used to facilitate the communication between the project team and the client on what the graphical direction will be.
- 25. (Replace with fullscreen background image) 10. Visual Design Mockups The visual design concept for the app will be presented in 3-5 high fidelity screen mockups representing the look and feel of the artwork of the final product. The mockups are likely to contain placeholder content instead of the real data and images; placeholder photos will later be replaced. The visual design concept captured in a few selected key screens will later be applied to all other screens of the app.
- 26. (Replace with fullscreen background image) 11. Prototyping Low Fidelity Prototyping A technique where we quickly mockup ideas in an interactive form that brings them to life to elicit feedback. It could be a paper or digital format based on rough sketches or wireframes. High Fidelity Prototype Interactive tappable mockups presenting the main screens and main functionality of the app without real data.
- 27. (Replace with fullscreen background image) 12. Graphical Assets The implementation of the app will require graphical assets to be extracted from the final design mockups. These graphical assets then need to be further adapted to match different screen resolutions depending on which platform(s) the app(s) will target. The amount of effort required to extract these graphical assets depends on the visual design of the app; some visual element can be implemented directly in code, while others need to be provided as image files.
- 28. (Replace with fullscreen background image) 13. Design Implementation Guidelines This document serves as a guide for developers during the development phase when design specifications are needed for a pixel perfect implementation. These annotated screen representations specify measurements, positioning of elements, typographical information, colors etc. The implementation guidelines are always provided to the developers in all projects.
- 29. (Replace with fullscreen background image) 14. Usability Testing The measured observation of users’ behavior when using your application. It will be an integral part of the UX process and doesn’t end at launch. With this process, the UX lead can explore concepts, terminology, navigation, content, page layout and functionality. Testing Materials Low Fidelity Prototyping, High Fidelity Prototyping and Real App.
- 30. (Replace with fullscreen background image) Types of Usability Testing Guerrilla Usability Testing Informal user involvement when little or no budget exists. Lab Usability Testing User involvement in a controlled environment. Contextual Usability Testing User involvement in the right environment. Remote Usability Testing Online user involvement. GUERRILLA USABILITY TESTING LAB USABILITY TESTING CONTEXTUAL USABILITY TESTING REMOTE USABILITY TESTING
- 31. 15. Analytics Analyticswill likely require a non-trivial investment in time plus close collaboration with the QA Team. These must eventually be implemented for us to be able to offer premium UX services to our clients.
- 32. 1. Stakeholder InterviewsIndividual talks to gain a deeper understanding of requirements as part of prior research. 2. Expert Reviews 3. Requirements Workshop Bring project players together for insights on project requirements. 4. Competitor Benchmarking Evaluate competition for weaknesses and opportunities. 5. User Stories Short narrations describing interaction between user and app. 6. App Map & Information Architecture High-level diagram representing information hierarchy and organisation of the app screens. 7. Wireframes Schematic blueprints representing the skeletal framework. 8. Wireframes flow chart Detailed information of the app navigation. 9. Mood Board Poster design with images and text to communicate design concepts. 10. Visual Design Mockups 3-5 high fidelity mock-ups representing the look and feel of the final product. 11. Prototyping Interactive hi- or low-fidelity mockups. 12. Graphical Assets The visual elements of the app adapted for each screen resolution and platform. 13. Design implementation guidelines Document used to ensure perfect implementation of the visual elements during development. 14. User Testing Measured observation of the users’ behaviour when engaging with the app. 15. Types of Usability Testing Guerilla, lab, controlled and remote. 16. Analytics Data used to measure and optimize. Summary
- 33. Fighting for aworld full of mobile solutions since 2005 web www.goldengekko.com email info@goldengekko.com