Bobby's Breads
Google User Experience Design Case Study
High-Fidelity Prototype - Home Page
High-Fidelity Prototype - Order Page
High-Fidelity Prototype - Sign-up Page
Overview:
Six Professional Certificates
The Google User Experience Design course was divided into six distinct professional certificates that helped me lean the entire UX process.
01
Professional Certificate #1: Foundations of User Experience
Starting the Google UX Design course, I learned how to Empathize, Define, Ideate, Prototype, and Test.
02
Professional Certificate #2: Start the UX Design Process: Empathize, Define, and Ideate
I practiced empathizing with users by building personas, mapping journeys, writing user stories, and crafting clear problem statements.
03
Professional Certificate #3: Build Wireframes and Low-Fidelity Prototypes
I translated business requirements into wireframes and low-fidelity prototypes, building early product structures and interactive user flows.
04
Professional Certificate #4: Conduct UX Research and Test Early Concepts
I evaluated early concepts through usability testing and A/B testing to collect real user feedback and data-driven insights.
05
Professional Certificate #5: Create High-Fidelity Designs and Prototypes in Figma
I transformed feedback into a fully functional high-fidelity prototype, honing auto layout, component systems, and plugin workflows in Figma.
06
Professional Certificate #6:
Build Dynamic User Interfaces (UI) for Websites
Professional Certificate #6:
Build Dynamic User Interfaces (UI) for Websites
Professional Certificate #1:
Foundations of User Experience
I was awarded this certificate because I understood the basic fundamental process of User Experience Design: Design Thinking.
%20Design.jpg)
Design Thinking: The UX Design Process
Empathize
Conduct research in order to develop knowledge about what your users do, say, think, and feel.
Define
Combine all your research and observe where your users’ problems exist.
Ideate
Brainstorm a range of crazy, creative ideas that address the unmet user needs identified in the define phase.
Prototype
Weigh the impact vs. feasibility of your ideas through feedback on your prototypes.
Test
Return to your users for feedback. Ask yourself ‘Does this solution meet users’ needs?’
Professional Certificate #2:
Start the UX Design Process: Empathize, Define, and Ideate
I practiced empathizing with users by building personas, mapping journeys, writing user stories, and crafting clear problem statements.
My Personas
This involves me being creative and thinking of fictional potential users from varying demographics. It is a good way to place myself in a situation using the product that I might not normally experience.
A crucial part of my process was to first create what's called a "value proposition". This summarized why a user should use my service/product:
"My bakery app can track the progress and status of a client’s bread so that they can better manage
their time and know when to pick up the bread"
Professional Certificate #3:
Build Wireframes and Low-Fidelity Prototypes
I translated business requirements into wireframes and low-fidelity prototypes, building early product structures and interactive user flows.
Paper Wireframe
Goals:
• Establish clear early concepts through paper wireframes focused on the bread-selection screen
• Use standard wireframe notation (“X” for images, lines for text) to communicate structure cleanly
• Define key UI elements early, including a centered brand header, account access, and a simple navigation menu
Low Fidelity Wireframe
Goals:
• Validate early concepts by gathering quick feedback from designers
• Translate the strongest elements from the paper wireframes into a low-fidelity digital screen in Figma
• Create a foundation by making a basic user checkout flow to test the overall experience
Low Fidelity Prototype
Goals:
• Establish an initial visual direction by making key stylistic decisions around color, typography, and overall tone
• Select warm design elements like the orange color pallet and an "artisan" style font to reflect a hand-made, locally-baked brand identity
• Create a more familiar design feel by utilizing components from the Material 3 Design Kit
Professional Certificate #4:
Conduct UX Research and Test Early Concepts
I evaluated early concepts through usability testing and A/B testing to collect real user feedback and data-driven insights.
A/B Testing
Though not a part of the official Coursera Google UX Design Certificate, this research method was referenced and revered in a lot of the UX circles that I found through this course.
According to the Nielsen Norman Group, A/B testing has 4 steps:
1. Start with a Hypothesis
2. Define the Changes to Make
3. Choose Outcome Metrics
4. Determine the Timeframe of the Test
1) Hypothesis: Based on usability surveys, users got distracted by the colors during the checkout process. Changing the design of this page would allow users to check out faster.
2) Changes: The only change that was measured was the difference in colors and how they effect user interaction. A/B testing should rarely be used to measure the effectiveness of multiple changes at once, so I was just focusing on the colors here.
3) Metrics: In this mock environment, I asked 5 different users to act as "app traffic". The users are different than those who participated in the Usability testing, so that the data did not end up biased due to product familiarity.
I tested the TOP or Time on Page as our primary metric. TOT or Time on Task will be a guardrail metric.
4) Timeframe: Due to this being a mock environment, I assumed that each user encountered the site over the span of the testing period: two weeks.
Results: Time on Page decreased by an average of 25 seconds per user during the entire flow due to users being less distracted by the color palette. As an additional guard rail metric, the Time on Task decreased by an average of 4 seconds per page.
Low Fidelity Prototype
Iteration 2
Goals:
• Establish an initial visual direction by making key stylistic decisions around color, typography, and overall tone
• Select warm design elements like the orange color pallet and an "artisan" style font to reflect a hand-made, locally-baked brand identity
• Create a more familiar design feel by utilizing components from the Material 3 Design Kit
Professional Certificate #5:
Create High-Fidelity Designs and Prototypes in Figma
I transformed feedback into a fully functional high-fidelity prototype, honing auto layout, component systems, and plugin workflows in Figma.
High Fidelity Prototype
Goals:
• Refine technical skills by mastering Auto Layout, plugins/widgets, and component management
• Strengthen system organization through building reusable component libraries that streamline buttons, icons, and checkout elements
• Ensure visual consistency by aligning all screens with modern iPhone design patterns and interaction expectations
Professional Certificate #6:
Build Dynamic User Interfaces (UI) for Websites
I practiced empathizing with users by building personas, mapping journeys, writing user stories, and crafting clear problem statements.
%20For%20Websites.jpg)
The Finale!
This part of the Google UX course taught me how to present my finished product in a clear, comprehensive way. It focused on building my portfolio and showing my work to potential employers.
