Agile Interactive Designs using Confluence and Protoshare

Its often said that, the well captured requirements are key to a successful project. And at the same time we see business analysts struggling to capture the requirements though they have understood them perfectly! Expressing the requirements is what becomes important when we start thinking of converting requirements into products/ services. Well, the requirements are the basis for building any project but just imagine a fiasco if those requirements are not translated to the developers as required.

Often the requirements are simply handed over to the development teams for further implementation without being processed or thought upon. This is scary, as this keeps loop holes in the product building as the developers are on their own to perceive the requirement.

In my previous blog, Agile Requirements Management, I had emphasized on the fact that capturing & understanding of the requirements is the first and foremost thing.

Lets us now have look at such similar challenges faced by product developers. Usually, it is less likely that the customer directly plays the role of Product Owner for any organization. Specially for product companies, large number of customers need to be dealt with. This responsibility of collecting requirements from various media like surveys, actual discussions with varied customers etc. is carried by the Product Owner in the organization. Product owner has to come up with the optimum solution/ product features so as to satisfy maximum percentage of customers.

This additional layer in the communication of requirements has a key role to play. By using conventional methods like various SDLC documents, the business analyst or the product owner can be successful up to some extent to convey the exact requirements of the customer to developers. However, in today’s fast pace world, where technology & customer demands are so dynamic it would be silly to rely only on frozen documents to help understand the requirements, specially when developing user interfaces. It is always good to have a supporting document or a mock-up along with the requirements documents. In UI related projects, the pictures/ mock-up can do the maximum talking, after all “A picture is better than a thousand words!”

It is strongly recommended to take help interactive mock-ups to capture needs, specially in UI development projects, as it is easier to explain flow you have in mind. Lot of software projects fail as interactive element is not conveyed & team ended up with different implementation than desired. Similar to the way those 6 blind men failed to describe the boy – How really the elephant was? Every one of them had perceived the elephant and visualized in their mind. So did the boy and outcome wasn’t as expected.

As mentioned earlier, attaining agility, for Portfolio Management, can certainly make a Portfolio manager’s life easier. It can also ensure better visibility and control over the proposal and implementation of the various features/ products. The various offerings of JIRA and confluence make it possible to sail smoothly through Portfolio Management. Being Portfolio Manager, it is important to keep the stakeholders updated about the happenings and also to keep a keen tabs on the teams one is working with. The dynamism from the stakeholders has to be well absorbed by the working teams in organization. And to ensure this, JIRA Agile can help, because it enables your organization respond to change. It helps the higher management in organization when applied at correct scope.

Though each was partly in the right, all were in the wrong!

Somewhat same happens when the software development of user interface are taken up for implementation. A lot of rounds of reviews and misunderstanding about the actual GUI design. For instance, while designing a login page, there can be numerous approaches and designs people can come up with. However, a small mock-up helps get everyone involved, on the same page.

So, its not enough to just understand the requirements, expressing them rightly and effectively to create a strong basis of discussion with development team is the crucial part. Now how do we do it in this Agile world, where things are moving at such pace?

But of course, it is not possible to only quote your requirement using pictures, you need words too! Then how do we plan to combine the well written requirement with the perfectly supporting design or a picture or a mock-up?

Confluence being the most handy tool from Atlassian for maintaining your documents, can be used to capture the requirements. However, we still need to think about expressing the UI design part.

Here, tools like Protoshare come to rescue! ProtoShare is a collaborative software tool from Site9, Inc. used for creating, reviewing, and refining interactive website, mobile and web application prototypes. Its fast and loaded with features to help a designer communicate correctly with the development team, through the designs and mock-ups.

For years, prototyping has been the strategy to avoid rework and understand the customer in better way, however, Agile advises to skip Prototyping and start building. And tools like Protoshare surely boost our confidence in believing that! With very easy offerings like drag drop interface, set of pre-build templates make it faster to come up with design or mock-ups rather than using the conventional “coding a prototype” method.

Protoshare gives an edge to “UI Prototyping” over conventional methods. When you invest time building and testing a coded prototype, it gets harder and harder to turn the directions in 180 degrees or may be step back and take a completely brand new approach. And in the process we might exhaust ourselves and end up going with the same code (irrespective of the actual requirement), just in order to save the development efforts. This is ironic definitely, we put unnecessary coding efforts to save unnecessary coding efforts!

Projects that involve more GUI designing (website designing, portal designing etc.) and where there are too many stake holders for one decision, more collaborations and quick decisions in terms of GUI designing are required. Along with superb editor for creating mock-ups and UI designs, Protoshare can help collaborate and arrive at conclusion.

Designing of any development activity is of utmost important so as to have directed and well planned development/ implementation. Moreover, it is possible that prototyping involves only few people for review and approval process. Whereas on the other hand, Protoshare gives us the facility to involve different stake holders of the requirement (at various stages of requirement) and they can participate in the decision about the implementations of the requirements.

Does this mean we completely give up on Prototyping? Not really! We would need prototyping in some or the other way, but I would like to stress upon the need of some “Paperwork” before we start coding, even for prototyping. This “Paperwork” can be easily and effectively carried out by Protoshare.

We may underrate Protoshare as merely a mock-up tool, but before jumping to any conclusion let us have a look what Protoshare has to offer.

Easy integration with Confluence

Protoshare is a fantastic add-on for Atlassian confluence. This macro facilitates us to add designs inside the confluence page by simply embedding it with the page.

Enriched library of stencils & widgets

Protoshare has a variety of widgets and stencils including iOS, Android, Windows Phone, to choose from and start developing a mock-up

The moment you visualize your requirements, you can quickly create a visual representation of a user story. As simple as you may start sketching with a pencil in your hand, but the components are handy and can be dragged dropped to your mock-up!

Interactive mock-ups

Use your own images or extracts from existing websites
Users can also use their own images to create clickable comps or frame in existing websites and layer functionality and commentary right on top of them.

This gives an altogether new approach to your mock-up by making it more realistic and dynamic as well as interactive, and the receiver will be able to connect to your design more quickly.

Create downloadable mock-ups or simply export

Fun part here is the availability of the mock up anywhere anytime! The designs are saved with “.html” extension, making them accessible from all web browsers.

You can also easily export your highly interactive prototype to web.

Integration with various Agile tools and wide platform support

Protoshare supports wide variety of platforms. And when we are talking about Agility, Protoshare seamlessly fits on to Agile tools, specifically Atlassian tools like JIRA, confluence. It also integrates with Google drive.

In an organization, the customer had planned a marketing initiative and wanted to publicize the same through various websites. However, the internal stakeholders could not come to an agreement about the promotional design to be put on websites. Many e-mails flew and discussions were held. But at every discussion went non-conclusive as there was no consolidated place where all of them could understand the exact requirements expressed by the business owner. They engaged the development team even to develop small prototypes to be shown to the business owner, however, business owner wasn’t happy much about any of them. However, the development team had already invested considerable amount of efforts in the prototyping itself! There was a point that stakeholders started feeling that they might exhaust the budget of the project in just completing prototypes. And I am not really sure whether they could promote the right thing or did they compromise with whatever was developed, just as to complete the project.

Scary, isn’t it? Protoshare would have done wonders here. With all the above features and offerings, it becomes easy for anyone to build the mock-ups, using various stencils and widgets. Making mock-ups interactive definitely retains the business owners’ of stakeholders’ interest, leading to quick decisions and quick development.