MVP Wireframes/Mock-ups

[chrismgonzalez]

Discuss your ideas or share your views:

Designers! Now is your time! Please submit your proposed wireframes as a screenshot in this issue

Desired screens

• Landing page
• Sign-in flow (right now just using email/password, we will integrate social SSO's later)
• Chapter organizer view
• Participant view
• Admin panel
• Aggregate view of chapters

DISCLAIMER: I am not a designer. Please feel free to comment with proposed additions to this list, as it is not an exhaustive one.

I have listed the MVP user stories below for your convenience. They can also be referenced in #83.

As a future participant

• I can use a search box on the landing page to input a city, state, or country name and it will autocomplete. I can click one of those locations.
• When I click one of those locations, I can see the "show view" for that event's group, with details about the upcoming event, along with a button to RSVP.
• I can click the "RSVP" button. When I do, I will be prompted to sign in. Then I will receive an email with a ticket and add me to the public list of event attendees.
• I can cancel the "RSVP".
• I will receive a second email the day before the event to remind me.
• After the event, I will automatically get emails notifying me of subsequent events.

As an organizer:

• I can create a chapter.
• I can edit details about the chapter, including a Slack/Discord/Facebook/WeChat/WhatsApp link participants can join to discuss and coordinate events.
• I can add a chapter or organization logo.
• I can create events, and set their location and capacity.
• I can view the RSVP count
• I can cancel events.
• I can email the entire list of participants.
• I can ban a participant whom I believe is toxic or who has previously broken my organization's code of conduct.
• I can add a venue sponsor to the event with a link to their website as a way of thanking them for hosting.
• I can add a food sponsor to the event with a link to their website as a way of thanking them for food.
• I can see how many times a participant has come to the event as well as their attendance rate
• I can check-in attendees on the event registration desk with their email_id or chapter_id

[vkWeb]

@chrismgonzalez I'll handle some of those :)

[allella]

Pinging @ryandudek @louistsaitszho @aeganaden @booleanhunter since they offered design assistance in #11

[nabilahsan]

I can try coming up with some landing page variations over the weekend.

[vkWeb]

Design flow of an organization's deployed instance

I want to keep things clear so that we all don't end up creating wrong wireframes and to ensure we are on the same page :). So below I'm proposing a detailed design flow which is targetting MVP. If I go wrong somewhere please correct me @chrismgonzalez, @allella. After finalizing this, we'll start building components on the client-side. Let's start.

Note for maintainers: Please don't edit this comment. Suggest improvements by commenting to this thread. We'll create a final design flow after incorporating all the suggestions. Thank you :)

In the below design flow, header, nav, main refers to html elements.

Landing page & navigatable pages design flow

By landing page, we mean the page users will see when they visit an organization's deployed instance, e.g. https://chapter.womenwhocode.org not https://chapter.io. For MVP, the chapter project won't host its own website. README.md will act as our landing page and API docs will reside on the Wiki of the repo. What do you think about this @chrismgonzalez?

Navigation bar design flow

• logo of organization along with: search box, home, chapters, events, sign in/register. The nav should remain same across all the pages. Here's the design flow of nav items:

  • On landing page the search box will be on the header with details of organization. User can input a city, state, or country name to search for events. If I search for NYC then I'll see the chapters in NYC and all the upcoming events in NYC in the results page.

    When we go to any other page the search box will transition to nav. If we can't find any events & chapters for the entered location then it should show the 10 upcoming events using the api call /events in results not found page.

  • clicking on home & logo directs to landing page.

  • clicking on chapters directs to a page where all the chapters of the organization will be listed
    along with its details. Clicking on a chapter will take me to the chapter's page where the chapter details will be shown in header and all the upcoming events of that chapter will be listed with its details in main and there will be a button to rsvp in each event card.

  • clicking on events directs to a page where all the upcoming events will be listed in chronological manner. For e.g. events will be in order 23 oct, 27 oct and then 3 nov.

  • sign in and register (it's 100% free) will be in 2 different buttons. Sign in takes to a minimal sign in page, a centered div with two fields - email & password, a button to sign in, forgot password and a register link if not yet registered. An email will be sent to the entered email address with an OTP.

    After entering OTP, the next page will depend on the origin of api call. Suppose if sigin was called from /chapters/chapterid/events/45896 to rsvp to event 45896 then it should take us back to that event and show "you are going to this event! We have sent you an email with the details of events and its organizers" message. If it was called from homepage then it should take us back to homepage with a success message. I hope things are clear. We need minimum friction here.

Header content design flow:

• after nav we'll have a description of organization and the search box under a parent div. Going to any other page will transition search box to nav. We have already discussed the flow of searching earlier so I'm skipping it.

Main content design flow:

• after header we'll show the upcoming events of that organization in chronological order. In the event card there'll be venue, timing, date, description of the event and remaining seats. There should be a button to rsvp to it.

  • Clicking on the rsvp button will trigger the signin flow if not signed in. If we have signed in or after completing the sigin process we'll see a message stating "you are going to this event! We have sent you an email with the details of events and its organizers".

Organizer and administrator design flow

In the case of organizer & administrator. We'll show a manage nav above the main site navigation inspired by world's largest CMS - WordPress. We'll show something like:

Click on image to see in high resolution.

We'll not alter anyother part of app for organizers or administrators. We can show the admin panel nav items in a vertical navbar, something like:

Clicking on chapters will show all the chapters on side of nav, we can add or edit chapters. Clicking on events, will list all events, event organizer or admin can make edits and create a new event. They can also email participants from this view. Settings might be useful for customization of the app.

In short our admin panel should be in lines of:

This is a very rough idea of what's going on my mind right now. We can evolve our design upon this. Also now we can start drawing wireframes by following this design flow.

I encourage you to suggest improvements to this. Your suggestions will help our team in delivering an amazing UX to you :)

---

@QuincyLarson your thoughts on this?

cc @kognise @francocorreasosa @Zeko369 @nik-john @timmyichen @allella @chrismgonzalez.

[finisher1017]

Should we be taking a mobile first approach to our designs? I believe we should.

[MustafaAnasKH99]

@finisher1017 I have that in mind too.
Maybe that or just create another path for mobile developers to think about the design and development stack.

[allella]

@vkWeb that's an impressive start, and amount of stuff to think about.

First question is who's going to be creating the mockups? I want to confirm the folks doing the work are already in the conversation since their input and process will matter more than mine.

Also, I'm neither a designer or experience in the ways of Kanban. I suspect there's a pattern for using the user stories to generate mockups, but perhaps that's a later step.

I can see the need for discussing elements which are universal to the UX, like header, footer, sidebars, so what you shared above hits a lot of that concern and is a good base regardless of the how we organize it.

[finisher1017]

I think at the very least the MVP should be a browser based app that's optimized for mobile devices. I'm planning on starting work on some wireframes tomorrow that I'll share when I feel like I have something ready to be critiqued.

[nabilahsan]

I set up the Figma board here: https://www.figma.com/file/EDhlnW52lIYZmiarrCaopx/freeCodeCamp-Chapter-Project?node-id=14%3A3

I don't want everyone to have edit access, just the designers. Once you click the link, everyone's names will show up and then I will give access to those who are designers.

[Uptiie]

I have a mockup about halfway finished on XD. Once I'm done, feel free to pick it apart!

[Uptiie]

I'm helping develop the iOS app as well!

[nabilahsan]

Oh that's a good start.

[nik-john]

I think at the very least the MVP should be a browser based

I disagree here. It's important we make mobile first deigns because the app is going to be consumed heavily on mobile form factors. Designing mobile first helps us prioritize real estate and make mobile first development possible. That way we develop up via. progressive enhancement. Otherwise this becomes afterthought. I've seen many a project go down because we took that approach. Heavily recommend mobile first designs.
Browser should be second priority

[finisher1017]

What I mean by mobile first is considering how the layout will appear on a mobile device, regardless of whether its browser based or a native mobile app, the layout should be similar in either case. Having a mobile responsive web based MVP utilizing CSS media queries should give us a solid base for collaborating on any potential native options, especially considering that any modern web based apps should be optimized for mobile anyway, at least IMO.

[nik-john]

Ah I see - if it is mobile-web vs native, then I agree. That is absolutely mobile-first design. I misconstrued what you said - in fact, I see that you suggested mobile first in your comment above 😄 I guess it is more for the other designers out there I guess

[Uptiie]

Are making two individual apps for both user and organizers? Or are we going to allow everyone to create their own events directly from one app?

[nabilahsan]

Are we using any existing CSS Framework like Bootstrap? And build on top of it?

[allella]

@nabilahsan #34 and #121 talk about bootstrap-styled and other bootstrap variants and alternatives. I haven't seen a consensus on that but @vaibhavsingh97 @nik-john @francocorreasosa @vkWeb and others were part of those conversations, so pinging them for thoughts.

[vkWeb]

Are we using any existing CSS Framework like Bootstrap? And build on top of it?

@nabilahsan I would highly discourage using any CSS framework. I think with flexbox, grid, css variables at hand, css frameworks aren't that necessary.

[nabilahsan]

What about components like buttons, date pickers, accordions and input fields?

[vkWeb]

I can't see any problem with buttons, date pickers and input fields. Implementing accordion is a task I agree with.

We can use <input type= "date"> for date pickers. We don't need to style input fields much for MVP.

btw, where we'll use accordions?

[nabilahsan]

I was just giving an example. With every design decision we make, we will have to be in communication with the devs to see what's possible and what isn't. So no over the top designs from us. Only what's necessary and functional.

[nik-john]

It's generally a matter of time and effort that drives the decision whether to use UI libs or not. We can always build our components from scratch and make them super slick, but unfortunately that involves a lot of time, and a lot of re-inventing the wheel. A simple component like a datepicker has multiple implementations across browsers. Now, one can say we should then use Normalizer or ResetCss for that. But then again non-primitive components like accordions that we develop will also need to be cross browser compatible - something that CSS reset libs wouldn't be able to help out with. So it's more likely than not that we will end up using some library or the other

Here's my suggestion - while we deliberate on what UI library to use (Material vs Bootstrap vs X), the designs should use standard UI components that don't deviate substantially from convention. If you need a superset to choose from, refer to either https://material-ui.com/ or https://getbootstrap.com/docs/4.3/components/alerts - anything that's there should be doable regardless of the libs we choose eventually

[finisher1017]

I would highly discourage using any CSS framework. I think with flexbox, grid, css variables at hand, css frameworks aren't that necessary.

I agree. Also using features supported directly by CSS instead of a framework would save us from having to migrate to newer versions of the framework when breaking changes are introduced in future releases.

[finisher1017]

This is an early draft of a mockup I made for the login page viewed from a mobile device. I'm not sure if we're going to include a traditional registration/login or if were strictly using Oauth, but in the interest of keeping things simple for now I just included buttons for Oauth. I'm also working on views for larger screen sizes, but as I previously stated I think its a good idea to focus on mobile first.

[finisher1017]

I just noticed in the user stories that a traditional registration/login is intended so I'll work on incorporating that into my other mockups.

[vkWeb]

Our prototype is ready! 🎉

I'll be looking forward to all the feedback and ideas to improve it.

Press 'F' to have a better experience. Here's the link:
https://www.figma.com/proto/q7DikyL3N0c4CUWxHNa97i/Chapter-Prototype?node-id=1%3A2&scaling=scale-down

[martineizayaga]

@vkWeb the link doesn't work for me

[vkWeb]

@martineizayaga It's working I just checked. Try visiting it in incognito mode. You need to login to Figma to view it I guess.

[vkWeb]

@martineizayaga Sorry, the link wasn't public by default so that caused 404. Here the public link to access the prototype: https://www.figma.com/proto/q7DikyL3N0c4CUWxHNa97i/Chapter-Prototype?node-id=1%3A2&scaling=scale-down

Don't forget to press 'F' to have a better experience. I'll be waiting for your feedback.

[MirzaChilman]

@vkWeb Awesome!!, nice work man. Any way I left some feedbacks there and questions

[vkWeb]

@MirzaChilman I'll try to address those. Thanks for taking a look :)

[nik-john]

@all-contributors please add @madaleneaza-design for design

[allcontributors]

@nik-john

I've put up a pull request to add @madaleneaza-design! 🎉

[nik-john]

@all-contributors please add @vkWeb for design

[allcontributors]

@nik-john

I've updated the pull request to add @vkWeb! 🎉

[nik-john]

@all-contributors please add @SeanRParker for design

[allcontributors]

@nik-john

I've put up a pull request to add @SeanRParker! 🎉

[nik-john]

@all-contributors please add @odomojuli for design

[allcontributors]

@nik-john

I've put up a pull request to add @odomojuli! 🎉

[nik-john]

@all-contributors please add @finisher1017 for design

[allcontributors]

@nik-john

I've put up a pull request to add @finisher1017! 🎉