When You’re Holding A Hammer Everything Seems Like A Nail

This post is inspired by a conversation with one of the winners of the UXBite competition, Tomek. We were talking about various wireframing tools and one of the things Tomek said caught my attention: I was trying to work with ***, but I felt like they gave me a hammer and now I’m obliged to only see nails around me. That made me thinking.

We are being limited by the names we give to specific objects and tools. We are being limited by our habits. We are being limited by habits of other people. And we are being limited by our own usual ways of using certain tools.

For example: what you can do with a hammer? First thing that comes to mind: hit the nails with it of course! What a stupid question?! But as you keep thinking you can find different ways of using a hammer. You can hit nails with it but you can take them out of wooden boards as well. Or you can kill someone with this tool. Everything depends on current needs.

I know that you may be thinking  prototyping / wireframing tool  is only for wireframing or prototyping. Period. Today I want to show you a little alternative way of using JustProto. How? See below.

Product Retrospect.

Product Retrospect is a simple yet effective way of summary after the project’s closed. You gather the whole team and discuss every pro and con that’s project related. You don’t point fingers saying “You screwed this up by not talking to me earlier” but say “This was badly executed due to lack of communication”. Sometimes when your team is spread all over the world it’s extremely difficult to do this kind of project retrospective – time difference and gathering everyone on the same page is hard. JustProto’s collaborative features come in handy in this time of need:

  • Multiple Collaborators,
  • Real-Time Collaboration,
  • Chat,
  • Project Preview with just One Link,
  • Live Preview.

How it works?

Each JustProto account have an Administrator/Owner, who can grant access to others – The Collaborators. Each Collaborator gets his unique login and password to login to the project at a certain time. Using nothing else but computer with Internet access everyone edit the same project at the same time and everyone see all changes in the real time (that’s the Real-Time Collaboration).Kinda like on Google Docs while editing the same spreadsheet or word document.

Each person choses note, tag or pin color they like and that’s that – by editing its text Collaborators – The Team add their point of view on a closed project. What is important – everyone can talk on a project Chat. Smart history will save all the conversations. This way everyone’s up to date even if the Internet connection dies: Chat history and current version of the retrospective is saved and always available online.

Any person who is not on the project team but gets the Preview Link will see the retrospective project. Let’s say your boss is not one of your project team but you’d like him to know the results of the retrospective – send him a Preview Link and that’s that!

What’s even more fun and handy and cool – if a person who get the Preview Link will open it while you and your team edit the notes, they will see everything in the real time too thanks to Realtime Preview! How the project retrospective can all look like? See here.

This example shows that you don’t ALWAYS need to stick to the tool’s purpose. Don’t be limited, try thinking of other ways you can use the tools you like : ) What it also shows is the fact that wireframing tool can be helpful not only while design happen – it can also become pretty useful after the project is done. Remember that the tool is just a hammer. You don’t need to see nails everywhere.

Case Study – Real Story, Real Users, Real Help!

Today We’d Like To Brag A Little (Humbly, Of Course) About One Of UXPin’s Great Users. We’ll Be Introducing You To SocialPaths And Their Real-Life UXPin Adventure With Interactive Wireframes!

“We are no longer able to work without UXPin…”

SocialPaths (a.k.a. The Great User)
SocialPaths is a social media agency that, in their own Creative Director Piotr Zaniewicz’s words – mainly takes care of supporting all kinds of social media marketing activities. Their house speciality is engaging social media games connected to different kinds of loyalty programs that make good use of social media’s viral nature. Among many cool projects, the team at SocialPaths have created contest apps for the Facebook page of one of the biggest trance music festivals in Europe as well as a very popular app called The Great Advice of Mieciu The Eternal Student. While their apps are mainly created for Facebook, they also build interactive tabs for websites and contests.

KISS (a.k.a. The Biggest Work-Related Headache ; )
Working with clients isn’t always a bed of roses, the SocialPaths crew can vouch for that. Putting up with those occasional clients who always know best is one of the most annoying little problems SocialPaths encounters. Of course, clients have every right to have their vision of their product realized, BUT painting that vision in the form of a working app is sooooo complex and difficult that it’s not the piece of cake that clients think it is upfront. Our main problem that we face on an everyday basis is meeting client’s high expectations and stick to the golden KISS (Keep It Simple, Stupid) rule at the same time. Sometimes it is a struggle to convince client not to interfere where we know better – says Piotr Zaniewicz, Creative Director of SocialPaths.

UXPin (a.k.a. The Solution)
After a major brainstorming session, the SocialPaths team came to a conclusion about creating wireframes and interactive prototypes that could solve this problem, so they decided to try out some of the prototyping and wireframing apps out there. One of their friends sent them an interactive prototype made with UXPin and that gave them their first glimpse of our little baby.

Piotr, Creative Director of SocialPaths talks about what they were looking for exactly – We were in great need of tool that lets you create really advanced prototypes step by step so that our team would instantly know what parameters to consider while building (i.e. size, style, layout etc.) and that lets you create prototypes that REALLY visualize all the looks and features to the client.

It’s not easy to find a tool that does both, of course, but the final thing that made UXPin their weapon of choice was its ability to do everything online, so that there is no problem with keeping the project up to date; The newest version is always available to every member of the team at any given time. Another big plus was that UXPin’s really easy to implement – there’s no bigger pain than when the learning curve steals time instead of saving it: We were afraid of the implementation of new tool, but UXPin is so easy to use that after just a little while a fully functioning prototype went to the Graphic Designer – says Piotr.

The Conclusion (a.k.a. How UXPin Helped SocialPaths)
In our team, UXPin is used mainly by Project Managers and Designers who collect feedback and make on-the-spot changes to the projects according to our client’s wishes. In the first phase of the project creation, UXPin is the link between clients and our team. After three months of using UXPin we can honestly say it really does make our job easier! Thanks to making fully interactive, clickable prototypes, we avoid misunderstandings and unnecessary changes after the implementation. Our clients and us both save a lot of time. -Piotr Zaniewicz, SocialPaths

SocialPaths case is a great example of how wireframing saves time, money and refines communication. So why haven’t YOU used interactive wireframes to help YOUR business?

Create an account today and see firsthand how UXPin helps your!

Four Ways Of Making Your Wireframing Job Easier!

Is it even possible? Well… YES! We did a lot of listening and thinking lately and now we can proudly present four new features that will make your job easier and faster! So, let’s cut the chit-chat.

Feature One – Context-Sensitive Menu and the Properties Tab

After years of using non-web-based prototyping tools such as Axure, I am accustomed to right-clicking on elements and this is one area that unfortunately the limitations of the medium created some difficulty – right clicks within Chrome, for example, result in the Chrome popup window rather than any context-sensitive menus for JustProto itself.  It wouldn’t be fair to criticism JustProto for this, however, as it’s a limitation that applies to all web-applications but I felt that because the interface is just so, well, slick, I kept forgetting that it was a web-app at all. – John Clark wrote reviewing JustProto.We took his words very seriously and decided to make a change. After all, people are creatures of habit ;) That is why, from now on, right clicking on the workbench or elements will show a brand new context-sensitive menu!

Also, when you click on any of the elements, the properties tab on the right will show up automatically. Small but significant improvement – saves two clicks before changing the element’s properties. :)

Feature Two – Grouping

You build this amazing wireframe, there’s a gallery there with 10 pictures. After you set it up, when everything’s ready, you need to resize the images to fit 4 new ones. And now what? Resize of all elements is long and can set you back. Resize one and then delete the rest and copy/paste? I don’t think so! From now on, the problem is gone. Grouping option just arrived to the scene! :) Select elements you need, group them and then resize and move everything the way you need it and how you like it. You can find the Group/Ungroup Options in the new Context-Sensitive Menu.

Feature Three – Fade To Gray

If you want to keep focused on the functionalities of the project and not on its outlook this is The Feature for you! It sometimes happens with the clients – showing them the wireframe is one endless series of questions like: “Why this button is light orange, it should be big and screaming red, and this blue line should be two pixels to the left…” And all the UX stuff is non-existing. Crashing into User Experience Iceberg happens a lot – see presentation by Trevor Van Gorp. Fade To Gray lets you… well… fade to gray everything that takes the attention away from UX and interactions of the wireframe.

Feature Four – Border Radius and Shadow

We added two new properties to the properties tab – Border Radius and Shadow. From now on, if you need shadow and rounded edges in your wireframe’s elements – no problem! Just select the element, set up shadow and border radius you want and need ET VOILA!

Also, a little tip: thanks to border radius you can now add a new shape to the wireframe – circle. Just play with the properties :)

We hope new features will help you make your work even easier and faster than before :) To try out new the new stuff login to your account or create new one.

How customer feedback helps us improve JustProto

Another e-mail from one of the users about JustProto features:
One quick question when we share a preview link with the client can I hide the left pane which shows the pages other than minimizing it.

Thanks, Rakesh

Well, a week ago we didn’t have that option.  Sharing a prototype preview link generated by our wire framing tool gave only the option to show your project with a sitemap and that sometimes could lead to tons of questions like: WHAT IS THIS PAGE I DIDNT ASK FOR THIS I AM NOT PAYING FOR THIS!!!! ;)

Now the problem is gone – you can share your wireframe link with or without the sitemap!

We love to help you make your wireframing experience better and better all the time. If any of you guys have another great idea on how to improve JustProto for you just drop us a line here!

Thank you Rakesh for the suggestion!


Check the new feature at work!

How customer helps us to improve JustProto

A while ago we got a message from one of the users. Here’s what Mark said:

I really wish that I could set the individual menu cell width for a horizontal menu so that when I am overlaying it on an existing web design that it will line up correctly with the existing menu tabs… is there any possible way to get that functionality in the software? I have been looking for this feature EVERYWHERE and nobody has it.

Well, now no one can say “nobody has it” ;)
We took Mark’s suggestion under consideration and now it’s possible to set individual height and width for the menu element. You can do it manually – just click on the menu and you’ll see highlighted sections that you can set exactly how you need them.
What seemed to be a little improvement ended up being a big programming pain but eventually, we were able to set it up for Mark and all of you!

Kudos for Buka and Dooshek for not abandoning ship mid-project!

You can all try out the improvement here!

We love to get your feedback and we take all suggestions very seriously.
If there’s anything we can improve for you – just drop us a line!

New and improved Text Editor now in JustProto!

 

As part of a  new JustProto version, we improved the text editor. Next to standard formatting options now you have available a few new ones. What options exactly? Take a look at the picture. Below the image, you’ll find a brief description of each new option.

Paste as plain text – this option helps you when when you want to add a tex full of links – without those links. While using previous  editor you had to remove all links manually and that took some time. Now just select the Paste as plain text option and paste your linked text there – after you confirm all links will be automatically removed. Simpler and faster, right? :)

Paste – sometimes you need to paste the text with links. To do so just click on Paste, copy the text there, confirm et voila!  :)

Find – sometimes it happens that the text you write is very long and you want to find one exact word in it. To find it faster use Find and type your chosen word there. It’ll be highlited in the editor window.

Find and replace – this option lets you to find an exact word and replace it with some other word chosen by you.

Clear formatting – when you highlight formated text and click this option all the formatting will be removed and set do default.

Add / remove link – this option gives you the chance to link a piece of text to another webpage somewhere on the web. Previous text editor didn’t have such an option – you had to add another text block to link it as the whole text was one big link. Now you can choose a certain part of the text and link it. Or unlink it using the Remove link option..

Select special character ­­– gives you all kinds of special characters that you can add to your text: accents, umlauts or fractions.

Login to JustProto and check out new options!

Chat or refining communication once again.

Soon JustProto’s getting new feature – chat:)

Thanks to chat all collaborators will have the chance to talk over the project in JustProto without using any other chatlike solutions. Chat history will be saved in JustProto so users gain access to conversations – even if they go out of town – directly in the web browser. Thanks to Chat option new users and clients will also have the chance to follow older conversations to check what’s going on with the project. Pretty cool, isn’t it? ;)

Prototype your world using JustProto!

Wireframe Madness! App Tourney — Round 4

JustProto wins 4th round of the Wireframe Madness App Tourney!

Why to use JustProto? (according to the tournament results)

  • Customize interface with company logo
  • Auto save
  • Nice set of social icons, iab standard ads, and iphone/ipad/android tools
  • Collaboration and co-edit ability
  • Allows Components page templates
  • Simple prototyping ability
  • Rulers and grid with pixel increments
  • Easy edit of size, shape, color, border, etc of any item through properties tab

Wish us luck in next rounds! ;)

See the Tourney.

Lock it! New feature allowing locking and unlocking elements.

How many times were you annoyed by the fact your perfectly placed elements moved accidentally? Or the cat sat on the keyboard and your work just went to hell? If that made you “go bananas” – here’s the solution: we present new
JustProto element property – Lock/Unlock!

From now on you can block certain elements using the Lock/Unlock option in the top bar over your workbench.

Blocked elements can’t be added to selection or moved. If you press delete or want to cut blocked elements you’ll be asked for confirmation. You can still copy blocked elements – all the properties will remain the same for both elements, except the copy won’t be blocked.

Every blocked element will have a tooltip with the name of the element and a small padlock. You may find it useful, especially while making more complex prototypes.

Try it on your prototypes!

Components – new JustProto feature!

Here’s another great news for JustProto users. Long-awaited feature is now done and ready to be used.

Easily created components are a great tool for everyone who have problem with applying the same, multiple elements on various pages of prototype. They’re piece of cake to use – just click Add like you do it adding pages, and tick the Component option. Now create your Component with elements and when you’re done – drag&drop it on your pages. It’s that simple.

All changes that you apply on Components are automaticly shown on all your pages, so you don’t need to worry about changing properites of similar elements on every single page. That’s gonna significantly speed up the work, especially while making advanced prototypes.

See for yourself how easy is creating, using and changing Components and then try it on your prototype!

Building strategy while designing

IDEO is one of the largest and most important American design and consulting companies. Starting from the industrial design and interaction design (one of the founders was Bill Modgidge) IDEO has extended its consulting services and fell under strategic competence of consulting companies like McKinsey.

What differs IDEO from the others is approach based on using the same tools while designing products, such as user’s observation,analysis of use context, prototyping and iterative process for developing business strategy and marketing.
How design thinking can help building strategy?

Typical tools for strategists such as Excel spreadsheets and PowerPoint slides don’t favor creativity and good communication (as we know, PowerPoint is an evil ;) – seriously, it was responsible for the disaster of the space shuttle Columbia and its use has been banned by NASA.) You can’t properly rethink the whole project if it’s vision is contained in short passwords. PowerPoint slides are boring, and words can be understood differently. Strategy formulated and presented in this way, is trapped in ambiguous abstractions, difficult to clarify and evaluate.

According to IDEO, preparing strategic prototypes is much better solution. Prototype is not the right project, but it is only the presentation of vision engaging emotions and imagination (built to think). The human mind needs to confront some real object or a story to develop an idea and assess its strengths and weaknesses. Prototype can be a mockup of the product, it also can be a comic strip or film, which shows the use of the service in narrative form. An example of such prototype is concept presentation of future web browser Aurora, prepared by Adaptive Path, another company which integrates designing with strategic consulting.

In his article “Strategy by Design” the head of IDEO, Tim Brow, outlines the elements of creating a strategy. At the beginning: hit the Streets. This process of creating a strategy needs to be “human-centered”. To gather interesting insights it’s important to spend some time with consumers, watching their behaviors, personally test the products and services, get know the „user-experience” on which we can often build the whole strategy.

The next step is prototyping:

Design thinking is by nature a process of prototyping. When you are on a promising idea, build it. The prototype is usually a drawing, model, or a video describing the product, system or service. We build these models very fast, they are strict and not very elegant, but they work. The aim is not to create approximations of the finished product, or process, the aim is to gather feedback that will help us resolve the problem. In a sense, we build to think.

When you start rapidly prototype, you begin to build a strategy. Doing this at very beginning of the cycle of innovation, allows you to release the most precious things in your organization: human intuition. When you sit down with team of experienced employees and show them prototypes of products and services that you want to implement within two years, you will learn whether they have an intuitive feeling that you are going in the right direction. It is enlightening trial-and-error method: Observe the world, pattern recognition and behavior, generate ideas, collect feedback, repeat the process and improve project until you are going to be ready to put product on the market.

Prototype tells the story. Prototyping is simultaneously an evaluation process – it generates feedback, which allows you to put the amendments on the fly – and is the process of telling stories. This is the way of visual presentation and experiencing every strategy. – Tim Brown, CEO of IDEO.

JustProto would like to send special thanks to Maciej Lipiec, who gave authorization for publishing this article. You can find original version of this post written by Maciej on his User Experience Blog – http://uxdesign.pl/

Let's talk about prototyping

Let’s talk about prototyping

While working as a programmer many times I had to guess what client thinks about. Unfortunately, the specification does not reflect the reality of how the functions should work. This causes lots of problems. First of all, it triggers multiple adjustments, as the customer’s vision is completely different from the vision of the developer.

Fortunately there is a way to improve creating applications and avoid unnecessary (and sometimes time-consuming) amendments. This method is called prototyping.

Prototypes enable showing a vision of how various features and the whole application will look like. They allow the client to set everything as he wants it in the initial phase, and facilitate the subsequent stages of the creation of the site.

I had the opportunity to create a service using the guidelines provided in the prototype. I must admit that supplied the prototype has proved extremely useful and significantly accelerated creation of applications for a simple reason – no unnecessary questions were asked as well as multiple amendments were avoided.

As prototypes are so useful what are the ways of their creation? There are several methods, each radically different from another. Each has some advantages and disadvantages, will take a look at them.

PowerPoint – the use of presentation.

It was one of methods used at our company.

The service sketch is created in an application for creating presentations. It’s strange, but effective. It turns out that a lot of people use this prototyping method.

You can guess the process of creating a prototype in such application looks like. Despite its apparent simplicity and ease of use this method has a significant disadvantage – every time you need to send the resulting file to the client so that they can watch it. Moreover if the prototype needs amendments you must repeat the entire cycle.

Sheet of paper – the traditional way.

IMHO the most funny way to do it. The entire prototype is sketched on a sheet(s) of paper. Do I need to explain how this method seems to be ridiculous for several reasons? The smallest error in the prototype requires recreating it anew. On top of that, sending such a model to a client is quite problem.

Surprisingly Corel used to create paper prototypes, which later were used to test usability. On YouTube you can find a video presenting such a test. I believe that after watching this film there’s no need to mention the deficiencies of such method.

JustProto.com – a new approach to prototyping!

I am proud to introduce on my blog the product in creation of which I had the opportunity to participate. I am talking about justproto.com – tool for online prototyping.

What are the main advantages of our solution? First of all: simplicity. Everything we do is simple because we do not want our users to spend hours learning our tool. Everything has to be intuitive no time lost on getting to know the new environment.

What’s more? Prototypes developed in JustProto are interactive. This means that you can create prototype with dynamic links between the pages.

The online prototype it is available from everywhere, without installing any additional applications.

One of the most important advantages is the creating of a online HTML prototype preview. You simply give your client the link and he will be able to keep track of changes made in the prototype just with refreshing the screen.

If you are interested in prototypes try JustProto now!

1.5 JustProto Version is now working!

Dear JustProto fans and users!

It’s been a while since our last post. We sincerely apologize for this, but we were extremely loaded with lots of running projects and what’s the most important – improving JustProto.

Today, we release a new, upgraded 1.5 JustProto version with several remarkable changes.

– We made JustProto application significantly faster – you can especially notice that, while composing project full to the brim with many different elements. It’s beceause we used mootools 1.22 instead of mootools 1.11. Now, your browser is immortal!:)

Enhanced Page Navigator

How was it previously?
when you duplicated a page it was at the end of pages list.

1pagenavig-jakbylo2

And now?
duplicated page appears under the original one.

1pagenavig-jakjest1

– Now you can easily add a color to swatch. You can also set any color using RGB (hex) code.

2kolory-jakjest1

Multiselection is improved!
Selected items can be moved all together!
2zaznaczenie2
– We finally removed annoying master bug: one of our users has reported that while switching between the masters without saving page, the master didn’t appear. Now, everything works fine.

Hope you will find those changes usefull!

We are optimistically looking forward to another upgrades! Our wish list contains:
exporting projects to zip archive
increasing number of ready-to-use elements!
sticky notes

Stay tuned!

This is JustProto speaking: "How can I help you?"

JustProto – create image of your ideas!

JustProto is a very smart application for creating and managing website prototypes. Available on-line interface allows you multilateral cooperation. It also facilitates the communication process of those who are involved in designing act.

JustProto is a modern alternative for archaic methods such as ‘pen & paper’.

This application is dedicated to everyone, who ever faced the problems with visualization all kinds of ideas while making interfaces, sites or portals. Now your idea can be realistic and the process of its creation will be much shorter. You’ll save time and money while increasing the satisfaction of people involved in the project.
Easy-going interface and tools adapted to your needs give you a perfect chance of making easy prototypes.What’s more JustProto gives you ability to create more complex forms (such as social networking portals ).
If you already want to try our 30-day free trial, please visit JustProto.com and select suitable plan.

JustProto – missing piece in the process of communication

The process of creating and designing all kinds of websites, portals and interfaces is a continuous process of communication between the client and contractor. Many people such as graphic designers, project managers, programmers, art directors  are involved in this process. The same as you, they try to meet customer requirements. We do realise that sometimes it can be extremely difficult to communicate with so many people at once.

In order to meet the basic needs we created JustProto, which strongly improves the process of communication. As a result, your project is well prepared and the flow of information is much better.

JustProto gives You opportunity to visualize functionality of Your application before it eventually sees its daylight, it minimizes the amount of disruptive changes usually appearing after implementation.
Forget about heavy files sent by e-mail, arguments with clients and sleepless nights. Now, the client will show you howhis idea should work and look! JustProto, it’s so simple!