Revisit problem statements

As you prepare to create storyboards and wireframes in this course, you want to ensure that
you have defined a problem statement for your mobile app. As a reminder, a problem
statement is a clear description of the user’s need that should be addressed. A solid problem
statement will inform your entire design process, so it’s important to get this right from the
very beginning of your project.

A problem statement includes a fictional user’s name, characteristics, their needs, and a key
insight gained from your research. You can use this template to create a problem statement:

[User name] is a/an [user characteristic] who needs [user need] because [insight].

With this template in mind, you might still be wondering: How do I create a problem
statement for my own project? Let’s build a problem statement now, using this template and a
real example. 

Consider this scenario: As the owner of a new construction business, Sawyer is looking for
ways to network with other professionals in their industry. They think that networking may
gain them more clients and help them learn from more experienced construction business
owners. In order to network, Sawyer wants to research all of the trade conferences in their
local area. 

With Sawyer and their needs in mind, we’ll use the template to create a problem statement. 

Sawyer is a construction business

owner who needs to attend trade show conferences because they need to network to find
more clients.

Sawyer is a construction business owner who needs to attend local trade conferences because
they need to network to find more clients. 

And there you have it: A problem statement! This problem statement clearly lays out the
information that we need to know about who the user is and how our design could help solve
their problem. As you begin to come up with ideas and create wireframes for your app designs,
continue to revisit the problem statements you’ve created, so that your designs will address
important user needs. 

Learn more about goal statements

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 trade show conferences because
they need to network to find more clients.

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 their new clients by giving them the ability to connect with clients at local
trade shows. We will measure effectiveness by analyzing show attendance.

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.
Outline a user flow
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?

Draw a user flow

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.

Example of a user flow

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! 
Learn more about creating storyboards

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.

Create a big picture storyboard

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.

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 substitute musicians which will affect users who
need new ban members by letting them easily find qualified musicians to hire. We will
measure effectiveness by reading user reviews and tracking successful hires.

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 template

OR 

If you don’t have a Google account, you can download the template directly from the
attachment below.

UX Design Certificate - Storyboard [Template]PPTX File

Download file
The storyboard template. At the top of the page, there's a place to describe the scenario. On
the template itself there are spaces for images and descriptions of action.

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:

Scenario: An app that allows users to recruit qualifies, new, or substitute musicians to join
their band. 1. The drummer in Dan's band quite so he needs to find a replacement. 2. Dan finds
and opens the app. 3. Dan scrolls through the app and finds an experienced drummer who
lives nearby. 4. A former band member did not have experience with rock music so having
relevant experience is important. 5. Dan selects a drummer and taps submit to schedule an
interview. 6. Dan is happy and his band schedules several gigs.

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.

Create a close-up storyboard

To create a close-up storyboard, steps 1-4 are the same as the big picture storyboard process:

1. Start with a problem statement. 

 2. Create a goal statement. 

3. Set up the storyboard.

4. 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:

Scenario: An app that allows users to recruit qualifies, new, or substitute musicians to join
their band. 1. user finds musician app and tapes the icon to open the app 2. new user create
profile or existing user logs in 3. user scrolls through musician profiles to search for qualified
candidates and sets filters. 4. user selects "view profile" to review musician's experience,
qualifications, location, etc. 5. user selects the "submit" button to send a message to a specific
musician 6. user receives confirmation that message was sent and expected next steps.

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!

Activity Exemplar: Practice creating storyboards for the CoffeeHouse project

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. 

Scenario: CoffeeHouse app

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. Next, let’s consider a goal
statement based on this problem statement:

 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 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. 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.”

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:

Six frames showing sketched images, followed by short descriptions. First frame shows a hand
clicking an icon on the phone home screen. Anika opens up the app. Second frame shows a
phone screen; on the screen it reads "Coffee" at the top, and beneath it is a map with various
pins appearing. Anika selects nearest location. Third frame shows a phone screen; on the
screen it reads "Coffee" at the top, and beneath shows options for link or QR sharing. Anika
sends out the menu to the team. Fourth frame shows a hand interacting with a phone screen,
with a "Coffee" at the top and a stopwatch beneath it. Anika starts a countdown for the order.
Fifth frame shows 3 phones within the frame, all reading "5 mins". The app notifies the team
that time is almost up. Sixth frame show the phone screen; at the top, it reads "Coffee" and
beneath, it reads "Your order" and has a send button at the bottom. Anika sends the order to
be made.

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.

Big picture storyboard:

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.

Close-up storyboard:

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.

Designing the information architecture of apps

As a UX designer, the information that your design presents needs to be clearly organized and
sorted, so users can successfully experience and interact with the app or website. This process
of organizing information is called information architecture. Think of information architecture
as a map for your product. 

Information architecture is made up of three pieces:

1. Organization: The organization is how different pieces of information connect in a

product.

2. Hierarchy: The hierarchy is often called the “tree structure” and is where a larger
category is placed at the top and specific categories related to the overall category are
placed underneath. Peer information is placed side by side (or on the same level as
each other).

3. Sequence: The sequence enables users to move through an app via certain orders or
steps.

Understanding organization, hierarchy, and sequence helps guide the process of building a
sitemap, so it’s good to familiarize yourself with these concepts.

Eight basic principles

In your role as a UX designer, you should be familiar with the eight basic principles of
information architecture. These are principles created by the founder of EightShapes, Dan
Brown. They were created to help UX designers understand and make decisions about their
products. Here’s a list of the eight principles:

1. Object principle: You should view your content as “living” and as something that
changes and grows over time.

2. Choice principle: People think they want to have many choices, but they actually need
fewer choices that are well-organized.

3. Disclosure principle: Information should not be unexpected or unnecessary.

 4. Exemplar principle: Humans put things into categories and group different concepts
together.

5. Front door principle: People will usually arrive at a homepage from another website.

6. Multiple classification principle: People have different ways of searching for

information.

7. Focused navigation principle: There must be a strategy and logic behind the way
navigation menus are designed.

8. Growth principle: The amount of content in a design will grow over time.

Take a few minutes to read through this detailed article on the eight principles of IA. Then,
think about how you can apply the principles to your design’s information architecture.

Information architecture principles for building a great sitemap

The final step in the information architecture process that we’ll walk through is site mapping.
As you learned above, a website or app should be mapped out in a hierarchical way. This
hierarchical connection between content is often referred to in the UX field as a “parent/child”
connection. 

Web app sitemaps

Here’s how a sitemap is organized for a web app:

1. Homepage, homescreen, or starting point: The homepage is usually the first point of
entry for a user. For example, the first entry point for an app might be the welcome
page. The “parent” for this page would be “welcome page.” The “child” connection
might be: new user log-in, returning user log-in, or log in with Facebook or Google
(these are peers and sit on the same level).

2. Other relevant screens: Other relevant pages would include all the other parent/child
relationships in the app. An example of this is when a user goes to the parent screen to
Settings; under that, the child connections might be Profile, Security, Help, and Policies.
Another example is when a user goes to the parent screen to tap Help on an app;
under Help, the child connections might be Search for a help topic, Browse topics, and
Contact us. 

Mobile app sitemaps

This structure is similar for a mobile app; you should include high-level entry points for users.
Keep in mind that you won’t use as many categories on a sitemap for a mobile app as a
sitemap for a web app. Here are a few common high-level categories that might be included in
an app:

1. Homepage, Product Features, User Settings, Pricing, Contact Us, and Help (You can
also reference this article from Medium.com to get a more detailed overview of how
to build a web app sitemap).

2. Underneath those high-level categories are child connections. For example, Name,
Email Address, and Payment Details would be included under User Profile.
Think about the dog walking app that is used as an example in many of the videos in this
course. Here’s how information would be structured for that app to give you a better picture:

Remember, it’s important to know the purpose of your app and the users who will benefit
from it; then you can better decide the structure. This will help guide the process of creating
your sitemap.

Because mobile screens are generally smaller, the challenges that come with creating
information architecture for a mobile app are to 1) consider ways to focus on the essential
content and eliminate or move around less important content, 2) consider the size and spacing
of any touchscreen targets, and 3) consider ways to make sure the mobile text will be large
enough. Good information architecture is one of the first steps in setting up a design layout
that encourages the easiest paths for users to navigate through the content, so be sure to keep
these points in mind as you continue to build mobile apps.

Build on your knowledge

Now you have a better understanding about how information is structured in apps. Take these
principles and apply them as you begin your own product designs. Take a look at this article to
learn about the six key patterns that are frequently used to think through information
architecture in mobile apps.

Also check out these articles on Accessibility: Guidelines for Information Architecture, UX
Design, and Visual Design and World IA Day 2019 — accessibility tips for Information Architects
to get a better understanding of how to think about accessibility in information architecture.

Then, read through a few key psychological principles that will help you figure out how to
organize information. Finally, review the articles under Additional Resources below to learn
even more about information architecture in UX.

Additional Resources

 Information architecture: Basics for designers by UX Planet

 The beginners guide to information architecture in UX by Adobe

  An excellent beginner’s guide to information architecture by Career Foundry

 Information architecture for UX designers by Justinmind.com

 5 examples of effective information architecture by Adobe

Learn more about using Gestalt Principles in wireframes

There is a belief among some people that, like a piece of art, the design of an app or website is
subjective and open to a user’s personal interpretations, thoughts, or feelings. Although a
user’s reaction to a design might be subjective, the design itself isn’t. Your designs will give
users solid solutions to problems they experience. Think about what the user wants to do
when they visit your app or website. What is their goal? How will you meet that need with
your design? How will the user react? 

The human brain makes sense of the world around it by building logic, patterns, and structure.
Gestalt Principles describe how humans group similar elements, recognize patterns, and
simplify complex images when we perceive objects. These principles guide how humans view
the designs around them in everyday life. In the wireframes you’re creating, you can apply
Gestalt Principles to organize content so it is visually pleasing and easier to understand.

In the video, you learned about three of the Gestalt Principles: similarity, proximity, and
common region. As a reminder:

 Similarity means that elements that look alike (in shape, size, or color, for instance)
are perceived to have the same function.

 Proximity means that elements that are close together appear to be more related than
things that are spaced farther apart.

 Common region means that elements located within the same closed area are
perceived to be grouped together.

So, how do you apply these Gestalt Principles to your own work? Check out an example of
each of these three Gestalt Principles in actual wireframes. 

First, similarity is key when it comes to your wireframes. To help users navigate your app
quickly, you want to keep “like with like” for consistency. For example, if you’re including
avatars or images of users in the design of your app, you’ll want to make sure that the
placeholders for those avatars are the same shape and size in your wireframes. This similarly
indicates to users that the elements have the same function — in this case, linking to profiles
of users. 

Next, imagine you draw a button labeled “learn more” close to the text of an article. If a user
presses the button, they’ll assume they can learn more about the content of that article. This
kind of design uses the Gestalt Principle of proximity to your advantage! Alternatively, if you
leave a lot of space between the text of the article and the “learn more” button, users might
not understand the connection between the two elements. A few seconds of confusion or
hesitation can mean the difference between a user continuing to the next page of your app or
closing it to find something more useful.

Finally, have you ever noticed that navigation bars at the top or bottom of a mobile phone
screen are usually in a different color or grouped with a border? That’s the Gestalt Principle of
common region in the real world. By creating a border and adding a block of color to a
navigation bar, you can anchor the icons for the main pages of your app, instead of having the
icons float on the screen. This design tip helps users recognize that the icons in the navigation
bar are more important than others and are perceived to be grouped together.

There are countless ways to apply Gestalt Principles in your wireframes that improve the
usability of your app. If you want to learn even more about Gestalt Principles, check out this
article from User Testing that describes additional Gestalt Principles and this article from UX
Collective with examples of the Gestalt Principles in wireframes

Activity Exemplar: Analyze and synthesize the results of your portfolio project usability study

Here is a completed exemplar for the Zia’s Pizza example we have been following that has a
completed note-taking spreadsheet from a usability study.

This exemplar focuses on how the one of our five participants completed each task, and
includes observations about their overall impressions. For your work, you should have
conducted interviews with at least five different participants and taken notes for all of them.

note-taking template exemplar for participant A in Zia's Pizza usability study.

Above is the raw data from one participant in the usability study for the Zia’s Pizza app.

Below is an affinity map containing grouped data from all five Zia's Pizza usability study
participants. The data has been grouped based on similar participant responses and reactions
to usability tasks.
Likes the app overall - 4/5 participants Likes the delivery system - 3/5 participants Knows how
to get started selecting a pizza - 5/5 participants Finds all the desired toppings to build a pizza -
2/5 participants HAs trouble building a pizza - 3/5 participants Has trouble selecting toppings
and confirming in the app - 4/5 participants Has trouble completing an order before checkout -
4/5 participants Has trouble entering payment information - 2/5 participants Speaks a positive
tone - 2/5 participants Speaks an indifferent tone - 1/5 participants Speaks a frustrated tone -
3/5 participants Speaks a annoyed or impatient tone - 1/5 participants Speaks a confident tone
- 2/5 participants

As you can see in the image above, we now have all of our observations laid out on our map.
The affinity mapping cards are divided into colors that match the three types of observations in
the note-taking spreadsheet: 

1. Opinion of the App Overall (red)

2. Completing Prompts (blue)

3. Attitude About the App and Completing Prompts (green)

To make it easy to quickly identify themes, the formatting for each card is the same. At the top
of each card is the observation and at the bottom is the number of users who shared that
observation. This format allows us to quickly identify how many users shared the same
observation. 

For example, the same number of participants, 4 out of 5, seemed to have trouble selecting
toppings and completing an order. Also, 3 out of 5 participants had trouble building a pizza.
The combination of these two observations could indicate a problem with the overall “Build
Your Own” pizza flow. 

Next, to keep track of the themes we identified, we entered them into the  insight
identification template.
1. Based on the theme that: users have trouble selecting toppings, an insight is: Add an “X”
over each selected ingredient to indicate that users have an option to remove a topping after
it’s been selected. 2. Based on the theme that: users had trouble building a pizza, an insight is:
Scale down the size of the pizza plate image in the “build your own pizza” user flow. 3. Based
on the theme that: users struggled with completing an order, an insight is: Add in a “continue
browsing” call-to-action button at the end of an order to allow users to add more items if they
would like to.

Since all three of our insights included elements that made it difficult for users to complete the
task, we labeled all three as P0. These insights can inspire direct action to improve the product.

Here’s what we did to review, analyze, and synthesize the data from our usability study:

Step 1: We compiled all the raw data from the note-taking spreadsheet.

Step 2: We used Jamboard to create an affinity map. We created a digital sticky note for each
of the five participant's responses. Once each observation was converted into a sticky note, we
organized the sticky notes by the type of observation and how many participants matched
each observation.

Step 3: We studied the number of similar participant responses, which helped us divide the
data into three primary groups: Opinion of Checkout Process & App Overall, Completing
Prompts, and Attitude About the App and Completing Prompts.

Step 4: We analyzed the groupings to identify themes. From that data, we identified “Build
your own” as the most challenging stage of the user flow. Then used the insight identification
template to convert those themes into actionable insights.

Step 5: Finally, we labeled each of our top insights with priority levels so we could make
changes to our design. Overall, we identified three actionable design items that were P0. We’ll
use these insights to go back to the high-fidelity prototype and continue to iterate on the
design. And then we can decide if we want to prepare for another round of testing.

Now compare the exemplar above to your completed deliverable. Assess what you’ve done
using each of the criteria used here to evaluate the exemplar. 
What did you do well? Where can you improve? Take this feedback with you as you continue
to progress through the course.

Learn more about identifying when a design is complete

Congratulations on making it to this point in the design process! You’ve put a lot of work and
effort into your mobile app designs. As you continue to iterate, you might wonder how you’ll
know when you’ll be finished working on a design project. As you learned in the previous
video, there are some important questions to ask yourself to help you decide whether your
designs are complete.

 Do the designs represent the intended user experience? 

 Have placeholder text, icons, and imagery been replaced with finalized assets?

 Are participants or users able to interact with and interpret the designs without
external guidance? 

 Do the designs follow the existing design system? 

 Do the designs follow common interaction patterns for their respective platforms?

 Do users have a clear path when something goes wrong? 

 Is the design accessible?

If you can answer “yes” to all of these questions, then you’re in a good place to consider your
designs complete! Your designs should fulfill the scope of the project that was set initially and
address the user problem that you set out to solve.

Once your designs are complete, you can hand them off to the engineering team, who will
build the final product.

Keep in mind: This doesn’t mean that you’ll never need to make changes or iterate on your
designs in the future. As people use the product in the real world, they’ll find flaws or missing
features that you can add or improve to make the user experience even better. As you become
more experienced in UX design, you’ll feel more and more comfortable knowing when a design
is as polished as possible for the next step in the process.

Want to learn more? Check out this article on Medium or this article from UX Planet with tips
for deciding whether your design is ready for production.

Learn more about creating a case study for your portfolio project

You've finished the final designs for the mobile app you've been working on for the past few
courses. Congratulations! What a great feeling. Now, you're ready to showcase your designs to
future employers and other designers by creating a case study in your portfolio website. Your
case study should include these ten things.

State your role in the project. In the real world, you'll mention the team members who
collaborated on a design project with you and list the role that each of you played in bringing
the designs to life. But for your project in this course, you covered the design process from
beginning to end on your own! You should express that in the case study you're creating.

State the purpose of your project based on your findings from the research.

Describe the users you tried to solve a problem for or help through your design project.

State the challenges. Some common challenges include things like budget or time constraints.

Mention the details of the research study. What research method did you use, and why did
you choose it? What issues did the data reveal that led you into the study? How did the
research study look? 

Outline your design process and the decisions you made that contributed to that design. This is
a good place to back your decisions with data from any research findings or results of a
usability study that informed your design thinking.

Show visuals of your design. This includes paper sketches, wireframes, and low-fidelity
prototypes of your design.

Discuss the results of user testing. At this point, you want to help others understand why the
issues occurred and what the usability tests showed as a result. In other words, what did you
learn?

Showcase your design. You’ll include a mockup or high-fidelity prototype of your design here
to wow your audience.
State your conclusion and possible next steps. This is your chance to talk about what you
learned throughout the design process and to touch on the future direction for the product or
possible iterations.

Update your portfolio 

You began creating your portfolio in the first course of this certificate, and hopefully you’ve
been revising it along the way, as you created new assets and completed important hands-on
activities. One of the biggest things you should keep in mind as you create your case studies is
showing potential employers how you learned and adapted through the iteration of your
design. Employers value a UX designer's ability to manage the input from stakeholders or
users. 

If you need a refresher on creating the building blocks of your portfolio, visit these course
resources: Introduction to website builders and Incorporate best practices for UX design
portfolios and look towards the readings Use a website builder to start your portfolio, Collect
portfolio elements, and Tips for strong portfolio design.

Learn more about adding a case study to your portfolio website

As you think about how you’re going to prepare your case study, you’ll want to do some extra
reading. 

 This article from a designer breaks down their design process into a case study for
inclusion into a portfolio: Trip Tribe: A tale of UX auditing and designing through gifs. 

 Get an in-depth walkthrough of how to write a UX case study, including examples of

good and bad case studies, from InVision.

 If you need help thinking about how to organize your case study, you can review this
Case Study Template and Example from AdobeXD.

For more examples of how some designers have distilled their design process down into case
studies, check out these portfolio examples from Googlers:

 A case study for a rebranding project completed by Andrew: Runsocial

 A case study for the design of an app by Shabi: Scapes

Censo kl9rm