wdyt?

I've spent 3 days to create lots of new premades out of Google's material design components site. I wanted to recreate it in wdyt? so everyone can use it and build mockups easily.

I managed to create around 20 of them before I dropped my mouse and understood - we're not there yet.

Don't get me wrong, the outcome was super amazing and sharp. I compared previous mockups with new ones and it seems that the precision and icons made a HUGE difference. But the way to get to these mockups is far from being "the fastest way". I've spotted super annoying bugs ad was missing lots of things that could make my life easier (auto-aligning or guidelines for example).

With that experience, I've collected around 20 additions and changes that should make wdyt? way better to use.

But we'll be smarter in a few weeks :)

A lot of new stuff was added to wdyt? including fixing the title which stated "wdty?" :)))))))

• Users can now add over 1100 icons (instead of creating them from scratch).
• We've added the ability to move items on the canvas using the keyboard arrows, which made things far more precise
• Ctrl+Z!!! Now it's safer to make mistakes
• The line tool now has line 3 types of width (important for the times where you want to separate parts of a mockup)
• CTRL+A was added for selecting all elements on the canvas
• Lots of bug fixes & additions to the right-click-menu
• And last, the ideas-folder. Now when users generate a URL, it can be kept in a dedicated area for a later visit. They can name it or delete it.

Now it's time to start creating lots of lots of premades!

That was the first time I've shown wdyt? to people (colleagues product managers). They didn't know I'm working on this project and it was exciting to hear and see their reactions.

I can't say people went crazy but they were most impressed by the fact that I've built such a thing and gave me great feedback that I could take forward.

The bottom line of this meeting was that the product is not yet ready to replace existing tools out there and there is more work to do.

After using beta #1 for a while, few additions were needed to shape (haha) things up.

• We've added premades URLs so premades could be easily shared over the web without the need to search them right on site.
• We removed support from mobile (it's a nightmare to draw things on mobile) and added a mobile view so users could see the drawing without the ability to manipulate it.
• A new right-click-menu was added to the canvas that allows users to send feedback.
• Shapes can now have fill and their color can be switched from yellow to black.
• Squares could also have round corners
• We are now supporting zoom in/out which makes the canvas even bigger!
• Copy/paste/cut are now supported
• We've added a way to change the Z-order of shapes and make one to be on top or below others.
• A ew ability to search for premades in the premades folder

Beta #2 is done. Now it's time to show it to the first outsiders and gather some feedback!

Beta #1 brought a dark and awesome look. It actually looks like a real product!

We've shaped things up and added:

• Registration process - For people who wanted to create premades and have their used premades saved in a dedicated area.
• There was a first experience flow. Simple and nice for newcomers.
• Shapes snapped to the grid.
• Users could draw new types of shapes - Square, circle, triangle, line, arrow, and text.
• All shapes had dedicated right-click-menu

And lots of new tiny things that made the whole thing much better than the POC.

It is done!

The 3rd part of the POC went live and with this update, you could group any squares you drew and group them as a new premade. This premade can be added to any canvas via the premades folder by any user out there.

At this point, the wdyt? POC has the ability to draw, share, and assemble new drawing out of others' creations.

Now we just need to make it look good and we're ready to go!

Black squares can be now shared!

On that day, we've added the ability to click on a big blue button at the corner of the screen and it would generate a unique URL that went into the clipboard. Anyone could use this link and see the drawing that you've just made.

The first alpha proof of concept was done.

On this day we had a live weird URL that presented a white canvas and the magical ability to draw black squares (and maybe group them?). You could move them around, rotate and resize.

I was sure that there it is - we can draw and we need nothing more for the drawing part (other than adding a few more shapes). Oh boy, how wrong was I...

I had the general idea of wdyt? for quite a while before this date but on that day I told my fellow dev friend that I want to start building it. These were my exact words:

"I was thinking about taking the concept of GitHub and apply it to the UX/UI world.

I can imagine working on a canvas, drawing shapes, grouping shapes into components where each component can be shared with anyone in the world. People can take components and make them better for the rest of the community.

Components build entire screens and screens can be flows. Screens can be shared, flows can be shared. Everything can be branched and be better.
So if I'm building a registration flow, I can use an existing that was described from A to Z by lots of people. I can fork it, and tweak it to my own needs."