I recently came across an article by Braden Kowitz on Design Staff (Shortening the Build-Measure-Learn Cycle with Clickable Mockups) that talks about using clickable design mockups in your website requirements gathering process. Kowitz lays out the steps his team takes when working with a new project and why spending time up front to prototype and end user test is better than jumping right into code after creating basic wireframes.
Here at ProtoShare, we talk a lot about the prototyping process and how important it is to work out your ideas to get feedback prior to coding. What we don’t talk about a lot is the ability to use (and benefit from) clickable design mockups during the prototyping process. From grey-box wireframes to high-fidelity prototypes and documenting decisions, there is a lot you can accomplish in ProtoShare – and creating clickable mockups has always been something even non-technical users can do quickly and easily.
Let’s first look at Kowitz’s process and then discuss how it relates to ProtoShare:
- Set a deadline
- Design a flow
- Mock up each step in high-fidelity
- Write up a prototype
- Show it to people
Depending on the size and complexity of your project (a 5-page website vs. a 30-page website with multi-step application elements), you may follow several variations of this process. The first step is pretty self-explanatory; just remember to be reasonable in your time estimates. In our experience, when it comes to designing flows for your site or application, it’s likely that you’ll go through several iterations with your team and/or client. Collaboration at each step ensures you’re headed in the right direction before moving to design.
In Kowitz’s process, Step 3 refers to mocking up the flow with high-fidelity designs (not functionality), so this is where your designer’s talent comes into play. You’ll then take those designs and create an interactive prototype from them. This is something quite easy to do in ProtoShare. As an Editor, simply create images from your design files and drag them from your computer directly to the canvas or Page Tree. Then add hyperlinks, navigation, or functional components over the images to create the prototype. Finally, share the clickable mockup with a sample of end users and conduct user testing.
Is creating clickable design mockups (or “clickable comps” as we refer to them) really all that new of a concept? Of course not.
I have the opportunity to speak with a lot of our customers and learn about their processes on a regular basis. Not everyone marries their wireframes to the design in this fashion prior to sending the design and requirements to developers to build the final product. For them, design is just the next step in the process after creating and validating prototypes. Some even jump from planning straight into design. While jumping into design isn’t our recommended best practice, it works for some people and projects. However, if the website or application design has a big impact on functionality or if you need to test the design and interaction flows with end users, creating clickable comps is a great way to iron out additional wrinkles before handing off the requirements to the development team.
Because successful website and application projects are contingent upon good communication between stakeholders during each step in the development process, bringing design together with the prototype is becoming a popular workflow. Look for updates over the next several weeks as we work to help enhance this workflow in ProtoShare.
Got tips on how you use design comps in your process? We’d love to hear about them in the comments below!