WIP: User flow redesign #736

markbao · 2018-05-18T22:28:55Z

Redesign the user flow so a listing of the month's tea times in all cities (at /tea_times) is the central place where people will interact with the application.

Todo

New /tea_times page that displays tea times scheduled in the current month.
Homepage CTAs now go to /tea_times.
/tea_times is publicly viewable, and the CTAs for signing up for tea times will go to signup/login pages if not logged in.
If a user is not signed in when they select a tea time, the tea time they selected will be saved in the session and they will be redirected to it after signup/login.
If a user does not have a home city when they sign up for a tea time, their home city will be set to the home city of that tea time.
Users can select "Email me " on the /tea_times page.
Update links in navigation and user flow redirects
Add city selector to signup page
Auto-select city selector for signing up from tea time page

Waiting for

Decide whether or not we want to remove city pages
/tea_times/123 page should be redesigned.
/tea_times page needs additional styling.
Tea time list on host page: show only month, expand for future tea times?
Determine what to do about next month's tea times (do we display them?)
Determine if we need to change the tea times that city pages contain and any other changes to the other parts of the application.
Determine what to do about user profile pages for users who haven't set a home city (currently it's a big button that says "Set your home city" that goes to /cities)
Determine if we show "past" tea times on /tea_times (probably not)

Copy (marked with COPYTODO)

views/tea_times/index.html.erb

Stuff for the future

Consider putting full tea times toward the end of the list for a given city?

New /tea_times (TeaTimes controller, index action) page showing the month's tea times. Old /tea_times path moved to /tea_times/list. Homepage updated so the CTAs on the homepage now lead to /tea_times.

…login After selecting a tea time at /tea_times, save the tea time they selected in Devise's stored location in the session and redirect to it after signup/login.

If the user's home city is blank and they sign up for a tea time, set their home city to that tea time's city.

coveralls · 2018-05-18T22:31:59Z

Coverage decreased (-0.2%) to 90.584% when pulling d5c7ce8 on mb/user-flow-redesign into 7df3a5d on master.

markbao · 2018-05-18T22:44:57Z

app/controllers/tea_times_controller.rb

-  before_action :authenticate_user!
-  before_action :authorized?, only: [:new, :edit, :create, :update, :cancel, :destroy, :index]
+  before_action :set_tea_time, except: [:index, :list, :new, :create]
+  before_action :authenticate_user!, except: [:index]


/tea_times is accessible publicly now.

markbao · 2018-05-18T22:46:10Z

app/controllers/tea_times_controller.rb

  before_action :use_new_styles, except: [:create, :update, :cancel, :destroy]

  # GET /tea_times
  # GET /tea_times.json
  def index
+    @tea_times = TeaTime.this_month.order(start_time: :asc).includes(:city).all
+


Here we are converting a list of tea times into a hash like:

{ "San Francisco": [TeaTime, TeaTime, ...] "NYC": [TeaTime, TeaTime, ...] }

along with a list of names in @cities.

This will return an array of TeaTime, not a hash. Additionally, this_month isn't a standard AR Scope and it's not defined on the TT model, so you'll need something like where(:created_at => Time.now.beginning_of_month..Time.now.end_of_month) instead I think. Might want to make the span a rolling 4 week period too so it doesn't weirdly cut over towards the end of a month?

@nickbarnwell

Re: array: Whoops, my bad for not being clear. I meant this comment to 'introduce' the following lines of code which are doing the process of converting that list to a hash.

Re: scope: I added a custom scope in the model, let me know if it looks right: https://github.com/TeaWithStrangers/tws-on-rails/pull/736/files#diff-c0448cf921e60c620dcf5c85c1718605R35

Re: rolling period: This was something Ankit requested in the spec - I think the idea was to have tea times come out in "batches" at the beginning of the month.

@markbao @nickbarnwell

Re: rolling period — Mark is right on what I suggested in the spec. We discussed having following month's tea times be available with the click of a "Show Next Month's Tea Times" button. Not sure if we landed on a conclusion there. @markbao Do you remember?

markbao · 2018-05-18T22:47:14Z

app/views/shared/_tea_time_row.html.erb

@@ -70,8 +70,20 @@
            </button>
          <% end %>
        <% end %>
+      <% elsif (no_signin_button ||= false) # No signin button; don't show signin CTA text %>


On the /tea_times page with the new flow, we only want to display "Count Me In" and "Join Waitlist" buttons. We don't want to display "Sign in" buttons, so we have a special branch for the /tea_times page.

markbao · 2018-05-18T22:47:40Z

app/views/shared/_tea_time_row.html.erb

      <% else %>
-        <%= link_to new_user_session_path do %>
+        <%= link_to new_user_session_path(redirect_to_tt: tea_time.id) do %>


/signup page now accepts a ?redirect_to_tt=123 querystring parameter which is saved in the session as the tea time to redirect to.

markbao · 2018-05-18T22:48:10Z

app/views/tea_times/index.html.erb

@@ -0,0 +1,50 @@
+<% next_month_name = Date.today.next_month.strftime("%B") %>
+
+<div class="cover-photo" style="background-image: linear-gradient(to bottom, rgba(247, 191, 77, 0.87), rgba(247, 191, 77, 0.87)), url('<%= image_path("missing-city-image.jpg") %>'); margin-bottom: 50px;">


Styles are inline because @ankitshah811 will do the CSS and I don't want to create classes that might be rewritten later.

markbao · 2018-05-18T22:48:19Z

app/views/tea_times/index.html.erb

+    </div>
+    <% @tea_times_by_city.each do |city, tts| %>
+      <div class="tt-set-container">
+        <div class="tt-container tt-city-name" style="border: 5px solid #EF6236; color: #EF6236; font-weight: bold; height: 200px; padding: 20px; font-size: 30px; text-transform: uppercase; text-align: center;">


Same as above (Styles are inline because @ankitshah811 will do the CSS and I don't want to create classes that might be rewritten later.)

markbao · 2018-05-18T22:48:27Z

app/views/tea_times/index.html.erb

+      <% end %>
+    </div>
+    <div>
+      <button>Email me in <%= next_month_name %></button>


Not yet implemented.

…fter attendance

nickbarnwell · 2018-05-22T00:27:45Z

app/controllers/static_controller.rb

+    # to redirect to after signup
+    # See https://github.com/plataformatec/devise/wiki/How-To:-Redirect-back-to-current-page-after-sign-in,-sign-out,-sign-up,-update
+    if params[:redirect_to_tt] && TeaTime.find(params[:redirect_to_tt])
+      store_location_for(:user, '/tea_times/' + params[:redirect_to_tt].to_i.to_s)


the param should be coerced to a string automatically when you concatenate it to the result of store_location_for - does it not work without the to_i.to_s that way?

Yeah, this was a bit of a weird design decision. I was thinking that it was possible that params[:redirect_to_tt] might not be a string containing an integer, so here I was ensuring that it was an integer, but if we do TeaTime.find(params[:redirect_to_tt]) (which I added later) that already checks if it's an integer. I'll remove this.

Button on /tea_times to remind next month now goes to signup page. Shows alert that they will be reminded next month after singup. Signup page now has home city selector. Clicking a tea time as a logged-out user and going to the signup page will fill in the home city automatically. Updated redirect paths to remove city pages from user flow.

Previously, pages navigated to via Turbolinks did not cause modals to be attched.

ankitshah811 · 2018-05-29T19:44:16Z

@markbao Misc q's —

If a user is not signed in when they select a tea time, the tea time they selected will be saved in the session and they will be redirected to it after signup/login.

Assuming this directs to http://www.teawithstrangers.com/signup. If user clicks link to go to http://www.teawithstrangers.com/signin from that page, does the ?redirect_to query hold? Or breaks

Users can select "Email me " on the /tea_times page.

Assuming this also redirects to Sign Up page?

Add city selector to signup page

At least, we want to wrap this selector in the drop down markdown/style used in settings page (see screenshot). If it's trivial, would love to use the Standard Select option here (https://harvesthq.github.io/chosen/) but with our styles.

Other:

"Sign up for a tea time" and "Join tea time" currently direct to home city page. Not sure what happens if no home city is selected. Regardless, these should point to /tea_times
(And later, this page should get a little more love because it is not very smartly designed)

ankitshah811 · 2018-05-29T21:22:56Z

Decide whether or not we want to remove city pages

Yes, remove them. Redirect all city page references to /tea_times

/tea_times/123 page should be redesigned.

Working on this now and will commit changes

/tea_times page needs additional styling.

WIP @me

Tea time list on host page: show only month, expand for future tea times?

Same logic as /tea_times

Determine what to do about next month's tea times (do we display them?)

Link to see next month's tea times. Will design into /tea_times

Determine if we need to change the tea times that city pages contain and any other changes to the other parts of the application.

Don't understand this. Can you clarify @markbao ?

Determine what to do about user profile pages for users who haven't set a home city (currently it's a big button that says "Set your home city" that goes to /cities)

Remove 'set home city' button. All CTAs should be to (1) register for tea time > (2) sign up so we can tell you about tea times next month

Determine if we show "past" tea times on /tea_times (probably not)

No. If I understand correctly, this PR is still showing past tea times, right? / This needs to be changed

Figure out what to do about the old user paths (e.g. what happens if they go directly to the signup page, sign up, and then select a home city, and go to their city page, etc.)

Redirect to /tea_times after signing up. Logging in should also redirect to /tea_times

ankitshah811 · 2018-05-30T06:05:24Z

ankitshah811 · 2018-06-01T01:35:54Z

New commit 05/31/18 06:34 PM:
Incomplete /tea_times/123 page, but bulk of work done. Right 2/3 of the page will have a slightly modified host profile. Will attempt to build this out myself after 7:30pm PT. @markbao will message you if I am having trouble doing this alone.

Also I apologize for dirty SCSS and markup. Eventually this will be cleaned up. Rush job.

…file form editable

ankitshah811 · 2018-06-01T09:06:49Z

…angers/tws-on-rails into mb/user-flow-redesign

markbao added 3 commits May 18, 2018 18:22

Implement new /tea_times page for listing current month's tea times

c7e1446

New /tea_times (TeaTimes controller, index action) page showing the month's tea times. Old /tea_times path moved to /tea_times/list. Homepage updated so the CTAs on the homepage now lead to /tea_times.

Ensure user is redirected to the tea time they selected after signup/…

b379470

…login After selecting a tea time at /tea_times, save the tea time they selected in Devise's stored location in the session and redirect to it after signup/login.

After a user signs up for a tea time, set user's home city if blank

b651599

If the user's home city is blank and they sign up for a tea time, set their home city to that tea time's city.

Update tests for /tea_times to /tea_times/list move

a9ac3ba

markbao commented May 18, 2018

View reviewed changes

markbao added 2 commits May 19, 2018 17:58

Add tests for redirecting a user after signup and setting home city a…

9fb02e6

…fter attendance

Add functionality and test for redirecting to a tea time after login

3fe8699

nickbarnwell reviewed May 22, 2018

View reviewed changes

markbao added 6 commits May 21, 2018 21:50

Deprecate cities: Cities -> Tea Times in menu/footer

f13d133

Deprecate cities: user login redirect: cities -> tea times

bb13080

Allow /tea_times/123 page to be viewable publicly

e31d551

Fix attendance modal activation on pages navigated with Turbolinks

31f96ed

Previously, pages navigated to via Turbolinks did not cause modals to be attched.

Remove type conversion for redirect URL after login

b8bc48e

new tea time page design

e452572

new tea time event page partial complete

257af98

ankitshah811 added 3 commits May 31, 2018 18:39

fix broken tea_time reference in tea time row partial

f9802d8

complete tea time event page

6810326

copy edit

46a94de

ankitshah811 added 4 commits June 1, 2018 00:29

turn off host profile creation email, make facebook field in host pro…

94d5e9a

…file form editable

new jump to city styles on tea time page

ef719f9

jump to city copy edit

c526389

raw text for TOS and privacy policy

387086e

ankitshah811 and others added 23 commits June 1, 2018 02:19

edit sign up home city dropdown styles

600cd9e

Add Terms and Privacy template pages and links

865d1e5

Tea Times: Add jump to city design and functionality

2850377

Tea Times: Remove modals

53d0461

Tea Times: Don't show past tea times in this month

696e40e

Redirect all city pages to /tea_times

a0be4e0

Tea Times: Use city codes as anchor links

96b6ebd

Remove city page links

c95dccd

Apply tea time display logic to host pages

9b01e04

Fix city page test, now redirects

b2156ba

jump cities styles

bafffc6

jump city styles update

5c3ce7b

add tagline to host profile partial

bd7c300

Tea Times: Sort page by cities with most tea times

8ce34d5

share links on tea time page, TOS and privacy policy

f881aa1

Merge branch 'mb/user-flow-redesign' of https://github.com/TeaWithStr…

58ff325

…angers/tws-on-rails into mb/user-flow-redesign

metadata for tea time event page

7bf355b

metadata for tea time index page

fd1c1df

Tea Times: Fix tea time ordering

390df30

wrap tea time box in link

76b0d98

modified status buttons on tea time index page

d7fdb1c

Merge branch 'mb/user-flow-redesign' of https://github.com/TeaWithStr…

739fa52

…angers/tws-on-rails into mb/user-flow-redesign

user behavior test copy fix

d5c7ce8

ankitshah811 merged commit 582c8ef into master Jun 2, 2018

ankitshah811 deleted the mb/user-flow-redesign branch June 2, 2018 07:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: User flow redesign #736

WIP: User flow redesign #736

markbao commented May 18, 2018 •

edited by ankitshah811

Loading

coveralls commented May 18, 2018 •

edited

Loading

markbao May 18, 2018

markbao May 18, 2018

nickbarnwell May 22, 2018

markbao May 22, 2018

ankitshah811 May 29, 2018

markbao May 18, 2018

markbao May 18, 2018

markbao May 18, 2018

markbao May 18, 2018

markbao May 18, 2018

nickbarnwell May 22, 2018

markbao May 22, 2018

ankitshah811 commented May 29, 2018

ankitshah811 commented May 29, 2018 •

edited

Loading

ankitshah811 commented May 30, 2018 •

edited by markbao

Loading

ankitshah811 commented Jun 1, 2018

ankitshah811 commented Jun 1, 2018 •

edited

Loading

		@@ -0,0 +1,50 @@
		<% next_month_name = Date.today.next_month.strftime("%B") %>

		<div class="cover-photo" style="background-image: linear-gradient(to bottom, rgba(247, 191, 77, 0.87), rgba(247, 191, 77, 0.87)), url('<%= image_path("missing-city-image.jpg") %>'); margin-bottom: 50px;">

WIP: User flow redesign #736

WIP: User flow redesign #736

Conversation

markbao commented May 18, 2018 • edited by ankitshah811 Loading

coveralls commented May 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ankitshah811 commented May 29, 2018

ankitshah811 commented May 29, 2018 • edited Loading

ankitshah811 commented May 30, 2018 • edited by markbao Loading

ankitshah811 commented Jun 1, 2018

ankitshah811 commented Jun 1, 2018 • edited Loading

Summary of TODOs:

markbao commented May 18, 2018 •

edited by ankitshah811

Loading

coveralls commented May 18, 2018 •

edited

Loading

ankitshah811 commented May 29, 2018 •

edited

Loading

ankitshah811 commented May 30, 2018 •

edited by markbao

Loading

ankitshah811 commented Jun 1, 2018 •

edited

Loading