Our Mobile UX Trifecta: Images, Leads, Reviews
By: Daniela Shuffler

When you shop on your phone, what kind of product information is important to you?  What actions do you want to take in relation to the product?  And what features of the mobile app or mobile site help you make a decision?

These are the questions our UX Design team wanted to answer as we tackled redesigning our mobile site, and specifically our vendor business pages - a mini “site-within-a-site” that displays all pertinent information about the vendor’s business.

Screen Shot 2014 12 30 At 12.42.38 Pm

Although WeddingWire is not an e-commerce site in the traditional sense, we help engaged couples make purchasing decisions via these vendor business pages.  So when we began thinking about how to revamp and radically improve these business pages on our mobile site, we asked these types of “e-commerce-y” questions in an effort to improve the UX on the small screen where prioritization of features becomes a big factor.

Through initial research, user feedback, and some testing, our UX Design team narrowed in on three features we deemed most important - which aided the process of arranging information on this new mobile business page:

1) Images.  Folks want to see the goods.


This one seems pretty obvious - we humans are visual creatures and most of us won’t buy something we can’t see.  In terms of the experience of searching for a wedding vendor, potential clients want to see visual examples of work.  Like actual photos by a photographer or images of cakes created by a wedding cake vendor.

On mobile, we didn’t want to bury what we thought was a crucial part of the UX, so instead, we used photos as the entry to the vendor’s business page.  Top, center, and, most importantly, interactive - you can start swiping through photos as soon as you land and also tap in that top photo area to enter an image-only view...before you do anything else.

2) Leads.  Show me the money.


Our mission as a business is to connect engaged couples to wedding vendors.

The result is that engaged couples get help planning their wedding and vendors make money from booking more work, which they (in part) invest back with us through our B2B advertising products.  It’s a win-win...and this mobile UX had to focus on that business goal.  The more leads we deliver, the more vendors we attract to our platform, and the better the overall wedding planning experience on WeddingWire becomes for engaged couples and vendors alike.

We found that the best way to establish a lead was with our “Request Info” action that allows a user to submit a request for information to the wedding vendor via the website.  But due to limited screen real estate, we didn’t have a great place to put it that wouldn’t be scrolled away from view within seconds.

A sticky tab bar was our solution, allowing the “Request Info” action to remain throughout a user’s experience on the business page regardless of how much they scroll. We also made sure the vendor’s phone number and website link were primary actions the user could take when they first land on a vendor's business page.

3) Reviews.  Opinions matter.


Not only are user reviews expected in a good shopping experience, but at WeddingWire, we consider them our differentiator.  As we recently passed 2 million user reviews, we are the source for wedding vendor reviews.

The fact that we offer this incredibly helpful nugget of information, which can heavily influence a user’s decision-making, is something we wanted to highlight on the mobile business page.  One way we do this is by always displaying a vendor’s business name in conjunction with their review rating.  We also use a bright accent color - orange - to visually distinguish the review stars and denote their importance.

Lastly, we provide a link behind the total number of reviews that will scroll a user further down the page to the vendor’s reviews summary, which looks like this:


In this summary view, we give the user a quick glimpse of the vendor’s overall review rating with the opportunity to tap a link to read all reviews for the vendor on a different page.  We certainly didn’t want to overwhelm this page by displaying ALL reviews, which can get pretty lengthy, but we wanted a user to be able to get a firm sense of a vendor’s ratings without having to leave this view.

So Images, Leads, and Reviews...our mobile UX trifecta!

Notice that all three figure prominently during a user’s initial view of a vendor business page - no scrolling needed.  Although “the fold” is becoming a bit of a silly notion, especially on mobile, it’s still nice to know that our main goals - to improve the UX, deliver more value, and increase revenue - are all addressed during the user’s first impression of a wedding vendor on WeddingWire's mobile site.


Meet Daniela:
Daniela is a Design Lead at WeddingWire. Daniela is from Richmond, Virginia and has a Psychology degree from the University of Virginia. When she's not designing for the web, Daniela enjoys designing interiors and writing her interior design blog.