Interests and Tagging

[bsteinbeigle]

@Keith UI forthcoming.

[bsteinbeigle]

@kaxline next is the user intake form. What do you think of this for the profile page? Trying to make a few changes without having to tweak the UI already completed to date. Interest tags will be just below name. I also want to get rid of relationship status. Can you decipher my chicken scratch?

[kaxline]

@bsteinbeigle This looks good! Just a couple of questions:

What's the Mustache/Eyeglass Icon?

You want the Green to Blue Fade (Gradient) as the background of the tags?

[bsteinbeigle]

I was trying to go all fancy on the design with the mustache/magnifying glass icon for a filter. Lets just keep it simple and go with a magnifying glass or other commonly understood filter symbol. Don't want to make it confusing. That was the intent of the top right hand corner.

I think the Blue/green fade icon works or another contrasting color that stands out would suffice. if the color fade takes too much dev. work lets just go with a single color or maybe instead just go with a colored outline and have the tags be white. Does that make sense? I will send over the branding guide shortly you so have for your use. I owe you a short list of interests that we can create tags for as well.

[bsteinbeigle]

@kaxline made a couple tweaks to incorporate 'backward & view connections functionality. I was thinking this morning it would be good to include 'forward' and 'backward' functionality buttons in a contrasting color from the main action button, messaging. Thoughts?

[kaxline]

@bsteinbeigle Let's see how this looks on the screen and then we can adjust. It won't take much time at all to make adjustments like that to the color.

[kaxline]

@bsteinbeigle Do you want to provide a list of interests for users to choose from? If so, can you send me the list?

Should users be able to add their own?

Are Interests different from Tags or what is the relationships between them?

[kaxline]

@bsteinbeigle Here's a draft option where the top nav bar is the brand color. That's usually what Material Design recommends but I'll do one with a white top nav as well.

I also had to make the background off-white so that the cards actually look like cards. Hope that's OK.

[kaxline]

@bsteinbeigle Also, for the tagging input, the easiest thing might be to use the Chips input already available our framework:

https://material.angular.io/components/chips/overview

You can scroll down to Chip input to try it out

[bsteinbeigle]

@kaxline I'm curious as to see how 'Chips' will work via mobile. I tested it out on my laptop and needed to hit enter for the tag to appear. It appears that mobile may work the same way. Where the example says fruits maybe we could put interests /hobbies. Eventually the database will need to be cleaned up for stuff like 'Running, running, runnin' but for now I think this is our best approach while giving the user flexibility to list out what he wants. What about building safeguards against examples like 'porn', 'butt fucking',... Some dudes are terribly immature. Maybe the quickest option is to implement a report a concern button so the community can do some of the policing for us as we are starting out. Thoughts?

[kaxline]

@bsteinbeigle Yeah, it'll take some tweaking to make it mobile-friendly, but I think it's a good base to start with and save some time. Maybe instead of hitting enter, there's a plus button next to what you're typing so when you're done you can just hit that.

[kaxline]

I'll see if there's a standard 'bad-words' filter or something we could drop in. Good idea. Also, we can have an autocomplete popup that shows popular tags that match what they've typed so far. That can help with all the weird spellings of the same thing.

[bsteinbeigle]

@kaxline Nice work! I like the overall look for now. I'm thinking down the road I may go with swipe functionality to go right and left. I've never been a huge fan of the swipe culture but I believe it will be different with guys and will result in a cleaner UI. For now, I think the button to go forward and backward works. Don't want to put too much further dev. effort into this until I get some further user testing out of the way. As far as the header goes, I like the look of the green however it would be good to see white as well to give me some kind of a comparison. It would also be good to add the fellas icon next to the text. I believe this will give it more of A custom look and feel. Thoughts?

I like how you made the bio stand out. Certainly breaks up the text a bit. I'm also thinking about going away from having to write a bio or the word "bio" generally. I hate writing long bios on myself so I'm thinking maybe instead of bio, I'll go with 'mantra" or some other interesting conversational starter that makes creating a profile super simple. The message button size looks great and really draws attention to to the main action referring to our recent conversation. I know its not as clear to understand but I was thinking about going with the man shake icon for messaging/add connection. Think it will stir up confusion? I was thinking this would be a great branding element. All in all, looks good dude!

[bsteinbeigle]

@kaxline I like the autocomplete pop up with the most used entry be listed first. That would save someone from having to scroll through a list to find the interest or activity. I don't think the bad words filter is critical right now provided the apps early adopters more than likely wouldn't list 'butt fucking' as one or their interests but it will become important down the road.

I like the idea of a plus/add button as opposed to hitting the return key. Agreed though, great start! I think this will be our best way forward.

[kaxline]

@bsteinbeigle Great idea about a conversation starter instead of a bio. Maybe like, what's one thing most people don't know about you? Or one of those ice breakers like you were saying.

And yeah, those buttons should probably move somewhere else and swiping would be an easy way to do that.

I'm still digging into how Angular serves up images but soon I'll have the logo in the top bar along with a version that's white/off-white.

Glad it's in the right ball park!

[bsteinbeigle]

@kaxline ya I was thinking we could incorporate a drop down list of questions people can choose one from. Kinda like the secret questions list you often have to select from to help make an online account more secure. I'll get a list formulated and send it on over. I'll keep it short and sweet for now.

Sweet, looking forward to seeing a draft.

[kaxline]

@bsteinbeigle So here's what I have so far. The profile edit page feels a little cramped and I haven't added the tagging input yet.

What do you think about having 2-3 onboarding screens and stepping the user through it? That seems to be pretty common practice for apps that try to customize the experience to your interests, like Apple Music. After you sign up, there's a separate screen that asks you to select a few categories/tags.

In that case, on the screen below, the "Save" button would actually be "Next" and there would be a way for a user to navigate back and forth between the screens in case they wanted to change anything along the way.

[bsteinbeigle]

@kaxline for some reason I forgot to send this to you. See below. Yep, I agree I think having too many entry fields on one page would be off-putting to users. Below you will see I have still noted Bio. Obviously this will go away and we will have an icebreaker go there instead. We can also delete relationship status. Its not reflected below but what if we added a 'progress indicator directly above the next button. I was thinking three horizontal dots so a user knows how far along he is in the onboarding process. Does this make sense?

[bsteinbeigle]

@ kaxline also thought it would be good to add a location field to someone's profile. For now, I believe we go with a drop down list with a few Utah cities and some Oregon cities/towns. Is a drop down menu the most economical way to accomplish this?

[bsteinbeigle]

@kaxline this mockup is far from perfect let me add but I believe with the profile 'edit' page we can have someone scroll down to make any changes needed. Going this route ensures there are only a few fields to input when viewing at a time. This would be unlike the intake/onboarding page where we would have multiple forms you click through. Let me know if this mockup makes sense.

[bsteinbeigle]

@kaxline Here is the settings main page you would be pointed to before you were able to edit your profile. I included some functionality to view your public profile. Thoughts? As it stands now, currently in the app, the top menu provides multiple opportunities to sign out. In this change, sign out is included in the setting page only. Let me know what you think.

[bsteinbeigle]

@kaxline here is a list of 'icebreaker' questions. These will likely need to change down the road. I'll include getting good questions in my market research;) If you think of any good ones as well, feel free to drop in. Need to think about how this would be displayed in the profile. For now, I'm thinking we could include the question in a smaller font and directly below it include the persons answer in the white box you already have shown in the profile. Thoughts?

• Motto you live by?
• All time favorite athlete?
• First thing you would buy if you won a million bucks?
• Small or big dog and why?
• What is your go-to meal that you actually cook?
• All time favorite movie line?
• Number one pet peeve?

[bsteinbeigle]

@kaxline Can we close this issue? For future updates to Icebreaker questions, I will include as a separate issue.