Starting the Onboarding Flow – Building SaaS #49

Building SaaS (86 Part Series)

1 Building SaaS with Python and Django #1
2 Reporting scraped data – Building SaaS #2
… 82 more parts…
3 Multiple Stripe plans – Building SaaS #3
4 Using a background scheduler – Building SaaS #4
5 Updating data models – Building SaaS #5
6 Third party integration modeling – Building SaaS #6
7 Displaying third party data – Building SaaS #7
8 Connecting third party services – Building SaaS #8
9 Finishing third party integration – Building SaaS #9
10 Admin dashboards – Building SaaS #10
11 Semi-automated tasks – Building SaaS #11
12 Automation aides – Building SaaS #12
13 Deploying with Ansible – Building SaaS #13
14 Ansible Cranked to 11 – Building SaaS #14
15 Feature Flags with Django Waffle – Building SaaS #15
16 Feature Flags in Action – Building SaaS #16
17 Canceling Stripe Subscriptions – Building SaaS #17
18 Completing Account Deactivation – Building SaaS #18
19 Pip-tools and App Packaging – Building SaaS #19
20 Making a Shiv App – Building SaaS #20
21 Shiv zipapps and CI – Building SaaS #21
22 Upload to S3 with CircleCI orbs – Building SaaS #22
23 It’s Alive! A Django Shiv app – Building SaaS #23
24 In the Guts of a Shiv App – Building SaaS #24
25 It’s Permissions, Dummy! – Building SaaS #25
26 Connecting Shiv Apps with Ansible – Building SaaS #26
27 Plug the Shiv App Into Nginx – Building SaaS #27
28 Webpack and collectstatic in CI – Building SaaS #28
29 Add Static Assets to Deployment – Building SaaS #29
30 Ripping Out Node.js – Building SaaS #30
31 Celery In A Shiv App – Building SaaS #31
32 wal-e Postgres Backups – Building SaaS #32
33 Get Out, Git! – Building SaaS #33
34 Bring in the WhiteNoise, Bring in Da Funk – Building SaaS #34
35 Deploying WhiteNoise – Building SaaS #35
36 Configurama – Building SaaS #36
37 Lessons From A Failed SaaS – Building SaaS #37
38 New Project, Who Dis? – Building SaaS #38
39 django-environ and django-debug-toolbar – Building SaaS #39
40 Make A Custom User Model – Building SaaS #40
41 User Accounts With django-allauth – Building SaaS #41
42 Add Styles To Templates – Building SaaS #42
43 Use Tailwind On A Template – Building SaaS #43
44 Fast Forms With UpdateView – Building SaaS #44
45 Templates and Logic – Building SaaS #45
46 A Week At A Time – Building SaaS #46
47 How To Style Sign Up – Building SaaS #47
48 Onboarding – Building SaaS #48
49 Starting the Onboarding Flow – Building SaaS #49
50 Onboarding Continuity – Building SaaS #50
51 Onboarding Forms – Building SaaS #51
52 Consistent Onboarding – Building SaaS #52
53 More Onboarding Goodness – Building SaaS #53
54 User Testing Feedback – Building SaaS #54
55 Remodeling Data Relationships – Building SaaS #55
56 How To Fix A Bug – Building SaaS #56
57 Switch A Django Project To Use Pytest – Building SaaS #57
58 Bread and Butter Django – Building SaaS #58
59 Designing A View – Building SaaS #59
60 A View From Start To Finish – Building SaaS #60
61 Hackathon App – Building SaaS #61
62 Hackathon App Part 2 – Building SaaS #62
63 The Home Stretch – Building SaaS #63
64 Enrolling Students – Building SaaS #64
65 Docs, Bugs, and Reports – Building SaaS #66
66 Handle Default Values – Building SaaS #65
67 Give Me A Break… Day – Building SaaS #67
68 Rendering Calendars – Building SaaS #68
69 Polishing and Usability – Building SaaS #69
70 Predicting The Future – Building SaaS #70
71 Custom Form Validation – Building SaaS #71
72 Displaying Breaks – Building SaaS #72
73 Dynamically Regrouping QuerySets In Templates – Building SaaS #73
74 Check Web App Security With Bandit – Building SaaS #74
75 Make A Landing Page – Building SaaS #75
76 Capped Social Network – Building SaaS #76
77 Sending Invites – Building SaaS #77
78 Create A Form Template – Building SaaS #78
79 WhiteNoise Shenanigans – Building SaaS #79
80 Reordering Models – Building SaaS #80
81 Finishing Onboarding – Building SaaS #81
82 Customer Feedback – Building SaaS #82
83 Empty States – Building SaaS #83
84 Refactoring Enrollment – Building SaaS #84
85 Customer Docs – Building SaaS #85
86 Testing Email Designs – Building SaaS #86

In this episode, we worked on the progress element that will display in every step of the onboarding flow. I added some labels and styled the banner using Tailwind CSS. At the end of the stream, we boxed in the shape of the welcome page with some placeholder elements.

The very first thing I did was insert a top bar that was unstyled to the top of the welcome page. We added some placeholder text for each of the steps in the onboarding flow. After that, I started styling the UI until it took shape.

We talked about design elements like color and spacing and some aesthetic qualities that help make a user interface feel better.

After completing a first cut of the top bar navigation, I shifted to the welcome page and added vector art and placeholder text to give the page some life.

This article first appeared on mattlayman.com.

Building SaaS (86 Part Series)

1 Building SaaS with Python and Django #1
2 Reporting scraped data – Building SaaS #2
… 82 more parts…
3 Multiple Stripe plans – Building SaaS #3
4 Using a background scheduler – Building SaaS #4
5 Updating data models – Building SaaS #5
6 Third party integration modeling – Building SaaS #6
7 Displaying third party data – Building SaaS #7
8 Connecting third party services – Building SaaS #8
9 Finishing third party integration – Building SaaS #9
10 Admin dashboards – Building SaaS #10
11 Semi-automated tasks – Building SaaS #11
12 Automation aides – Building SaaS #12
13 Deploying with Ansible – Building SaaS #13
14 Ansible Cranked to 11 – Building SaaS #14
15 Feature Flags with Django Waffle – Building SaaS #15
16 Feature Flags in Action – Building SaaS #16
17 Canceling Stripe Subscriptions – Building SaaS #17
18 Completing Account Deactivation – Building SaaS #18
19 Pip-tools and App Packaging – Building SaaS #19
20 Making a Shiv App – Building SaaS #20
21 Shiv zipapps and CI – Building SaaS #21
22 Upload to S3 with CircleCI orbs – Building SaaS #22
23 It’s Alive! A Django Shiv app – Building SaaS #23
24 In the Guts of a Shiv App – Building SaaS #24
25 It’s Permissions, Dummy! – Building SaaS #25
26 Connecting Shiv Apps with Ansible – Building SaaS #26
27 Plug the Shiv App Into Nginx – Building SaaS #27
28 Webpack and collectstatic in CI – Building SaaS #28
29 Add Static Assets to Deployment – Building SaaS #29
30 Ripping Out Node.js – Building SaaS #30
31 Celery In A Shiv App – Building SaaS #31
32 wal-e Postgres Backups – Building SaaS #32
33 Get Out, Git! – Building SaaS #33
34 Bring in the WhiteNoise, Bring in Da Funk – Building SaaS #34
35 Deploying WhiteNoise – Building SaaS #35
36 Configurama – Building SaaS #36
37 Lessons From A Failed SaaS – Building SaaS #37
38 New Project, Who Dis? – Building SaaS #38
39 django-environ and django-debug-toolbar – Building SaaS #39
40 Make A Custom User Model – Building SaaS #40
41 User Accounts With django-allauth – Building SaaS #41
42 Add Styles To Templates – Building SaaS #42
43 Use Tailwind On A Template – Building SaaS #43
44 Fast Forms With UpdateView – Building SaaS #44
45 Templates and Logic – Building SaaS #45
46 A Week At A Time – Building SaaS #46
47 How To Style Sign Up – Building SaaS #47
48 Onboarding – Building SaaS #48
49 Starting the Onboarding Flow – Building SaaS #49
50 Onboarding Continuity – Building SaaS #50
51 Onboarding Forms – Building SaaS #51
52 Consistent Onboarding – Building SaaS #52
53 More Onboarding Goodness – Building SaaS #53
54 User Testing Feedback – Building SaaS #54
55 Remodeling Data Relationships – Building SaaS #55
56 How To Fix A Bug – Building SaaS #56
57 Switch A Django Project To Use Pytest – Building SaaS #57
58 Bread and Butter Django – Building SaaS #58
59 Designing A View – Building SaaS #59
60 A View From Start To Finish – Building SaaS #60
61 Hackathon App – Building SaaS #61
62 Hackathon App Part 2 – Building SaaS #62
63 The Home Stretch – Building SaaS #63
64 Enrolling Students – Building SaaS #64
65 Docs, Bugs, and Reports – Building SaaS #66
66 Handle Default Values – Building SaaS #65
67 Give Me A Break… Day – Building SaaS #67
68 Rendering Calendars – Building SaaS #68
69 Polishing and Usability – Building SaaS #69
70 Predicting The Future – Building SaaS #70
71 Custom Form Validation – Building SaaS #71
72 Displaying Breaks – Building SaaS #72
73 Dynamically Regrouping QuerySets In Templates – Building SaaS #73
74 Check Web App Security With Bandit – Building SaaS #74
75 Make A Landing Page – Building SaaS #75
76 Capped Social Network – Building SaaS #76
77 Sending Invites – Building SaaS #77
78 Create A Form Template – Building SaaS #78
79 WhiteNoise Shenanigans – Building SaaS #79
80 Reordering Models – Building SaaS #80
81 Finishing Onboarding – Building SaaS #81
82 Customer Feedback – Building SaaS #82
83 Empty States – Building SaaS #83
84 Refactoring Enrollment – Building SaaS #84
85 Customer Docs – Building SaaS #85
86 Testing Email Designs – Building SaaS #86

原文链接：Starting the Onboarding Flow – Building SaaS #49