Wireframe Workshop
In a Wireframe Workshop, 729 Solutions will walk you through a series of questions, exercises, and visual diagramming to determine the general structure and high-level components that will be on the key pages, screens, or templates for your project. Wireframes can be used for web pages, as well as desktop and mobile applications. Creating wireframes allows the user to have a consistent experience as they navigate through your web pages or forms, which in turn helps to ensure they are providing all information needed without frustration or confusion.
Wireframe workshops are often completed in tandem with, before, or after exercises like card sorting or tree testing to help kick start a project. Using these tried and true techniques together allows the team to base decisions on actual research as compared to personal opinions or gut reactions.
A wireframe workshop is typically suggested after a client has already completed the User Testing, User Flow, and User Persona workshops. This allows 729 Solutions to use information from each individual workshop to build up to the next, working with full information presented in a logical order.
What to Expect
We’ve identified three types of workshop sessions that will help us give you the direction you need for where your company is at the moment. You might start in one stage and move to another, or come in knowing exactly what you’re looking to accomplish. Either way is completely fine; 729 Solutions will meet you where you are and guide you through the journey of identifying and creating wireframes.
Session 1 – Educate
Let’s start figuring out what wireframes you need for your unique project. We’ll discuss the purpose, platforms, and presentation to determine what wireframes will be the most useful, as well as which ones to create first.
Session 2- Explore
With an explore session we’re going to begin sketching out your wireframes! We’ll create different kinds of wireframes depending on what they’re for, keeping in mind the level of detail that might be needed further down the line with design and development.
Session 3 – Reveal
After we have the basics of your wireframes figured out, our 729 Solutions UI/UX team will clean everything up and walk through each one with you in a reveal session.
Educate – Brainstorm Your Wireframes
In an educate session, 729 Solutions will start at the beginning of the wireframe process with you. Each client that we work with has unique needs, and our job is to make sure we fully understand what your specific needs are before beginning to mock up any actual wireframes.
Together we will brainstorm a list of what wireframes need to be completed, and what they’ll be used for. We’ll discuss the various uses for wireframes, such as mockup direction, user testing, or visual presentation, and make sure we are clear about how much detail needs to be included in each wireframe. At the end of an educate session, we will have a clear picture of how many and what kind of wireframes you’ll need for your individual project.
Explore – Draft Your Wireframes
The explore session is where the real fun begins, as we begin the very first rough drafts of each wireframe that was identified in the previous explore session. This part can look and feel very messy, but it’s important to remember that each wireframe is still a live document and a work in progress at this point.
We’ll be working fast and furious in real-time, which can look unorganized and feel disjointed. At this point, it’s important to remember that your 729 UI/UX designer is going to take these messy wireframes away to work their critical thinking magic before returning with fully polished and organized versions of each wireframe.
As we sketch out the first versions of each wireframe we will be looking to identify a few major components by asking you some strategic questions, such as:
- What major components are you looking for?
- Are there any layout considerations we should keep in mind?
- What will your wireframes be doing for us in future phases?
Wireframes will look quite different depending on their intended current and future use. A basic two-dimensional line sketch wireframe might be sufficient to start developing your website, determining user flow, or even presenting to a stakeholder. A more complex wireframe will allow us to zoom in on more details and identify what assets (photos, graphs, charts, etc) will need further development.
Reveal – Fine Tune Your Wireframes
After an explore session, your wireframes will probably need to be cleaned up a little bit. Your UI/UX designer will take the draft wireframes that you developed together and clean up, flesh out, and expand them to meet the needs that you already identified. They might have an additional question or two for you that comes up as they work, but they will be the ones doing the heavy lifting.
Once they have fine-tuned the wireframes they will schedule a reveal session to walk through them with you. Nothing is set in stone at this point, but typically the hard work that you already put in means that changes are typically minor and superficial. It’s important that you speak up about any concerns or questions regarding your wireframes as this is the best time to make any changes or corrections.
After you have your finished (and satisfactory) wireframes there are a few different ways to move forward. Your next step will depend on where you are in the process as a whole, and what (if any) additional testing you want to do before moving on.
For example, you might choose to use your wireframes and any other prototypes developed throughout these sessions to validate concepts and any user experience assumptions that you made. You might next turn to a different workshop with 729 Solutions to work on gathering and organizing the content that you’ll need to insert into your final product. Another option would be to jump straight into the mockup process, allowing the visual side of your project to come to life.
As always, your UI/UX designer will work with your team, as well as the full 729 Solutions team to help you determine what is the next best step for your individual project. We want our clients to walk away from a reveal session not only with the polished wireframes but also with a clear understanding of what the next step is and an action plan for completing it.
Prepare For Your Wireframe Workshop
To help your Wireframe Workshop run smoothly there are a few things we ask our clients to do ahead of time. Adequately preparing for your session means that we can focus our time together on actually understanding and creating the appropriate wireframes for your needs.
Start with your project Sitemap. Bring a copy of this to your session, and also use it to come up with a starting list for any pages that you think you want wireframes for. We can always change the plan for what we end up creating, but it’s easier if we start with a list from the client. If you completed our User Testing Planning Workshop, make sure you’re familiar with the documentation that you generated. Think about if you’ll be using wireframes to complete any additional user testing, and if so, what the goals of that testing will be.
Take a few more minutes to review the documents you generated in the User Persona, User Journey, and Process Flow workshops. Keep in mind that all of our workshops are designed to work together, helping you get the best end product possible with a minimum of stress, confusion, and overwhelm.
Next Steps
Now that you have a better understanding of how 729 Solutions can help you define, create and fine-tune your wireframes, it’s time to reach out to one of our team members to get the process started. We’ll begin with a brief conversation with you to determine what next steps are right for you and your project. We may also recommend a different workshop or additional exercises to help make sure we’re able to get all of the information we need from you before creating our amazing wireframes.
