Google UX Certificate / Ideation, Wireframing & Low-Fidelity Prototypes

A combined collection of the ideation phase from Course 2 and Course 3 (Build Wireframes and Low-Fidelity Prototypes). This segment covers the part of the design process"from a pile of ideas to a clickable draft"— ideation → user flow → storyboard → wireframe → low-fidelity prototype. Visual polish (colors/fonts/icons/high-fidelity) is covered in the next course, see Google UX Certificate / Visual Design, Design Systems & Responsive Design.

Significance for PMs: The most practical parts of this segment are user flows, information architecture (IA), and wireframes— these are exactly the design language for the "page structure + navigation logic" section in a PRD. Once you learn them, you can communicate directly when writing PRDs and aligning on wireframes with designers, instead of only being able to say "add a button here".

1. Design Ideation (Divergent Solutions)

For the core mindset of the ideation phase, see Google UX Certificate / UX Design Fundamentals §6 (HMW / Crazy Eights / Competitive Analysis / SCAMPER). Two operational points are supplemented here:

Goal Statement

A problem statement describes "the user's problem", while a goal statement describes "the solution we will build + how we measure success". It is the bridge from the define phase to ideation.

Formula:我们的 [产品] 让用户能够 [行动],这将惠及 [用户群],帮助他们 [好处]。我们将通过 [指标] 来衡量成效。 Example: Our CoffeeHouse App lets users place group orders in advance, benefiting users who need large orders and helping them skip in-store queues to save time. We will measure effectiveness through "the number of in-app orders for 5 or more items."

Competitive Audit (5 Steps)

Research competitor products to find inspiration, avoid mistakes, and identify market opportunities. Process: ① Define competitors (direct competitors + indirect competitors) ② Set research dimensions (features/pricing/user experience/strengths & weaknesses) ③ Experience and record each one ④ Analyze (who does it well, where are the gaps) ⑤ Produce an audit report + summarize opportunities.

Usage tip: Negative reviews of competitors are a unique value proposition goldmine (see Google UX Certificate / UX Research & Empathy - Define §4).

2. User Flow

A diagram of every step a user takes from opening the product to completing a task —draw it before designing interfaces to let the team clearly see "what steps the user goes through". 4 shapes (like a flowchart):

Shape	Color	Represents	Example
Circle	Green	Action(user operation)	Open the App, tap a button, select an item
Rectangle	Yellow	Page(screen the user sees)	Homepage, search results, confirmation page
Diamond	Blue	Decision(branching user choice)	Make a reservation? Yes → reservation page / No → go back
Arrow	Red	Flow direction	Solid line = forward, dashed line = return to previous step

Flowcharts change— if you find users want to see "how to choose a dog walker" before making a reservation, add a new page + new path. Draw from scratch for new products; update existing flows when improving old products. Center on user needs.

3. Storyboard

Like a comic strip / movie storyboard, showing key steps of a user using the product panel by panel.Emphasize key moments, not every interface. 4 core elements:Character / Scene / Plot / Narrative. Template = scene sentence (one sentence describing the user and the problem) + panels (one segment of experience per panel) + text notes (details that can't be drawn). 6 panels are commonly used.

Two types of storyboards (choose by stage)

Type	Stage	Focus	Characteristics
Big-Picture	Early stage	User Overall feelings/emotions/motivations	User-centered, shows emotional changes (😞→😊), tells "why they use it and how it helps"; recommended to use emojis to reflect emotions;the 4th panel often embeds the pain point, and the last panel shows goal achievement
Close-up	Mid-to-late stage	Product Interface flow / operation logic	Interface-centered, one page/operation per panel, tells "what is tapped and how it navigates", does not focus on emotions

For the same user (e.g., Drew using a dog-walking App): the big-picture version tells the emotional arc of "dog is lonely at home → remembers while driving they forgot to walk the dog → opens the App → feels relieved"; the close-up version tells the operation line of "open App → log in → fill in address → select time → confirm".

4. Wireframe

Fidelity = how close it is to the finished product

	Lo-Fi	Hi-Fi
Characteristics	Simple, unpolished, quick sketch	Detailed, polished, close to the real product
Stage	Early stage, brainstorming/exploration	Late stage, user testing/gathering feedback

Analogy to drawing an apartment: using blocks to represent rooms and furniture = low-fidelity; adding colors, decorations, furniture patterns = high-fidelity.

Wireframe = low-fidelity, showing the page's skeleton structure: using only lines, simple shapes, and a small amount of text,no colors/images/brand elements. Value: plan page structure, emphasize functionality (what each element does), save time (quickly test multiple solutions), unify team communication. Can be hand-drawn or made with Figma/Adobe XD/Sketch.

Paper → Digital + Reverse Engineering Exercise

Paper wireframes: quickly sketched with lines/rectangles/symbols;Digital wireframes: create artboards in Figma according to device dimensions, build elements one by one referencing the paper version,all key pages must be converted(not just the homepage) to ensure the complete user flow.
Reverse engineering exercise: hand-draw wireframes of an App you like (e.g., YouTube) — a classic method for beginners to practice wireframing, and also strong material for a portfolio.

Industry standard drawing conventions(memorize these, they are universal when aligning on wireframes with designers):

Element	Wireframe representation
Body text	Horizontal lines
Image/Icon	Square or circle with an "X"
CTA (Call to Action) button	Rectangle or circle
Title/Label	Text or horizontal lines

After completion do an overall self-check: Are all key elements on screen? Is the layout accurate? Does it follow industry standards? Three "yes" answers mean success.

5. Information Architecture (IA)

The way product information is organized = the "map" of the product. 3 core components:Organization(how pages connect),Hierarchy(tree structure, major categories → subcategories),Sequence(steps of the operation flow). Visualized as a Sitemap.

Dan Brown's 8 Principles of Information Architecture

Principle of Objects: Content updates and changes; treat it as if it is "alive".
Principle of Choices: Don't give too many options; a few clear ones are better than a pile (echoes Hick's Law).
Principle of Disclosure: Show information at the right time, don't dump it all at once.
Principle of Exemplars: Use examples to help users understand what categories mean.
Principle of Front Doors: Users may enter from any page, not necessarily the homepage.
Principle of Multiple Classification: Provide multiple ways to find things (different people have different habits for finding information).
Principle of Focused Navigation: Keep navigation simple and clear, so users know where to go.
Principle of Growth: Leave room for future expansion.

Sitemap parent-child structure: Homepage (parent) → new user login/returning user login/third-party login (child pages at the same level); Settings (parent) → profile/security/help/policies (child pages).Mobile vs Web: IA is roughly similar, but mobile has fewer categories. 3 challenges for mobile IA: streamlined content, large enough tap targets, readable text.

6. Figma + Gestalt Principles

Figma

A cloud-based UX/UI design tool, all-in-one (no tool switching needed from wireframes → prototypes → interaction animations). Advantages: real-time remote collaboration, faster workflow, many community plugins.Skills are transferable— if you know Figma, you can learn Adobe XD/Sketch/Axure very quickly. Instructor Erika's mindset for learning tools:Jump right in and draw(draw a circle, change a color), look up official help/Google/YouTube when stuck, practice every day;tools are just means, don't lock yourself into one, mastering design thinking is the key.

Gestalt Principles (make wireframes easy to understand at a glance)

Design is not purely subjective; it uses sound methods to address "whether users can understand and know how to use it". 3 commonly used ones:

Principle	Meaning	Application
Similarity	Looking alike = functioning alike	All user avatars use 40×40 circles → users know these are all "profile entry points"
Proximity	Placed close together = related	The "Buy" button sits right next to the product name and price, so users do not misunderstand what the button applies to
Common Region	Same frame/background color = same group	The navigation bar is enclosed with a unified background color + border, making it appear more important than standalone icons

Extended principles:Closure(the brain fills in missing shapes),Continuity(items arranged in the same direction are perceived as a whole),Symmetry(symmetry is easier to recognize as orderly).

7. Low-Fidelity Prototype

Wireframe vs Prototype:Wireframes provide static layout (what each page looks like),Prototypes provide interaction (where you go after tapping). A low-fidelity prototype = connecting wireframes into a clickable flow.

Built in Figma (4 steps)

① Prepare wireframes for each page → ② Name each page with a number (in the layers panel) → ③ Switch to Prototype mode, select an element and drag the "+" to add connections (e.g., the "Reserve" button on the homepage → reservation page, etc.) → ④ Click "Play" to enter presentation mode, test like a real user whether every button navigates, whether scrolling works, whether the back button functions normally, and add connections for unlinked buttons. Benefits: clearly shows each step of operation, quick to make (no need to add colors/images), convenient for early trial and feedback collection, lays the foundation for high-fidelity.

Paper Prototype

Cut out each page + make a phone-shaped paper frame to demonstrate switching.5 benefits: cheap, fast to modify, no psychological pressure (no regret if thrown away), easier to get feedback (people are more willing to comment when it looks simple), convenient for collaboration.Disadvantages: requires imagination, can only be tested in person, not suitable for remote settings.When to use: when brainstorming ideas, testing initial flows, in face-to-face meetings. Scrolling demo tip: draw a very long piece of paper, place the phone paper frame on top and use your finger to simulate scrolling up and down.

Mobile-first: build the mobile version first — the smallest screen forces you to only include the most important content; what works on a small screen is easier to adjust for larger screens.

Glossary of Key Terms

English	Chinese	One-line explanation
Goal Statement	Goal Statement	Product + action + user + benefit + success metric
Competitive Audit	Competitive Audit	Research competitors to find inspiration/opportunities; negative reviews are a goldmine
User Flow	User Flow	Circle = action / Rectangle = page / Diamond = decision / Arrow = flow
Storyboard (Big-Picture / Close-up)	Storyboard (Big-Picture / Close-up)	Big-picture tells emotion, close-up tells operations
Fidelity	Fidelity	How close it is to the finished product, from low-fidelity to high-fidelity
Wireframe	Wireframe	Page skeleton, only lines and shapes with no colors
Information Architecture (IA)	Information Architecture	Organization/hierarchy/sequence, the map of the product
Sitemap	Sitemap	Visualization of IA, parent-child hierarchy
Gestalt Principles	Gestalt Principles	Similarity/proximity/common region… make layouts easy to understand
Low-Fi Prototype	Low-Fidelity Prototype	Wireframes connected into a clickable flow
Reverse Engineering	Reverse Engineering Exercise	Hand-draw wireframes of existing Apps to practice wireframing