Wireframing the application

[saradotlog]

@GabrielleEaston proposes Figma to do the wireframes

We can also take a look to bootstrap to keep the design simple. (Bootstrap login)

[ncbui]

Thanks for creating this issue @saradotlog.

I'm looking into collaborating with Figma. It looks like their free plan offers projects with up to 2 editors and endless viewers/commenters.

Has anyone set up a board yet? If not, I can create one and implement any changes we discuss. Would anyone else like to be added as editor?

[GabrielleEaston]

@ncbui nobody created the board yet. I think if you just create a new file in figma, you can invite all of us and give us a permission to edit. “ You can collaborate with other people in the same file at the same time. ... Figma will periodically save versions of your file to Version History, or you can save your own versions. You can then view, save, share and restore file versions. You can also create as many pages as you need within a file.“

[GabrielleEaston]

What I am trying to say, we might not need the team feature at all.

[ncbui]

@GabrielleEaston Thanks Gabrielle. I'm skipping the team feature for now.

[ncbui]

Hello all, I started a file for our wireframe on Figma: https://www.figma.com/file/WKz1DISMzfdRLOFrNOCEdW/Wireframe?node-id=0%3A1

Because I am using a free Figma account, this file has a 2 editor limit. But everyone should be able to view it with this link

I've added content blocks for home, sign up, login, and profile pages as well as example sections from Figma for now. I'll add some standard elements (like forms for signup page). Could we discuss the other elements we'd like to see on each page?

[GabrielleEaston]

Looks great so far! Thank you @ncbui

[saradotlog]

I'll try to take a look during the day! And thanks a lot @ncbui for getting this started!

[Timilehin08]

Thanks so much for starting this up @ncbui . just to be clear, home page is same as landing page yeah?

[Timilehin08]

for the elements for the home page...how about A Logo? i'm just suggesting, you know nothing serious, the logo could just be OTFT. if we do not want to bother about what it should be or look like.

after the logo, then another element can be Register and then Login. How's this?

[Timilehin08]

then for Sign Up(User Details), the standard element form is just fine. i think it should have a Next button under as a navigation to what we want to come next.

then elements for profile, my suggestion: upload image, name, email, contact, city for login, i think we agreed email instead of phone number yeah? and password will be below

[Timilehin08]

again. i'm thinking. do we want the homepage to be like a page that looks like a form, or it should be a homepage with navigation bars and all?

elements for shift info: Organization name, Description, Category/pay per hour? is the "upload image" necessary for the organization? i dont't know if i'm missing something or mixing things up? what do we think? what else should be added?

by the way, thank you so much @saradotlog for creating this issue!

[Timilehin08]

oh! i just saw that the sample wireframe for the homepage created by @ncbui has navigations and all, and that's totally fine. My bad!

[ncbui]

Loving these ideas @Timilehin08!

Homepage: That's a good point about whether the home/landing page should have the nav bars (like the sample) or look like a form (like Twitter's landing page for users who aren't logged in). I lean towards keeping it simpler for our MVP with just a logo, register, and login elements. A navigation bar will be useful once users are logged in, but it doesn't seem as useful for logged out users.

Sign Up(User Details): Question about the next button, do you mean to add it to the form so we can expand it to a multi-page sign up form?

Login: Sounds good, I'll add a login form with email and password to the wireframe.

Profile: upload image is a great idea for both users and businesses! Checking the biz requirements, it looks like that info is used stored in the workers table. How about our profile page have a section for changing user info (upload image, password, email, city, state), a section with shift info, and either a worker/business info based on user account?

I'll add upload image, name, email, contact, city with state into a worker content block and upload image, business name, business address, city, state.

[ncbui]

I realize I've been thinking about the Profile page as a way for a user to view and edit information about themselves instead of displaying info about a user for another user.
Should we add a Display Profile page to the MVP too? Have added an (elaborately styled) example found on Figma

[GabrielleEaston]

@ncbui @Timilehin08 Thank you for digging into the details of the wireframe. Checked the updated link and it looks great! For now, we are missing the shifts page?

[GabrielleEaston]

And maybe if the profile page belongs to the user that logged in, the user can edit the information. If it's a different user, you won't have an option to edit (ex. you won't see the button edit).

[cclics]

hello everyone, I've seen the wireframe on figma and I also agree it looks great.

[ncbui]

Thanks for having a look @GabrielleEaston and @cclics! I've temporarily added a pencil icon to indicate this, with a note that it should only show when a user is viewing their own profile.

I'm adding shifts page now with business organization and worker views based on @Timilehin08's suggestions and criteria from the biz requirements. Timi also suggested adding a description. I like the idea to add descriptions to help shift workers get a better idea of whether they want to work in that role. I'll add a placeholder for that now while we discuss how it could look like.

Would we make a suggestion for that database addition in an issue or a note in biz requirements?

[Timilehin08]

Just had a look at the wireframe and it looks great so far. Welldone and Thank you! @ncbui.

I agree with you on the landing page/home page looking like a form (like Twitter's landing page for users who aren't logged in). we could have a win-win where we have an homepage like the sample wireframe and then a pop-up form like that of Twitter's landing page. but i think that might be too complicated to build. and yeah! a navbar doesn't seem useful to a logged out user.

for the signup, yes. like the next button linking them to another page. more like for navigations

for the profile page, i agree with what @GabrielleEaston said. i think the Profile page can be a way for a user to view and edit information about themselves and also display info about them for another user.

I suggest it can added as a note in the biz requirements and it could be in both. It would help us if we see it in both places, i believe.

[saradotlog]

Wow, I just took a look to everything and it's great! Thanks a lot @ncbui for doing this. And @Timilehin08 for all your suggestions! And @GabrielleEaston, well thank you all!

[msarit]

Looking great team! Well done! 🏆