It’s time to merge the insights from empathy maps, personas, user stories, and user journey maps to come up with a focused scope for your designs. You’ll transition from the problem the user is facing to the solution we can create as UX designers. To focus the scope of your designs, you’ll create a goal statement. A goal statement is one or two sentences that describe a product and its benefits for the user. In other words, the goal statement provides the ideal solution for your design challenge. Goal statements cover who the product will serve, what the product will do, and why the product solves the user’s need. Let’s explore how you can create a goal statement for your own design project. 1. Revisit your problem statement. You need to understand the problem that users are facing before you can design a solution to address that problem. As a reminder, here is the template you can use to create a problem statement: [User name] is a/an [user characteristics] who needs [user need] because [insight]. Here’s an example of a problem statement from earlier in the certificate program that you might remember: Sawyer is a construction business owner who needs to attend local trade conferences because they need to network to find more clients. If you didn't create a problem statement, you can still get the answers you need to create a goal statement. You can pull the who, what and why into your goal statement from various other parts of your research and work to date. You can find the who using the information from your persona. The user story can provide the what. And the empathy map and user journey maps will help you answer the why. 2. Transition from identifying the problem to defining the goal. At this point, it's time to transition from the problem that users are facing to the solution we can design to meet their needs. This can be a single, specific goal or a greater idea that you’ve chosen to be the focus of your design. Remember, the goal statement should be just one or two sentences that describes the product and its benefits for the user. Your goal statement needs to address the problem that you identified earlier in the problem statement. A strong goal statement: Describes a specific action users can take or what the product will do. Defines who the action will affect. States the positive impact of the action or why the product solves the user's need. Outlines success in measurable terms. To create a goal statement, you can fill in this template: Our [product] will let users [perform specific actions] which will affect [describe who the action will affect] by [describe how the action will positively affect them]. We will measure effectiveness by [describe how you will measure the impact]. Using this template, we can quickly write a goal statement that addresses the user problem identified in the problem statement above: Our TradeConference app will let users expand their business which will affect how business owners connect with new clients by giving them the ability to connect with clients at local trade shows. We will measure effectiveness by analyzing show attendance. That's it! You now know how to create a great goal statement. With a little bit of practice, you’ll be able to write goal statements that confidently guide the product development process. Here is the completed exemplar for a created goal statement, along with an explanation of how the exemplar fulfills the expectations for the activity. For this example, we’re going to use a problem scenario for CoffeeHouse and examine a goal statement solution. Our problem statement is: Anika is a busy marketing intern who needs a faster, more collaborative way to take many coffee orders at once because taking individual orders takes too long and isn’t a good use of Anika’s time. Remember, the problem is defined in the problem statement, and the solution is listed in the goal statement. Our goal statement solution for Anika’s problem is: _The CoffeeHouse app will let users place group orders in advance, which will affect users who have to make and pick up large orders by letting users skip the in-store order line and saving them time. We will measure effectiveness by tracking orders of 5+ items placed through the ap_p. The goal statement is: “The CoffeeHouse app will let users place group orders in advance, which will affect users who have to make and pick up large orders by letting users skip the in-store order line and saving them time. We will measure effectiveness by tracking orders of 5+ items placed through the app.” This was a successful goal statement because it: Identified the product as an app that will be created Defined the action the product lets people perform, which is placing group orders in advance Indicated who the action will affect, which is people who need to make and pick up large orders Described how the action will affect them, by skipping the line and saving time Defined how the app’s effectiveness will be measured, by tracking orders placed through the app Now compare the goal statement above to the CoffeeHouse goal statement you created. Did you meet the five criteria for a successful goal statement? If you met each of the five criteria, nice job! If there are criteria you missed, then these are areas where you can improve your goal statement. Go back and try re-writing your goal statement with these criteria in mind! Designing an efficient product requires a full understanding of users and their needs. There’s a lot that you can do with knowledge about the people you’re designing for. You can even predict users' needs before they know what they want or need! One example of predicting user needs is the process that happens when you order food from a restaurant. The cashier asks questions about condiments for your burger, whether you want a side of fries, and if you’d like a water or soda to drink. The cashier is anticipating your needs as a user and meeting those needs, possibly before you recognized those needs yourself. As a UX designer, you can anticipate user needs when interacting with your product. A clear and simple way to outline this process is by creating a user flow. A user flow is the path taken by a typical user on an app or a website, so they can complete a task from start to finish. UX designers often outline the user flow before they start to design because it can help to picture how users will move through the app or website. In other words, before you design screens of an app, you need to understand how users can effectively move through the app overall. You need to determine: What actions will users take in the app? What decisions will users make? What screens will users experience after taking action or making a decision? UX designers often outline user flows with common shapes: circles, rectangles, diamonds, and lines with arrows. Each shape represents an interaction the user will have with the product you're designing. Assigning a different shape to each interaction makes the user flow clear to anyone on the team involved in creating the product. Action: The actions users take when moving through a product design are represented as circles. In other words, circles show steps that must be taken to complete a task from start to finish. For the user flow of a dog walker app, actions might include opening the app, clicking on a dog walker’s profile, and booking a dog walker. Screen: The screens of a digital product that users will experience while completing tasks are represented as rectangles. For the user flow of a dog walker app, screens might include a homepage or a booking confirmation page. Decision: Diamonds represent points in the user flow where users must ask a question and make a decision. The decision users make will either move them forward through the flow or back to an earlier part of the flow. For the user flow of a dog walker app, a decision could be choosing whether or not to book the dog walker whose profile is being reviewed. User flow direction: Lines with arrows tie everything together and display the flow of information. Solid lines indicate forward direction through the user flow, and the dotted lines indicate backward direction or returning to a previous page. To apply these concepts to a real product, check out an example user flow below, for the dog walker app that’s been mentioned throughout this certificate program. The user flow starts with a user’s entry into the app and continues all the way through to their appointment confirmation with a dog walker. This user flow anticipates the user’s need to browse multiple dog walker profiles before choosing the right walker. As a designer, you have to consider the entire journey that users take in order to get what they need from the product. As you create your own user flow, reference the problem statement you developed to ensure your designs will really address user needs. Keep in mind that the user flow could change based on the needs of users and their circumstances. If your problem statement changes, the user flow will probably need to change too. For example, imagine you learn that users of the dog walker app want tips on hiring dog walkers before booking an appointment. The user flow would change by allowing an option to break away from this planned user flow to visit a new screen within the app, as shown below. This screen might branch off of the "read tips" action to provide extra information on booking a new walker. You don’t need to come up with a new user flow for every possible circumstance in the product, but you should ensure that the user flow you create focuses on the needs that the majority of users will face. For your current project in this program, you’re designing an app from scratch and creating a completely new user flow. But in the real world, you might work on an existing product with an established user flow. For existing products, creating or updating the user flow can be complicated. With thorough user research, screens can be reorganized, expanded upon, and trimmed to better meet how users work through a product. Whether you’re working on a new or existing product, remember that users and their needs must be at the forefront of the product's design. Designing with knowledge of your user’s needs will make you a better designer and will keep users engaged in your product. Creating a user flow is a solid step. As a UX designer, one of your best tools is being able to outline the path that users will take to complete a task in your product. Now, it’s time to show what you know and create a user flow for your own app design. Good luck! Here is a completed user flow for the CoffeeHouse app example we have been following in this course, along with an explanation of how this exemplar fulfills the expectations for the activity. Note that while this exemplar uses CoffeeHouse, your work should be for your portfolio project. In UX design, a storyboard is a series of panels or frames that visually describes and explores a user’s experience with a product. Telling a story through visuals is often more effective than using words. A real product might have many screens, but your storyboard should focus on just the most important parts of a user’s experience with a product. As their name suggests, there’s a story that should be told through the panels of a storyboard. The four key elements of a storyboard are: Character: States the user in the storyboard. Scene: Gives designers a way to imagine the user’s environment. Plot: Describes the solution or benefit offered by the design. Narrative: Describes the problem the user is facing and how the design will solve this problem. There are two common types of storyboards in UX design, both of which incorporate these four key elements: Big-picture storyboards focus on what the user needs, their context, and why the product will be useful to the user. Big-picture storyboards are often used early in the design process when designers are trying to get stakeholders to support their ideas. Close-up storyboards concentrate on the product and how it works. They’re best used in the middle to the end of the design process. Let’s explore how we can create each of these storyboards with a real example. Imagine this scenario: You’re designing an app called Bandmate for musicians to recruit talented band members. A user that might come to your app for help is a guitarist in a rock band. We’ll call them Dan. Their band’s drummer suddenly quit, so Dan needs to find a new drummer. 1. Start with a problem statement. This will help establish character and set the scene for your storyboard. For this example, the problem statement might be: Dan is a lead guitarist in a band who needs to hire a new drummer because they are having issues replacing the previous drummer. 2. Create a goal statement. Your goal statement helps you determine a plot (the benefit or solution of your design) for your storyboard. A goal statement for this example might be: Our Bandmate app will let users recruit new or substitute musicians which will affect users who need new band members by letting them easily find qualified musicians to hire. We will measure effectiveness by reading user reviews and tracking successful hires. 3. Set up the storyboard. You can use the storyboard template shown in the videos about storyboarding, or you can draw a similar outline on a piece of paper. To use the template for this course item, click the link below and select “Use Template.” Link to template: storyboard templateOpens in a new tab OR If you don’t have a Google account, you can download the template directly from the attachment below. 4. Add the storyboard scenario. Begin filling out the storyboard template by adding the scenario. At the top of the template, write a sentence that sets the narrative for the storyboard. Thinking back to the problem from the problem statement and the solution from the goal statement, write a short, clear sentence that describes the user and the problem your design solves for them. Consider the end result that will solve the user’s problem. For this example, you want the Bandmate app to help Dan find a new drummer for their band. So the scenario at the top of the storyboard might be: An app that allows users to recruit qualified, new, or substitute musicians to join their band. 5. Draw one idea per panel. The first panel is used to set the scene for the story. Then with each additional panel, think about actions that push the story forward and how the user feels in each panel. In the first panel, what is the event that triggers Dan to find a new drummer? In this case, Dan’s drummer quit, so he needs to find a replacement drummer to join the band. In the second panel, Dan finds and opens an app that can help him recruit qualified, new, or substitute musicians that are located in his local area. This action should be drawn in its own panel. In the third panel, Dan finds an experienced drummer who lives nearby while scrolling through the app. He filters for drummers with at least five years of experience in a professional band, who have good reviews, and who live within 30 miles of his current location. Pro tip: Remember that big-picture storyboards focus on the user experience. The storyboard should show how people use your product and why your product will be helpful to them. Because big-picture storyboards are about the user, it's important to include emotion by using a sad or happy face, for example, at different steps of the journey to make the storyboard feel human and relatable. 6. Expose pain points for the user along their journey. Dan had a bad experience in the past when he hired a keyboard player for the band who turned out to be unqualified. While using this new app, Dan needs to be able to identify qualifications from the musician’s profile, like how many years they’ve played in a band or the ratings they’ve received from other users. Dan might feel a little nervous because of his past bad experiences finding bandmates. This is drawn in the fourth panel. Then, in the fifth panel, Dan selects a drummer in the app and taps the “schedule” button to set up an interview with the potential replacement drummer. 7. Include the user goal or conclusion in the final panel. In this example, the conclusion is that a new drummer joins the band. Dan is very happy, and his band schedules several gigs. Make sure to include an emotion to demonstrate how the user feels at the end of the experience with your product. In this case, Dan feels excited and satisfied. And that’s it! Check out the completed big-picture storyboard for this example: You brought the user, Dan, on a journey to find a new drummer for his band. You’ve addressed his pain points and helped him find a qualified drummer. Your user is delighted with the app experience. Big-picture storyboards can really help immerse you in the experience of a user, which leads to better products overall. To create a close-up storyboard, steps 1-4 are the same as the big-picture storyboard process: Start with a problem statement. Create a goal statement. Set up the storyboard. Add the storyboard scenario. 5. Draw one idea per panel. Big-picture storyboards and close-up storyboards differ in step five, when you draw each panel. Remember, big-picture storyboards focus on the user, while close-up storyboards focus on the product. For this close-up storyboard, think about which product details you want to draw attention to on each panel and why. You want to demonstrate the user flow within the product and how each action within the product will lead to the next screen. To begin, in the first panel, the user will open their phone, swipe through their apps, and tap the icon for the musician app to open it. Oftentimes when designing an app, one panel of a close-up storyboard will focus on how a user begins their journey when they first open the app. For this example of the app to find musicians, let’s imagine that a new user can create a profile or an existing user can log in. This is shown in the second panel. In the third panel, once the user is logged into the app, they can begin searching for their bandmate. The user scrolls through profiles of musicians and can set filters like level of experience, years played, location, instruments played, and more. In the fourth panel, the user taps the “view profile” button of one of the musicians to review their experience, qualifications, and location. Then, once the user finds a candidate they’re interested in contacting, they tap the “submit” button to send a message to that musician. The user can write their own message or send an automated message that asks about availability and to schedule a conversation. There’s also an option for the user to provide a sample of their music to the musician. This is shown in the fifth panel. Finally, in the sixth panel, the user receives a confirmation that their message has been sent and a description of the next steps to expect. The text below the confirmation might say something like, “Your message to this musician has been sent.” There will also be a button linking back to the user’s inbox and one that leads them back to the search page they just came from. Check out the completed close-up storyboard for this example: That’s it! You now know how to create a big-picture and a close-up storyboard. In the next activity, you’ll have an opportunity to create your own storyboards. Have fun! Here is a completed exemplar with the two types of storyboards based on the CoffeeHouse scenario. An explanation of how the exemplar fulfills the expectations for the previous activity follows the storyboard examples. 场景：咖啡屋应用** For both the big picture storyboard and close-up storyboard, the activity begins with a problem statement: Anika is a busy marketing intern who needs a faster, more collaborative way to take many coffee orders at once because taking individual orders takes too long. This problem statement gives you a good idea of a character for the story. It is Anika, a busy marketing intern! This problem statement also sets a scene for the storyboards: Anika is entering a large coffee order and picking it up for her office. This helps set the plot for the story, which will be about a customer successfully placing a large coffee order quickly and easily! Now you're ready to come up with a scenario statement that describes the narrative that the storyboards depict. Both of the storyboards will tell the story of how the app helps a user submit a large coffee order for pick-up at their local CoffeeHouse shop. Then it's time to fill in the template panels with visuals and captions according to the guidelines for a big picture storyboard. Example of a big picture storyboard for the CoffeeHouse app: Written description of big picture storyboard: The storyboard contains six panels. In panel one, Anika wants to get coffee for the team. Anika's surrounded by people giving orders at the coffee shop. In the second panel, Anika remembers that an app can help out in this situation. In the third panel, Anika decides to use the CoffeeHouse app to take orders from her team. In the fourth panel, Anika learns that they can send the menu of items to the team within the app so the team can place their own orders. In the fifth panel, Anika sends the order to the coffee shop through the app and the coffee starts brewing. The final panel shows Anika and the team enjoying their coffee in the office. Example of a close-up storyboard for the CoffeeHouse app: Written description of close-up storyboard: The storyboard consists of six panels. In the first panel, Anika starts by opening the app on their phone. In the second panel, Anika selects the nearest location to buy coffee. In the third panel, Anika gets a link or QR code from the app which contains a menu they can send out to the team. In the fourth panel, Anika sees a clock with a countdown in the fourth panel which indicates how long the team has to place their orders. Next, in the fifth panel the app notifies the team that time is almost up. In the last panel, Anika sends out the order to be made by the coffee shop. Notice that this big picture storyboard is focused on the how and the why behind the user’s engagement with your design. When creating a big picture storyboard, think about questions like: Why does the user need our app? How will the user use our CoffeeHouse app? Why will the user be delighted by the app? Like a good movie, a big picture storyboard can show the emotional engagement that a user will have with this app or with any product. Understanding how a user feels while experiencing your product is an essential part of the design process. A big picture storyboard should meet the following guidelines: Sketches should focus on the user. Sketches should indicate the environment or context where the user is located. Sketches should focus on the specific need or pain point experienced by the user. While big picture storyboards focus on the how and the why, close-up storyboards focus on the what. Think about questions like: What happens on each screen of the product? What does the user do to transition from one screen to another? What are some assumptions we are making about this experience? What are some potentially complicated interactions or pain points that will need to be addressed? The close-up storyboard is less about emotion since we’re not focused on the user. Instead, the close-up storyboard is focused on the practical aspects of the design itself. A close-up storyboard should meet the following guidelines: Sketches should focus on the product instead of on the user experiencing that product. Sketches should indicate the interaction that a user may have with the product by depicting sample screens. Sketches should indicate any transitions between screens or states that the user may need to perform. Now compare the exemplar above to your completed storyboards. Assess what you’ve done using each of the guidelines used here to evaluate the exemplar. What do you do well? Where can you improve? Take this feedback with you as you continue to progress through the course.01 Learn more about goal statements
Activity Exemplar: Build a goal statement for the CoffeeHouse project
02 Outline a user flow
Draw a user flow
Example of a user flow
03 Learn more about creating storyboards
3.1 Create a big-picture storyboard
3.2 Create a close-up storyboard
3.3 案例
这是一个完整的示例，其中包含基于咖啡屋场景的两种类型的故事板。故事板示例后面解释了示例如何满足先前活动的期望。**Scenario: CoffeeHouse app
对于大图片故事板和特写故事板，活动都以问题陈述开始：
Anika 是一名忙碌的营销实习生
谁需要更快、更具协作性的方式来同时接受多份咖啡订单
因为接受个别订单需要很长时间。
这个问题陈述让您对故事中的角色有一个很好的了解。这是 Anika，一位忙碌的营销实习生！这个问题陈述还为故事板设定了一个场景：阿尼卡正在输入一份大咖啡订单并为她的办公室取货。
Next, let’s consider a goal statement based on this problem statement:
接下来，让我们考虑基于此问题陈述的目标陈述：
CoffeeHouse应用程序将允许用户提前下团体订单，这将通过让用户跳过店内订单队列并节省时间来影响必须下订单和取货的用户。
We will measure effectiveness by tracking orders of 5+ items placed through the app.
我们将通过跟踪通过应用程序放置的 5 件以上商品的订单来衡量有效性。
这有助于设定故事情节，即客户快速轻松地成功订购大笔咖啡的故事！
现在您已准备好提出一个场景陈述来描述故事板所描述的叙述。两个故事板都将讲述该应用程序如何帮助用户提交大笔咖啡订单以在当地的 CoffeeHouse 商店取货的故事。
The next step is to fill out the storyboard templates beginning with this simple scenario statement: “An app to help users place large coffee orders quickly and easily.”
下一步是填写故事板模板，从这个简单的场景陈述开始：“一款帮助用户快速轻松地下大笔咖啡订单的应用程序。”
然后是时候根据大图片故事板的指导原则，用视觉效果和标题填充模板面板了。
CoffeeHouse 应用程序的大图故事板示例：
大画面故事板的书面描述：
故事板包含六个面板。在第一组中，阿尼卡想要为团队提供咖啡。阿尼卡周围都是在咖啡店下订单的人。
在第二个面板中，阿尼卡记得应用程序可以在这种情况下提供帮助。
在第三个小组中，Anika 决定使用 CoffeeHouse 应用程序接受团队的订单。
在第四个面板中，Anika 了解到他们可以在应用程序内将项目菜单发送给团队，以便团队可以自己下订单。
在第五个面板中，Anika 通过应用程序将订单发送到咖啡店，咖啡开始冲泡。
最后一幅图展示了 Anika 和团队在办公室享用咖啡。
CoffeeHouse 应用程序的特写故事板示例：
特写故事板的书面描述：
故事板由六个面板组成。在第一个面板中，Anika 首先打开手机上的应用程序。
在第二个面板中，Anika 选择最近的购买咖啡的位置。
在第三个面板中，Anika 从应用程序获取一个链接或二维码，其中包含一个可以发送给团队的菜单。
在第四个面板中，Anika 在第四个面板中看到一个带有倒计时的时钟，指示团队必须在多长时间内下订单。
接下来，在第五个面板中，应用程序通知团队时间即将结束。
在最后一个面板中，Anika 发出咖啡店要制作的订单。Big picture storyboard: 大画面故事板：
请注意，这个大图故事板重点关注用户参与您的设计背后的方式和原因。创建大图故事板时，请考虑以下问题：
用户为什么需要我们的应用程序？
用户将如何使用我们的 CoffeeHouse 应用程序？
为什么用户会对应用程序感到高兴？
就像一部好电影一样，大画面故事板可以展示用户对该应用程序或任何产品的情感投入。了解用户在体验产品时的感受是设计过程的重要组成部分。
大画面故事板应满足以下准则：
草图应该以用户为中心。
草图应指示用户所在的环境或上下文。
草图应重点关注用户经历的特定需求或痛点。Close-up storyboard: 特写故事板：
大画面故事板侧重于如何和原因，而特写故事板则侧重于内容。思考以下问题：
产品的每个屏幕上会发生什么？
用户如何从一个屏幕转换到另一个屏幕？
我们对这次经历做出了哪些假设？
有哪些潜在复杂的交互或需要解决的痛点？
特写故事板较少涉及情感，因为我们不关注用户。相反，特写故事板侧重于设计本身的实用方面。
特写故事板应满足以下准则：
草图应该关注产品而不是体验该产品的用户。
草图应通过描绘示例屏幕来表明用户可能与产品进行的交互。
草图应指示用户可能需要执行的屏幕或状态之间的任何转换。
现在将上面的示例与您完成的故事板进行比较。使用此处用于评估示例的每条指南来评估您所做的工作。
你做什么好？哪里可以改进？当您继续学习本课程时，请随身携带此反馈。
