Skip to content
This repository has been archived by the owner on Jun 9, 2023. It is now read-only.

MVP Wireframes/Mock-ups #114

Closed
1 of 18 tasks
chrismgonzalez opened this issue Oct 21, 2019 · 63 comments
Closed
1 of 18 tasks

MVP Wireframes/Mock-ups #114

chrismgonzalez opened this issue Oct 21, 2019 · 63 comments
Assignees
Labels
MVP UI/UX This issue deals with UI/UX

Comments

@chrismgonzalez
Copy link
Contributor

chrismgonzalez commented Oct 21, 2019

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
@chrismgonzalez chrismgonzalez added Help Wanted Extra attention is needed MVP UI/UX This issue deals with UI/UX labels Oct 21, 2019
@vkWeb
Copy link
Member

vkWeb commented Oct 21, 2019

@chrismgonzalez I'll handle some of those :)

@allella
Copy link
Contributor

allella commented Oct 21, 2019

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

@nabilahsan
Copy link

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

@vkWeb
Copy link
Member

vkWeb commented Oct 22, 2019

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.
Screenshot (38)

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:
admin nav

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:

whole view of admin panel

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
Copy link
Contributor

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

@MustafaAnasKH99
Copy link

@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
Copy link
Contributor

allella commented Oct 23, 2019

@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
Copy link
Contributor

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
Copy link

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
Copy link

Uptiie commented Oct 23, 2019

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

@Uptiie
Copy link

Uptiie commented Oct 23, 2019

I'm helping develop the iOS app as well!

@nabilahsan
Copy link

Oh that's a good start.

@nik-john
Copy link
Contributor

nik-john commented Oct 23, 2019

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

Uptiie commented Oct 23, 2019

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
Copy link

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

@allella
Copy link
Contributor

allella commented Oct 23, 2019

@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
Copy link
Member

vkWeb commented Oct 23, 2019

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
Copy link

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

@vkWeb
Copy link
Member

vkWeb commented Oct 23, 2019

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
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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.

image

@finisher1017
Copy link
Contributor

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 vkWeb removed the Help Wanted Extra attention is needed label Nov 15, 2019
@vkWeb
Copy link
Member

vkWeb commented Nov 15, 2019

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

@vkWeb vkWeb self-assigned this Nov 15, 2019
@martineizayaga
Copy link

@vkWeb the link doesn't work for me
image

@vkWeb
Copy link
Member

vkWeb commented Nov 15, 2019

@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
Copy link
Member

vkWeb commented Nov 15, 2019

@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
Copy link
Contributor

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

@vkWeb
Copy link
Member

vkWeb commented Nov 16, 2019

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

@nik-john
Copy link
Contributor

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

@allcontributors
Copy link
Contributor

@nik-john

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

@nik-john
Copy link
Contributor

@all-contributors please add @vkWeb for design

@allcontributors
Copy link
Contributor

@nik-john

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

@nik-john
Copy link
Contributor

@all-contributors please add @SeanRParker for design

@allcontributors
Copy link
Contributor

@nik-john

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

@nik-john
Copy link
Contributor

@all-contributors please add @odomojuli for design

@allcontributors
Copy link
Contributor

@nik-john

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

@nik-john
Copy link
Contributor

@all-contributors please add @finisher1017 for design

@allcontributors
Copy link
Contributor

@nik-john

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
MVP UI/UX This issue deals with UI/UX
Projects
None yet
Development

No branches or pull requests