Idk if you two are trolling me BUT either way, the ​issue​ with "Report Issue" is that it could be misconstrued to be something like, "there an issue with my report," whereas "Report an Issue" cannot be misunderstood in my opinion.

Here's a group of mocks that includes the entire flow for adding an artifact to a collection on desktop (this still needs to be figured out for mobile): http://design.buzzfeed.io/bf-shared/allison/honeybear/collections/flow-v2/slideshow I previously had a button in the flyout menu that finalized the process of adding artifacts to a collection. Some feedback surrounding the button was that it was an unnecessary extra step, so I've removed it. After looking at the flow, I think it's a bit confusing without the button. It seems unclear whether ...

REPORT AN ISSUE IT IS! Thanks to all.

Just to circle back on this, talked with Ivor, Rachel Brandt, and Emily and we came up with "Report Issue" or "Report an Issue." This removes the negativity of the word "bug," but still communicates the idea of a ​problem. ​Should it be "Report Issue" or "Report an Issue?"

I think the MVP is a good place to start, too! Wondering – did we ever explore something that denoted whether or not you were subscribed to a show right in the feed? So you could have one feed that had both subscribed and recommended content in it.

Talked briefly with Ivor, and he confirmed that this tool is not ​technically​ just for bug reports. It's a "feedback widget," so it could be for bugs or for a scenario where someone says "I don't like this thing" or "maybe this could be different." Not sure if that influences how we want to name this.

Here is a revised option 1 with the words "Send Feedback:" http://design.buzzfeed.io/bf-shared/allison/internal-tools-nav/feedback-button/option-1/slideshow

Totally agree. We have a slight space issue but I think we can work that out and instead use a phrase that's more clear. I'm checking with Ivor whether or not this is just for bug reporting, though I assume it's possible that it ​could​ be used for something else, but probably mostly for bug reporting.

ALSO please note: The checkbox background would *not* be necessary in this version with the gradient.

Here's my desperately sad attempt at prototyping the top gradient on hover, which could replace the checkbox background on hover (​ * this only works on the top left image * ​​). ​Also please note that the gradient disappears when you hover over the checkbox, but that would not happen in real life: http://allisonchefec.github.io/demos/honeybear-checkbox/v6 I think this is a good solution that makes the checkbox more obvious without creating a potentially confusing hover interaction that pops the checkbox with a background on hover. Here's a ...

The problem with having that checkbox appear when you hover over the entire card is that clicking the card takes you to the Edit page. I guess it's ​possible​ that we could keep that functionality ​and ​show that transparent background on hover, but I'm not sure if that would be confusing. I hear what you're saying, Elaine, that if the background appears only when you hover near the checkbox, then what's the point? I think it makes sense though because it creates an obviously larger click area which I think is important, instead of expecting...

I'm also into the text that aligns with the bpage content below the image. I understand that in the future we will want the editor to control the placement of the text, but maybe this could be the default. It feels way better aligned this way.

Here it is: http://allisonchefec.github.io/demos/honeybear-checkbox/v5/ I think this is a good compromise!

Here are two options for a background behind the checkbox: ​Large checkbox with white background: http://allisonchefec.github.io/demos/honeybear-checkbox/v3 ​ Large checkbox with black background: http://allisonchefec.github.io/demos/honeybear-checkbox/v4 Here it is again with no background: http://allisonchefec.github.io/demos/honeybear-checkbox/v2 It's obviously hard because of varying image colors, so I could go either way on this. My vote is that the white or black doesn't add tooooo much so we might as well not clutter up the boxes. Idk...

CAP! I totally forgot about the selected card state. It's in this mock right here: http://design.buzzfeed.io/bf-shared/allison/honeybear/collections/adding/button/slideshow?pg=2 I will also try the semi opaque box not on hover to see how that feels!

Thanks friends!​ I think revealing the actions ​after​ you select some artifacts is definitely a little mysterious, so I think the disabled button route feels like a good way to go. Also talked with Kevin and Sam about this and they are cool with it. Emily - ​I can imagine some other actions that might appear in the action bar in the future could be "Add tags" and "Delete." I think we'll deal with running out of space if/when it happens, though it's certainly a good point! ​​​Sabrina ​- I hear what you're saying about the extra step, though ...

These are great explorations, Emily! As discussed in tribe crit, I think Proxima makes the most sense, as it's our ~brand~ font. I like the gradient option over the text shadow option. I know you said that there will be a white gradient and a black gradient, depending on the text color, right? How do we handle a black or white gradient that feels too strong over a certain image? I like the idea of moving the byline and timestamp into the header image, since it makes that text feel more like a unit. I wonder if we should wait to make that cha...

It's FRIDAY so I'm back with some more iterations on how to add artifacts to collections. ​​​Note: ​I think no matter which version we go with, the action bar will need to be persistent when you scroll. ​Grey Action Bar • ​v1 ​​Checkbox on Hover ​(tweaked from earlier mocks): http://bit.ly/1ktXQHL • ​v2 Persistent Bottom Left Checkbox - Default: ​http://bit.ly/1MbIock • ​​v3 ​​Persistent Bottom Left Checkbox - Large: ​​​http://bit.ly/1ln3hIB • v4 Persistent Top Left Checkbox - Large: ​http://bit.ly/1PFTR6m ​ Action Bar with Button and Flyout...

These are great, Hammed! I think all of these versions would be interesting to a/b test except the card-like treatment, because it makes the groups of content feel a bit too separated. Placing the wide thumb in its own separate card makes it feel like it's something else, when in reality it's just as important as the rest of the content (it is, right? or am I missing something?). I think having the wide thumb ​and​ putting it in its own card is one too many distinguishing features. If we want to do the slight border around the content, maybe...

I agree with Shuster about Top Posts being a bit more static. I think if we are going to test a version with just two tabs, we should probably test Latest and Trending. I forgot: are we testing either the red tabs attached to the top header bar or the nav in between the splash and the feed? Or are we planning on testing both? I agree that the tabs at the top are easier to see and are more clear.

Thank you team for the quick feedback! ​Button -​ We totally could have a button that opens a flyout with the search field inside. I had earlier explorations of something like this but they seemed a little UI heavy, but I think using a button instead of a drop down will make it less boxy feeling. ​Checkbox ​- I will explore a version with regular normal checkboxes that don't appear on magical hover. I can also adjust the hovery checkboxes so they aren't hanging off the side and make them look less disabled. ​​V1 ​- I agree about the # select...

Here's an update on Collections after talking with the Honeybear team: • ​1. Collections view: After whiteboarding a Collections view, we decided not to move forward with this view for v1 since it would be achieving more than the immediate goal (To group artifacts into a collection and be able to filter artifacts by collection). • ​2. Select all/none: ​Talked a bit about this with Kevin and Cap separately. It's a bit tricky with infinite scroll, but it's probably doable. I don't think it's an imperative piece of functionality for v1, but I t...

I agree with what John is saying here. I also missed the helper text and had the same feeling of "why doesn't this work??" The clearest option to me feels like ditching the desktop preview and just having one preview (mobile sized), but not labeled as any specific platform. I understand that might not be an option since it sounds like the team has decided on having a desktop preview as well. I think it might be okay to display a helpful message once you flip to the desktop preview that you can't edit the text in this mode. I think the messag...

​Mark / Sabrina ​ - Good point about the "Add" button. Maybe it's not necessary? ​Sabrina ​- Regarding the extra click to change the drop down to an input field, I hear you! I think if I can make the action bar more visually distinct, we might be able to get away with just an open search field with an "Add to Collection" label above it. ​Alice ​- As of right now you ​do​ have to upload assets to add them to a collection, and there is no way to create a collection first and then batch upload assets into it. The next phase of collections after...

I am down with the dark grey Xs. Cap mentioned discussing whether or not ​all ​our X butons should be dark grey (or blue if we go with blue). I argued that context might change the color we'd want for the X. For example, maybe a grey X in a modal is sufficient because it's anchored in the corner by itself, not crowded by other UI elements; whereas these tags can get a little crowded especially when duplicated next to one another, sandwiched inside a filter bar. That being said, I don't feel strongly about having different colors based on con...

Updated! https://invis.io/CZ4V694GR

Caitlin - ​​​yep, it would say Hide Filters in the expanded state. I only showed this version in the above comment ( https://invis.io/EN4T86ZZD ) with the expanded state but here it is for the version with the horizontal lines and the plus: https://invis.io/CZ4V694GR

We could go much more roundy on the tag shape, which I think definitely makes it feel less like a button. Here are some other color options as well to stray further from our blue buttons.

Ooh I like these, Cap. I like the blue X because I think the clickability seems higher, and I don't think the blue X's are TOO overwhelming.

No, I don't think there is a reason beyond "this is a long list" to roll up the platforms. Maybe we can start without the list truncated and see how people feel about it once it's in action. Regarding the mobile filters toggle, I had these extra explorations stashed away with plus signs ready to go! I didn't include them earlier because I thought they were a bit weird but maybe not!

This feels really good and makes a lot of sense! I like the way you framed the editor on the left side, and I think it works with the tabs. I think you know this already because we talked about it, but you can kill the bottom horizontal rule on the Create New tab so that the tab becomes part of the entire content area below it.

For the mobile layout, we'd like to hide the filters under a nifty button or link, as to not clutter up the interface. I'm playing around with a few things, but here's the basic expand/collapse interaction: https://invis.io/EN4T86ZZD Should it be a button? Should it be a text link? Here are a few other visual treatments for the button or link:

• Talked with Cap IRL again and he suggested going alllll white with this one. I think it's pretty slick. http://design.buzzfeed.io/bf-shared/allison/honeybear/visual-update/03/slideshow?pg=2 Thoughts? • Also dropped this little bear in as a PLACEHOLDER logo. • Also also, talked with Chris T and he is a fan of truncating the long checklist filter list, so I'd like to find a good solution for a "more" or "show more" link. Does this feel too small and hard to click? • Coming soon: ​collections!

I don't really mind the large images. What exactly is the use case for seeing these images in SMC? That will help clarify whether or not it's important for these images to stand out from posts. I'm assuming they are looking for content to promote or share to another channel? Because presumably a lot of these assets have already been shared to one or many channel(s). Is it important to know in SMC which channels they have already been shared to? Personally I think it's nice that they appear differently than the posts and it's okay to have to ...

I think the solution and the steps you've come up with are so great! • The interaction of the box feels good. Makes sense that the outline and X button would appear on hover and on focus. • I like the visual styling you have for the marquee and the X. Feels very clickable! • Size/padding all feel like they make sense. • I really like the adjustments you are making to the Edit button. I do think this button could have the word "Edit" next to the icon and that would potentially be helpful at catching your eye. It would also make the button big...

Thanks for the background and details on this! I think v6-1 and v7-1 feel pretty native and not too bannery, and I don't think the play button is necessary. I worry that this text on the mobile swarm is going to be too small to read on an actual device. http://design-mocks.buzzfeed.com/Screen_Shot_2015-11-03_at_10.25.59_AM.png I also think we could do a bit more to contrast the image of Matt with the background (I know you said you had trouble getting assets, so maybe this isn't final?) http://design-mocks.buzzfeed.com/Screen_Shot_2015-11-03...

Hey Lindsey! This is an awesome start and I'm so excited for this format! ​Builder UX • ​​I love that you broke up the creation tool into four steps. That feels really clear and it breaks up the flow nicely into manageable parts. • I personally prefer the "form" version over the "wizard" option just so the creator doesn't have to flip through screens when creating the game. The "form" version let's them fill out sections as they please, and I think the flow is short enough that we don't need to paginate it. ​Builder Visuals • ​​I'm having a ...

Spoke to Cap IRL and he had two suggestions, which I'm exploring below. 1. Moving the date range options into the calendar fly-out menu: The filter could default to the last 7 days, which would be highlighted in the calendar, then you could either choose from the options in the drop down, or choose your own range. It would be pretty cool if the drop down automatically changed to "Custom range" once you started adjusting the range. Or it could just pop the actual date range right in there. http://design.buzzfeed.io/bf-shared/allison/honeybear...

Me again! I'm back with some new mocks to look at, which incorporate the feedback from Jac and Cap. ​Changes • ​​Search is now in the sidebar • The drop-down/checkbox combo meal is dead. The checkbox list has taken over. • Author names display as tags beneath the input ​Mocks • ​Click here: http://design.buzzfeed.io/bf-shared/allison/honeybear/visual-update/02/slideshow?pg=1 ​My thoughts 1. My first thought was that the order of the filters is a bit weird visually now that Platforms is a checkbox list, so I played around with flipping the or...

I think the collapsed list definitely works better without the red. It doesn't seem ​too​ out of context to me, though I hear you. I think it could work though! For the fab-less version, I agree with what was said above about discoverability without some kind of visual cue. I don't know if I personally would ever try tapping on a headline as the design stands right now. It might be too much, but I agree with Sabrina that it would be good just to see!

Ohh I kind of like this. Is it possible to not use the red horizontal lines and maybe just grey em out til they expand? Or something like that. :-| I like that this lets the list relate much more to the actual feed and feels like it's just one experience, rather than two.

I think placement something by the first heatmap at the top of the page is a good idea, except I can see that being problematic when you've scrolled a little ways down the page and you want to turn them off, you have to know to scroll back up and find the "off" button. We could say "Hide all stats" which would be explicit that you're about to hide them ​all.​ Part of me agrees that we can be subtle about this. Elaine and I talked about ways to make these tooltips smaller in the future so if we can find a way for them to be less obtrusive, pe...

Thank you Jac and Cap for this very valuable feedback! It sounds like if we can isolate everything in the sidebar we won't even need to use tags, which would solve that issue. I think coupling Search with the filters in the bar will be effective and just doing straight checkboxes instead of the dropdown checkbox combo meal is also much more straightforward. I will explore these things and I'll be back! Thanks!

Hey Lindsey! Congrats on your first Basecamp post :) This here is a tricky one. I see what you're saying regarding the challenges on mobile, since we don't show the byline in the feed. My instinct about these different options is that we should move away from the tilted orange banner in the corner. I have always thought it's a little wonky looking. I think the easiest option for mobile is definitely option 3, without the brand name. Can we do that, though? Obviously less is more so if we don't have to include the brand name, then I think tha...

Jeez, sorry I accidentally hit the button! Hi friends! Here's a throwback. Remember this thing? http://take.ms/Bfd9B ​Update: We've finally gotten around to building out the first part of this, which is fleshing out the temporary mega drop down http://take.ms/qIjmV and replacing it with separate links and related drop downs. As you may remember, this was all sorted out in this thread: https://basecamp.com/1767593/projects/9193238/messages/42735487 We've adopted this project over into Formats, and Motahera and I have worked this week to get t...

Emily, thank you for killing this gradient. I am into the blue links with blue background selected state. They are clickable and wonderful!

Love love love! (Sorry I just +1d without adding a reason. I'm the worst.) I love this because you took a small feature request as an opportunity to make small but important visual tweaks to something that hasn't been touched in way too long, and I am also happy that you are identifying other things you'd like to tweak in the future! Kill all the grey!

Wolasi, I am really digging the progression of this and the way you and the team took in the feedback from Apple and channeled it into something that seems to work super well. I love what you did with the video cards. The large titles scream "fun" and they are easy to read. I am glad you did away with the multi-video cards because those were always a bit confusing. On the Shows screen, I'm confused by this circle with the 8 in it. What is it? :) http://design-mocks.buzzfeed.com/Screen_Shot_2015-10-23_at_8.35.06_AM.png I'm also unsure of the ...

Hammed, these are really cool! I am into the large text. There's some great emotion in the big, bold text (will this work for less-positive feeling posts?) I think all caps in general (especially when they're bold and applied to a long title) is a bit hard to read, so I would stick with title case for headlines. Are we unintentionally removing the byline? I am a bit confused because your previous post described that you would explore full-bleed images for buzz stories and full-screen images for longform/feature stories. The options here are ...

To confirm something I think we covered in crit: the app is going to be pulling from Superposter, right? I forgot, if quizzes are going to be made specifically for this app by editorial or if the app is going to bring in random quizzes from BuzzFeed dot com? I am trying to clarify if the app needs to handle all variations of quiz questions and answers. Question text, question image, answer text, answer image. All of those things can vary from quiz to quiz. I'm not sure if we're commenting here about whether or not we like text over the image...

Implementation aside, I think these are really interesting explorations! Is your team imagining that the full-bleed cover images would only be for longform pieces? That version feels very featur-y, which is great, but would probably be overkill for a regular list. I am really into B-page header 1. The left aligned text works across all variations. I think the centered text ​could​ ​​work on top of a full-bleed image, but it doesn't work so well in the standard b-page layout.

I like this proposal. I think this would be a really interesting A/B test, and I agree with Elaine's assumption that it would be one. We shouldn't change this without testing it. Could we test this vs. an option with "GIF [play button]" vs. the control? Small detail, but I think the white circle and dotted circle could be a bit thinner.

This is exciting! I am finding the hierarchy a bit hard to parse. I don't know where to look once I scroll past the hero section. Maybe the info could be broken down into FAQs, or something like that, and the ways to submit a tip could be grouped together better. I feel like it could be clearer: there are 3 ways to submit a tip > pick one > I also think the sub-text in the hero area is quite large and could be smaller: http://take.ms/GW0X9 Obviously this is a lot of text to deal with. I feel like broken up into smaller groups with a bit more...

I also think the buttons could possibly be two different colors. The two hearts look very alike so it takes a second to notice the difference. I also like "Questioning" but would be interested to see the hearts in different colors. Maybe grey for the broken heart?

I also think it's worth exploring another location for the dynamic tools. Maybe the top or the left or the bottom? It would be cool to see!

I think dynamically changing the sidebar based on the area of content you are editing has a lot of potential. I agree that a lot of the options in the sidebar right now relate to the post at a higher level and are things you may only touch once or twice. It's taking up a lot of room for a bunch of settings. I think a dynamic toolbar is not only familiar to power users of power software, but familiar to all of us who have used things like Keynote, Word, Outlook, etc. I agree that user testing with longformers and non-longformers is going to b...

Third option feels good, and the numbers are so nice and even! I do think, though, that the semibold post headline is the way to go for contrast's sake.

I don't think the unit *has* to be full bleed right? This is something we can change if we want I think. I agree with Shaun, I don't think the red outline is doing much. I much prefer the bright colored backgrounds. I think red outlines often end up feeling a bit error-y. I am not a huge fan of the squad goals version, because although it's trendy, it's kind of age specific I think. (Like you said, I barely even know what it means and I don't really identify with it.) I like to think of these promos as relatable for everyone and anyone, with...

Awesome! I have another tiny comment that I forgot to mention earlier. I think the "NEW" text inside that circle is a bit bold at that size. I think it might be more legible at a thinner weight.

Have you explored the single column cards with the images always on the left? I find the alternating a bit distracting and confusing. I like the version on the left. It breaks up the feed nicely to have heroes spread out through the feed.

Yea, it's going to be a button with a checkbox. Obviously we can alter this as we see fit!

At the next stage of the global internal tools nav, that "go to" menu is going to be killed, and Post Duplicator is slated to live under this More Tools drop down: http://design-mocks.buzzfeed.com/slack-imgs.com.png (not sure if this is helpful) Anyway, as we've talked about before I think it needs to be made extra clear that the duplication has not also published the post. The success confirmation message in green subconsciously makes me think it's been published. I almost feel like we don't need that success message. Maybe it could say: "Y...

Love these explorations as well as what's being said about the goals of this unit. I agree with Joseph, that allowing the rest of feed content to scroll on top of the QCU unit would be really powerful in distinguishing it. I have also always felt strange about it in its current form, and I think this would do the trick. Besides the "what if there is no image?" concern, the Dark Hero versions are a bit confusing to me. It's almost not clear that the whole dark area is one unit. And furthermore, that the top dark block is related to the image ...

The current brainteaser (http://www.buzzfeed.com/games/can-you-guess-these-movies-based-on-their-emoji#.kfgD5YdmX) actually replaces the question image with the Reveal image, so we ​could​ do that, however the new format is not going to make the image required, so we have to account for that. Regarding "I give up," I think that's a fair point. We could do another button, but I think this is overkill: http://design-mocks.buzzfeed.com/Screen_Shot_2015-09-25_at_9.11.51_AM.png We could just make the text much bigger! http://design-mocks.buzzfeed...

Gordon! I love where you took these! I agree with what has already been said. I am totally struck by those big heroes with the "shards." They are fun and clean at the same time. I also like the white version in the last set of mocks, and think pairing it with those big colored heroes works so well. I agree with Caitlin about the size of the logo / nav. Part of me likes the size, but I think it can be a bit smaller. But maybe not toooo small. :) I like the smiley empty avatar (I'm assuming this is a logged out or no-avatar state?) but I think...

Hello lovely people. It seems like the stacked input/button option on both mobile and desktop is a crowd pleaser. We talked about it in tribe critique today, and I think it works well. I've added some functionality to version 3 in this prototype, to mimic the three levels of functionality attached to the button: http://allisonchefec.github.io/demos/quiz-input-answer/03.html 1. Correct answer – input turns green, you get the Correct message + optional Reveal (image, title, desc) 2. Incorrect answer – input turns red and shakes, and "I give up...

Thank you Jac! Totally agree about animation, we plan to play around with that. I think it's going to help a lot. I hear you about translation. That's a great point :) And yea it would be cool if the button disappeared when you got the right answer, or if you gave up. Either way you are not guessing anymore. For the "wrong" state I am thinking to outline the input in red, and do the button shake. I like the button shake.

Yea, as I mentioned about the Reveal option is going to be available. They can choose one, two, or all of the following: image, title, description. http://design-mocks.buzzfeed.com/Screen_Shot_2015-09-23_at_12.01.34_PM.png Right now the reveal image replaces the question image in the Brainteaser format but we plan not to mimic that functionality since this new answer type will be able to be used without a question image (potentially just text).

Hello friends! I put together a little something for us to look at. ​Opt 1: Here are the default Solid input/button styles: http://allisonchefec.github.io/demos/quiz-input-answer/index.html ​Opt 2: Here is a slightly taller version: http://allisonchefec.github.io/demos/quiz-input-answer/02.html My thoughts on this are that this is a game, not a form. While we are ​​using a form element on the page, I think that we should make this feel as gamey as possible. I think that the larger input and button feels fun. ​However​, this prototype is resp...

I think these feel much better. I would adjust the rag of the sub-copy a bit, but I think these are great! (Also typo in the second one. Should be "allow" not "allows.") ;)

We talked about this a bit in tribe crit yesterday and overall it seems like we could go either way with the segmented button or the circles. I think for now we'll just add another circle button for "Input," and match the styles to what we have right now. It will look pretty similar to this: http://design-mocks.buzzfeed.com/icon-opt-2.png We can refresh the quizmaker with Solid when we refresh the quizmaker with Solid. ​John​, re: the icon: I'm not sure if the cursor icon will be much clearer without any context that it's a cursor. My vote i...

I'm wondering if there's a way to adjust the layout / separate the copy so that we are following something more like what we do in the core iOS app. This is a reference from Gordon's UI copy doc. The copy in those modals looks a bit much, especially with the thick type. Maybe it can be separated into two parts? http://design-mocks.buzzfeed.com/Screen_Shot_2015-09-17_at_7.49.22_PM.png

It took me a minute to find where the word "Subscribe" was. I agree the label is super clear. I think this is what Cap is saying, but can you accomplish this with just the label and no icon at all?

Here are a few options for icons. Option 1 - Freeform http://design-mocks.buzzfeed.com/icon-opt-1.png Option 2 - Input http://design-mocks.buzzfeed.com/icon-opt-2.png Option 3 - Free http://design-mocks.buzzfeed.com/icon-opt-3.png Option 4 - Input with Answer icon http://design-mocks.buzzfeed.com/icon-opt-4.png I think "input" is the clearest, and I don't think the option with text inside the input icon works that well. It feels out of place with the other icons and it's pretty small. We'd have to make these buttons larger to have the text l...

I think the button looks great in the drop down, but it feels a bit large on the Notifications page. Do you think it could be less wide (just the width of the text), or possibly placed to the right of the text? Like this: http://take.ms/DS14P You could increase the width of those horizontal lines, too, if you moved the button.

BTW! This is not meant to be a single project. We envision this as what content creation could like look one day in the future. And we intend to break this up into many small pieces.

Fast forward a few days, and it was time to whiteboard again! ​Our whiteboard process A smaller group of us got in front of a whiteboard with the intent to flesh out a few flows based on what we learned from our initial brainstorm. We nailed down a flow, but came up with a few different options for the actual starting point. ​The overall flow 1. From the starting point, you can: • start tying text • paste a link (any link or an embed link) • upload an image (drag & drop or click to upload) • launch the Builder 2a. If you do any of the first ...

Our initial brainstorm process A small group of us got together and did a mini-sprint! No really, it was tiny, mini. We crammed some of the Day 1 schedule from the Google design sprint format into 1.5 hours, and although it was tight, it was deemed a success! Here’s the deck we used to intro the workshop: https://docs.google.com/a/buzzfeed.com/presentation/d/1n0wRUZI0T1CYlcOXGDOgODPjWp4rkNhMm3GVEGWx-qQ/edit?usp=sharing This is what we looked like. Look how happy we are! Ideas are flowing! http://design-mocks.buzzfeed.com/IMG_0006.JPG http://...

These are really interesting and important tests! I'm so happy to hear we're going to do them. I also wonder if testing the More News headlines in Proxima is worth trying. They are a bit hard to read at that size, which I know we've talked about previously. I know we're trying to drive more "More News" clicks, but I wonder if we could test adding links or buttons under each category section that took you to that category page (More Politics > ). I wonder if people are clicking on those red headers at the moment. I'd be interested to know!

+1 to what Cap said. Love this menu, though! It would be soooo great to use something like this in Superposter to alert users when we release new features :cough cough CMS:

I would love to see Mock 0 with the smaller BuzzFeed Life lockup. I think the layout of "Presented By" + the logo in that version is the cleanest, even though it's kind of wide. I also think the legibility is best in this option, because it actually reads "BuzzFeed Life presented by Bagel Bites." Alternatively, I think Mock 5 could work as well, if we wanted to conserve width. I don't think moving the text/logo lockup above or below the BF LIFE lockup is beneficial here. I think it just ends up feeling a bit clunky, and there's already a lot...

I really, really love the icon explorations you did. I agree that they are not adding much in terms of clarity, but I appreciate them regardless. We must find a way to use the fingerprint icon! :) Anyway, I agree with you, that the black bar with white text is the clearest. It feels on-brand with News and it's easy to read. As we've talked about recently, I love the idea of making a system out of these little banners (orange for ads, black for news, maybe green for quizzes/polls if we remove the badge?). I think in general, the banner works ...

Yea this proposal is only for the gif that loads before images.

Love where this ended up!

I know this keeps coming up, but we should try to standardize our "promoted by" and "presented by" treatments. I haven't seen the red banner before, so I don't think we should use that. Is the orange banner reserved for "Promoted by" and grey text reserved for "Presented by?" Is there a difference? I feel strongly that we should standardize this. Is there a reason we can't move the "presented by Bagel Bites" next to the Life logo? The repetition of "BuzzFeed Life" feels a little strange. Also removing the badges is not a small deal. We shoul...

I also like Option A. I think greying the other levels out make them look like you can't click them (which you can, right?). Agree that the red line is unnecessary. I'm wondering about the thumbnail + red 'new window' icon on the right hand side. At first glance, that icon was unclear to me. I'm assuming it takes you to the post, but I'm not sure if that's 100% clear. Is that thumb/icon combo necessary? Can you move the icon back near the post name? Or have you tried a blue text link that says "View post" ?

This is looking really great, Jac. I definitely prefer the title case labels over the all caps labels. They are easier to read. I think the first version could work. Have you tried boxing in the label bar, making those sortable columns more clickable? Kind of like this, but better: http://take.ms/91v1J Additionally, I'm not sure if the use of the secondary light blue is necessary. Have you tried 1px solid light grey lines? I don't think these lines are that necessary either. http://take.ms/YAg5W Maybe just the one in the middle would do the ...

Friends! After today's crit, coupled with the feedback above, it feels like the updated burger + grey line is the winner! http://design-mocks.buzzfeed.com/grey-line-updated-burger.png Also we plan to increase the height of the tap target from 42 to 44px as per Captain Watkins' suggestion. I will get this into Design Tweaks!

I forgot to answer your initial question about the badge text treatments! Honestly I think the longer words are a bit hard to read anyway so why not just stick with the standard font weight? It doesn't seem to affect legibility THAT much. I imagine your theory about native speakers recognizing the word better than us might be accurate. Can we show these badges to some people who actually speak these languages and see what they think? It also might help to mock this up in the context of a feed page.

I worry that using icons to represent words like "quiz," "poll," and "re-rank" may not be 100% clear. I think the rule of thumb for icons is if they're not 100% clear, we shouldn't use them. It would be risky to assign different graphics for polls and quizzes, since the idea behind them is somewhat similar and therefore I imagine it might be difficult to visualize the difference. Elaine, I agree with your thoughts on "what's with these badges?" It seems bizarre that they are treated the same way badged posts are treated. I think it would be ...

I prefer the shorter bar with the icon to the right of the tabs. It feels short and sweet and to the point!

Visually, I don't thing the different image ratios make much of a difference. It's probably easiest to keep the aspect ratios that come straight from Superposter. Ideally we'd have one image size across the board, but I don't think the square images are too too huge. I also think the primary button for share feels good. After the poll is taken, isn't that the only action to take? So doesn't it make it primary?

I think the drop down is much clearer! I think it might feel more balanced if the drop down was left aligned, though.

++ to Sabrina's comment about using something trendy. I'm always the last to know the word trends!

Here's what it looks like with a red burger. https://invis.io/G2437GOB9 http://design-mocks.buzzfeed.com/grey-line-red-updated-burger.png I think this looks pretty good! I am wary of changing the burger TOO much, as we don't want to cause any adverse effects. I know that there is going to be work done in the future on the mobile web navigation, so we don't want to overhaul it right now. If we go red do we need to test it?

I also like the spinner with the copy overlaid onto the thumb. Are you going to explore options for the spinner? Regarding the copy, just confirming that you're suggesting the copy would/could alternate between a few different phrases. I think that would be great. I think sometimes using a full phrase that's cute the first time starts to become annoying after you see it many times. Cycling through a bunch would be nice.

I am definitely in favor of not using all caps for the buttons. Agree it's harder to read! I also agree with your inclination to add the word "Poll" above the actual poll. It gives it context without feeling like overkill. The blue solid buttons feeling really tappable. I prefer them for the text answers, and I think they also work for the image answers. My first vote for the image answers was going to be the light grey with the shadow, but I can see you wanting to keep both text and image answers using the same treatment, and I don't think ...

Oooh the squircle!! This is interesting to me because it feels like an old-school TV, which I like. Feels like something I haven't seen before in this context.

Yea that's a great suggestion, Caitlin! John and I talked briefly a while ago about labeling the files with their social network upload location. So, basically the Links info that is in the left column on that page, but also specifying which file was uploaded to which network.

Thanks for the feedback so far! ​Elaine - ​yea I can definitely explore using the secondary button styles. I am thinking even going for text links for the Delete and Download buttons underneath each asset. ​Sabrina ​- I apologize for the potentially confusing mock. As stated above in a previous comment, each asset page will hold different variations of the same piece of content. So potentially if a BFF comic was posted to Instagram, Facebook, Twitter and Vine, it would have the different sizes that were made for each platform as well as diff...

Shouldn't you be able to access Settings from anywhere in the app? It seems strange to make the user have to search for it or remember which of the two screens it lives on.

The fields on the left side relate to the entire page. Those images on the right are going to be different variations of the same content. Could be different image sizes or file types (jpg, gif or video) that were uploaded to different social networks.

Cool, thanks for sharing this other exploration. There is something about the one with the orange banner that interests me. But they feel like two really different strategies. The orange banner is much more inline with our other promoted posts, and I understand this post type is different because it's written by editorial. I guess I would be interested to know what the creative/edit teams think of both these options.

I'm wondering if the "add second flight date" button could be a text link under the Flight Date area on the left http://take.ms/A0NK0 so that your eye doesn't have to make the leap to find that button.

Oh hi also I meant I liked this one with the icon: https://dl.dropboxusercontent.com/s/w63adlwxidjabah/Screenshot%202015-08-29%2013.12.17.png ...not the one with the button. The button feels a bit big. Also if that copy is more than 2 lines how do you think we'll handle the placement of the icon? Does it align with the top of the text?

Emily, I really love these explorations! Agree that the trick here is not creating something that adds to the noise at the bottom of a bpage. I think a few of these options are eye-catching, but not too noisy. I like this option a lot, but I like the icon with the notebook + magnifying glass a little bit more. https://dl.dropboxusercontent.com/s/4xzn0ab0ntgcw0u/Screenshot%202015-08-29%2013.13.46.png I also like this option. It's simple but doesn't get lost too much in the shuffle. https://dl.dropboxusercontent.com/s/yhpyjumrix9aare/Screensho...

While I DO like the animation, I think it's a bit much for a page loader. I also think it's a little odd that it's actually one of the icons you have in the stats sidebar. I wonder if something lighter could work. Just found this quickly, but maybe something really simple like this? http://codepen.io/beefchimi/pen/yHmeq

I still feel a bit weird about the language in this. It doesn't feel like the conversation is very natural. Totally understand you're implementing this version, but figured I'd drop my thoughts in here anyway :) I think maybe the "No way, you're the hipster?" needs a bit more emotion. Like "No way! You're the hipster??" or maybe just "No way. You're the hipster?!" ....or some take on that but with less punctuation. It doesn't feel like she's really surprised. And then Kate's response also feels weird. I feel like it's something more along th...

I really love the light grey. I also like the shadow you added to the fixed bar on the left that would appear if you scrolled horizontally. I still feel a bit weird about the vertical difference between the headers in the fixed bar and the headers in the other columns. I wonder if switching up the hierarchy of the text in one of those sections would help. Maybe the headers for Watch List and Hidden are smaller than the other headers? I still think that bar would work okay if it had the same margin above as the other columns. Maybe I am overt...

I would also recommend using the filled in Pinterest icon, as we do here: http://www.buzzfeed.com/buzz

Awesome. My vote would be for a primary Follow button (filled in red), knocked out text.

Love the improvements here! I see what you're saying about the More menu's selected state(s). Maybe for now we just allow for one to be selected in the More menu, and like you said, down the road we can allow for deeper customization depending on your role. I do think the headlines should be set in Semibold. They blend a little bit right now. +1 to Jac's point about the wording of "Reverse Chron." That stuck out at me as well. I also agree that the Watch List | Hidden tabs are not super clear. I have always wondered what this would look like...

I think it's a bit confusing to use the orange "Promoted By" label on the feed page, but then not use it on the bpage, and instead use "Presented By" language with a different treatment. Also, the body copy inside the box uses "promoted by" also, which is confusing. Which language are we using? I think the layout for the bpage works pretty well. I do think that the box could benefit from a bit more padding inside. Out of curiosity, did you try any other treatments for this box?

Elaine, these are so awesome!! I also like the white version. I wonder if you need these horizontal lines under each section? There are a lot of boxes and lines on the page, and maybe these are just adding a little extra noise? http://design-mocks.buzzfeed.com/Screen_Shot_2015-08-24_at_9.53.16_AM.png.jpg On the Program Detail page, I agree the gray border is a little dark. Are you using the default or light border there? Also also, I find these light grey headers a little large. http://design-mocks.buzzfeed.com/Screen_Shot_2015-08-24_at_9.55...

I definitely prefer the animation and sequence of v2. I agree with Shaun, the end could be quicker. What if you removed the "what" part? That word feels a little bit strange to me. And the girl on the left said "LOL so true." Then maybe you wouldn't even need another comment from the girl on the right.

I don't think you need that vertical line. It feels unnecessary. Regarding visual separation, did you play around with styling that button differently? Also I wonder if an icon like these would be a bit clearer than the play button.

That makes sense, Wolasi. For some reason the placement of Replay feels odd to me. Did you try to the share buttons flush to the bottom of the video, and Replay in the top right corner? Or maybe the share buttons flush to the bottom, and a Replay button in the center. Something more buttony could center it nicely. I'm just being nitpicky here, so don't mind me!

Thanks for trying those options :) I agree, opt 1 feels the best. It could be cool to insert some branding into the pull action, as you mentioned. Also +1 to CJ's last suggestion about connecting the two states more. It could be cool to have that actually be the same circle that just transitions between screens. Awesome stuff!!

Love the labels. Did you try the Replay button in the bottom right hand corner instead of bottom left? Seems like a far thumb reach over there.

These are so beautiful, Caitlin! I am torn. My favorite loading animation is actually ​Into thin air​ as well. +1 to what Noah and Laura said about it. It is quite zen. Makes me want to nap. That being said, I have always wondered what a loader would look like that actually incorporated the arrow. I like ​Vanilla Mask ​because it feels like the transition between the logo and the loader is very connected. But I was sad when the arrow disappeared! Have you tried this version with the arrow chilling in the middle of the spinning circles?

Have you fleshed out the results screen yet? Would love to see what that looks like with percentages.

These are looking great! For webapp polls, we have the option to show or not show the number of people who voted. Is there a reason we can't show the percentage voted for each answer? That way it doesn't really matter how many people have voted. It seems like a lot to expect someone to opt in to a notification in order to see the results of a poll that only took one tap to complete.

I think the black border is a little bit heavy for this. Could we do a light grey like we have now? Also, it would be great to mock this up using Solid since this will be living in the webapp and will eventually use it. But for now it would be good to use Waffle buttons where we can, so they are easily replaceable when Solid comes around (like that Load More button is a Waffle button, so that's great). Additionally, is this unit translated? I would consider how that will work for the module title, especially on the vertical layout. And somet...

I am pro rule. Maybe not a full-height one though? Idk I'll stop now. LOVE RADIOS <3

I feel you on trying to consolidate buttons. The only thing I worry about is changing the photo row button right now, just because we are about to embark on a project here in Formats to do just that, and I wouldn't want to change it hastily (not that you're doing that, but it deserves some thought because it IS it's own piece of functionality). Did you try putting the mobile/desktop radios above the image in the top left corner? That way they don't have to overlap at all. I think that could work well. Also I really liked your new edit icon t...

I love the radios! So much clearer. I think your mock actually had the toggle selected/unselected state switched, which just proves how unclear that toggle is for 2 items, so I think radios are your jam here.

Great stuff! Not that this means much right now, but just throwing it out there that this module is currently being refactored in: https://buzzfeed.atlassian.net/browse/BF-20015 (and is scheduled to go to production very soon), so some of the bugginess will probably be gone. I wonder if there is a better way to coordinate redesigns with refactors, since this timing could have been different, and could have had some unfortunate overlap. But that's a different topic! I think grouping the load more + follow buttons is going to be slightly confu...

I love this too! I agree with Alice on both points. +1 for a toggle after you save the mobile crop or mobile image, so we don't have to pick one or the other to show. I also think if you upload a different mobile image, you shouldn't replace it if you change the desktop image. This is how splashmaker works too I think. We don't mess with those intentional decisions you've made. Also, though this is definitely for another day, as I just mentioned to you IRL, I see this project + the other mobile crop/alternate crop project you're doing being ...

Emily I think this is awesome. I think it's really clear. In answer to your questions, 1. I think a toggle could be cool for the subbuzz view. 2. I think the language is clear. "Replace image" is great. 3. I believe we DO have a min width and height for the mobile crop, to avoid horrible looking crops. It looks like this: http://take.ms/AQz1o 4. I don't think you need a tooltip. What would it do? Additionally, I think it makes more sense to move the save/cancel button to the bottom right of the modal, as that's how most of our SP modals are ...

I prefer #6, as the buttons are out of the way which feels good. Did you think about grouping the buttons into one module, kind of like we do in the superposter? http://design-mocks.buzzfeed.com/Screen_Shot_2015-08-10_at_2.30.24_PM.png

GIF people! Here is the first round of Superposter mocks for the Gifmaker: https://invis.io/8J3TLX1AQ Also adding them here because InVision has been causing some peeps problems today. The flow: 1. Access the gifmaker through the ​More​ menu: http://design-mocks.buzzfeed.com/gifmaker-01.png 2. OMG I can make a GIF here. Look at these fields. http://design-mocks.buzzfeed.com/gifmaker-02.png 3. I fill in some fields and then I drag my images... http://design-mocks.buzzfeed.com/gifmaker-03.png 4. And I drop them! They appear in there like littl...

That was the wording request we got from the crosswords editor. But no, nothing is final til it's final!

A few updates! Mobile: https://invis.io/B63T4782W Desktop: https://invis.io/3X3Q435F6 Adding the results screen. It's very simple for now. Showing two slightly different options. One with a yellow highlight and one without. We also adding a delete button on the mobile keyboard for easy deletion.

Awesome stuff, Jac! I like the new batch of icons. I wonder if there's a way to make the shareability icon more legible at smaller sizes: http://design-mocks.buzzfeed.com/Screen_Shot_2015-08-07_at_10.14.22_AM.png Maybe if the arrow tips were less close to each other? Maybe there could be a couple less lines or arrows?

After talking with the team, we have decided that a full results redesign is for another day, though much needed. We'd like to test adding this one line of copy to see if affects share rates at all. If not, we can push the design test further. I agree that the percentile information should be near the score, but the score is still the most important item here. Here are some variations, just using plain text: All mocks are grouped here in invision links, but also separated below. Desktop: https://invis.io/PC3SMCZMA Mobile: https://invis.io/Q9...

Cool stuff! I have thoughts! ​The toggle / links Have you thought of or tried adding the word "posts" to the toggles? Maybe you wouldn't even need the word "show" if it was just "English posts" and "All posts" ? It would also increase the width of the tap target. I think putting a lot of space in between the words and the horizontal div is a little awkward, and makes the elements look disconnected from one another. ​Bio headers On centering: I like these bio header explorations. I go back and forth on centered vs not centered and I can't dec...

Totally agree about a confusing hierarchy situation here. The most important information is probably your score first (8 out of 17) and then the percentile. The problem is that our current Results card is a jumblemush of things, and it needs an overhaul. I am hesitant to introduce something complex re: typography/color, etc in efforts to not make this Results card even more heavy than it already is. BUT that said, if we are going to do this percentile test without redesigning the card, we need to make it visible and punchy (that's where I wa...

I should have been more clear about the results card. That "eh, you could have done better" is actually a Results Title that the editor has the option to input. As is that image below. Those are optional items. Both the title and the image are not always there. Sometimes it looks like this: http://design-mocks.buzzfeed.com/Screen_Shot_2015-08-03_at_9.49.47_AM.png or here's another example: http://design-mocks.buzzfeed.com/Screen_Shot_2015-08-05_at_7.25.43_AM.png I can see it making more sense above the results title, though. Here's how that ...

+1 to what Cap said about the module separation. I also thought the Hello Kitty video was part of the NSFW module. Maybe more vertical space would help. So videos inside a module are closer together, but videos outside a module are father apart from the modules that surround it. The teal dividers actually confuse me a little. At first I thought they meant something else besides "this is a divider." The grey one you had above is more clear to me: https://buzzfeed.invisionapp.com/share/RF3MOIRGX#/screens Cap - ​does your suggestion about side ...

​John -​ yes you would have to toggle that in Superposter. We will let the editor know how to make a post for crosswords. I added a div line in between the across and down clues. https://invis.io/3X3Q435F6 I worry that adding more lines makes it very liney. I also increased the height of each column a bit.

Here's the desktop version, using a wide post format: https://invis.io/3X3Q435F6 Each one of the Across/Down divs would be scrollable in that fixed height.

​Sabrina - ​thanks for the feedback! Yes, making the clues tappable/clickable both on desktop and mobile is something we want to do right after we get the first phase out the door. Regarding pagination, do you mean for the clues?

​Swati - ​that is how this would work, except in this design the clue is below the grid: http://take.ms/6P1Db

Ha good point Alice! Here's what it would look like if the button were below the clues: https://invis.io/9F3RK3LPT This is potentially annoying only because the clues will be longer than this, so it will be far down the page. But that's probably less annoying than accidentally clicking a button you didn't mean to click.

​Caitlin​ - it's actually an option that you can select when making a poll. I believe it defaults to reordering the results based on percentage, but you can uncheck it so it doesn't reorder. I definitely think the blue outline looks more clickable than the grey, but I understand your hesitance with the image answers + blue outline. Could there be a little bit of padding inside, between the image and the blue outline? That way they wouldn't bump up against each other.

​Nicolle - ​​​the idea is that we would be disabling native keyboards altogether. That is why we are displaying our own. And I think the editor wants to explore with other grid layouts, but I don't think we are going to be able to accommodate anything wider than 15 for sure. He was talking about doing things that are smaller, maybe taller and skinnier than 15 x 15. ​Caitlin - ​Regarding future features: a timer is one of them for sure. There are others, like a "Reveal" and "Clear" buttons. I have seen that pencil button but I'm not gonna lie...

I like the idea of moving the button to the top left. Something to note: when you change the post to Custom Header mode, the sidebar hides on its own. So in that initial edit state, you do not see the sidebar. But anytime you open it back up or come back to edit the post, the sidebar would be open. So I like the idea of moving the button for sure.

1. Totally agree. I'm not really sure what the best option is because the actual subbuzz ID is only 7 characters so the input should actually be much smaller, which then feels awkward with the helper text (see mock below). 2. Added in another line of copy that explains where to get this ID.