Post Image

How to Simplify UX Design Documentation with UXPin

Tomasz Iwaniak
By Tomasz Iwaniak on 31st August, 2017 Updated on 22nd April, 2020

Design documentation can be a total time suck.

That’s why we’ve done our best to make it as simple, automated, and collaborative as possible.

Here’s how UXPin lightens the burden of documentation so you can spend more time designing.

For designers and clients

Guiding folks through a prototype, explaining certain design choices, and showing them the value can be a challenging task. It’s crucial to get the right message across and that’s precisely what you can use Free Flow Documentation for.

First, you can create your prototype in UXPin or use our integration with Sketch and Photoshop to import your work quickly. Now you are only few clicks away from an interactive prototype – just add some interactions to the design. You can also create some depth with multistates by adding more states to the elements, e.g. by making two instances of one input field – active and inactive.

The final step is to provide some context that explains particular interactions and the multistate behavior using our Documentation mode. You can also use this feature to ask your client for their opinion on particular parts of the design.

In order to have clear and effective communication, all information should be stored in one place, so nothing is lost on the way. That’s where our Preview plays a crucial role.

When the client opens the Preview, they get access to different modes:

  • They can easily switch to the Documentation section and get familiar with use cases or context for each part of the mockup.
  • They can test the prototype out in the Simulate mode to see the entire design in action.
  • They can provide feedback in the Comment mode, click on particular parts, and type in the remarks.

2. For designers and developers

Spec Mode, and Free Flow Documentation helps teams to better automate their specs and documentation.

Automatic redlining + synched metadata

Take a look at the below example to see the fields you can add.

If you use elements from your design system, these fields will automatically populate since your projects and design system are synced.

Spec Mode can also generate CSS code for elements and style guides for projects.

To add more information for developers, just change the mode to Documentation and type in the remarks and suggestions.

Quick access to documentation

Once the designer is done with their magic, the developer can open the Preview and switch between Specification and Documentation modes. This allows them to place the design in context, familiarize themselves with use cases, inspect the elements, check formatting details, and even download all assets with one click.

3. For product managers and stakeholders

Free Flow Documentation can also improve comprehension between product managers and stakeholders. You’ll be able to present different business solutions and ask for their validation without ever leaving UXPin.

Making the right call is often based on the data provided by A/B testing your ideas with the users. This is why in most cases you need to have two variants of a Hi-Fi mockup to present them to your Stakeholders. Product managers can use the Documentation mode in the editor to explain additional business data and analytics.

Once all the necessary information is provided, use our Approval process to deliver the design and gather feedback from your Stakeholders. Here’s how:

Once you send the request, your Stakeholders will be notified via e-mail that the project requires their attention.

After opening the Preview, the Stakeholder will be able to browse through the data you’ve provided in Documentation mode and review the design.

With the final approval of the Stakeholder, the PM has the green light to proceed to the next stage of the project.

With these use cases you can see how UXPin improves workflow across the entire product and design organization.

Ready to try it in UXPin? You can play around with all these features in our free trial.

Join the world's best designers who use UXPin.

Sign up for a free trial.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you