Flow Easily
Creating Flowcharts from Screenshots
Twitter's help instructions only uses text.
There are inline icons but you still need to find it on your phone.
Flow Easily is all about making screen flows more accessible.
Why not try and revamp these instructions with some screenshots?
So I did! Here's the result:
https://www.floweasily.com/examples/twitter-support
I upgraded the experience of Twitter's "HowTo" pages just by adding some simple screen flows.
It was a real fun activity. I recorded a quick behind the scenes vid to show my process:
https://youtu.be/3JvM0Gzqub4
Learnings:
- Pairing up text with visuals really helps you understand the flow being described.
- White backgrounds look too vanilla.
- Added generated background to match Twitter branding.
- Clicking lots when adding titles disrupts my flow
- Pressing enter now saves and navigates directly to edit the next element.
Philosophical point:
The more I use FlowEasily for various flowcharts for myself, the more value it will have created.
Value creation doesn't need to start after the threshold of finding first users.
It can start with ME.
Mindblown!
TL;DR;
- Prototype now available: https://www.floweasily.com/
- Would love feedback.
After spending the last 3 weeks learning the "I cans" and "I cannots" of web development, I've hacked together the first working prototype of Flow Easily! 🎉
Here, I've put into practice Step 1 of Josh Kaufmann's Personal MBA: Value creation.
Every business needs to create some value.
Flow Easily's goal is to save your time when creating flow diagrams.
Every minute I save for you is a win.
Right now, this is just an MVP for the world to try out.
I'd love to get feedback from you:
- How easy to use it is?
- What you'd like to use it for?
- How can I tailor this tool to make your life even MORE easier?
TL;DR;
I'm not here to waste your attention with unnecessary updates.
I will spool more development per post to make your reading time more worthwhile.
If you were building something yourself in public, it is really difficult to switch between your marketing mode and your maker mode.
A lot of the advice that I’ve been seeing around the internet, especially from Y Combinator and MicroConf videos, is to do your marketing alongside your development.
FlowEasily is just a side project for me and I work on it for a couple of hours a day after the kids go to sleep.
Because time allocation is a zero sum game, I have to prioritise between writing a post about the project or spending time to build an extra feature.
Coding is not a task that you can apportion small blocks of time to do just like writing an email. It takes time to recontextualize into the code base and load up the mental model into your head.
Only then, am I able to make progress in the code.
This means my thoughts of creating daily or two-daily updates won't be as effective because there's not enough development to warrant your attention.
I would much rather post once a week with more meaningful development updates and thoughts than drip feeding minor thoughts and tweaks.
Obviously if I've hit a milestone in my progress, I will do a write up for you all.
The benefit of working on projects full-time means that more changes can be done within a 24-hour window.
Unfortunately I do not have that luxury at the moment so the smartest use of my marketing time allocation is to spool together enough development to warrant your reading.
This will preserve your limited attention and avoid time sinks for myself in order to get the project up and running more quickly. Win-Win!
One day I'd like to be working on these projects full-time.
If you're feeling generous and want to help bring that day closer to reality, consider buying me a coffee ☕ .
https://www.buymeacoffee.com/dougy
Or if you prefer quid pro quo, I've packaged FlowEasily's value proposition into a Fiverr service so you get something back:
https://www.fiverr.com/share/BWdGoz
There is a tendency to choose form over function.
People love and expect "pretty" websites.
Spent the last few days working out CSS, SASS, Tailwind, Bootstrap.
Even though I have significantly improved my web development skills from getting exposed to these technologies, I am still no closer to the finish line.
Web development is not my forte so I spent money on a template to help me along.
It looked really nice but was using React 16.
I kept it going, building an interface to drag and drop files, modify labels.
However, there came a point where integration with a drawing library was incompatible with what I bought.
Lots of hours converting React 16 to 17. And even then it didn't work.
Screw it. Start again and make sure I get to a product.
Now using React 18 and Bootstrap.
It might look "default", but it's better than fluffing around and sinking time into unnecessary design.
I figured, the sooner I can get it working, the sooner I can get feedback from potential users.
A haiku origin story:
Arrange screen flow. Nice!
Now let's link up the arrows.
Missed a branch. Damn.
When you spend more time on alignment and positioning of your screen flow than the actual communication, you know something's wrong.
There's so many easy tools online where they compress your images, convert one file format to another.
Why can't I just "give you some screen shots" and you "give me a screen flow"?
Comment