Instructional Design Wireframing
Amy Law and Joe Wilson work on the Learning Gateway team at the University of Washington School of Medicine. They are a design group that works directly with faculty to develop and deliver online learning to medical residents and fellows.
They recently started using Balsamiq to prototype an online training to help physicians provide better care for members of the LGBTQ community. Amy served as the instructional designer and content author and Joe worked as a developer and UX specialist.
Amy and Joe used Balsamiq to pass wireframes back and forth with edits before Joe finalized them in a low fidelity prototype for testing with stakeholders.
Here's an example of a wireframe they finalized in Balsamiq next to the low-fidelity prototype that Joe built in Storyline.
Amy described the benefits of using low fidelity artifacts early in the process this way:
The wireframes gave less tech-savvy project sponsors a concrete sense of the possibilities during the design process.
Keeping graphics low-fi through the prototype phase allowed the project team to focus on content and functionality and to make changes without feeling like we were throwing out hours and hours worth of work.
Q&A with Amy Law
What industry do you work in, and what is your title or job description?
I work for a medical school which means my “industry” is equal parts higher education and healthcare administration. I’m an instructional designer on a small eLearning development team. Being a small team means people wear many different hats. On any given day I might be project manager, user researcher, interaction developer, or even content author.
What kinds of things are you excited about in your industry?
Little by little, adult education is moving away from content delivery and into performance improvement. It’s exciting to watch people’s minds open to whole new worlds of possibility when they let go of needing learners to memorize all the data.
We live in an age where up-to-date information lives literally at our fingertips. It’s freeing us to focus our brain power on observation, reasoning, and solving realistic problems. Ever so slowly, the education industry is letting go of old "drill and kill" practices and catching up with the times.
What suggestions do you have for someone looking to succeed in your role or industry?
Honestly, I’m a fresh new face in the world of adult instructional design. Things I’ve done that seem to garner respect or build my confidence:
- Listen for the tangible goal your client is trying to achieve. Keep asking questions until you hear it.
- Develop project management skills. Even if it's not in your job description, understanding the skills involved in moving a project through its paces will make you a valuable resource on the team.
- Entertain fantastically bad ideas with your team mates. The process of playing with those thought experiments often reveals hidden gems. If nothing else you’ll all get a good laugh.
Why and how do you use Balsamiq?
As a team collaboration tool: One of the ways this small team maintains a good work-life balance is by being flexible about our hours and work location. myBalsamiq makes it possible for us to share ideas and contribute to projects asynchronously. The tool makes it easy for everyone with an idea to mock it up, throw it against the wall, and see what sticks.
As a wireframe demonstration tool: We use an iterative design process on our projects. This means we try to get feedback from stakeholders early and often. When we’re trying to focus on the foundation of a design, Balsamiq helps us keep our subject matter experts “out of the weeds” so to speak. The sketched-up look with text placeholders lets them know we’re working on structure and layout not graphics and wordsmithing.
Tell me more about the project you've recently been using Balsamiq for
Our team was asked to create a 7-10-minute eLearning module for all UW Medicine providers to support a larger initiative of LGBTQ inclusion throughout the organization. The module uses 3 mini-scenarios to help providers refine their language, question their assumptions, and recover from errors gracefully.
What is one thing you learned from this project?
Sometimes it’s the little things, like changing which side of the screen the provider starts the conversation, that make a world of difference in the user’s experience.
What are some of the ways that your wireframes helped you refine your design?
The wireframes functioned as a proof of concept. By implying or truncating content, we were able to test out ideas for a variety of approaches before investing the hours of time it takes to plot complex branched experiences.
Using a low fidelity prototype, we tested our concerns about story length and intuitive navigation. Through usability testing, we found that the stories were engaging and not overly long; however, some interactions like auto-advancing elements disrupted participants' flow. Based on their feedback, we iterated our design and are beta testing the high fidelity version this month.
What is one of your favorite Balsamiq features?
Joe and I use the "propose alternate version" feature in the comments a fair bit. Whether we're suggesting a small modification or a major re-design, oftentimes it's easier to show a new idea than to tell the other person what we have in mind.
Do you have any feature ideas or suggestions for how we can improve our product(s)?
I would love it if promoting a proposed new design to the main project didn’t make the original design so difficult to access. (Editor's note: this process is greatly improved in Balsamiq Cloud, using Alternates.)
Thank you, Amy and Joe, for telling us your story and sharing your what you learned!
Do you have a story to share about the awesome things you do with Balsamiq? Send an email to email@example.com with your stories or blog posts!