Pushing the Limits of Axure to Make Our Prototypes Feel Real
On any given day we have tens of thousands of opportunities to support a teacher in the U.S. on DonorsChoose. Helping people find that one project that speaks them is foundational to the experience on our site. Our search tools are the main way to find that project!
When we redesigned our search experience a few years ago, we focused on the desktop experience to meet the browsing habits of our donors. This followed our product principles of “Start with the smallest possible solution”. Since the launch, we’ve kept tabs on how our teachers and donors use these features. Increasingly, donors are shifting towards using DonorsChoose on their phone in order to find projects to support. The team had taken note and done research on the discrepancies between the search experience on desktop and mobile. Validating these observations with metrics from the site, we prioritized improving the mobile search and filter experience to help our donors find projects as easily as they do on desktop.
Revamping our search tools was an exciting project, but it became a double edged sword trying to pick from the possible paths on intuition alone. With every project we work on, we put everything in front of users before we ship in order to shape the design. Changing something foundational to the experience of the site obviously meant usability testing needed to be done early to validate our ideas. However, running usability tests early means testing ideas that aren’t implemented. Implementing ideas always costs resources and time, but not having prototype that feels real to test with limits the feedback you get from the test participants. As a nonprofit, it’s crucial that we’re intentional about how we use our resources. We don’t want our engineers to spend time developing a solution until we know we have a solution we’re confident in.
In recent years, we’ve seen a design tool renaissance with many competitors entering the arena. After trying out a bunch of these newer tools, our product team chose to adopt Axure, a veteran in the space, to our toolbelt for creating high-fidelity prototypes. With every project at DonorsChoose, we have a need to communicate the nuances that come with the solutions we’re proposing to our stakeholders, as well to our test participants during usability testing. With an experience as complicated and open-ended as searching and filtering, this means handling user input in a way that reasonably meets the expectations of whoever is using it. This way we can receive meaningful feedback on how to better iterate on our designs without needing to build it out completely. That’s where Axure comes to help us communicate these solutions.
Axure’s special power is giving designers the ability to create prototypes that not only handle state, but also logic. Utilizing logic allows prototypes to make decisions based on the input it’s given from users. These decisions work to mimic realistic feedback to users to recreate the feeling of a functional experience. For improving our search tools, this meant being able to create a prototype that could logically handle search queries, pass that data through pages, and give convincing visual feedback to all the actions usability test participants expect.
Although we were were only redesigning search and filtering interactions, we prototyped full flows. This way test participants could work through realistic tasks. We were testing new users, so there was flexibility to how we could present the context around the changes we were making to our search tools.
We asked our test participants to accomplish the following:
- Explore the site for initial impressions. To give participants time to understand the context around these changes.
- Find search from the homepage. To identify any issues with search discoverability.
- Find any project. To understand which search tools the participant uses first.
- Find an “Art” project. To learn how someone navigates with a specific search goal in mind.
- Use search filters to find a project. Our biggest changes to our search tools was how we presented filters.
- Filter projects by match offer. A feature that we wanted to understand its value to new donors in the context of our mobile search tools.
Axure allowed us to create prototypes that gave participants the ability to explore our designs instead of only being led down specific paths. So when we asked “find any project” they went ahead and formulated their own search queries using the filters and input options which returned a search page that had their selected parameters and a new set of project results. This allowed us to ask if the feedback that was being shown matched their expectation of what they had entered. Axure’s logic handling also helped us capture subtleties of interactions. In the prototype we had a “projects found” counter that decreased as you check off more filters for your search query. Participants responded positively to this since it gave proper context to their actions.
The benefits from creating high-fidelity prototypes didn’t stop at just testing participants. Since we had all of the interactions and states right there in our Axure prototype, we didn’t have to spend time trying to communicate how all of it should work. Our developer appreciated the clarity when it came time to build it. This left us to focus more about how we could improve our design instead of clarifying it to others.
Beyond the lifecycle of the project, investing our time into making something look and feel real became a worthwhile investment for the whole team. In our future projects we can always reuse the work we did either in pieces or chaining together whole documents without running into complexity issues. Axure isolates the behavior of each element to itself into groups called “widgets”. This lets us build and reuse widgets how we see fit to keep things DRY. It’s helpful for smaller design teams that don’t have the resources to manage a fully-fledged and documented design system.
I swear this isn’t a sales pitch for Axure! However, if you’re thinking of trying it yourself, there’s no shortage of free resources. Axure’s documentation is always up-to-date and accurate. For anything you don’t find on the documentation, googling any problem or bug gets you results to their product forum where, 9 times out of 10, someone’s had the same issue. Since Axure files are extremely lightweight, users on the Axure forums typically share their files along with their solutions. This makes troubleshooting much easier when you’re a visual learner who just wants to see how someone came up with a solution and learn off of their work. There’s even an entire tutorial series made by a community creator. For me, the best way to learn was by doing and letting the Axure resources guide me through any issues.
We wouldn’t use Axure for everything though. Axure still is a prototyping tool first and isn’t something we would recommend as an all-in-one tool for other tasks like image editing or illustration. Even considering the shortcomings, the time and effort dedicated to creating a detailed prototype paid off with how our test participants responded, giving us actionable feedback for our designs. Conversations with our stakeholders around Axure-powered prototypes are always productive. Best of all, every project our team contributes to a growing library of reusable components and documents with deep levels of interactivity. Having just launched version 10, Axure is still getting better and continues to make meaningful additions to their product. If you’re thinking about switching to a prototype-first design tool, we suggest giving Axure a try!
