Map out a "Golden Path" for a Demo Video

[allella]

Per the latest meeting, Quincy suggested mapping out a "golden path" for a demo video.

@tomiiide previously shared a work flow which can largely describe critical paths for a user, organizer, or administrator.

@QuincyLarson were you thinking we create a short video for each main role (user, organizer, administrator)? Or, if we had to pick one would we focus on admin or organizer path, since they are more likely to be the consumer of a MVP demo video?

[allella]

@QuincyLarson

were you thinking we create a short video for each main role (user, organizer, administrator)?

[allella]

Once we narrow down which user role(s) we can compare @tomiiide's Figma roles workflow with comments from @Madalena-15 and others on #320

That includes, among other things, a user persona PDF for an organizer named Julia.

[Zeko369]

Idea, for the whole flow, this should cover pretty much all the features we're planning to have in the MVP.

User

• User comes to the page -> list events on homepage -> select -> click on RSVP -> modal opens to create an account -> crates an account -> recives an email -> joins -> has 2 buttons GCAL link / iCal download to import (also in email?)
• User -> looks at other events -> wants to RSVP but is invite only -> requests
  Organizer -> accepts
• User -> looks at other events -> wants to RSVP but is full -> requests -> another user cancels -> get's email about joining

Organizer

• gets email about new member of chapter and RSVP -> sends email to all RSVPs about a food change or something -> changes venue on event (generates email) -> {User gets both emails}

Admin

• Admin -> logs in -> list of all chapters in this instance (one is private with a flag) -> invites a user to it (maybe better in organizer flow) -> invites a admin user to another instance

Now we need to trim this down to get all the features we want to present in a 5min video

[megajon]

@Zeko369 If a user is a member of multiple chapters within the same organization, can they view the different chapters from a single interface, or do they have to manually change the url in order to view different chapters?

[Zeko369]

@megajon my current idea is to have all the chapters in the same view

[allella]

Sounds like a good start.

My guess is the organizer and admin would be the most worthy of a video, since we'd be trying to "sell" them on the idea of moving their events to Chapter.

Having a user video wouldn't hurt once people are using the system, but I believe the goal of the demo video is to get the organization decision makers excited. That will likely mean the organizer(s) learn about Chapter and go to their admin(s), assuming they aren't the same people, to tell them why they want to switch.

[allella]

Though, I guess organizers might like to see an example of the user work flow as well before they make the decision. So, all three videos may be helpful to start.

[megajon]

I’ve created a low-fidelity prototype of an idea I have for the interface of the app. My idea is that rather than have separate pages for chapters and events with links in a top nav, both chapters and events would be displayed on the home page. The chapters would be displayed in a carousel that would allow the user to side swipe between the different chapters they are a member of. Below the carousel would be a list of events for the selected chapter with tabs for upcoming, attending, and previous events. I also have some ideas for the user profile and dashboard section. For now the prototype is only for a mobile view, but I think the layout is easily scalable to a desktop view. Obviously not everything is functional, and the overall styling and typography are crude, but for now I just wanted to get across my general idea for the layout and navigation. I’ve provided a link for the prototype and any feedback would be greatly appreciated. https://preview.uxpin.com/13c1d07f6dd731123612a8884eb4174459312ac5#/pages/138361235

[allella]

I'm hip to the homepage idea for logged in users who are members of 1 or more chapters with events.

For anonymous, logged out visitor sessions, the earlier Figma mockup may still be applicable since those visitors wouldn't be a member of any selected chapters, and therefore wouldn't have any chapters or events to show. Also, having separate pages for anonymous views would keep the search engine optimization benefits of having indexable pages and URLs.

@megajon do you think a middle ground would be to keep the Figma mockup pattern and use your mockup for the home page of logged in users / members? If so, that just begs the question of if we entirely hide the navigation from logged in users and make them rely on the homepage.

Also, what's the usability / accessibility thought these days on using carousels. I'm more familiar with their early use case as marketing hero images, which weren't as much of a core part of the navigation for the page, but rather for highlighting / advertising.

If these are components of the UI system, like Chakra, then I suspect they would have worked out any accessibility concerns. Though, a quick search for "chakra ui carousel" lead to the first result being an accessibility issue from 2019 and this unmerged PR.

[megajon]

@allella I hadn't thought about a view for users who aren't logged in. My design pattern is based on meetup.com's user flow, which requires users to be logged in before they see any content. Otherwise they're shown a splash page with an option to login or register. Personally I think this is the better/simpler way to go because it saves us from having to design and develop multiple views, which is already a complicated enough task given that we already have to design multiple views for the different rolls of User, Organizer, and Admin. I'd have to do some research into the usability of carousels, but they're pretty common in applications these days, so I imagine there's some kind of support for it.

[allella]

I suspect there's a good amount of value lost if all we have for unauthenticated visitors is a login / register splash page. It's effectively like a "paywall" / "walled garden", even though it's free and not what we'd intend.

I don't have a strong opinion on the homepage for visitors being focused on login / register vs the original mockup.

However, I do feel each Chapter instance will be at an immediate disadvantage from not having the built-in audience of the large alternative platforms. I think we still need a public, easily crawlable Events view, Chapters view, and individual pages for each event and chapter so both the visitor and search engines can discover the content.

That said, I do appreciate the direction of the latest mockup and could see it being the homepage of logged in members, or else a "Dashboard" page they land on when they log in.

If others agree we should keep the Events view, Chapters view from the initial mockup, then it begs the question if we should stick with those views for the MVP and target the latest mockup for post-MVP so we're not increasing the scope for an interface that's just a more usable version of those views.

[megajon]

What did you think of the layout for the user profile and admin dashboard views?

[ojeytonwilliams]

Thanks for sharing that mockup @megajon. I really like the admin view

it looks clean and easy to navigate. Was there a separate user profile page, though? I couldn't find one.

There's one issue with carousels: we don't have a limit on the number of chapters. If you have too many, it can be a pain to swipe through them all. They're great when you've got a small number of items, but I'd have them switch to a simple list after a certain number of chapters have been added.

Regarding the homepage, I basically agree with what @allella was saying. I think that everything that's public should be accessible a visitor - they should only need to log in to see private events and make edits. It's just more convenient, even for registered users, not to have to bother logging in all the time (if you switch devices/browsers/etc)

For the MVP, I think it makes sense to build towards the original mockup, since we've already made some good progress in that direction. Speaking of, I'll do a bit of work on that today and see if I can add some functionality.

[megajon]

@ojeytonwilliams The profile page is reached through the gear icon in the upper right corner. It just leads to a view with various options. For the carousel we could add a "see all" link that leads to a view with a list of all the chapters if users don't want to use the carousel. Do you have the link for the original mockup?

[allella]

@megajon nice work. I missed the part where the User icon had more views.

What you've created looks like a solid start for the views for the logged in (members & organizers).

I'd still vote to use the Figma homepage, Chapter, and Event page views for the MVP just so we don't have to create visitor vs member specific views for the MVP. However, I think the compact views you mocked up for the homepage would be a good post-MVP for the logged in members to see on the homepage or personal dashboard.

I'm going to add this mockup to the README under the UI / UX / Design References section. I think we could label the Figma mockup as the visitor views and yours as the "member / organizer / administrator" views. Does that sound good?

[allella]

I should add, we don't have any previous mockups for the logged in organizer and administrator views besides what you've created. Since you wanted to focus more on the design side, I think mocking up any additional MVP views for those roles would help fill in question marks on how those views or pages would look.

[megajon]

The mockup I did is specifically for an admin view. It shouldn't take too much to create the views for organizers and members, but I just wanted to get some feedback on the overall layout before I went any further. As far as the login flow goes I think admins and organizers should have the option to choose whether their chapter's events and pages are viewable by the public, in which case there would be two possible login flows. If the admin(s) of the group choose to keep the group private then members would have to be registered and logged in before they see any content, otherwise they just get a splash page with options to login or register. If they choose to make the group public then anyone would be able to view the content and would only have to register/login to rsvp or do other tasks specific to their account. I haven't seen the figma mockup in a while so I don't remember what it looks like. Does anyone have a link for it?

[allella]

I linked to the Figma above and it's in the README under the design / UX heading.

[allella]

I think the privacy settings are a good consideration, but also something I wouldn't expect for MVP.

Anything you mockup for post-MVP is great. I do wonder, though, if there's an easy way to segment, color code, or otherwise visually distinguish MVP vs post-MVP features and ideas. I realize that can mess up the good ideas that come from you thinking about the whole system, but it's also easy to confuse things because people jump in and look at a mockup and go to town without reading conversations like this talking about the details.

[megajon]

I checked out the original mockup and I don't remember ever seeing that version. I was thinking of an older version. The views and styling for the pages look pretty good, but I still think the separate events and chapters pages can be condensed into individual sections on the home page, helping to minimize how much users have to click around, which would be particularly helpful to new users who are unfamiliar with the app. I also think the about section for the chapter should be more prominent in the public home page view. The original mockup assumes the person visiting the page is already familiar with the chapter and the user has to click on the "chapters" link and then scroll through a list of chapters and click on the "Know More" button of the individual chapter in order to get details about that chapter, which may be off putting for new visitors and make it difficult for them to decide if they want to join the group. In my opinion the public home page should consist of some combination of Chapters, Events, and an about section all in a single view, giving new visitors more information at a glance and making it easier for them to make an informed decision. Anyway those are just some ideas I had after looking at the original mockup. I'll continue to work on the profile and dashboard views for the various user roles, which I think will just end up being the same view with different options in the dashboard section. I'll also try to brainstorm on some ways to incorporate some of my ideas into the current mockup. Thanks for the feedback.

[allella]

Sounds good.

I agree the homepage benefit from the consolidation and reorganization. I'm not trying to put ice water on your ideas, so please keep doing your thing with the SEO and MVP constraints in mind.

[megajon]

I've created a separate Dashboard view for regular members. The top half of the view is the same as the Admin/Organizer view, but the bottom half is simply a standard list of the chapters the user is a member of, rather than a series of administrative options. Between these two views I believe all user roles can be accommodated. I'm still working on the views for editing the user profile options.

Organizer/Admin Dashboard

Member Dashboard

[megajon]

I've also created a new view for the landing page for new visitors. The view consists of a header with a standard home icon, a search icon, a notifications icon, and an icon for the dashboard. Below the header is an image for the chapter that will be selected by the Admin/Organizer. Below the chapter image is the chapter title and chapter location. And below that is a series of tabs that display all the relevant content for the specific chapter being viewed. The landing page defaults to the about tab which provides a brief description of the chapter and below that is a section that displays the organizers of the chapter. The next tab over is the Members tab which just displays photos of the Members and their names, which link to their profile page. The next tab over is the events tab allowing visitors to toggle between lists of upcoming and previous events, which link to a detailed view about the specific event. The last tab is the Related Chapters tab which just displays a list of sibling chapters that link to an equivalent landing page of the corresponding chapter. I personally think this is a better view than the original mockup because it gives the new visitor an immediate idea of what the chapter is about and who is involved. I think the landing page for new visitors should emphasize what the group is about and the human beings who are involved, rather than a generic list of events that a new user is likely not familiar with. Once the new user has registered and logged in then the home page would change to the my previous mockup, which emphasizes the specific chapters and events, since the user is likely already familiar with the chapter by that point.

Landing Page - About Tab

Members Tab

Events Tab

Related Chapters Tab

[allella]

@megajon thanks for continuing to move things along while the rest of us are on vacation :).

I think these views are very helpful. I suspect there will be some debate on the particulars on some features and what's necessary for MVP, but having concrete visuals is always very helpful to go along with the conversations.

On the visitor landing page view, is the intention for it to be the homepage?

The idea of highlighting and explaining "About" the overall instance is logical. However, if this is also the homepage, then I'm not sure highlighting a single chapter within an organization is going to be something the owners and admins would prefer. Rather, I think they would want more general information about the organization itself.

For example, freeCodeCamp will have a single instance of the Chapter application with hundreds of chapters from around the world using the same instance and subdomain. If the homepage is highlighting a single chapter in the anonymous / visitor homepage / landing page, then I'm curious how they'd decide what's worth highlighting.

If the intention was not for this view to be on the homepage, but rather an example of a landing page view for each individual chapter in the instance, then that makes more sense to me.

Thanks again.

Jim

[QuincyLarson]

Hey everyone, a quick update on Chapter. As you all may know, in the US, lockdown has effectively ended and most people have resumed their normal lives (we're just waiting for research and approval of a vaccine for children).

Thanks to @allella for creating this thread.

Next Thursday, July 1, we will host a freeCodeCamp Summit where – among other things – we hope to demo demo a "golden path" similar to what @Zeko369 laid out earlier in this thread. I will make the announcement soon.

I have asked @ojeytonwilliams to make Chapter his top priority.

We may focus on just using Google Auth initially since we will need access to Google Calendar for creating events and keeping them updated as the organizer updates them or cancels them. (We don't want people to show up at a cancelled event just because they forgot to check their email.)

A big thank you to @megajon for these mock-ups. They look great. @ahmadabdolsaheb has overseen most of freeCodeCamp's UI design, and he is going to use these mock-ups as a reference in helping finalize the UI.

[Zeko369]

Hey @QuincyLarson, happy to see you again and hear that stuff is going back to normal in US.

About google auth being required for calendars, we can really easily generate ical files and send them via email and update them after the fact (ical files have uniq IDs, so i.e. chapterID-eventID-userID) and when we want to update the event just send a new ical with the same ID (tested in google and outlook works fine).

Let's make this our priority for the next 6 days (extracted from comment up in the thread)

User (Current owner @Zeko369)

• /chapter/:id/events/ -> list events
• /chapter/:id/events/:eId
  • Show event data
  • RSVP button
    • if not logged in -> login/register popup
    • Click RSVP
    • Download ical / Gcal link / automatic import via email (ical in email)
  • Event is invite only
    • can request
    • org can confirm
    • gets email
  • Event is full -> can waitlist
  • User can cancel (is there are people on waitlist send email to next and join them)

Organizer (Current owner @ojeytonwilliams)

• Gets email on new RSVP / member feat: email organizer on RSVP #641 ( new member depends on the user flows, so I'll tackle that later)
• Dashboard notify all button (email)
• Change venue (email) feat: email users on venue change #642
• Change date (email + ical updates)
• Create new event (email all) feat: email all interested users on event creation #640

Admin (Owner pending)

• Admin panel with all chapters feat: add chapters to dashboard #637 (show, create new)
• Invite new organizer to chapter
• Invite other admin

I think we can both finish 90% of this by next week AND demo this in under 5min for the freeCodeCamp Summit.

If anyone (@ojeytonwilliams) has anything specific they want to work on, feel free to update this comment and add your username / pr next to the task.

Pretty much each of this tasks has a UI / Backend / Design part, if you want to work on any of those it's more than welcome, you don't need to do the whole task my yourself, open a PR / issue and tackle it with someone.

[ojeytonwilliams]

Hey Fran, thanks for breaking this down. If you're looking into sending icals after people RSVP, I can work on organiser stuff so we don't clash too much.

[Zeko369]

@ojeytonwilliams great, I'll do the User stuff now and then we can meet on the Admin flow

[ahmaxed]

I will be going through the UI related issues, mocks, etc. and pr accordingly.

[allella]

Today's meeting notes https://github.com/freeCodeCamp/chapter/wiki/Meeting-Notes-June-26,-2021

[allella]

@megajon I was going to reference your mockups and I see they are not published.

Is there a way to wake them back up or republish?

[megajon]

@allella I had a billing issue with my UXPin account, but the mockups should be available now. Let me know if you're still having a problem accessing them.

[ledell]

This is great progress! I just wanted to a post a link to the demo video for anyone else that might be looking for it.

[allella]

Oliver did a demo video at the July fCC Summit event, but we're going to Close and put this issue back on the Roadmap for a later demo video for post-MVP users.