KELLY CHANG .

Background

My White Card is a platform offering discount coupons and services provided by local partners for members to enjoy a mutually-beneficial lifestyle, high-quality services, lower costs, and friendly access to beauty, health, and wellness. However, their website had relatively low traffic and high bounce rate. They would like to redesign it and develop their iOS/Android apps.

The goal

Aimed to attract customers and increase the conversion rate of shopping coupons and joining membership.

My role

Working as a freelance UI/UX designer, I collaborated with 2 engineers to make changes. I conducted usability testing, created solutions, and designed UI for the website and iOS/Android mobile apps.

Duration

4 months for the design and 4 months for assisting the implementation

Understanding the problem of the website

Learning the target users are young women and interested in self-care and online shopping, I decided to conduct sessions of user testing to find out the problems of the website. I defined 3 scenarios and 4 tasks to understand users' thoughts about the website and what problems they'd encounter when shopping coupons.

• Take a moment to view the homepage and talk about the services provided by My White Card
  ‍(First-time visit)
  
• Take a few minutes to explore coupons you’re interested in and choose one to tell what that is
  ‍(First-time visit)
  
• You‘d like to do teeth whitening. Use the website to find the specific coupon so that you pay the least and tell what membership tier the coupon is in and its provider.
  (Without membership, look for coupons for a specific service)
  
• Your friend mentioned that Beauty Park provides great body treatments, and you’d like to go there to do leg hair removal. Having registered as Elite membership on the website, you search for a coupon of that service provided by Beauty Park.
  (With membership, look for coupons for a particular service provided by a specific company)

I conducted 6 sessions of user testing with the target audience via Zoom and documented all observations and findings on the spreadsheet. I consolidated the findings and provided possible solutions and then prioritized them according to severity levels.

I documented and consolidated the findings on a spreadsheet.

After communicating with the client, we decided to proceed with the following major issues, which would discourage users to join membership and influence their experience of shopping coupons. ‍

• The homepage had insufficient information about the membership and the related benefits users could get.
  
• It's hard to find specific coupons by membership, services, and providers.
  
• Users repetitively searched for viewed coupons.
  

How can we enhance the recognition of membership info and increase users' interest to join?

The homepage should provide information about what the site does and what it offers, which is important for first-time users. However, most of the participants indicated that they didn’t know the difference between coupons with different colors and the membership tiers until they registered an account. It would affect users' willingness to join the membership if they just know these info in the last moment.

Add "how it works" and membership info sections on the homepage

In addition to using a tagline to indicate clearly what the site does, to make the site more understandable for first-time users, I recommended adding a section indicating what services users can receive on the site and another section about membership info and the associated benefits between different tiers so that the services of My White Card can be briefly introduced to users right away when visiting the site and increase their interest to join the membership.

How can we improve efficiency of finding specific coupons?

The examining result of finding a coupon for a specific service or provider pointed out that users might easily fail to find it. Participants revealed that searching for a specific coupon, such as coupons for teeth whitening service or coupons provided by Beauty Park, was hard on the site due to the lack of categories/filters that facilitate the search and the imperfect search result by using the search bar. The current sorting of coupons by price wasn’t really helpful to find a specific coupon.

Allow to filter coupons by categories and separate coupons by membership tiers on the coupon page

To tackle the problem, I recommended adding coupon filters by providers, services, and other property so that users can quickly locate specific coupons. Also, the category filters could serve as a menu for new users to know what coupons are displayed. Plus, considering membership users might only focus on coupons in their membership tiers when searching for coupons, a separation of coupons by membership tiers could enhance efficiency.

For layout explorations, I explored 2 options. In Option 1, users could use the filters on the left-hand vertical sidebar to narrow down coupons by categories. Users could view all subcategories at one time even though it could be a very long list. However, the developers concerned that the sidebar would reduce the room for columns of coupons on the page, and it's not visual appealing. We eventually went with Option 2, which visually looked better and could increase discoverability of these filters.

Based on Option 2, I designed a filter with expandable drawers so that users could see further subcategories and apply multiple filters.

How can we reduce repetitive searches for viewed coupons?

Also, when observing the participants browse to find specific coupons, I found that they repetitively went back and forth for coupons they had just searched since they barely remembered the details of the visited coupons and all coupons looked identical, which significantly lowered the efficiency. This also demonstrated a violation of the heuristic of recognition rather than recall (Nielsen, 1995) which proposed that the users’ memory load should be minimized when using a platform.

Add “Collections” feature to save the coupons that they’re interested in

To minimize the users’ memory load, I recommended adding the collection feature, so users can mark the coupons they’re interested in. Users can view the selected coupons on the “My Coupon” page, which is convenient to claim later.

Visaul Design

In addition to solving the major usability issues, I also redesigned the visual of the website with the current brand colors and font style and translated the new design into iOS/Android mobile apps experience.