iDine

Mobile UI, Strategy, UX, Web Design


Better UX = Tastier dining experiences

As Director of Creative and UX, I lead the effort to redesign all of the Rewards Network white-label websites, leveraging iDine (our proprietary brand) as a sandbox to design and deploy new features. The redesign would serve to address an alarming 56.02% mobile bounce rate.

The Results

Decreased bounce rate to under 50%

Re-engineering the framework and implementing UX best practices reduced the bounce rate to 37%.

13 mobile sites built in 10 weeks

With the help of our development partners at Trilibis, 13 mobile websites launched in record time.

3x increase 
of enrollment rates

Within the first week of launching, enrollment tripled as a result of a new mobile friendly process.

Phase 1: Mobile Optimized Sites

With limited developer resources, we took a two-phased approach to resolving the bounce rate issue. The first phase was to create a separate mobile-optimized product that lived outside of the antiquated CMS platform that all the desktop websites where built on. The most critical functions (search, enrollment, account management) were retooled and adapted to work effectively for mobile users.

Phase 2: Responsive Design

Now faced with the redundancy of having three separate iDine digital products in the marketplace (on multiple CMS platforms), the solution was to evolve the mobile sites into a fully responsive experience. A move that would free up development resources while addressing known usability issues with the desktop site and standalone app. The responsive site would also allow us to modernize the look-and-feel, upon which I designed the new interface around.

Hero Search
Trending Restaurants
Recommended Spots
Promotional Ad
How It Works
Restaurant Cards
Neighborhood Spots
iDine Mobile Promo

Underneath the Hood

A look at the UX work behind the redesign

Website User Feedback Analysis Document

A spreadsheet of all website visitor comments, that I filtered by issue, then categorized by partner, feature and section.

Personas & Usability Assessment

A usability scorecard and personas with user stories that I put together to contextualize the problems we needed to solve for.

Learnings From Honest User Feedback

Although some user comments were a bit brutal, we needed to see them in order to truly address the issues. After carefully reviewing all of the feedback, it was confirmed that user goals were being dramatically impeded by a less than optimal experience.

Functional Specs (Wireframes)

I reviewed each page of the current site, taking inventory of every content item and how it functions. 
I then established new features and created functional specs that addressed the user feedback which would serve as a framework for the developers.

Sitemap
Enrollment Conditions
Page Templates
Advanced Search Conditions
Logged In Homepage
Search Results Conditions

More Useful Search

Replaced an ineffective two field search feature with a single input field, supported by three tabs, which enables users to search by location, cuisine or features.

New Search Module

Old Search

iDine

Streamlined Results

Content on the search results pages was reorganized for better scanning. More intuitive sorting/filtering was introduced to help users quickly identify relevant results.

iDine Search Results

Old Search Results

iDine

Reduced Enrollment Clicks

Converted a laborious three-page enrollment process into a single page with a simple two-step form. Non-essential fields were removed to lessen user fatigue and promote faster signups.

iDine Member Enrollment

Old (3) Page Enrollment Process

Simplified Account Center

Vertically formatted to direct the user flow and focus visitors on a single task at a time. Use of mobile-friendly accordion panels keeps the interface clean, hiding irrelevant information, which enables details to be reviewed/updated without distraction.

Old Account Center (Scaled down 50%)

iDine

Revamped Details Pages

Now uncluttered and void of extraneous elements, the newly designed venue details page takes on more of an e-commerce product page feel. The introduction of supplemental editorial content adds colorful personality while boosting SEO value.

iDine Website Redesign
iDine Website Redesign
iDine Website Redesign
iDine Website Redesign
iDine Website Redesign

Old Details Page

iDine