square-all-screens.png

ReferTree

refertree-all-screens.png

REFERTREE

Refertree allows users a way to purchase and manage their subscriptions in a single app. As an added bonus, users can save on their monthly bill by referring friends to purchase from the app. The idea was developed in an internal innovation session at Assurant Solutions. 

Goals

  • Create more visually appealing displays for products and flexibility in layouts for featured sections

  • Simplify checkout process (reduce steps / make it clearer when additional selections are needed)

  • Reduce clicks to see basic information, like people I've referred and money I'm earning

  • Resolve disconnect between the app's visual tone and the core audience

Contributions

  • Led UX and UI for the redesign (original work handled by outside agency)

  • Facilitated and grew working relationships with Dev and QA teams

  • Led design QA efforts for original implementation

Research

Working with the product manager, we conducted focus groups on the both the concept and on the app. The session highlighted some usability issues as well as a disconnect between our core audience and the visual design of the product. Additional feedback focused on overly complicated workflows for the main tasks. After hearing all of these issues, we decided the MVP design should be revisited. 

User flows

With several solid feedback sessions completed, the product team took another look at our user flow diagrams. We decided to use some of the suggestions from the research to deliver more streamlined flows for our two core functions: purchasing a product and referring new users. 

refer@2x.png

Design

When revisiting the design of the app, I focused on simplifying the interface to ensure the primary user tasks were complete. I also focused on a fresh, clean and friendly take on the existing brand colors in an effort to connect more with the primary demographics. Below you can find a few comparisons on how the interface evolved:  

Shopping

The original design lacked a premium experience in the product display. There was also very limited flexibility with product images, which meant an inability feature specific products and sections. For the redesign, I focused on an improved product presentation to better fit the business needs and user desire for a less cluttered and more easily navigable shopping experience. 

 

Original

old-shop@2x.png

Redesign

updated-shop@2x.png
 

Referral and savings

The original experience used a page-level navigation to create separate, distinguished action areas. User feedback informed us that there was too much segmentation. When redesigning the referral and savings presentation, I condensed these four sections into two pages. The account section was moved to a dedicated section accessible from the main navigation.  

 

Original

old-saving@2x.png

REDESIGN

updated-subscriptions@1x.png