How to write user stories
How to Write User Stories
January 8, 2018
Get PMP certified before March 26th
Get PMP Certified Before March 26th
January 17, 2018

How to Create a Wireframe

How to create a wireframe

How to Create a Wireframe – The Basics – Video Transcript

Hi, Philip Chesney here from AgiFall. For today’s video, we are going to see how to create a wireframe.  Now first of all, what is a wireframe? A wireframe is a quick mock-up of a feature, functionality, website, or product. It will basically demonstrate how it should look and what it should do. Most of the time, and for the PMI-ACP test, wireframes are low-fidelity prototyping. It is a great way to create a visual presentation for a team, customer, verbally present it, and then collect feedback on it.

 

Wireframe Example – PMI-ACP Exam Simulator Wireframe

Let’s look at an example. I have a created a similar wireframe for a test simulator, basically very similar to PMI’s Computer Based Tests.

Now what I want you to see is how one slide flows into the next. This shows how the simulator should work. I also created slides that describe each of the features with short text.

 

 

Wireframe – How Current Users Use the Simulator

Let’s go with the current users. When users come to the welcome page we will add a login box. So, our users will log in here. Now, once they are logged in, they will have choices of the simulators, so PMP simulator exams 1-4. If they click on one of them, they will get started with the exam. Now, once they start the exam, they’ll have the countdown clock up here, so whether they’ll have three hours or four hours. the number of questions, so 120 questions for the PMI-ACP and 200 for the PMP. Each question has an ID number, so if we need to make any changes or let’s say someone made a grammar mistake, that can be adjusted in the back-end. This part here is our question text, and then we have our multiple choices. Only one out of the four answers can be correct. For our buttons down below, the “mark” button saves the question until the end for review, so you can go back and solve it.

More Project Management How-to videos

For our next part, end the exam. When you click end exam, you will get a pop-up asking if you are ready to finish the exam. The pop-up looks like this. You can either end the exam or go back to the exam. Once I click “end exam” it will present me with a score. So, I scored 88 out of 120. And then you can click review exam to see your results. In this part here, we are going over the exam, so once you finish the full exam, you can review answers for each question along with a textual explanation. We had answer A and then its explanation. Then we can click “Previous” or “Next” or we can “end the review”.

 

Wireframe – How New Users Use the Simulator

If we have new users on the simulator, here is the flow. How new users sign up – the new users can sign up via Call to actions CTAs on the home screen, products page, and the about page. These CTAs will bring you to the signup screen. The signup screen looks like this. Users can signup from Facebook, Linkedin, or Name, Last Name, Email, and which course. Once you insert that information, you still need to check your email to confirm the registration. The email looks like this – Time to verify and start practicing. The student just needs to click the button to start the exam practice. Once the student clicks the button, he will receive a subsequent email – Welcome to AgiFall. We have a video here that presents how to use the simulator. If you are ready to start taking exams, click the link below. This will bring the user to the login page, and then subsequently back to the simulator area where the user can pick which exam he would like to take.

 

Wireframe Software Options

In this video, I created the wireframe in Powerpoint, but there are quite a few programs you can use. Some of the options are, Visio, Indesign, wireframe.cc, Moqups, UXPin, and many others. You could even just grab a pad and paper or a sharpie marker and a white board and start designing. If you use the last two methods, make sure to take a picture of your work in case it gets lost. Remember, for low fidelity prototypes, you are not looking for a beautiful design, you are just trying to convey how it should work, basically describing it visually then verbally.

 

More Reasons You Should Wireframe

A few more reasons we should use wireframing is that it is a great way to test an idea, it can be created very quickly, and it helps us learn what the product should look like and how it should work. We are really looking to discuss the feature or product here and validate it with our team and / or customer. The great part about wireframes are that they help decrease the gulf of evaluation. In other words, let’s say that you want my company to build you a sailboat. You already have an idea in your mind of what it should do, look like, and have a certain expectation. For my team, we may understand something completely different. Wireframes help us get to the bottom of things and align expectations. With a well-thought out wireframe, you can decrease rework and deliver the desired product or service the first time around.

 

Wrap Up

You now know how to create a wireframe! I hope that you have liked today’s video and that you’ll be able to put it into practice. Stay tuned for more PM videos and don’t forget to subscribe to the channel. If you are getting ready to take your PMP or PMI-ACP exam, check out the articles on Getting Certified.

Leave a Reply

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

sixteen + fifteen =

Sign up now