Applying qualitative and quantitative user data to design
Once you’ve finished analyzing the user data, it’s time to put pen to paper (and mouse to screen) to start creating and revising the designs. As you see in the above image, all design processes distill many scattered ideas into one definitive concept that gets polished and sharpened into a final design.This single process is the DNA of design thinking. The squiggly line may twist and repeat itself many times over (depending on the overall design process), but it should always unraveled by one clarifying force: user research and testing.
Below, we’ll explain a few design processes that incorporate user testing and then explain how we incorporated the user insights into our process of sketching, wire framing, and prototyping.
User-Centered Design Processes
In any user-centered design process, usability testing connects each major iteration. As you progress from product definition to concepting and prototyping, user feedback helps validate all major design decisions.
Jakob Nielsen, Co-founder of the Nielsen Norman Group, categorizes most design processes that involve usability testing into two categories: iterative design and parallel design. While all three methods can differ quite a bit, they share the common idea that there is no single perfect user interface — and more importantly, that it’s impossible to achieve good usability by simply “picking” the best idea. We’ll look at each method and explain where our process for redesigning Yelp fits in.
I. ITERATIVE DESIGN PROCESS
In the iterative design process, we simply move from one design version to the next based upon insights from usability testing. Each arrow in the below graphic represents a round of testing and analysis.
With this process, a minimum of two iterations is recommended for each sketch, wireframe, and mockup (to produce a first draft, followed by two redesigns). Of course, the process can be scaled up based upon size and complexity and you could easily create 5-10 iterations for each stage.
ZURB actually follows the variation of this design process, similar to what we described, in which much of the iteration is front-loaded in the sketching stage before diving right into rapid low-fidelity prototyping. For them, the sketches (instead of wireframes) serve as the skeletal designs, and the design team decides which sketches make the cut for prototyping. Interestingly enough, user testing only occurs at the prototype stage. Once functionality is thoroughly tested, the fidelity of the prototype will increase with further rounds of testing and iteration until the product is finalized.
II. PARALLEL DESIGN PROCESS
Unlike the iterative process, the parallel process emphasizes broad creative thinking early on. Multiple versions of the design that differ quite a bit in terms of layout are preferred over slight iterations.
The multiple designs are all fairly low fidelity and aim for breadth rather than depth. One large round of user testing culls the low-fidelity herd into a single unified design. For further refinement, it’s best to default to the iterative process in which small tweaks are tested with small batches of 5-10 users until the design is final.
As you can see above, this process improves rather than competes with the iterative design process. Because more creativity is allowed up front, the risk of only hitting the local maximum is decreased. Of course, the trade off is always time and effort. Our Yelp redesign process was essentially a collaborative parallel process with user testing conducted in the beginning. UXPin CEO Marcin Treder was the lead designer, but we all collaborated in UXPin and evaluated the design at each stage. Since this was just a design exercise, we stopped after the “1 Design” step. If this was an actual redesign, our next step would be conducting further testing to refine our prototype.
Sketching
Regardless of your design process, sketching is an excellent starting point. As discussed in the Guide to Wire framing, drawing is a universal language for capturing thoughts, exploring ideas, and sharing those ideas.
Laura Busche, design writer at Smashing Magazine, specifies that sketching by hand has distinct benefits for extending memory, aiding concentration, and improving flexibility. Drawing by hand is also the fastest way to visualize a concept so it should always serve as your backup method.
For the Yelp redesign exercise, sketching was our first step for restructuring the Yelp homepage and search results page. Each of the drawings below took Treder no more than 20 minutes and helped broaden his perspective for the next step of wire frames.
I. YELP HOMEPAGE
It took two iterations before the sketch for the Yelp homepage was finalized. As you can see in the final iteration below, we kept it very low fidelity and focused only on structure. ”Sketching is a universal language for capturing thoughts and exploring
The sketch addresses some primary usability concerns revealed from testing the homepage:
• Increasing prominence of Search bar — Our testing showed that the Search bar was one of the most popular functionalities on the site. In the sketch, it has been placed in the center of the page instead of just sitting at the top.
• Make it easier to find an event — The usability tests showed that almost nobody used the Events tab, and when they did, they found it confusing. As such, our initial drawing rearranges it to the center of the top navigation so it’s at least more noticeable.
• Streamline the categories — Testing revealed that users found categories “overwhelming”, which is why they relied so heavily on the Search bar. To remedy this, our sketch presents them in a Card format rather than a List format (you can learn about the use cases for each of these UI patterns in Web UI Patterns 2014). Additionally, we also added a footer (for secondary SEO content like listings for cities) and simply moved the “Review of the Day” from the right to the bottom of the page.
II. YELP RESULTS PAGE
Because the results page contains less variety of information than the homepage, it only took us one iteration to sketch out the new design. In the sketch, we focused the following usability concerns for the results page:
• Photos must be more prominent — When asked to find a restaurant with a certain ambiance, three of the five users in the filmed user tests depended on photos. The photos on the results page are currently quite small, so we enlarged them.
• Define the price categories — When asked to search for a restaurant of a certain price range, two of the five users weren’t sure what the dollar symbols represented. Above, you can see that we initially thought about just listing the price. We addressed the rest of the usability concerns about the feature filters and “Sort By” options with wireframing, the next step of our design process.
Wireframing
The goal of wireframing is to create the skeleton of the design. More fidelity is added, and the structure becomes more defined as we move into UXPin for digital wireframing. As discussed in the Guide to Wireframing, there’s quite a bit of debate between low versus high fidelity wireframing. We prefer low-fidelity wireframing since we want to focus only on structure and add fidelity later in the prototyping stage. Low fidelity wireframing helps us focus on high-level concepts like the naming of labels and visual hierarchy. While we addressed some usability concerns in the sketches, our wireframes would be more comprehensive.
I. YELP HOMEPAGE
Given the complexity of the current Yelp homepage, our wireframing required four iterations. In addition to fixing usability issues, we also wanted to preserve the SEO aspects (such as listing other cities) because that is valuable to Yelp as a business. We’ll focus on the final iteration below, which you can access in this preview (fully annotated) and follow along.
1. IMPROVING THE SEARCH BAR
Current Design
”Wireframes are the skeleton of your design. Mockups are the skin.”
The search bar currently sits at the top of the page.
Revised Wireframe
You can see how we added more fidelity to the new search bar, but also gave it more “breathing room” to stand out (a very effective tactic described in Web UI Best Practices). This minimalist treatment is much more effective than the previous cluttered layout. Because writing a review is a core interaction for Yelp, we also added a “Write a Review” button in the top left corner.
2. MAKING THE CATEGORIES LESS OVERWHELMING
As we touched on earlier, the biggest design change was revising the categories from a List layout to a Cards layout.
Current Design
Currently, categories sit ? down the page off on the left. They are also listed vertically (nearly double the length shown here), which users said felt overwhelming. Revised Wireframe
As described in Web UI Patterns 2014, the Cards pattern is great for displaying a wide range of information in a way that isn’t just an ocean of text. Our revised design is more visual and only presents 8 categories at once. To reveal more, users would simply click on “Other Businesses”. We also moved this near the top ? of the page for greater visual emphasis.
3. MAKING IT EASIER TO FIND EVENTS
If you reference back to the screenshot of the new Search bar, you’ll see that the top navigation also includes “Events” in the left corner. This was the first step to making it more noticeable. Now we’ll show you the more drastic center-of-page revised layout.
Current Design
Currently, Events are either hidden on the far right in the top navigation (not shown here) or pushed away to a sidebar in the middle of the scroll.
Revised Wireframe
Our revised layout places Events in the center of the scroll. We could either insert a feature photo to the left of the text, or have a video playing in the background. From a business standpoint, we wanted to emphasize events because Yelp uses it to great business advantage by throwing special events for its Elite users (an effective user retention tactic).
4. REDUCING OVERALL CLUTTER
In our first-click testing, we found that 30% of users said the current design was cluttering and confusing. While they didn’t find the layout prohibitively complex, reducing clutter would better emphasize the important UI elements.
Current Design
Revised Wireframe
Any secondary items like Popular Events or Lists (which the usability testing indicated was never even used) were moved to a newly-created footer. This footer also held items that were more for SEO (like listing different neighborhoods).
II. YELP RESULTS PAGES
Because the results pages were less complicated, our redesign required only two iterations. We’ll focus on the final iteration below, which you can access in this preview (fully annotated) and follow along below.
1. IMPROVING FILTERS & SORTS
Our usability tests revealed that the hierarchy and nomenclature of the “Feature Filters” and “Sort By” could be significantly improved. As you might recall, we found that the most important feature filters were “Open Now”, “Accepts Credit Cards”, and “Serves Dinner”. Pricing was also confusing, and 7 Features filters weren’t considered important all.
Current Design
Yelp’s current sorts and filters lack hierarchy (all items seem to be scattered), which
was counterintuitive to the behavior we saw in usability testing. It’s not even possible
to sort by meal unless you click “More Features” and then select from a long menu.
Revised Wireframe
The revised wireframe isolates the most important filters and restructures the entire section into squares. Each filter category only includes four options, which visually organizes all the possible choices. Since 90% of users felt “Open Now” was the important filter, we actually let it stand as a separate item for added emphasizes. Pricing is clarified with dollar ranges and the 7 unimportant filters are hidden. It’s important to note here that we also made the pricing category specific so that the dollar ranges would be different if you were browsing for a mechanic.
2. IMPROVING LAYOUT OF SEARCH LISTINGS
Now that we streamlined the filters and sorts, we also needed to reshape how the results appear. For this part of the redesign, we leaned more on qualitative feedback.
Current Design
A majority of users relied on photos to determine ambiance, yet the thumbnails
in the listings are too small. You also can’t save businesses for later reference (33%
accomplished the task but complained about difficulty, while 67% failed or gave up).
Revised Wireframe
We enlarged the thumbnail and layered a “Save for Later” button on top for easy bookmarking. We also restructured the layout to better closely resemble an F Pattern for easier scanning and isolated the address and phone number (since those are important pieces of standalone information).
Low & High Fidelity Prototyping
Once we finished most of the structural redesign in our wireframing stage, it was time to bring the new layout to life through prototyping. As discussed in the Guide to UX Design Process & Documentation, wireframes are all about structure but prototyping is about the experience.
Just like wireframing, prototyping can be either low fidelity or high fidelity. Low fidelity prototyping helps you focus on functionality early in the process (which also lets you conduct usability testing earlier). High fidelity prototyping, on the other hand, lets you get as close to the real product as possible without investing heavily in programming resources (especially if you use programs like UXPin or Invision).
I. LOW FIDELITY PROTOTYPES
When you hear the terms Lean UX and rapid prototyping being thrown around, it usually involves low fidelity prototypes. Going low fidelity helps avoid the problem of obsessing over visual minutiae before the functionality and interactions are refined. Andrew Chen, notable entrepreneur and growth
writer, is a huge advocate of going low fidelity because it helps you incorporate the customer into design earlier. Because low fidelity prototypes are inherently unfinished, people will provide more honest feedback on core features and the overall design flow — instead of commenting on how the colors might not look right or the font is not the right style. It’s also cheaper to iterate and make mistakes, since you could create 10-20 variations of a low fidelity prototype for user testing (and get more insights than 2-5 pixel perfect prototypes).
For our purposes, we started in low fidelity for exactly the same reasons we described above. In UXPin, we simply added a few animations and interaction into the elements of the existing wireframe. As you can see in our live prototype (feel free to click around), our low-fidelity prototyping served more as a 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.
You can see all the interactions that we prototyped by viewing this GIF of our final iteration. 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.
”The real moment of truth comes when you add interactions to your wireframes.”
II. HIGH FIDELITY PROTOTYPES
On the other hand, high fidelity prototyping is better when you are in the later stages of design and iterating on things like look and feel, typography, branding, and other details. Marty Cagan, Partner at the Silicon Valley Product Group, believes that high fidelity prototypes developers to uncover what’s needed for a feasible product.
Our process followed the iterative guidelines outlined by Smashing Magazine since our high-fidelity prototype simply layered visual detail on top of its predecessor. Wireframing laid out the 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 or Sketch and then imported directly into UXPin through 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.
Design, Test, Iterate, Repeat
By now, you’ve seen the full process of how to incorporate usability testing into the design process. While you don’t need to follow every step of what we described, we highly recommend that every design process incorporates user testing as a connecting stage between low fidelity to high fidelity and the final product.
The mind of a user is a complex place, but usability testing lets you sneak a peek into how your design can fit naturally into human cognitive processes. While we’ve only incorporated a couple of the dozens of available usability testing tactics, you can see how just 3 quick tests can reveal insights that lead to sleeker and more usable designs:
”Wireframing creates structure. Prototyping creates experiences.”
• Low Fidelity Prototype
• High Fidelity Prototype
The biggest challenge designers and product managers face isn’t how the market or different technologies work — it’s how humans work. What users say versus what users do are two completely different things, and the only way to verify is to test. Usability testing is more than a just a checkbox on a list of product requirements — it is the most convincing support for your design decisions.
After all, if you aren’t designing for users, then you’re only designing for yourself.
”If you aren’t designing for users, you’re only designing for yourself.”
The post User-Centered Design & Iteration – Testing and Redesigning Yelp’s Website Part-8 appeared first on WBD.