In Part 1, we described how we started sketching and wireframing based off the qualitative insights and quantitative insights from our user testing on Yelp’s website.
Now, we’ll look at low fidelity prototyping, high fidelity prototyping, and the final new design.
Low fidelity prototyping helps you focus on functionality (which also lets you conduct test your design with users earlier). High fidelity prototyping, on the other hand, lets you get as close to the real product as possible without investing heavily in programming (especially if you use programs like UXPin or Invision).
Low Fidelity Prototyping
We went low fidelity first since it’s more of a sandbox environment for us to iterate and gather honest feedback. In UXPin, we used our existing wireframe and just added some interactions and animations.
As you can see in our low fidelity prototype (feel free to click around), prototyping was a great sanity check. Regardless of how structurally sound your wireframe might be, the real moment of truth is how smooth the experience feels once you throw interactions and animations into the mix.
We wanted to ensure that browsing categories, selecting filters, and switching between the homepage and search results page was an overall smooth experience. If this was more than an exercise, our next step would be testing the low fidelity prototype with users and then iterating once more.
High Fidelity Prototyping
High-fidelity prototyping is more appropriate when you are in the latter stages of design. At this point, you would be iterating on things like colors, fonts, branding, and other visual details.
Our process was in the same vein as the guidelines recommended by Smashing Magazine. Wireframing created the new structure, low-fidelity prototyping created the experience, and now high-fidelity prototyping would add the final finesse. We added fidelity within UXPin by using our library of UI elements. Whatever could not be created in-browser was designed in Photoshop/Sketch and then imported directly into UXPin using the drag & drop functionality. The layers were preserved, so we only had to click on the elements and add interactions.
To play with the high-fidelity prototype, check out the live preview. Again, if this had been more than an exercise, we would have tested the new high-fidelity prototype against the same tasks and iterated as needed.
Full Testing & Design Process
To learn more about the entire process from defining objectives to the full fidelity prototype we showed here, check out our e-book. You can also use the dozens of elements libraries and interactions/animations in UXPin to take your design from lo-fidelity sketch to high fidelity prototype.
