Some quick, early explorations that went in a weird direction

Which page is this? It's hard to comment on the design without seeing the overview. Meaning all the main pages and subpages in a view then naming each page so its easy to see the relationship between them (alignments and misalignments)

A slightly different take (edited)

Focus mode

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.

asking, answering and all in-betwen

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

experimenting volumetric screen light

Very cool. Perhaps we can do one with smoke behind it?

Roast my designs. I am working on getting the Sincere Voices lead magnet live and came up with 4 options. The second would require Luka's brilliant skills to visualize a road of sorts with 7 steps.

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
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.

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.

A4 pdf design for Frameworks. I tried to mirror the font size proportions and feel from the web experience. To account for different reading experience I designed some elements such as table of contents and page markers differently.

Yet to add circled numbers for lists and do some proofreading.

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.

daily render

Is it possible to select 3 from here to schedule on Twitter?

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

I'm liking this direction. Personally not a big fan of the underline under every title
OFC logo inside a box as well.

Versions of the packaging we picked on our designer's call. First one won by unanimous decision. 🥊

Exploring designs for the framework pdf. Trying some things but once we decide the direction with Filip we make it as unified as possible. For cover I suggest something similar to what we had for 10 steps.

So far I like it
We can skip the pdf version for now. The consistency between two books is required. Let’s see what we get from the web version and how we can translate it to PDF if need be.

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.

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

I see some buggy keyboard stuff happening. Consider it fixed

thicker lines and type pairing attempt.

Vectorized hand writing for for a snack brand.

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)

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.

first drafts

Pages with empty states and cards

New grid. Much. Better. 🤩

-How to progress:  (Guard momentum over small wins.)

-How to synchronise (Members)

I think we should change the projects grid. I'll play around with that.

that Vital render 🤤

Calibrated Expectations (align on expectations) and Prioritised Direction (align on direction)

another iteration

Looking good. We need to come up with a new icon for the notification. And for the card titles, is there anything else we can try?

For the notification pop up, I think it would be good to have it displayed at the bottom of the screen, white background. Not custom looking.

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

Uncensored Journey (align on context) Previously only managers knew what’s next. And the agency founder knew what to do. Today with Roadmap, each member, regardless of role, has equal access to all information needed to progress on their work. Independently.

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.

slack

New message button flow. Empty notification screen. Channel card view. Dm card view.

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)

playing around with QR Code placement

First attempt at simplifying the packaging. Top and bottom side mirror each other and what used to be on the back is divided in two parts and placed on the sides. I think this is balanced for now, but we can think if there is some additional info to present to balance this out.

For the bottom, it would be nice to add QR code in center only. For the website.

Slack. First touch

illustration for Slim. Focus 🎯

Read the titles and descriptions so you fully understand what needs to be visualized. I don’t think we have focus on slim.
This would go under the title of prioritising your efforts and focusing on accounts with highest return. Its an illustration of hitting your most important target all the time.

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)

Renklar marketing page WIP. Added copy and trying to see how images work together. I think more spaced out margins around body will help with making site feel less zoomed in.

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?

3d settings exploration for Renklar.

I would say a realistic environment is definitely preferred for this type of products. And because of the minimal look of it, a bathroom like environment/tiles would be nice to see.

But following our design process, we need to collect inspiration first, group similar approaches, align, then execute on a few direction.

YZY Player process

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.

Passport 3D scene (glass & light improved)

The glass is so much better. The background color is ok. I would go a bit darker.

beautiful reactions

Loving it.

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)

Custom type/hand-lettering exploration for BR

instagram

What do you think? The different angles is a bit odd. Specially the video app. Also the colors don’t look mature. The green, purple and red needs to go away.

Can you make a feed of the floating devices. And see how those angles would look.

big scenes

Trues background needs to be dark brown or dark grey. Red feels too much. And The enterprise video app, the purple gradient background takes the realistic feeling we are trying to achieve away.

big scenes

Some of these colors are good but some are not. Covertree is good. Digital pass is not. Vfs is alright. Too far away to see the interface.

Type exploration for BR. I think this approach works well with texture. Like the embroidery on reference image or some other interesting material.

Can you share all iterations of BR type exploration?
No curves btw. It shouldn’t look friendly. The one on above is better.

Interactive elements for Vital marketing page. Eugene whatchu think?

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.

type exploration based on some graffiti images I found. Quite liking this one

It’s nice. I like it too. The images I sent on slack in the BR channel, can we make one in that direction too?
alright. I will be going for "saint laurent" direction next

Sonatic zoomed out (edited)

Can the surface cover the entire image?

vital:dark mode

Do you think the white buttons should be light grey instead similar to Day button?

vfs

Writing a post in response to a question

Dark mode

Very cool. Have you shared these with the team?

Questions list component - hover state

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.

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.

Covertree 3Dscene test

another one

White background feels more in line with the rest of the brand for me.

defo the white bg 👌 maybe the logo should be be on top? similar to how it is on https://lifetizr-lp.webflow.io

Which is better or are they both bad?

I like the bottom one. Logo on its own. No logotype next to it.

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's Roadmap shots. Good for posting?

Rebilla. Good for posting?

They look great

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

passport app- 3d scene test

wider letters and set in a single line 📏

Getting rid of the collapsible containers

Impower 3d scene

Getting there. Can you post the ones created so far here as well?

making A,N,K a bit wider

I would make them wider. And can you put the entire name in one line so we can see how it looks?

Love how it’s coming along.

Pocket-knife like carving typography for BR 🔪

Super cool. Can you make K and N a bit wider?

preparing files for print 🖨

scene exploring

Very interesting but too wild. I think these scenes need to make sense for the purpose the products were designed. A floating device on a rock doesn't make much sense.
What do you think?

rebilla

Looking good. Then we have all we need for the case study right?

vfs

We can skip showing the websites. For VFS, we are just going to show the product. So a couple of screens there will do.

vfs

Anything we can do to improve the look of these orange buttons?

trying out a sans serif + hand scribble

Cool but we are getting off track. Can we focus on the simplest execution of the straight line typography for the logo for now so we have it done?

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.

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.

covertree

For all of our case studies, we need to follow the same pattern and order. Product first. Web. Tablet, mobile. And at last design system. Maybe a branding and website at the end.

We also can use a title to break sections apart perhaps. But that really depends on how you would show it.

And should we use the devices we’ve created to show the work?

covertree

I think we only use the small boxes for mobile and branding. Showing half of web is not a good use of it.

TRUE

A good grid for projects is needed. A mix of large box with two boxes would be nice to see. Is it odd that the width of the design system shot and iPad are different?

TRUE

Only one text per project. The rest are images.

impower

Main focus on the product. So more images of the product and design system than branding and website.
Product first, at the bottom, we can include branding a bit. Just a slide.

Vital scene test

covertree case

Should we use devices for our mock-ups or just place them like these? And I would place the screens next to each other instead of over each other.

Resident blackletter

Better. But too detailed. Specially in K. And N should be capital. This looks too much metal band than clothing line I think. I would just go simple lines and keep this lettering design for something else in the future.
keeping this for our 3drops metal band then, hehe

what do you think now?

Added some projects icon

How about we make the entire floor, in grid? That way the scene is a bit more connected to the brand.

Vital test render

So much better than the previous one with stone and gold. How about we place the icons we created in 3D in the same angle as the phones, and place them around them?
yes it might look good too, just afraid of the image gets load too much if we put all the icons in there

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.

Moodboard for scenes

Maybe we should have a theme going on. I was previously not a fan of putting devices on shelves and objects around them. How do you feel about realistic scenes? Like just placing it in a realistic scene like this one: https://wearecollins.imgix.net/uploads/RH_COLLINS_Web_15.png?auto=format%2Ccompress&dpr=3&fit=max&q=90&w=400

hendlettering for BR. still a long way to go to make it more unified

Good progress. I would make it a bit pointy so it doesn’t look like toothpaste cream. And make it lean to the left instead of right.
good call. working on something like this currently and it looks promising

Onboarding exploration

Looking good. There won’t be any plans to choose from. We handle that in the background. So once they get access to the product, they will see a personalized plan created for them.

Also easy on shadows. ;) One layer is enough. Similar to our existing overlays. Keep in mind, a simple change in an components, means the change will applied to all places the component is used. We should be careful of these changes and only make them if it’s necessary.

trying out some lettering for BR.

Looks cool. Keen to see the whole name in this typeface. Is it custom?
its custom. a drawing basically. will update when i have the whole thing

Trying to make quick 3D sketches

Branding exploration

Branding exploration to give each OFC product a unique voice. Do colours compliments the product or would you change them?

Colors are fine, but the main challenge here is to create a visual language that we can use to visualise complex concepts. Example: the difference between busy work vs meaningful work which means less tasks but more important tasks that take us closer to the next step. So let's see some examples of how we can use this style to explain a few of our principles.

Picking colors and creating assets for the Note app. Copy in progress.

accent colour reminds me of sincere a bit. how to they looks side by side?

Website content updates

3d previews for Vital

I think the logo should also be created in 3D and a solid white background color make the product designs to not stand out as much. Can we experiment with new background treatments like other colors, or perhaps design a scene that is relevant to the product?

coming together

👨🏻‍💻

WIP :shushing_face:

dondadondadondadondadonda🤪

eat → sleep → repeat 🔁

Amazing Stuff

feature cards