Use State Selection Dropdown to Display Alternate Wireframe Designs

Last week, I came upon an iteration process that I actually run into quite often in my uses of ProtoShare. Because of this, I felt the process was worth sharing with fellow users.

My task was to create a new landing page for our Community Resource Center (details available in the coming weeks). My initial design layout was liked, but missed the mark in what we were trying to accomplish from the page, so another team member posted an alternate design concept in the Filmstrip.

This alternate design was rough, but well received and addressed our goals for the page. I duplicated the design to preserve the original concept and began working to refine the layout. After I added a little more polish and incorporated the missing pieces needed on the page, I sent it to back to the team for review with specific questions.

Discussion ensued and it was determined that we needed to add another link to the help section in the middle of the page. Adding a link would have put the page off balance, so  in addition to the new link I came up with the idea of moving one of links in the sidebar to the help section as well.

Of course, because this would be a minor change and still needed agreement in an active conversation, I decided to use the State Selection Dropdown component and add a State of Original and Proposed to the design. To the State I attached the components in question to the Original State and added new components in a different layout and attached them to the Proposed State.

From here, I jumped back into Review to continue the discussion thread by asking my stakeholders what they thought of the proposed design in relation to our active discussion. They were able to see the page in its original state when the discussion started and click to the proposed state of the page to see the alternate layout of minor changes.

By incorporating changes in this way, we were able to preserve our open discussion and not lose context of what was being done to the page – no need to flip back and forth between designs or start a whole new discussion when the current topic was already in process.

Here’s a quick screenflow of how the design looked and worked in Review after I added the State Selection.

What kind of methods and processes do you use when iterating your wireframes? I would love to hear about your processes in the comments below.

This entry was posted in Blog, ProtoShare Tips & Tricks, ProtoShare Workflows. Bookmark the permalink.

Previous post:
Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *