waste.space

Interesting. Do you think its needed to see the edges of the overlay? Our overlays on website are good too. Not sure about that big Answer button. Takes too much attention.

Filip Wroblewski FAQ

asking, answering and all in-betwen

where are yall getting all this copy for the project? 👀 im hooked just reading this 🌞

Various exploration on post types

This feels too much like rep.ly IMO.

Exploring different post types and statuses in the feed

I like the second to last best. Feels most OFC.

Exploring how to show questions readers asked an author on their feed

Exploring how to display answered questions in a feed.

Roadmap WOW Book Dribbble shots. I'm not sure if it's cool to share just the illustrations? They are so cool though…

that sidebar nav on the third shot 🤩

Yesss. Third shot is best :)

Ebook navigation exploration

I think 11th (penultimate) example could work really well. makes it easy to oversee the entire thing. for footer nav I like number 4

Vivi

I also like the 11th example!

Playlists

NICE. The first one looks cool. Could we perhaps make the prompts appear below each card as an animation? and then have the takes in a popup?

Playlists

I like this. If we could reduce the number of steps into the platform (currently 5 with Explore tab) to get to a post, that would be better. Something around 3 would be ideal. For example: we could flip through the Topic card on the second shot?

Playlists iterations - Couple of different approaches. Problem is that it should be displayed to both logged in and logged out users and the difference in how landing pages looks compared to the app makes it a bit tricky. Imagine you land on the LP, you click 'explore' link and you go to one of these pages - the change in style is huge, it's not consistent. We would have to design two different versions.

I'm working on more iterations

Ask question feature.

I'd do this. I don't think it's too much text. None of the images were making sense here for me. And we need that 'Learn more' cause we're using it the FAQ and some more info that Julian wrote.

Public playlist - showing a list of Prompts with category filtering, expanding in a modal window to show answers from different authors. The category on the right is bugging me slightly.

Filip Wroblewski dribbble

Sincere product design doesn’t look like a fun new product. It’s pretty basic. And categories are too early. Thinking the mvp of this, should be light and a bit better looking similar to Askplaybook so it’s not as plain as it is currently.

I also don’t understand the main nav. Explore and playlists. Where is the other tabs of the product? Posts, followers.

And that overlay is kind of awkward as the second nav. Overall, the product design of sincere is not there yet.

Recent OFC-related post suggestions

Linking out the Explore page

For our designs, use the actual content. And keep the files up to date. The illustrations and copies are not the right ones.

For the Explore, do you think showing fake cards is actually a good move? We can drop the Starting in October text and just keep the "Explore our community and find unique perspectives on founders journeys" Explore.

Updated content (although Illustrations are as designed and present on the online version) - We've tried your approach, but that meant we lost "Learn more" linking to some more info about Sincere, and most importantly - FAQ

Manual chapter of the ebook. With beautiful illustrations from Luka

It's hard to give feedback on this without seeing the full picture. How each chapter and post look next to each other. We can do this over a call today.

web book page. thinking to have a modal to display navigation and quickly jump between chapters

Vivi

I'm liking this direction. Personally not a big fan of the underline under every title

OFC logo inside a box as well.

Linking to Explore. Goal was to link to the Explore page with something in-line with other elements but make it stand out a bit. Sharing a lot of quick iterations. My favs are the 1st and 6th ones.

Book page. Trying to keep it simple and aligned with the current designs. Width of the content had to be adjusted to retain readability for the long-form post. The rest is very simple, following structure from the Doc. I'm not sure about the top/opening part though. It's an early version and I tried to make sure there is a sign of Roadmap and OFC somewhere in the opening.

Filip Wroblewski Denoto

3 screenshots. Timeline, New Note, Adding Tags. White background. Not sure what note about "OFC Designs" meant exactly, happy to play more with it.

Filip Wroblewski Marviaca

I see some buggy keyboard stuff happening. Consider it fixed

Last look and let's lock it down. Layout ready on Webflow. Gimme a green light on copy and black video and I can push it live. https://marviaca-dev.webflow.io

for me its green🚦just waiting on any comments from Farzad (edited)

Filip Wroblewski Denoto

iOS Appstore screenshots

Would be nice to go with OFC designs. Meaning white/grey backgrounds. The create a new tag and color picker is not the same. We also don’t need to show those screens.

Landing screen, note screen and new tag screen is all we need for now. 3 screens.

Principles illustrations - do we need a new ebook cover? (edited)

I think so. I will try to redraw it in a style that matches a bit more.

Let’s finish the illustrations for all chapters then designs the cover similar to this. Me and V avatars, roadmap screenshot and OFC logo.

Updated layout - work in progress. Should we put the screns in some flat but 3d devices from Fahredin? or would that just delay things?

Filip Wroblewski Wayward

Early, quick layout exploration

Book should go before jobs. Agency and roadmap book. Two cards. And for companies, do you think we should have logos and or screenshots of the websites?

To make it more consistent I am thinking about switching the places. Task input always first. Project and Assignees below.

I think project first was a nice idea

Global Task Creation. Concerns: changing projects and assignees to be displayed as 'tags' is a big change throughout the product, do we need to revisit all places it is displayed and update their look for consistency? What about tags we could introduce in the future, aren't these too similar? Is this update a move in a right direction?

Prompts sidebar

Differences in 'Description' placement is fixed

Question should be the title. It’s too small and not visible enough otherwise. And it would be good to add a grey icon next to it to differentiate article, prompt, question.

Clicking on one of the list items would open up a modal listing all related posts from other users. Clicking on the text would start a new post.

Why is this needed?

Cues in dashboard. I'm still not a fan of the naming. Julian wants to differentiate between Questions (user-generated) and Prompts (Sincere-generated), and I agree about that premise, but I want to be very careful with how deep we go with navigation. One level is enough, and keeping the table consistent throughout pages. (edited)

Dev hand-off

Playlist. A backlog-like component hosting different post ideas. Clicking on one of the options hides the Playlist, makes the Title input active and shows the post idea below the Title.

Same component would be used for questions

We scaled it back, no other features or pages would be added in this iteration (edited)

Filip Wroblewski Slim

New feature images

In the first image, cutting the content like that is not preferred. Also, I wonder if we can do something interesting instead of taking exact UI components.

New feature images

These are still looking kind of too normal still. Specially the like minded people. Use our avatars for the profiles. And let's discuss on the designers call how else we can approach it.

For this, did you first collect inspiration and explored bunch of directions before landing on this?

After sync with the devs, finishing files for hand-off.

Super interesting. So project name and assignee would be in the first line, then task name in the second? Or Im seeing project name in the task name too. A bit confusing.

Predefined or added @users or #projects would be placed above the task. Hopefully allowing more fluid writing.

Preparing documentation for dev. I'm wondering, how do we handle text that is broken by @assignees and #projects.

We shouldn’t allow for broken text. It gets too complicated.

Exactly. That’s what we’ve been debating with Eugene. Not allowing for text being broken opens another set of challenges (as to why and when to decide the user is not longer writing a task, do we block anything except @ and # then? That’s confusing)

Backlog - right click menu

Today page - Showing tasks awaiting review (for users marked as reviewers)

Task Details Modal - Bottom details

Not this. This is same as all the other tasks managements. Too much details. And description is far away. We are here to simplify.

Task Details Modal - Various statuses

Status and mark as done should be in the same place. In progress is not needed. Backlog is not a status. Todo is not needed. Just need feedback, blocked, completed is good enough for now.

Task Creation Modal - Focusing on quick keyboard input (edited)

This is good. One thing at a time. Add to a project, or assign. One at a time. No need to show both. If @ is added, the show the list of people. If tag is added, then show the list of projects.

Task Details Modal - Various iterations (edited)

I would say none feel there yet. Listed details take too much space. Assignees and project names next to each other feels also wrong. I would explore to keep things compact, yet separated. Assignees and status next to each other make sense. Task and description close to each other. Project name somewhere in between. Perhaps above task.

Most basic, initial form of a Task Creation modal.

This is interesting. Asking people to select project name first then task name.

In-line task adding iteration - controlling input with a set of commands

For toggl, we did. Hashtag for project and @ to assign people. Time we left out. We can figure out how to trigger the time/cal.

In-line task adding iteration

In-line task adding iteration

Avoid letters and instead use symbols to trigger different actions.

agreed👌

One of the iterations, focusing on a rather non-invasive (light on dvelopment) update that would allow quickly adding all most necessary details: Task name, Plan, Assignee. You can switch between all of them quickly using [Tab].

Other updates I'm working on:

(1) Task creation modal, reached with a shortcut, globally (2) Merging checkmark and status indicators (3) Expanding ‘ready for review’ status with section on Today page if assigned to a person with that status (4) Quickly adding assignees (5) Backlog - merging tasks into one, as a checklist (6) Adding directly to backlog (7) Copy+paste into checklists (?) Expanding search overlay: (?) simple commands (open create task modal) (?) consistency update - show people same way as other search result

(edited)

Goddamn no text formatting

Best would be if we could in one line create a task, add to plan and assign.

One of the features included in Global Task Creation. Multi-selecting backlog tasks, with ability to perform bulk actions, including merging them into a new task as checklist items

I think we might just do right click menu instead of these options at the bottom because they feel so far away. Another thing we should try here is to turn checklist items into timelines.

In this round, we need to make the buttons in backlog float similar to how slack does it’s search on mobile.

Writing a post in response to a question

Questions list component - hover state

Eugene Olefir

Nice! I think a "delete" icon on the right side would be better. Can we post this to dribbble? :)

Questions list component

Question first, then handle I would say. That way, it matches the post/draft view too.

Questions list component - empty state

Sad empty state.

After successfully authorizing with Twitter, a Question Modal would pop-up

Do we use underline in roadmap anywhere?

User would have to authorize with Twitter to ask a question

Yeah, the most basic idea should do for now.

One of the ideas I'm exploring - Asking a question as a widget.

Filip Wroblewski dribbble

Cool idea. But people usually ignore it because of intercom. And you wouldn’t get a reply. The author would pick a question to write a post about. I would try something very simple at first. Close to the follow button.

Some early work-in-progress Roadmap design guide. We ditched that though (edited)

We didn’t ditch it. It’s a work in parallel. I would tag it with roadmap btw ; )

Filip Wroblewski Inen

Exploring ideas on how to show the 3 steps approach. / 3 cards, opening in a modal with more details / step by step timeline / 3D icons/illustrations / tabs

(edited)

Full focus on sincere and roadmap until we finalise the pitch for Inen I would say.

Sure, I had some free time between some QA with Andrei

Filip Wroblewski Inen

Getting rid of the collapsible containers

Using Roadmap as a base for Sincere onboarding #recycle

Are these overlays the same size as the settings overlay in Sincere? The welcome overlay seems pretty large.

Updated

Cleaning up Sincere design before moving on to onboarding

Luka created some placeholder illustrations/animations for Sincere a while back. Can we add them in? Same for Roadmap.

Although I like the cleanliness and consistency the 2 first empty states have. There is no precedent for them to clickable anywhere. That's why a button maybe needed for the task to be clear enough?

Agreed. A button is needed. Do we have a rule when to use the filled vs outlined?

Current designs for Roadmap V2 do not provide clear indication on the rule. They seem to be based on priority with Filled used as Primary action and Outlined as Secondary, but that's not really the case. There is no clear system for how and when certain buttons styles are used

Idea on how to show Backlog onboarding video, without putting two overlays next to each other or on top of each other (edited)

Empty state layout exploration.

Similar to our “create a new project” when there’s nothing to display on workspace page, we can do the same for our empty states. Which means box it in a grey background to bring some alignment to it.

For pages we can use grey boxes. For overlays and sidebars, like our backlog, we can skip the grey box.

Today page empty state + onboarding overlay

The width of the description is too big. And in an app that is all left aligned, centered feels odd.

Can you do make iterations and upload all in a screenshot so we can pick together?

Also for the iconography, we need new visuals which is what we are exploring on the branding side. Until then, you can use something grey scaled to visualize what you want to put there.

Onboarding exploration