It’s a well known fact that an inspiring user experience is built on great product, which requires both intuitive design and quality code. While these two parts of product development have traditionally been treated as separate parts of a whole process, the modern era of software development requires more collaboration, iteration, and innovation than ever before.
In this article we’ll see how to close the gap between design and engineering, and make it easier for them to work together.
Foundations to Successful Design Implementation
Design implementation should be without the headaches. Everyone on the team should be on the same page for every design change.
Designer-Developer Collaboration
Collaboration between designers and developers on any design project is essential for creating a beautiful, yet functional design. The question really starts to become less about why designers and developers should work together, but how they can better work and understand the responsibilities of the other.
Perhaps, the most important question to ask – is what we’re designing being developed? Developers often don’t have enough detailed information about the visual design, which causes visual inconsistencies and developer’s best guesses.
For example, a designer might have a very specific reason why the text is bold in one area or an image isn’t exactly centered on a screen. Developers don’t necessarily understand the reason and might overlook those details if they just eyeball the design.
Fast Reaction on Frequently Updated Requirements
Throughout any design process, there’s an extensive amount of deliverables that project managers share with the client.
When things inevitably need to change, all design changes need to be re-communicated back to developers. The back and forth game can be seemingly endless changes, feedback, and even the smallest edits can be time consuming.
However, we must be able to respond quickly to feedback about our designs as it flows from all directions during our agile process – from clients and from our product managers. This means each minor revision in a prototype’s UI by a design team needs to be reflected in current documentation so that developers always have the latest.
Task Management
Management need to stay on top of the design process – tracking progress and providing feedback on what has changed and where. The most important goal is to ensure that interface design and vision translates properly from the design to the development process.
So how would you go about improving the working relationship between developers and designers?
Introducing More Interactive and Collaborative Approach
Your team is most productive when your entire design workflow is in one place from start to finish. That’s why we shouldn’t separate design from development, instead we should integrate two entities together into a single workflow.
It’s a good idea to bring your design workflow right inside the development tool your team already relies on. At first glance, the task seems to be very complicated.
How InVision + JIRA Simplifies the Design-Development Process
Hopefully, you don’t have to reinvent the wheel. You can use familiar tools such as Atlassian JIRA (as a task management tool for the product backlog) and InVision (as a vehicle for presenting the progress of the design to the stakeholders). Integration between InVision and Atlassian JIRA breaks down a similar barrier for engineers and designers – it encourages a more seamless and iterative collaboration process between them.
Design-Driven Project Management
InVision for JIRA enables design teams to sync design prototypes with the development tool your engineering team depends on. Simply pair an InVision prototype with a JIRA issue, and everyone in your team can see what’s being worked on and get real-time information about the design.
You can pair an InVision prototype with a JIRA issue by doing the following:
If your team is using InVision as your product design tool, simply go to the Atlassian Marketplace and install the free InVision for JIRA add-on to your team’s account.
Once the integration is installed, grab a share link from your InVision prototype.
In a JIRA issue, paste the share link into the InVision component.
Pair an InVision prototype with any JIRA issue.
That’s it! You’ll see a thumbnail preview of your design, along with valuable information about your prototype: handy links to Preview, Comments, and Inspect (InVision’s design-to-development tool). Now you can manage your prototype from one single location, quickly see unread comments, preview screens, and all your team members will be notified when changes to prototype are made.
Give every issue instant context with always up-to-date design access.
Why Your Team Should Make the Move
Working with InVision and JIRA has many advantages. Here are some examples:
Avoid Tedious Handoff – See What You’re Working On
The phrase “A picture is worth a thousand words” means that a complex idea can be conveyed with just a single still image. However, in design and development, the picture changes too often. If a picture is outdated, this could lead either to errors or the loss of precious development time.
InVision brings live screens right into your existing conversations and workflows. A very important moment is that the share link is dynamic, so any time you make changes to the prototype in InVision, they’ll be reflected in the JIRA issue. Designers don’t have to hassle with updating JIRA issues for every design change, and the development team is kept completely in sync with the designer’s progress. Yes, you can get details about your prototype in real time! In fact, everyone on your team can see what’s being worked on and get real-time information about the design.
Everyone can always be up to date, along with your designs.
If you tweak a design, it’s no problem. Within JIRA, next to the thumbnail of your prototype, you’ll see a “Last updated” meta information area. This helps product managers stay sane as design and development are connected in one organized place.
Establish Clear Communications
Collaboration between designers and developers is essential to the success of a project, and it’s a measure of a team’s success. When you speak the same language, you build better products.
Sharing a prototype and collecting feedback on it is just as important as building one in the first place. JIRA’s interactive approach also provides more ways for designers to collaborate with developers about the prototype’s details. It’s a safe place where designers and developers can ask each other tough questions about our designs.
The tool’s annotation features allow you to comment on specific parts of the app and use this work as a roadmap. It also helps clear up any potentially confusing parts of the process and keep a record of notes that’s available for anyone to review as needed.
The Comment button opens a new browser tab with InVision’s comment mode of a prototype. Engineers can quickly provide annotated feedback directly on prototypes.
Iterating Quickly: Design & Code Together
Launch Inspect with a single slick, for an in-depth look at the design.
When it’s time to start building, try Inspect. Inspect continues to streamline the development cycle by automatically recording and displaying all the important details a developer needs within a prototype. With a single click, you’ll have rich access to your design’s measurements, colors, assets, and more-right inside your browser.
The best thing about using InVision Inspect is it provides a living, breathing, interactive specification sheet. Next time someone files a vague “make the button bigger” issue, you’ll know exactly how big they mean.
No longer provide your developers with clunky, difficult to understand, flat specs that take forever to generate. Dive in design details with Inspect.
The pairing of Inspect and Atlassian JIRA enables engineering and design teams to collaborate at breakneck speed directly through the JIRA dashboard. This means that you no longer have to wait until the very end of the design process to give specs to your developers. Instead, you can bring in developers earlier in the process and iterate as much as you want.
What Can InVision for JIRA Do Better?
So far InVision for JIRA has been very responsive to feature suggestions.
I echo the need for multiple links to the designs (e.g. mobile and desktop designers for the same app), which is one of the top voted feature requests on the JIRA Marketplace. Right now you have only one link to the design option in the JIRA ticket.
Another feature that has potential is giving users a way to show a preview in JIRA of individual screens (e.g. a certain view). Currently, inline preview in JIRA task always shows the first page of the prototype.
Last but not least, the InVision for JIRA add-on is currently available for JIRA Cloud only. JIRA Server Edition support isn’t available right now, but many enterprise companies don’t use cloud.
These features aren’t available right now, but InVision’s team is exploring the possibility to add them in the near future.
Conclusion
Just like sales and marketing teams used advances in technology to work better together a decade ago, today development and design teams are working together in exciting, innovative ways. We now have the tool to quickly and accurately translate the vision of an app (its design) into the No. 1 development tool.
Atlassian and InVision are improving communication between design and development — making the workflow more iterative and effective. InVision for JIRA lets designers, PMs, and developers easily switch between platforms to make sure everything is accurate and up to date.
This interactive approach to creating products allows us to spend more time on what’s important — creating beautiful and functional designs and making sure users have the best possible app experience.
Try it!
The tool is an indispensable part of our agile product development process. InVision for JIRA is available right now in the Atlassian Marketplace.
The post Syncing Designers and Developers With Less Hassle appeared first on Speckyboy Design Magazine.
No related posts.