UX notes
Repok:
https://github.com/fru1/UX-Design-ND
Define Design Sprint
Ideas, Ambiguity, and Risk
Ultimately, design is all about the following:
Building the right thing for our users.
But this statement is loaded with ambiguity. How do we know whether we've built the "right" thing? And on a more basic level, how do we even know who our users are? The answers may be unclear—and to make things more complex, these questions may mean different things to different members of the team.
When developing a new product, there are lots of risks. You might find that you're building the wrong product, targeting the wrong users, or simply that you have confusion and misalignment between different members of your team.
As the designer, part of your job is to ensure that your core design questions get validated answers, and that the team is in agreement on those answers. A software engineer will think differently from a sales person, and it's your job as a designer to speak a common language—while defining the problem and steering the ship towards a product that has a good chance of success.
https://www.youtube.com/watch?time_continue=1&v=XgXVnC3H0YQ&feature=emb_logo
The Design Sprint
To be successful in this role, you don't want to leave things up to chance—you want to have a good process in place for generating and refining your product ideas. And that's just what a design sprint is for.
A design sprint is a process for collaboratively exploring, refining, and validating ideas—while simultaneously minimizing risk and getting alignment across your team.
In this lesson, we'll explore design sprints. Specifically, we'll get into:
The ideal design process—and how the constraints of your situation may make this ideal process impossible
How you can apply techniques like Guerilla design sprints to get the job done in non-ideal scenarios
How to collaborate with others, including tips on how to hold design workshops
How to use techniques like active listening to incorporate research and user data into your design ideas
The Ideal Design Process
https://www.youtube.com/watch?time_continue=3&v=OIycEBlOqKs&feature=emb_logo
Guerrilla Design Sprints
Designing Within Constraints
The traditional double-diamond design process can be expensive and time-consuming. When we are designing in the presence of real-world constraints, it can sometimes be a good idea to step outside the traditional design framework, to get creative, and to improvise—to engage in what we might call guerilla design.
https://www.youtube.com/watch?time_continue=12&v=NJj-yG1_jso&feature=emb_logo
Collaborative Design
Building a really well-designed product is almost always best done by a team, not an individual. Every team member brings a different perspective and skillset, and this diversity is not simply something to tolerate—it is an incredible resource that you should deliberately build into your process and benefit from.
For example, effective collaboration can help to ensure you're not designing too deeply with your own bias. Let's say you are building a travel application. If you are a frequent flyer, you might have some personal pain points you'll want to solve. If you don't involve others, you might go down a path that is specific to your own unique experiences instead of designing something that is generalizable to other users. You also may not have the skills to build the product from end to end. In this case, you might miss key technical risks or business operations risks that will limit the project's impact later on in the process.
Collaborating early and often prevents these kinds of issues.
Where Designers Design https://www.youtube.com/watch?v=hQh8mPvfNUw&feature=emb_logo
Understanding How to Obtain Buy-In
Asking the questions presented in the video helps you to communicate effectively with your stakeholders. What you don't want to do is not learn from these conversations. If an engineer you're working with expresses they want to see more empirical, qualitative data, you should probably add some form of numerical analysis to your presentations for the next meeting instead of only including user quotes. I've seen designers fail to iterate on their own interactions, which leads to a strained, distant relationship between the designers who are interfacing with customers and the engineers who are interfacing with code.
Share Key Progress
Along our design journey, we'll be collecting data to inform our designs. "Data" can be anything, from what someone said or did, to some statistic about the state of an industry. As you watch the following video, think about the types of data and information you can present to stakeholders along the way so that they understand how your design came into existence.
https://www.youtube.com/watch?time_continue=68&v=kMP09Bf1bU4&feature=emb_logo
Running a Workshop
Facilitating Collaboration Sessions
As you're collaborating, you'll often want to engage your team in a workshop. These are a great way to ensure that everyone's ideas are being shared in a structured format. You'll often find that stakeholders who are not that engaged, will start to understand the process after a well-run workshop. People love to break from their day-to-day tasks to think creatively about interesting problems!
Using Digital Collaborative Tools for Remote Workshops - Miro
It's great to have everyone in a single room, where you're able to move around, spread ideas on the walls, and keep design artifacts in view to aid inspiration.
Design Artifact A physical or digital graphic representing a key design step. Artifacts might be key user quotes, sketches, or other synthesized insights that can be shared with others so they understand the state of the project.
However, your team may be distributed around the world or you might be exploring a start-up idea with no budget for an office. Getting everyone in the same room may simply not be possible or practical.
But don't worry; these days, there are some great tools that you can use to create a virtual space to house your design artifacts and work with your teammates. The tool we'll be using is an application called Miro. I'll show you the main features, and then you'll be using it throughout this course (and you'll use it for your final project as well).
first steps Sticky notes: https://www.youtube.com/watch?time_continue=168&v=Ael3Jz4KuCo&feature=emb_logo
https://miro.com/app/dashboard/
Building Understanding
Research Basics
You got some underlying knowledge in primary research techniques from the first course in this Nanodegree. But to make sure the ideas are fresh in your mind, let's do a quick refresher on some basic research principles. https://www.youtube.com/watch?v=IX2JB4ABCY8&feature=emb_logo
Active Listening - Writing Research as Atomic Nuggets https://www.youtube.com/watch?time_continue=61&v=4-19-1d3TvI&feature=emb_logo
The term Atomic Unit (with regard to design) was coined by WeWork's design team while building a research tool called Polaris. Ultimately as you're conducting research you'll want to be actively listening for these nuggets of knowledge.
As you're exploring your research, you can write Active Listening notes to capture these nuggets. These are post-it notes that contain just enough text to communicate a little bit of knowledge. These notes can include:
User Quotes
Facts and Desktop Findings
Observations and AHA moments of inspiration (anything that stands out as important)
https://miro.com/app/board/o9J_kxdWlQk=/?moveToWidget=3074457346791138947
Example
Creating and organizing your active listening notes can be challenging. To help you get a feel for the amount and type of information to include (and how you might want to organize that information), you can check out Gabe's Miro board (or the screengrab of the board below).
While reading the notes, try to think about:
the level of detail of the note
the choice of color of the card
high-level themes that you might be noticing
Use the graphic below to answer the following quiz question:
Process: https://miro.com/app/board/o9J_kxdWlQk=/?moveToWidget=3074457346791138947
Példa
https://docs.google.com/document/d/1pfvwxBDJcP3nzr_Tr5hBPtuzsakFjjI4zmitKy8rKwA/edit
Synthesis: research to Features
What is Synthesis?
After conducting research, we'll be left with a tremendous amount of information and no sure direction. Specific patterns and behaviors might not be totally obvious to us. Synthesis is the process where we bring our research ideas together to form a fundamental understanding. In our context, this will help us to understand the problems our users are facing so we know why we're building a specific product.
As with almost everything in design, the synthesis process is ambiguous and there will be many different ideas brought to the table by different stakeholders. We'll explore some skills to help guide the discussion and discovery process with the end goal of a clear feature list to implement in our designs.
Affininty Mapping: https://www.youtube.com/watch?time_continue=218&v=59txE8ZgmMU&feature=emb_logo
how todo in Miro: https://www.youtube.com/watch?time_continue=107&v=U9DBypoKvYg&feature=emb_logo
Defining Problems as Opportunities
Identifying Opportunities: https://www.youtube.com/watch?time_continue=99&v=i1ef5o26BIs&feature=emb_logo
Writing Our Problem as a How Might We question
https://www.youtube.com/watch?time_continue=168&v=4N0o0kC8bBE&feature=emb_logo
Ideation Techniques
Crazy-8s and Sketching
https://www.youtube.com/watch?time_continue=96&v=9VS8bQWlQAg&feature=emb_logo
Introducing the Idea of Bad Ideas
When you're working with stakeholders, you'll need to explain why you're using certain techniques. It's a good idea to introduce the Bad Idea technique clearly before jumping in. You should communicate clearly that this technique is a warmup to make sure everyone in the room is ready to design. When using any of these tools in a workshop, it is a good idea to set expectations for how long things will take—people will be more open to trying something different if they know it will only take 5 minutes.
Combinatorics: https://www.youtube.com/watch?time_continue=20&v=k8fiDwb9eQg&feature=emb_logo
Focusing Ideas
Using Affinity Mapping to Ideate
Earlier we used affinity mapping to build themes from our research data. Now we'll look at how we can use it to ideate and to focus our ideas.
https://www.youtube.com/watch?v=SslXzxuolCo&feature=emb_logo
Collaborative Ideation: Dot Voting
https://www.youtube.com/watch?time_continue=14&v=W4e0za7tM-k&feature=emb_logo
Danger of Dot Voting
When using dot voting, be wary of herd behavior—where people in a group think or behave differently than they would as individuals. This can come up in behavioral studies (such as focus groups) where many people might verbally agree with a statement said in a group conversation, even though they individually do not actually agree with the statement.
In our context, the first person who places dots might bias the group's thinking. If they feel especially strongly about a dot, they might run over and place the dot. Often it is a good idea to offer time for everyone to silently think about where they want to place dots before providing the dots.
The following graphic is some output from an affinity-mapping and dot-voting workshop. Everyone was allowed to place at most one of each dot. Use the graphic to answer the questions below.
Understanding Scope
https://www.youtube.com/watch?time_continue=19&v=5Z4ThOSAmOo&feature=emb_logo
How to "De-Scope"
When you're talking about scope in the context of engineering, there are a few ways you can reduce the work or complexity of a task. You can:
Use frameworks, packages, or open-source code. If a developer can reuse something that is already built, it becomes much more manageable.
Reduce expectations. If your system has a technical requirement, it may be possible to relax that requirement to reduce the scope. For example, there might be a specification for the time it takes to complete a particular computation. Making this required time longer may make the task easier. This also applies to things like accuracy (percentage of the time the system will be correct) or throughput (the number of concurrent requests or number of users).
Not do the thing. Sometimes the best option is simply to find an alternative solution or feature.
Identifying "Rat-Holes"
Sometimes when it is unclear how complex a task is, an engineer might recommend trying a few experiments to see what things are possible. And in the next meeting, they might propose more experiments, followed by more experiments… and this cycle can continue forever. Try to identify when a scope might lead to this type of time-consuming exploration so you can catch it early and determine if there are alternative paths.
Prioritizing Features: Value vs Complexity Quadrants
Value vs Complexity Quadrants
https://www.youtube.com/watch?v=5jNLZ_S__GU&feature=emb_logo
példa: https://www.youtube.com/watch?time_continue=6&v=YsMuz3qaayk&feature=emb_logo
Prioritizing Features: Score Matrix
Setting up the Matrix
https://www.youtube.com/watch?v=YTc7sEqJSuY&feature=emb_logo
how to do it: https://www.youtube.com/watch?time_continue=1&v=_76P-2fR35M&feature=emb_logo
You can get your own copy of the feature prioritization matrix Gabe showed in the video by making a copy of this Google sheet.
Choosing Our Weights
When we select weights for our columns, there is no hard rule - you should allow the conversation to organically assign points to criteria. However, you should aim to keep all of the weights within the same ballpark so no single criterion completely dominates the others. One approach to solve this problem is to choose a fixed number of points and distribute those points across your criteria.
The Math Behind The Score
Ideally, we'll want to be able to use the 1 (low) to 5 (high) for both Values and Costs. To accomplish this goal, we can transform our scores for our values simply by dividing by the maximum value (5). However, we want our costs to have the inverse effect - where a high value adds a smaller amount to our score. This adds a little bit of complexity to the score computation, but it avoids negative numbers. By keeping all of our scores positive, we avoid bias if we're building something that has a very high relative cost. In other words, decision-makers may use 0 as an arbitrary threshold and reject any proposed features less than zero. We can avoid this by transforming our costs by subtracting the score from the maximum value (5) before dividing by 5. We can then use these adjusted scores multiplied by our weight to produce our weighted score. We can sum all of these weighted scores to give us our final feature score. Although the ranking is mathematically equivalent, it is psychologically perceived as different!
This math is described in the figure below:
Use the following matrix to answer the question:
Managing Minimum Viable Product Scope
Why Aim for "Minimum"?
https://www.youtube.com/watch?time_continue=89&v=PMp0LF7bTHY&feature=emb_logo
https://www.youtube.com/watch?time_continue=3&v=o-qrH_6S4f0&feature=emb_logo
Concierge is Hard
Before jumping into a concierge MVP consider if the solution can be achieved by a human. The example of a trip interruption advisor still might need some technology built to accomplish the task. For example, they will need to have some interface to see flight statuses or weather. The key here is that it is easier to build a complex interface and train a human to interpret the information than it is to build a simple interface and train a machine to interpret information for our user.
https://www.youtube.com/watch?time_continue=30&v=5vhkxe2SNy0&feature=emb_logo
Finding Design Inspiration
Searching for UI Elements
As you build a portfolio and a personal brand as a designer, you'll want to consider using some of the sites mentioned in the video (like dribble or behance) to share your work with potential employers. These networks are great not only for finding inspiration, but also for sharing inspiration. The design community is welcoming and offers a ton of opportunity to highlight your skills as you build them!
Choosing a Design Framework
In this video, Gabe introduces material-ui.com. However, this is far from the only option. There are many popular and well-maintained UI libraries to choose from (here are six popular examples). Before you design, you should have a conversation with your engineers about which framework would work best with the team's technical capabilities—and share which framework you think has the best components for your project.
Cloud dashboard: https://demos.creative-tim.com/material-dashboard-pro-react/#/admin/dashboard
Using Icon Libraries
At this stage of design, you're experimenting. Unless you're highly proficient in graphic arts (I'm not) it will probably take you a bit of time to draw icons to represent your desired actions. Even if you are highly proficient, you'll often find standardized buttons perform better for certain actions, since the user will know how to interpret the graphic. Thankfully, there are many open-source icon libraries we can fall back on to download icons as we're exploring our interface:
Google Material Icons: https://material.io/resources/icons/
Ion Icons: https://ionicons.com/
Font Awesome: https://fontawesome.com/icons
Controls in Material-UI
The Material UI design system has built-in components to help you implement navigation and controls. You can start by looking at the link component and then explore the more complex button component.
REMEMBER: This is a technical document for developers. If you're not an engineer, don't worry about the code—just focus on the interactive demonstrations of the components and component properties!
Getting Started with Figma
getting started: https://www.youtube.com/watch?v=UMQzAUQSXwU&feature=emb_logo
object properties: https://www.youtube.com/watch?time_continue=163&v=IJiUbrlUAjU&feature=emb_logo
creating components: https://www.youtube.com/watch?time_continue=139&v=vQBcvTs5iX8&feature=emb_logo
components layout: https://www.youtube.com/watch?time_continue=216&v=FVCJghnu1t0&feature=emb_logo
https://www.youtube.com/watch?v=vQBcvTs5iX8&feature=emb_logo
https://www.youtube.com/watch?v=FVCJghnu1t0&feature=emb_logo
Finding and Using Figma UI Assets: https://www.youtube.com/watch?time_continue=20&v=DYof3jo3uyc&feature=emb_logo
https://www.figma.com/resources/assets/
https://www.figma.com/resources/assets/wireframe-component-library/
Prototyping with UI Kits
Sketching a Login View
https://www.youtube.com/watch?time_continue=213&v=FHwH3uzAnQ0&feature=emb_logo
Why Place Elements Low on the Screen?
At first glance, it may not be obvious why Gabe placed the design elements towards the bottom of the screen, leaving a lot of whitespace at the top. The answer is that phones are getting large and people's thumbs can't reach to the top. This is a design principle made popular by Samsung's One UI where elements are pushed down on the page so they can be comfortably reached by the user, even on super tall screens.
https://www.youtube.com/watch?time_continue=115&v=gnkRCV2BsCU&feature=emb_logo
defining flow: https://www.youtube.com/watch?time_continue=86&v=krWHxqMR1tM&feature=emb_logo
Clickable Prototypes
Creating Login View States
On this page, we'll be creating some view states. A view state is a representation of a screen with a certain configuration or user interaction. For example, a user may have entered text or hovered over a specific element; each of these actions would need to be represented as a different view state.
In Figma, we'll need to create a frame and change the frame with whatever information is relevant for that state. To keep things consistent, it's usually a good idea to use components to represent the overall view and then override the component for each view state.
https://www.youtube.com/watch?time_continue=188&v=wgDBM_W20RE&feature=emb_logo
https://www.youtube.com/watch?time_continue=211&v=K5fBPuG9ry4&feature=emb_logo
Design Handoff
Throughout the design process, you'll often find yourself needing to share your designs with different stakeholders. You may be seeking feedback or approval from stakeholders, or your engineering team might need a reference so they know what they're implementing. So let's looks at some of the different ways to share a Figma design.
Share the Figma Link
You can share the design itself by simply sending a link to your design file. It's as easy as clicking share, setting the link-sharing permissions (can view or can edit) and copying the link. You can then paste this link into whatever tools you use to communicate (email, Slack, teams) and the recipient can view the contents.
Keep in mind, this link is live. That means as you edit the design, the recipient of this link will see those changes.
Export as Images
If you're looking to simply share one or more screens in a fixed way (something you won't change as you continue working), you might want to export your screens as images.
You can do this by simply clicking on the element (frame or shape) and using the export tools in the right sidebar. This will produce a graphic that you can send to a stakeholder for their review without them needing to navigate or browse through the entire design.
Design to Code with Spec Sheets
The most advanced sharing use-case is sharing with engineers. Developers might need more information (colors, spacing, sizes) while implementing your design. By sharing a link with can view permissions, engineers can view properties for each element so they don't need to reach out to you with simple questions.
https://www.youtube.com/watch?time_continue=67&v=sSe8zIZEAKQ&feature=emb_logo
Why Usability Test?
Getting Ready to Be Wrong
https://www.youtube.com/watch?time_continue=135&v=g8ldN4VpePg&feature=emb_logo
In the video, we mentioned that un-moderated studies are almost always remote, and are conducted with specialized tools where you can have many users accomplish a task in parallel. UserTesting.com is a good example of a specialized service that helps you run un-moderated, remote sessions.
Moderating a Usability Session
Parts of a Moderated Usability Session
Before watching the video below, download the usability guide so you can follow along: Google Doc, docx, pdf
https://www.youtube.com/watch?time_continue=227&v=HQejgkZubd4&feature=emb_logo
Defining Task: https://www.youtube.com/watch?time_continue=238&v=kocTJKGss-4&feature=emb_logo
digital journey map: https://www.youtube.com/watch?time_continue=68&v=-PeYwRwUl9A&feature=emb_logo
The 10 UX Deliverables Top Designers Use
https://www.toptal.com/designers/ux/10-common-ux-deliverables
Interviews:
https://www.youtube.com/watch?v=slD4fXZ-9Dw&feature=emb_logo
https://www.youtube.com/watch?v=UIleJxwe3NA&feature=emb_logo
https://www.youtube.com/watch?v=C2bdwQaOOK8&feature=emb_logo
Step 1: Research Synthesis
https://www.youtube.com/watch?v=-k0mDCwLvlI&feature=emb_logo
Step 2: Rapid Prototyping
https://www.youtube.com/watch?v=mvID4Cpqgvw&feature=emb_logo
Step 3: Usability Study and Design Iteration
https://www.youtube.com/watch?time_continue=67&v=38vyol0qk3Y&feature=emb_logo
Design System
https://www.youtube.com/watch?time_continue=170&v=4ZiFy91clrU&feature=emb_logo
Design systems
A design system serves as a north star for a project, collecting all the aspects that enable a team to develop a design. It can grow and evolve over time with more assets & components.
Atomic design
Atoms, being the smallest, then molecules, then organisms, then templates, and finally pages. Atoms are things like: colors, icons, type and form components. Molecules are things like buttons and input fields in a form you fill out. Organisms are things like nav bars and forms.
Navigation Systems
Hamburger Menus
Advantage: Can be activated when needed
Disadvantage: Hides potentially important menu items from the user
Mega Menus
Advantage: Robust and can hold a lot of menu items
Disadvantage: Danger of cognitive load on the user
Call to action buttons
Advantage: Focuses user to one clear goal / destination
Disadvantage: This could go wrong with poor Copywriting
Breadcrumbs
Advantage: Allows users to know where they came from
Disadvantage: Doesn't work well for large menu sets
Style guides
A style guide is a part of a design system that focuses on elements such as: icons, color, typography, and graphics.
Additional Resources
Below are a few examples of different design systems.
Lastly, Atlassian also has a design system (the makers of JIRA).
High-fidelity design with Figma
https://www.youtube.com/watch?time_continue=164&v=RYirls44TuQ&feature=emb_logo
Another tool I like to use is called Sketch, although you do have to pay for it. We’ll focus on Figma, which you can use free, throughout the course.
Figma plug-ins: https://www.youtube.com/watch?time_continue=124&v=Dd7KuTSCXm8&feature=emb_logo
https://uxdesign.cc/10-best-figma-plugins-september-2019-30b4dd4e5708
Building a Style Guide
Let’s look at how to build a Style Guide in Figma. First, we’ll do a quick recap of what makes up a style guide.
https://www.youtube.com/watch?time_continue=155&v=ISIimZh63gk&feature=emb_logo
UI Kits with Zeplin
Now, let’s walkthrough how to build style guides and/or UI Kits with the Zeplin app.
https://www.youtube.com/watch?time_continue=130&v=lXnjpqjttPc&feature=emb_logo
Adding Interactivity in Figma
https://www.youtube.com/watch?time_continue=220&v=ermsza_PUmo&feature=emb_logo
https://www.youtube.com/watch?time_continue=125&v=jLBmB59MLzE&feature=emb_logo
Working with Engineers
https://www.youtube.com/watch?time_continue=246&v=L_cN_z--cWM&feature=emb_logo
Exercise: Hand-off
You’ve just started a new app project at work and you are about to have a kickoff meeting with engineers. You don’t know much about the app but you know that it’s set to service a wide demographic of users in: age, gender, occupation, and education. You want to take leadership and bring the designers perspective to the table. You present a few ideas, but the engineers aren’t happy with them. In a Google doc, write bullet point notes on what questions you would ask the engineers to get the best feedback on your work.
Keep in mind the following things you’ve learned:
Feedback is always a positive thing
Keep the lines of communication open
Be humble about your work
Don't forget to take notes
Socialize your work from the ideation phase
Ask great questions - One of your greatest tools
Accessibility (WCAG - A,AA,AAA)
https://www.youtube.com/watch?time_continue=2&v=sKK_E3ZwMH4&feature=emb_logo
Here are my questions from the video - remember, there are many potential options here!
Thank you for your feedback, what are your thoughts on how the design could be improved?
Are there any domain experts we can talk to on the topic that would have valuable information to offer us?
What are your thoughts on putting together a design sprint to get a variety of ideas for how to approach this to kick things off?
How might we implement user testing at the appropriate time so that we are making sure we are building what users really want?
Do we have any existing data that we can leverage?
Seeing that our app will service a large demographic, what considerations are we giving to accessibility to accommodate people with special needs?
Handoff Deliverables
https://www.youtube.com/watch?time_continue=14&v=yIJboeu2UUY&feature=emb_logo
We covered a lot here, so let’s briefly summarize.
User stories allow you to create a scenario around a user need, based on research, that helps inform you of how they might interact with your application. They typically follow a format of:
As a user role, I want goal, so that benefit.
The task flow helps show the high level process, step by step, that a user takes to achieve their goal. It helps you determine how they navigate through your application, and can help uncover roadblocks along the way.
In the video, we use a tool called Whimsical to help build out a task flow. As shown early on in the video, user stories may be in something as simple as a Google Doc to start with, then get transferred to Whimsical for use in the task flow from there. You could then transition into Figma for high-fidelity mockups and prototyping, and then into Zeplin for creation of style guides, UI Kits and other assets. All of these deliverables together are part of your engineering handoff deliverables.
Tool: https://www.toptal.com/designers/ux/10-common-ux-deliverables
Exporting Assets to Zeplin
Below, let’s do a quick recap of the Zeplin tool, which makes it easier to hand off deliverables to engineering.
https://www.youtube.com/watch?v=Qgkn_8w3xtU&feature=emb_logo
Improving Design Performance
KPI
Key Performance Indicators, or KPIs, allow you to measure the impact of your product on a broad scale, and then use that data to make decisions on adjustments to your design.
Let’s take a look at Google’s HEART Framework next - a helpful framework for evaluating the effectiveness of your design.
Google’s HEART Framework tibor
https://www.youtube.com/watch?v=0SBx3v9gl8w&feature=emb_logo
using: https://www.youtube.com/watch?time_continue=1&v=bi1sVVcNSCg&feature=emb_logo
példa: https://www.youtube.com/watch?v=Jk43V1F0Hg4&feature=emb_logo
UX Analytics Tools
https://www.youtube.com/watch?time_continue=7&v=KghKDi87vcI&feature=emb_logo
UX analytics tools can help us determine what users want and how to keep them engaged. Luckily, there are plenty of these tools at our disposal, each with their own use cases, strengths and weaknesses:
Funnels
Heatmaps
Forms
Polls
Surveys
A/B Testing
User flows
Data in numbers
Similarly, there are many online platforms that implement these analytic tools for you. For instance, Hotjar is a great platform using using funnels, forms, heatmaps, polls and surveys, Unbounce is great for A/B testing, and Google Analytics can help with user flows and easily viewing charts of data.
Data Analysis
https://www.youtube.com/watch?time_continue=8&v=bQOALzdwMf8&feature=emb_logo
Feladat
HEART Framework
Goal: Increase newsletter subscriptions on our webpage
Signal: Subscription rate of number of sign ups
Metric: Tracking what users are doing and where users are clicking on the site using Hotjar’s funnels and heatmap data
The heatmap data to be used for this exercise
Instructions
Analyze the Heatmap data provided above. Look for part of the page people click on the most. The hotter the section the more someone cares to click on it. Click and Tap Heatmaps provide insight into which elements are causing a distraction. It can also tell us what content people are most interested in.
Make a hypothesis about why people aren't signing up to our newsletter
Identify the metric points that helped you identify the pain point
Deliverable
A Google Doc with written Hypothesis and rationale based on the data.
Solution
To reiterate from the solution video, I determined my hypothesis originally based on heatmap data that seemed to suggest a lot of activity where an exit button might be expected, but not in the form itself. Therefore, I came up with the hypothesis:
Users may feel frustrated by the popup and don’t have a way to close it. Changing the signup from a popup to a section at the bottom of the page may increase signups.
QUIZ QUESTION
Which of these three potential CTAs might be the most effective if you were trying to get users to join your streaming service app?
https://www.youtube.com/watch?v=1iG3IOP2c40&feature=emb_logo
Improving Design Based on Data
https://www.youtube.com/watch?time_continue=213&v=hpj2YN7fCQs&feature=emb_logo
More on A/B Tests
https://www.youtube.com/watch?time_continue=88&v=4GqbE2skqIc&feature=emb_logo
https://www.youtube.com/watch?time_continue=94&v=eQvI4uw1eJ0&feature=emb_logo
Portfolio Design
Template
https://docs.google.com/presentation/d/1Gc5ZhzpScPUE1rM1N18Ok-Wu_T00qku60BxqrqTk7GU/edit#slide=id.p1
Helpful Resources
Keynote: https://www.apple.com/keynote/
PowerPoint: https://products.office.com/en-us/powerpoint
Free Portfolio Building Websites. For free portfolio websites to make your portfolio digital and available online:
Cargo: https://cargo.site/
Adobe Portfolio: https://portfolio.adobe.com/ (free with Creative Cloud)
Dribble: https://dribbble.com/
Behance: https://www.behance.net/
Carbonmade: http://carbonmade.com
Google Sites: https://sites.google.com/
Webflow: https://webflow.com/
Wordpress: https://wordpress.org
Free Images and Photos. For free visual content such as photos or images to help visually enhance your case study:
Unsplash: http://www.unsplash.com
Shutterstock: https://www.shutterstock.com/explore/royalty-free-images
Pexels: https://www.pexels.com/
Pixabay: https://pixabay.com/
Freephotos.cc: https://freephotos.cc/
Burst by Shopify: https://burst.shopify.com/free-images
StockSnap.io: https://stocksnap.io/
Reshot: https://www.reshot.com/
Foodiesfeed.com: https://www.foodiesfeed.com/
Kaboompics.com: https://kaboompics.com/
Complete Analyzis
https://github.com/deco3500-2018/Pirates-of-Design/wiki
concept proposal: https://github.com/deco3500-2018/Pirates-of-Design/wiki/1.-Concept-Proposal
Eco Lawn (Elawn) Care Research Plan
Study 1: Semi-Structured Interview
Background
Global warming has become the number one problem worldwide. I discovered that gas mowers produce up to 5% of the US nation's air pollution. Analyzing the current lawn care service market, our team determined that most lawn care companies use fossil fuel gas to power their equipment. Eco Lawn (Elawn) Care is a new lawn care service provider in Pittsburgh. This company uses non fossil-fuel equipment to deliver outstanding lawn care, providing a necessary service to customers while reducing gas emissions that are contributing to climate change. I am interested in developing the lawn care service (desktop and mobile application) for residential homeowners to provide and promote an eco friendly lawn mowing service that will benefit not only them and their families but also everyone around them by reducing air pollution.
Research Goal
[Why do you want to conduct a study? What you want to get out of the study?]
I want to learn about how homeowners use lawn care services, as well as what they think about global warming/climate change and how it will affect their future and the future of their families. I want to find out if they are in any way reducing fossil fuel emissions and which main pain points they encounter when using lawn care service providers. This data will help me to better understand customers’ pain points and see their readiness to help with global warming/climate change.
Additional Research Studies
Americans are Increasingly “Alarmed” About Global Warming
The New York City Global Warming Survey
Research Questions
[Overarching questions]
[Needs] What is essential for lawn care service?
What are customers’ current pain points?
[Behaviors] How do private home owners manage their lawn yard service?
What lawn care providers do the customers use?
How do users feel about existing lawn care companies?
How does the customer pay - cash, online credit card/paypal, debit card , check?
What is the name of the plan the customer is using?
What is the plan price?
Is the cost per cut, monthly, yearly?
What is included in the plan (grass cut, trimming, grass patch repairing )?
[Feelings] How do customers feel about climate change/global warming?
What do customers do to reduce the impact of climate change/global warming?
Method
[Is this a survey? An interview? What kind of people do you plan to recruit? Where will you find them?]
30-minute in-person or VOIP semi-structured interview to gather in-depth qualitative data
The researcher will use the interview script as a guide and ask follow-up questions based on answers from the users
Recruiting
Homeowners
3 participants
Adults with a full-time job who:
Own a house with a yard of not less than 1000 sq/f
Use a lawn care service at least once a month
Have been using a lawn care service for at least 3 months
To recruit participants, I will send emails to full-time employees at Washington School District, a greater Pittsburgh area school district.
Screening Questions for Homeowners
Do you own a house?
No (screened out)
Yes
Do you use a lawn care service?
No (screened out)
Less than once a month (screened out)
At least once a month
What is the size of your yard?
Less than 1000 sq/f (screened out)
More than 1000 sq/f but less than 5 acres
More than than 5 acres (screened out)
How do you feel about global warming/climate change?
Alarmed
Concerned
Cautious
Doubtful (screened out)
Dismissive (screened out)
Do you believe that global warming is caused mainly by:
Humans
Humans and natural changes
Natural changes (screened out)
Script
Notes: { curly brackets } are used to document what we wish to learn from each question
Introduction
My name is Serhiy. Thank you very much for participating in this study. I am currently working on a project with lawn care services. I would love to learn more about your experience with lawn care services. This interview will take about 30 minutes. If you want to leave the session or take a break at any point, please let me know. Do you have any questions before we start?
Do you mind if I record this session for note-taking purposes? The recording won’t be shared with anyone outside of our team.
Warm-up Questions { Build rapport. Start with easy questions to get to know the participant.}
Could you tell us more about yourself?
Which lawn care service provider are you using now?
Which apps or websites are you currently using for managing/purchasing lawn care services?
Probe into needs and behaviors
How did you get started using this lawn care service? {Motivation: what did
participants hope to achieve?}
Follow-up questions:
When did this happen?
What was the trigger?
How did you choose your lawn care service provider? Why?
How long have you been using the lawn care service? { Behaviors }
How is the lawn care service experience?
Have you considered changing lawn care service providers? Why? { Pain points }
How often do you use the lawn care service to mow your lawn?
Do you plan to continue to use the lawn care service? Why? { Does customer feel beneficial or non beneficial to use lawn care service }
Do you pay for the lawn care service online? { Behaviors }
Do you pay per cut, monthly, yearly?
Do you pay with a credit card, debit card, paypal?
Could you please show me the payment process?
How much do you pay?
What is the name of the lawn care plan?
What included in the lawn care plan?
In a previous (screening questions) study you mentioned that you are concerned about global warming. Can you explain why?
Do you personally do anything to help fight global warming/climate change?
In the past 12 months, have you ever purchased an eco-friendly product that was more expensive than a similar, traditional product, even if it was more expensive?
Why? { Motivation }
In the period of the last 12 months, have you purchased any eco-friendly garden/yard care equipment?
If YES
Why did you purchase it? { Motivation }
If NOT
Why not (too expensive compared to fuel, bad ratings, concern about battery, etc. )? { Motivation }
When you choose your lawn care service, did you consider getting more eco friendly lawn care provider?
If YES
Why?
If NOT
Why not (too expensive compared to none eco friendly , bad ratings, concern about battery etc. )? { Motivation 2 }
Wrap-up
Thank you so much for sharing your experience and insights. Your answers will help me to build a better product. If you have any additional thoughts and comments, I would love to hear about them at any time. I can be reached at [s.vdovichenko@gmail.com]. I hope you have a wonderful day.
Study 2: Survey
Background
In our previous study, we learned that people are ready to think about lawn care services that are eco-friendly. This is a promising opportunity that we may be able to target, but more data is needed to better understand the customers’ needs and whether the larger population is also prepared to move to a more eco-friendly lawn service; in particular, how much the general population is willing to spend for such a service and whether ease of service (for example, being able to pay through a web and mobile application) would play into their decisions.
Research Goal
This study focuses on better understanding users’ needs related to an eco-friendly lawn care service as well as how much the cost of such a service affects their choices.
Research Questions
How can an eco-friendly lawn service help customers to meet their lawn care needs while also meeting the customers’ desires to reduce climate change?
How much would people be willing to pay for the extra benefits?
Method & Recruiting
User surveys to collect data from at least 30 users of lawn care services
Test survey question with 3 volunteers recruited from our team
Send surveys to Washington School District employees whose answers in our screener met the recruiting criteria:
Adults with a full-time job who:
Own a house with a yard of not less than 1000 sq/f
Use a lawn care service at least once a month
Have been using a lawn care service for at least 3 months
Survey Questions
Questions
How often do you have the lawn service take care of your lawn? [frequency]
More than weekly
Weekly
Biweekly
Monthly
Less than monthly
How much do you pay for the service, per cut (approximately)? [typical cost]
Less than $100
Between $101 and $200
Between $201 and $300
More than $300
What is the name of your current lawn care service provider? [competitors]
Have you ever purchased lawn care products that were more expensive than other products, simply because they were better for the environment? [readiness to switch]
Yes (what products: push mower, trimmer, leaf blower etc )
No
If you have purchased such products, how much more did you pay than the typical cost? [readiness to switch]
Approximately 10-30% more
Approximately 31-50% more
Approximately 51-70% more
Approximately 71-90% more
Approximately 91-100% more
More than twice as much
If you have not purchased such products, why not? [pain point]
Cost was too high
The eco-friendly benefits were not effective enough
The machines didn’t work as well
Other: ________________________
Have you ever switched lawn care providers? [loyalty]
Yes
No
Is switching providers something you would think about, provided that the benefits were strong enough? [readiness to switch]
Yes
No
In the past month, which types of mobile products did you use? (select all that apply) [use of technology/comfort with apps and paying online]
Shopping apps (e.g., Amazon, Walmart)
Podcasts
Video platforms (e.g., YouTube)
E-books
Websites in my browser
Other:___________________________
In the past week, how often did you use technology to make a payment? (frequency)
A few times per day
About once per day
4-6 times per week
2-3 times per week
Once per week
I did not pay for anything using technology
In the past week, how often did you use a mobile application to manage a service (e.g., make appointments, provide feedback, send messages)? [frequency]
A few times per day
About once per day
4-6 times per week
2-3 times per week
Once per week
I did not manage anything using technology
Based on your current lawn care service, how essential are the following features?
Not necessary
Nice to have
Must have
Does not apply
Reliable
Exceptional results
Eco-friendly
Less expensive than other services
Locally owned
Demographic questions
How old are you? [assumption: people in different age groups may have different priorities about lawn services]
18-25
26-35
36-45
46-55
56 and above
What is your education level? [assumption: education level affects the way different people feel about climate change]
Less than a high school degree
High school degree or equivalent
Associate’s degree
Bachelor’s degree
Graduate degree
What is your political affiliation? [assumption: people in different political parties may have differing beliefs about climate change]
Democrat
Republican
Libertarian
Other:__________________________________
