Get hands-on advice for rapid Agile prototyping in a product team.
You'll learn:
- How to determine the right depth and breadth for MVP prototypes.
- How to prioritize use cases for prototyping.
- How to elicit the right stakeholder and user feedback.
- How to correctly annotate prototypes for dev and QA.
Design Spikes for the Dual-Track Agile Processuxpin
You'll learn:
How to fit design spikes into a Scrum framework
How to address user stories without neglecting UX strategy
How to solve design problems before they become development issues
User Story Mapping for Minimum Lovable Productsuxpin
You'll learn:
How to visualize user needs instead of product features
How to make better decisions when prioritizing a UX backlog
How to align sprints with UX strategy
You'll learn:
- How to run the right research on tight timelines
- How to plan research while still designing
- How object-oriented UX can improve the Agile process
This is the story of how we doubled the conversion rate on HubSpot.com, by leveraging a lean design process that's focused on rapid iteration and objectivity. Get an in-depth look at our distinctive UX process and how we've applied it at a public company with over 1,600 employees across 7 global offices. See exactly how it works and walk through every step of a real project, where we redesigned HubSpot.com in a period of less than 3 months. See the results, both quantitatively and qualitatively, and how we achieved them. Walk away with all of the information that you need to apply a similar process at your company. This isn’t another abstract process talk; it’s a hands-on session with actionable learnings and take-aways, backed up by data and a well-documented case study.
Building a Design System: A Practitioner's Case Studyuxpin
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team
Walk, Don't Run: Incremental Change in Enterprise UXuxpin
You'll learn:
- A realistic approach to product improvement in large enterprises
- How to create and execute a pilot program for overcoming “product stagnation”
- How to scale the program to a growth team dedicated to improving existing products
Design Spikes for the Dual-Track Agile Processuxpin
You'll learn:
How to fit design spikes into a Scrum framework
How to address user stories without neglecting UX strategy
How to solve design problems before they become development issues
User Story Mapping for Minimum Lovable Productsuxpin
You'll learn:
How to visualize user needs instead of product features
How to make better decisions when prioritizing a UX backlog
How to align sprints with UX strategy
You'll learn:
- How to run the right research on tight timelines
- How to plan research while still designing
- How object-oriented UX can improve the Agile process
This is the story of how we doubled the conversion rate on HubSpot.com, by leveraging a lean design process that's focused on rapid iteration and objectivity. Get an in-depth look at our distinctive UX process and how we've applied it at a public company with over 1,600 employees across 7 global offices. See exactly how it works and walk through every step of a real project, where we redesigned HubSpot.com in a period of less than 3 months. See the results, both quantitatively and qualitatively, and how we achieved them. Walk away with all of the information that you need to apply a similar process at your company. This isn’t another abstract process talk; it’s a hands-on session with actionable learnings and take-aways, backed up by data and a well-documented case study.
Building a Design System: A Practitioner's Case Studyuxpin
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team
Walk, Don't Run: Incremental Change in Enterprise UXuxpin
You'll learn:
- A realistic approach to product improvement in large enterprises
- How to create and execute a pilot program for overcoming “product stagnation”
- How to scale the program to a growth team dedicated to improving existing products
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
User experience (UX) is the basis for all Web activity, and thus underpins everything we do in Web design and development. Successful projects bake UX in from the ground up, from discovery through planning, iteration, testing and deployment. No matter how beautiful our code may be, of what use is it if it’s irrelevant to our users?
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...uxpin
You'll learn:
- How to sustain design thinking beyond the workshop
- How to use “design interventions” to create long-term impact in enterprises
- Best practices for evangelizing enterprise UX based on SAP’s experiments
The Future of Enterprise UX Design: An Asana & Quickbooks Case Studyuxpin
You'll learn:
- Techniques for designing enterprise UX base on new user expectations.
- How to design a consumer-grade enterprise experience
- Enterprise UX best practices based on case studies from Asana and Intuit
Code with Empathy: UX for Engineers and UX DevelopersAnita Cheng
User experience is a hot field, but still very new for many tech companies. Let’s face it, the companies who can devote the resources for a robust UX process are few and far between! Software developers often find themselves making design decisions by necessity, which ends up complicating the product lifecycle down the road. So what can developers learn right now to improve the usability and delight of their products?
This talk was given to audiences of UXPALA members, USC students, and developers at SoCal Code Camp.
Daniel explains how to use participatory design to cut through complexity. Learn useful tactics based on his experience building and growing the UX discipline at Sumo Logic.
Integrating Design and Development in Your WorkflowKarl Kaufmann
Integrating design into your workflow boosts team understanding and collaboration, minimizes costly changes, and delivers your client a product much more smoothly.
Based on his experience at Airbnb and research with companies like Pinterest and Gusto, Jason offers a clear framework for scaling UX quality, processes, and teams.
How well do you think your product team takes what they learn from their users and puts it into the next iteration of the product? How well does your team come to a common understanding of what the next iteration of the product will look like and then build a product that reflects that common understanding?
These two problems — improving your product with user research and effective team collaboration — can both be solved with a design tool called User Story Mapping.
UX Workshop introducing what UX is and why it is important. The audience may or may not be familiar with UX so the presentation focuses more on principles than a step-by-step how-to.
Short internal presentation I gave to introduce Lean UX at the web agency where I work.
It gives a condensed view of the Lean UX approach, its principles, tools, processes and pitfalls.
Why your product team should use User Story Mapping to link user research to ...John Murray
How well do you think your product team takes what they learn from their users and puts it into the next iteration of the product? How well does your team come to a common understanding of what the next iteration of the product will look like and then build a product that reflects that common understanding?
These two problems — improving your product with user research and effective team collaboration — can both be solved with a design tool called User Story Mapping.
In this session, attendees will hear how to apply User Story Mapping to connect user research to user stories for Design Thinking and Agile Development and the experience our teams have with the method. Attendees will get a taste of going through running a simple user story mapping workshop so that they will feel comfortable taking the process back to their business.
You'll learn:
- How to scope your UX strategy based on challenges and aspirations.
- How to focus your team on the right design principles and activities to achieve desired outcomes.
- How to measure the success of your strategy and tactics.
Lean UX in the Enterprise: A Government Case Studyuxpin
You'll learn:
- How to quickly identify user groups despite vague assumptions.
- How to define clear features amidst complex requirements and business objectives.
- How to establish efficient UX processes across disjointed teams.
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
User experience (UX) is the basis for all Web activity, and thus underpins everything we do in Web design and development. Successful projects bake UX in from the ground up, from discovery through planning, iteration, testing and deployment. No matter how beautiful our code may be, of what use is it if it’s irrelevant to our users?
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...uxpin
You'll learn:
- How to sustain design thinking beyond the workshop
- How to use “design interventions” to create long-term impact in enterprises
- Best practices for evangelizing enterprise UX based on SAP’s experiments
The Future of Enterprise UX Design: An Asana & Quickbooks Case Studyuxpin
You'll learn:
- Techniques for designing enterprise UX base on new user expectations.
- How to design a consumer-grade enterprise experience
- Enterprise UX best practices based on case studies from Asana and Intuit
Code with Empathy: UX for Engineers and UX DevelopersAnita Cheng
User experience is a hot field, but still very new for many tech companies. Let’s face it, the companies who can devote the resources for a robust UX process are few and far between! Software developers often find themselves making design decisions by necessity, which ends up complicating the product lifecycle down the road. So what can developers learn right now to improve the usability and delight of their products?
This talk was given to audiences of UXPALA members, USC students, and developers at SoCal Code Camp.
Daniel explains how to use participatory design to cut through complexity. Learn useful tactics based on his experience building and growing the UX discipline at Sumo Logic.
Integrating Design and Development in Your WorkflowKarl Kaufmann
Integrating design into your workflow boosts team understanding and collaboration, minimizes costly changes, and delivers your client a product much more smoothly.
Based on his experience at Airbnb and research with companies like Pinterest and Gusto, Jason offers a clear framework for scaling UX quality, processes, and teams.
How well do you think your product team takes what they learn from their users and puts it into the next iteration of the product? How well does your team come to a common understanding of what the next iteration of the product will look like and then build a product that reflects that common understanding?
These two problems — improving your product with user research and effective team collaboration — can both be solved with a design tool called User Story Mapping.
UX Workshop introducing what UX is and why it is important. The audience may or may not be familiar with UX so the presentation focuses more on principles than a step-by-step how-to.
Short internal presentation I gave to introduce Lean UX at the web agency where I work.
It gives a condensed view of the Lean UX approach, its principles, tools, processes and pitfalls.
Why your product team should use User Story Mapping to link user research to ...John Murray
How well do you think your product team takes what they learn from their users and puts it into the next iteration of the product? How well does your team come to a common understanding of what the next iteration of the product will look like and then build a product that reflects that common understanding?
These two problems — improving your product with user research and effective team collaboration — can both be solved with a design tool called User Story Mapping.
In this session, attendees will hear how to apply User Story Mapping to connect user research to user stories for Design Thinking and Agile Development and the experience our teams have with the method. Attendees will get a taste of going through running a simple user story mapping workshop so that they will feel comfortable taking the process back to their business.
You'll learn:
- How to scope your UX strategy based on challenges and aspirations.
- How to focus your team on the right design principles and activities to achieve desired outcomes.
- How to measure the success of your strategy and tactics.
Lean UX in the Enterprise: A Government Case Studyuxpin
You'll learn:
- How to quickly identify user groups despite vague assumptions.
- How to define clear features amidst complex requirements and business objectives.
- How to establish efficient UX processes across disjointed teams.
You'll learn:
- How to design better for complex users with team-based personas
- How to differentiate and segment personas
- How to create clear personas from user data
- How to increase accuracy with collaborative persona mapping
You'll learn:
- How to solve product problems and uncover UX opportunities
- How to plan and track your experiments
- How to supplement qualitative product feedback with quantitative data
You'll learn:
- How and when to involve developers during product design.
- Proven criteria for a smooth Sketch handoff.
- How to continue collaborating after handoff.
- Best practices for visual hygiene, naming conventions, and asset preparation.
Get best practices based on trial and error from 50+ design sprints.
You'll learn:
- A scalable framework for 5, 7, or 10+ day design sprints.
- How to unpack assumptions, prototype quickly, and validate designs in days.
- Step-by-step instructions for each day of a design sprint.
The State of Enterprise UX 2016: Panel Discussionuxpin
You'll learn:
- The most pressing challenges faced by enterprise product teams today.
- The emerging themes of enterprise design for 2017 and beyond.
- Effective solutions for overcoming the hurdles of enterprise UX.
You'll learn:
- How to create a consistent design language across product lines
- When and where to allow for exceptions to the design language
- How to create the infrastructure to support coherent design
You'll learn:
- How to get buy-in from executives and stakeholders for user research
- How to choose lightweight yet effective research methods
- How to document your results to prove ROI
You'll learn:
- How to create a clear UX strategy with teams across silos
- How to resource and plan tactics based on UX strategy
- How to track progress against your mission-based strategy
- How to delegate UX missions to designers
Seismic Change in Enterprise UX: Blowing Up Your Legacy System to Start From ...uxpin
You'll learn:
- When to rebuild a legacy system vs. work around your current system
- How to prepare and roadmap for a legacy rebuild project
- Step-by-step instructions for successfully rebuilding a legacy system
Know how to drive an Agile UX process without sacrificing quality or consistency.
You'll learn:
- How to balance Agile processes with user-centered design.
- How to drive and govern collaborative design.
- How to stagger UX and dev sprints, how to minimize documentation, run user research, and more.
Based on her 5 years as a UX leader at Citrix, Julie explains how to drive better product design through cultural transformation. See how she helped build design culture for designers and non-designers across different continents.
You'll learn:
Interaction design best practices for data products
How to transform unstructured data to useful insights for users
How to adapt to upcoming trends in data products
You'll learn:
- How to identify and classify design debt
- How to solve product quality issues in fast-paced teams.
- How to address, avoid, and manage design debt.
Designing a Sustainable Enterprise UX Processuxpin
You'll learn:
- How to select the right UX activities and plan resources appropriately.
- How to evolve your process as you grow.
- How to conduct proper discovery, transition from waterfall to Agile UX, and more.
Putting personas to work - University of Edinburgh Website ProgrammeNeil Allison
I use personas to support the development of the University of Edinburgh's corporate Content Management System and associated services.
A significant challenge is to try to ensure that all members of the team understand and empathise with the personas that represent our CMS user group.
This session (first presented February 2014 at a Web Publishing Community session) outlines activities I use to help foster shared understanding within the team and wider group of stakeholders.
Los Angeles User Experience Meetup March 5, 2013. "Lean UX with Lane Halley, Jaime Levy and Chris Chandler" at Cross Campus, Santa Monica CA
http://www.meetup.com/ia-55/events/98595432/
This is part one of the Lean UX workshops outlining in a practical way, the Lean UX processes. These workshops are run as part of the Lean UX Labs experiment.
"A scenario is a description of a person’s interaction with a system.
Scenarios help focus design efforts on the user’s requirements, which are distinct from technical or business requirements.
Scenarios may be related to ‘use cases’, which describe interactions at a technical level. Unlike use cases, however, scenarios can be understood by people who do not have any technical background. They are therefore suitable for use during participatory design activities." http://infodesign.com.au/usabilityresources/scenarios/
This is a quick overview of my design process which I can hardly call my own, because most of it is based on the work done by various experts in the field. I have compiled this to make it easier for anyone to get a quick overview of an end to end research to development lifecycle.
Part C Developing Your Design SolutionThe Production Cycle.docxsmile790243
Part C Developing Your Design
Solution
The Production Cycle
Within the four stages of the design workflow there are two distinct parts.
The first three stages, as presented in Part B of this book, were described
as ‘The Hidden Thinking’ stages, as they are concerned with undertaking
the crucial behind-the-scenes preparatory work. You may have completed
them in terms of working through the book’s contents, but in visualisation
projects they will continue to command your attention, even if that is
reduced to a background concern.
You have now reached the second distinct part of the workflow which
involves developing your design solution. This stage follows a production
cycle, commencing with rationalising design ideas and moving through to
the development of a final solution.
The term cycle is appropriate to describe this stage as there are many loops
of iteration as you evolve rapidly between conceptual, practical and
technical thinking. The inevitability of this iterative cycle is, in large part,
again due to the nature of this pursuit being more about optimisation rather
than an expectation of achieving that elusive notion of perfection. Trade-
offs, compromises, and restrictions are omnipresent as you juggle ambition
and necessary pragmatism.
How you undertake this stage will differ considerably depending on the
nature of your task. The creation of a relatively simple, single chart to be
slotted into a report probably will not require the same rigour of a formal
production cycle that the development of a vast interactive visualisation to
be used by the public would demand. This is merely an outline of the most
you will need to do – you should edit, adapt and participate the steps to fit
with your context.
There are several discrete steps involved in this production cycle:
Conceiving ideas across the five layers of visualisation design.
Wireframing and storyboarding designs.
Developing prototypes or mock-up versions.
219
Testing.
Refining and completing.
Launching the solution.
Naturally, the specific approach for developing your design solution (from
prototyping through to launching) will vary hugely, depending particularly
on your skills and resources: it might be an Excel chart, or a Tableau
dashboard, an infographic created using Adobe Illustrator, or a web-based
interactive built with the D3.js library. As I have explained in the book’s
introduction, I’m not going to attempt to cover the myriad ways of
implementing a solution; that would be impossible to achieve as each task
and tool would require different instructions.
For the scope of this book, I am focusing on taking you through the first
two steps of this cycle – conceiving ideas and wireframing/storyboarding.
There are parallels here with the distinctions between architecture (design)
and engineering (execution) – I’m effectively chaperoning you through to
the conclusion of your design thinking.
To fulfil this, Part C presents a detailed breakdown of the many design
.
This presentation is part of a Citrix Labs workshop introducing the concepts of rapid prototyping for developers. It focuses on the creation of early samples, models, or releases of a product built to test a concept or process or to act as a thing to be replicated or learned from.
User Experience Design + Agile: The Good, The Bad, and the UglyJoshua Randall
There's a rumor going around that user experience design (UXD) and Agile don't play well together. In this talk, I'll explain that they do -- most of the time! Learn about the historical reasons for why these two disciplines sometimes butt heads, as well as the good/bad/ugly of various approaches to integrating design and development.
This presentation is targeted to developers trying to learn enough design skills to fill in gaps when a ux designer is not available to work on a project. A secondary goal is to give developers insight into the design process.
Julie Grundy gives an overview of user experience Design, why it's important, guiding principles, UX research overview, and tactics used by UX professionals. November 2015.
I spoke at LA Uncubed to talk about Product Design at Fullscreen. I get into everything from Ideating, research, prototyping, testing & building, and key take aways
My Agile 2013 session 'Rapid Product Design in the Wild'. In August 2012 Red Gate attended Kscope, a conference for Oracle developers. Instead of doing the usual product demonstrations, we turned our stand into a live lab and took Agile development processes out of the office and in front of our customers. Our stand included an area for customer research, a Kanban board and information radiators in the form of a whiteboard, blank wall and a large digital screen. Over 3 days we ran 9 sprints and conducted 25 customer interviews, using a paper prototype to get feedback. We collected invaluable information about our customers' development environments, how they work with their teams, their processes, tasks and pain points. By the end of the conference my colleague had developed an interactive HTML/CSS prototype which potential customers could evaluate. The team went through several rapid build-measure-learn cycles to improve our product concept and validate the market need.
This presentation explains the process we used and introduces the Live Design Lab Planner, a tool which helps teams to plan this type of rapid product design activity.
Information architecture for websites and intranetsContent Formula
A quick introduction to the art and science of information architecture and how we apply it at Content Formula to build effective websites and intranets
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
How Atlassian builds and manages their design system across their product suite
How the Design System team empowers users by iterating with research and testing
How design and engineering cooperate to be efficient and productive
Accessibility in Design Systems by Allison Shawuxpin
You'll learn:
The benefits of accessibility in a design system
How to create and incorporate accessibility standards
How to improve accessibility across your product suite
UXPin: State of the Union Product Keynote by Marcin Trederuxpin
How UXPin unifies design with code in design systems
Recent design system features in UXPin alongside roadmap
Predictions for the future of design tools.
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimasuxpin
A case study from the Predix Design System at GE on how balance consistency and flexibility in a large scale design system.
You'll learn:
Where design systems should be consistent or flexible
How GE Digital handles consistency vs. flexibility in the Predix design system
How to adapt tools and technology to balance both.
- Useful technology and frameworks for a scalable design system
- How to create a design systems process from scratch
- How to collaborate with developers in a design system
Developing UX ROI in Enterprise Land: An ADP Case Studyuxpin
You'll learn:
How to develop a quantitative framework for measuring UX ROI
How to use UX ROI as a strategic alignment tool with CX and other internal customer teams
Best practices and lessons learned
Three's a Party: How Trifectas Help Product, Engineering, and Design Work Tog...uxpin
You'll learn:
How to change your collaboration model for PM, engineering, and design as teams grow
How to define responsibilities, cadence, and activities across every layer of a product organization
How Shopify tackles multi-disciplinary collaboration across product teams
Automating Design Processes for Teams: An IDEO Case Studyuxpin
You'll learn:
How IDEO used bots to help automate user research
How you can use automation to improve team efficiency
The future of automation in design
Calculating the ROI of UX with Standard Financial Modelsuxpin
You'll learn:
- How to create a UX ROI model with decision trees and expected values
- How to forecast the effect of UX on sales
- How to use SUS and NPS to measure the effect of UX
From 6 to 126 in 4 Years: The Story Behind Atlassian Designuxpin
You'll learn:
- How to lead design teams through periods of rapid growth
- How to change design processes, build design culture, and scale teams over time
- How to engage engineering and product teams to create a customer-focused organization
Building a UX Process at Salesforce that Promotes Focus and Creativityuxpin
You'll learn:
- How Salesforce designed a large-scale UX process across teams
- Why certain design activities were chosen over others
- How to preserve design quality at scale
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
You'll learn:
- How to create, adopt, and maintain your first design system
- How to practice a “design systems first” process of product development
- How to build and govern a design systems operations team
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
2. About Me
Nate Ginesi
Senior Information Architect
Background is in visual design and marketing.
Started in design and SEO and moved to
Information Architecture and User Experience
because the problem solving aspect and
psychology of design is always what intrigued me.
I love that I still get to use my design problems
solving skills while solving complex business
problems for users.
ME
3. About LookThink
LookThink is a full service user experience agency focusing
on B2B enterprise product design.
LookThink.com
6. What I hope you get out of this
• Help you move to a more Agile design process.
• Obtain faster approvals from product owners.
• Create natural collaboration with design team, development team,
and clients.
• Provide smoother handoffs to developers.
• Make your lives easier.
7. So let’s talk about how we got here ...
PROTOTYPINGSTATIC WIREFRAMES
16. What the client saw:
Is this going to be open all the time?
Can I click this image?
What does this show
when clicked?
Why is this turned off?
What happens when I
click the map?
Where will this go?
What page is this?
What happens when I
click the video?
Can I click
on these?
So, can users
click these?
Why is this
turned off?
What happens when there are
more than 20 results?
17.
18. We put an image here to
build trust in the brand.
The results page can only
support one search category at
a time.
We reduced the number of
links here to two to increase
focus.
Users are now enticed to
search first and can find
what they are looking for
easily.
Confused users can
now easily access the
video explaining who
you are.
The table is more well spaced to
provide easy scanning.
Suppressing the button will clue users
into the selection access.
Users will care
about the location
of their results, so a
map is critical to
them finding usable
results.
Users can now easily
access a particular
facility.
What we wanted the client to see:
19. We realized we were losing the fight,
not to our work, but to the static
wireframe as a deliverable
20. We committed to codeless
prototyping as our method of Agile
delivery
21. Committed to the switch in one month
1
2015
START USING PROTOTYPES!
26. If you’re going to make the move to prototyping,
here are a few things to consider:
1. There WILL be a learning curve with the technology.
Practice makes perfect.
2. Don’t panic when you feel like you’re spending WAY more time up front.
What you lose in time you’ll save in frustration.
3. Timelines for deliverables will be different throughout the project.
But you’ll get more out of each deliverable.
4. Accept that there will be things you can’t demonstrate.
Look for other examples online to help.
27. How do we incorporate these prototypes into our process?
28. Why am I here talking to you?
What have we learned?
What has been successful?
34. Are we done here?
How do I retrieve my tasks?
How do I see what I sent?
How do I know when tasks are complete?
What do the permissions look like?
What defines a complete task?
Can I put deadlines on tasks?
Nope: This is too much
for this sprint.
35.
36. Option 1 Option 2 Option 3 Option 4
For dropdown example, see navigation at www.theopen.com
www.theopen.com
Link to references online to save time.
38. When deciding what to prototype first
focus on targets that will
ease approvals and create clarity
39. Keep your ears open for statements like:
“I’m just not sure about this.”
“I don’t think people will get it.”
“I don’t understand what’s happening here.”
“Can you explain to me why we have to do this?”
“Do you think people are going to see that?”
Priority #1
Has the client expressed confusion or concern over a particular piece of functionality?
Having a client or stakeholder
hung up on a piece of
functionality is a sure fire way to
add hours to a project.
Recognize confusion and address it quickly!
40. Priority #2
What are the highest value targets?
Target the critical
pieces first.
If there are critical spots in the application,
e.g. posting a photo in a photo sharing app,
focus on getting those interactions in front
of people and vetted before building out
things like the settings.
Do this
before
this
41. Priority #3
What are the most complex interactions?
You may not have to build it out. If it’s doing something similar to another site, save time and reference that.
Option 1 Option 2 Option 3 Option 4
For dropdown example, see navigation at www.theopen.com
www.theopen.com
42. Priority #4
What pieces are using commonly accepted UI patterns?
If you’re not doing
anything novel, it can
probably wait.
If you’re dealing with a known entity, you
can usually wait to prototype the details,
reference another instance, or avoid it
altogether, e.g. a standard login.
43. Priority #5
What parts of the product have we not figured out yet?
You can’t prototype what
you don’t know.
Create the page so you don’t interrupt flow, but
leave it blank if you don’t know what it is yet.
?
45. Two types of fidelity:
INTERACTIVE (FUNCTIONAL) FIDELITY
How complete are the links, interactions, of the prototype?
DESIGN (VISUAL) FIDELITY
How complete is the design with regards to colors, shapes, hierarchy,
layout, content etc.?
46. Fidelity over time
A quick landscape of prototyping fidelities. (Image credit:
Fred Beecher, Boxes & Arrows)(View large version)
47. Benefits of your lo-fi version
• Acts as sitemap, a 10,000-foot view
• Just the basic interactions to get through the app
• Low investment
• Helps find holes in your requirements
48. If you don’t have content, write it!*
• The more you write for web products, the better you
get at it.
• You get a much deeper understanding of the product.
• The best way to get the right content from the client, is
to put in wrong content.
*obviously there are instances when budget and timeline don’t allow for this, but if you’re having a
hard time getting content from a client, this is an effective way to get them to act.
49. The more realistic the content, the better
both designers and devs can
understand the full scope of the system
50. Visual fidelity over time
A quick landscape of prototyping fidelities. (Image credit:
Fred Beecher, Boxes & Arrows)(View large version)
Designs get a separate prototype.
• We lower the functional fidelity, but raise the
visual fidelity to a production level design.
• These are often done in Sketch and
exported back into UXPin.
• Since stakeholders have already seen the
functionality in the functional prototype, we
don’t have to spend time recreating it in the
visual prototype.
• Allows design and IA to work in parallel.
Designs
51. Don’t recreate the
prototype in design.
• Focus on a few key interactions
and states.
• Use simple toggle and hide
functions and leave out any
complex logic.
• If you’re building for user
testing, focus only on the things
you’re testing.
53. Your prototype becomes the documentation
Developers follow on screen
annotations to understand
what the app DOES, and not
just follow the documentation
and acceptance criteria.
Your
documentation
here
54. Highlight functionality on a user journey
E.g. “A user arrives on a page
with a table of data. A search bar
is available for the user to find a
specific data element. When the
user hits search, the table will
narrow the results. Upon clicking
a result, the user will go to the
individual record.”
And then the underlines would
show the focus state, the search
results table, and link to the
individual record respectively.
55. Reduce confusion by including states
Ensure you have all the different states the page could be in and ensure developers can find them easily
instead of having to click around.
Provide triggers on the
side of the page and
use documentation to
supplement by
providing the story.
Side of your prototype Native UXPin documentation
56. Reuse elements
(links, triggers, toggles, etc.)
When it makes sense, you can repeat elements in your off screen documentation.
Best used to reinforce functionality for elements that UXPin doesn’t let you clearly pin.
Modals MultistatesHidden elements
57. Benefits of the documentation?
- Ensures that devs see all the interactions.
- Devs get a better sense of the product as a whole.
- It allows the devs to plan ahead before their spring begins.
- Gives QA folks more contextual acceptance criteria.
- Creates a common language between devs and designers.
- It bakes in a level of user testing.
60. Expand upon what is already provided
Input and search fields
that clear on click
Simulated “Spotify” style search
Custom examples we’ve created with UXPin library as a start:
Tooltips that stay active
on hover
61. Expand upon what is already provided
Custom examples we’ve created with UXPin library as a start:
Easily editable sliders Self contained modals that can be dropped anywhere
62. Why use a UI kit?
- Very quickly creates visual clarity and “value” to clients.
- Translates easily into a design language.
- Anyone on the team can use it regardless of skill level.
- No lost momentum worrying about the HOW it works.
- Enormous time savings.
64. The more you validate,
and the more you communicate,
the more agile you can be
65. Early validation increases agility
• Finds small mistakes before they’re big ones.
• Finds holes in the product.
• Prevents over-architecting.
• Increases communication.
66. Validate small, complete pieces
• If demoing incomplete thoughts, do so in person.
• Focus on flows first.
• Move to smaller interactions next.
• Demo only once you’ve added clarity.
• Don’t abandon the user.
• Reference earlier reviews to validate decisions for better
buy in.
68. Things just run smoother
We’re able to spend more time on real business
solutions and user experiences, and spend less time
dealing with … the crap.
(for lack of a better term)
69. Benefits of agile prototyping
- There’s no risk of someone opening the wrong PDF from the email last
week instead of the most recent version
- There’s a common language between client, developers, and designers.
- When we work in UXPin, everything is viewed at the correct size in a
browser.
- No zooming issues.
- We can easily set breakpoints.
- We know it will display reliably on the client’s devices.
- THIS is why we put designs back into UXPin
70. Benefits of agile prototyping (cont.)
- We’ve seen faster approval from clients.
- Clients aren’t caught up in the deliverable.
- They can focus more on business solutions and UX work we did for them.
- They can interact with the deliverable instead of guessing.
- Higher quality and consistency of our work.
71. Benefits of agile prototyping (cont.)
- Less cycles are being wasted on petty stuff.
- Better conversations and relationships with developers.
- Comments and feedback are more easily managed.
- No more crazy email threads.
- Feedback cycles are much faster.
- Better questions during reviews.
72. Overall, life is just easier with prototyping
CLIENT
IA
DEV
DESIGN
73. Best practices for agile prototyping (summary)
1. Prototype in Chunks: Depth vs. Breadth
2. Prioritize Your Use Cases for Prototyping
3. Pace Your Fidelity
4. Annotate Your User Flows
5. Re-use Your Components
6. Validate Small Builds Often
74. THANK YOU!
If you’re interested in seeing more of what we do
www.lookthink.com
www.lookthink.com/blog
Thank you for your time!
Questions?
and