Prototyping digital products: Making the design process efficient

Square

As a Senior UX & UI designer I’ve worked on many projects that required me to explore and streamline user flows, and lay out content to present complex data as useful information for users.

I’ve used many popular prototyping tools on the market (including Adobe UX, InVision, MockUps, Balsamiq, etc.), but for most of my wireframing and prototyping projects, I chose Axure RP.  This is because I find using Axure makes the design process so efficient by allowing me to:

  • Explore interactions and create development specifications simultaneously;
  • Empower broader (non-designer) team members to update the prototype directly and concurrently; and
  • Make iterative enhancements productively, even on global projects where the product is being designed in a language other than the team’s universal language.

Exploring, experiencing, and defining digital products

Whether it’s prototyping high-fidelity wireframes or polished interfaces, I think it’s important to experience and validate concepts by using and feeling the product you’re prototyping on the target device — and test it with the people immediately around you — before any concept gets presented to stakeholders, shared with developers, or taken to broader user testing.

When working on Global Safety Index as a UI designer, I used Axure to prototype mobile surveys for on-the-go front-line staff to fill in, as well as the results and analysis portal that safety professionals log in to on desktops.

By creating responsive survey prototypes in Axure and accessing it on mobile devices, we were able to hold the web app in our hands and feel the feedback and speed of interactions, the relative sizing and spacing of elements on the screen, the effort of finger movement required to tap frequently-used buttons and navigations, and see how embedded third-party code such as interactive graphs integrated with the design.

 

 

When the project hit the coding phase and developers received the Axure prototype, they were able to understand the user flows, logic, and interactions. For visual styling, they were able to simply grab source images as well as transfer the CSS styling and javascript animations into their code.  Prior to using Axure, developers needed to manually measure line spacing and paddings from mock-ups, locate source images in shared directories, and guess the details of transitions or pair program with designers.

Exploring and testing different user flows and interactions on targeted devices before the project hit coded-prototype phase helped us alleviate obvious misses and saved developers from re-coding due to major design overhauls.  After all, it’s much faster and easier to change overall UI direction and user journeys in design rather than in code.

Clients also got no surprises when they received their coded product, as they had been giving approvals on functional prototypes rather than simple click-through mockups.  This included details from the flow of specific user types and conditional logic to how the fonts actually appear in browsers.

 

Collaborating with and empowering the broader team

When using design-focused software, design files and alternate screen management can get out of hand when mass-page production is required to represent multiple user flows and configurations.

When working on Australian Early Development Census’ data collection web application, we needed to prototype almost every user type and their possible flows and stages.  To enable collaboration and make this process lean, we used Axure and took advantage of its Team Project and version control functionalities.


As I went through crafting the user-flows, layout and styles, other team members such as producers, project managers, and junior designers, were able to update copy and create varying states of content in the same project file concurrently.

Using Axure, we were able to implement a workflow that empowers producers and product owners to manage and update the content while designers focus on enhancing the experience.

 

Iterating designs efficiently

Every design project requires updating designs, whether it’s navigational structure changes, flow enhancements, or simply changing the text of a button.  When working on an e-commerce project for a global confectionary company, I needed an efficient way to review and enhance user flows with team members both local and remote.

Using Axure as the prototyping tool, we were able to discuss the designs while making changes on-the-fly.  As we discussed the prototype on the shared screen, I could make changes swiftly on my personal screen and fire off the updates to the shared screen as we spoke — making design iterations and decision making extremely efficient.

Some of Axure’s features that made design iterations very efficient and pleasant are:

  • Dynamic content and states such as checkboxes, tabs and selected states are “real” as opposed to mockups, so only one location needed to be changed to update many parts of the flow.
  • There is a concept of containers and paddings (akin to divs in HTML) so I could, for example, update the text of buttons without having to change the size of the box it’s inside.
  • When designing responsive or adaptive pages, if I changed the content or copy in the mobile design, the desktop and tablet versions automatically updated.
  • Data tables can drive the content inside repeated elements, allowing pages to update without editing lists and grids one by one.

Working on a global project, being able to add tooltips to elements was particularly useful, as I could design in the target audience’s language while communicating what they were in the team’s universal language, speeding up the review process.

Communicating functionality and design to an international team using Axure tooltips