android-psd-mockup

Where's My Card? 

The Ask: RefillWise users currently can only opt to have their pharmacy discount card sent to their email, are there any better ways users can save their card? Secondarily, are there more engaging landing pages we can create to acquire more users?
The Solution: Designed and developed 2 new product features to let users keep their card in an easily accessible space: add to homescreen and add to wallet. Additionally, drew from vast amount of user research and consumer insights to create effective landing pages using compelling copy, graphics, and layout to increase conversions.
The Employer: Kyle Design Consulting (Freelance)
The Client:
 RefillWise
The Timeline: May - September '18

After a successful design project during my Design and Innovation program, RefillWise approached me about helping them to increase user retention, card usage, and digital conversions. RefillWise helps uninsured and under-insured Americans save on their prescription drugs by offering prescription discount cards that can be used at virtually any pharmacy across America. They are a for-profit company that collects transaction fees from the pharmacy for each prescription filled, meaning that the more money they can save for their users, the more they grow as a company. The company had originally acquired its user base through direct mail marketing in the early 2000s and word of mouth between card users, but has been wanting to grow more and more into the digital space in the last year. While the original physical discount cards worked really well for users early on, after the advent of ubiquitous smartphone usage RefillWise members have increasingly eschewed physical cards in place of their digital counterpart. Over recent years RefillWise has allowed users to take a screenshot of their digital card or have it sent to their email, but has not offered more robsut ways of holding onto the card. Over a series of months, I was able to design and develop 2 different features that would allow users to better keep track of their card: add-to-homescreen and add-to-wallet. In addition, I was able to create about 10 different landing pages with variations in copy, graphics, calls to action, and layout in order to increase conversions of new users visiting the page. 

The Process

I ended up taking the project through a variety of phases from initial discovery, to concepting and designs, to development and review. 

Discovery

I believe that collaboration and co-creation between agency and client is the way to arrive at the best solution, the fastest, with the least amount of errors and re-designs, for the lowest cost.  Because of this, I kicked off a series of meetings with RefillWise at the onset of the project to better understand the challenge that they were facing, define business and user goals, and brainstorm some ways to tackle the problem. We agreed that the most important business goals were to decrease customer-acquistion-cost and increase customer-lifetime-value for discount card users. We agreed that the most important user goal was to give RefillWise members easier access to their pharmacy discount card, allowing them less frustration in finding their card and ultimately greater cost savings in filling their prescriptions. During these sessions, we determined that the best way to make the discount card more easily accessible was by developing features that would allow users to add their discount card to the homescreen of their smartphone and to allow users to add their card to their mobile wallet (Apple Wallet or Google Pay). We postulated that if users could "save" their card in this way, that they would more readily remember to use their card at the pharmacy and more easily find it when they wished to use it. If this worked, it would increase the lifetime-value of a RefillWise member due to the increase in number of discount card usages.

To address the customer-acquisition-cost issue, we brainstormed a handful of landing page ideas to try in order to increase conversion rates on website traffic. RefillWise has employed a healthy AdWords spend and sees thousands of users come through their ad funnel every day. An increase in just a few percentage points would significantly help to reduce the customer-acquisition-cost. As a part of these sessions I was also able to work with an AdWords consultant to help determine some of the highest value landing page tests we could run and establish a methodology for A/B testing and assessing success. After these initial discovery meetings I moved into a concepting and design phase for both the product features and the landing page tests.

Concepting and Design

After having gained a better understanding of RefillWise's goals and charting a path for successful product development, I went into a concepting and design phase for the product features and landing pages. I started with quick pen sketches and moved into higher-fideltity mockups after review and feedback. Below I have a few sketches of key screens in the add-to-homescreen and add-to-wallet user flows. Quick and low-fidelity is how I like to operate at this stage, focusing on information architecture and overall user flows without getting bogged down in minutiae of the visual or interaction design. Throughout this design process, I utilized my understanding of technology to influence the user flows. I firmly beleive that there is no point in designing UX in a way that simply cannot be implemented with current technologies. Designs are ultimately a communication tool to be used by developers and engineers to build a technical product. If those creating communication artifacts do not understand the underlying technology they are designing for, then the designs may as well be works of art, not part of solution building. With this particular project, I was able to use my knowledge of iOS and Android operating systems, Apple Wallet and Android Pay requirements, authentication methods, API limitations, and  various other technical constraints to ensure that the UX I was designing could be effectively implemented.

Android ATH
IMG_0021
ATW iOS

After getting my thoughts out with pen and paper and receiving feedback from the client, I moved on to creating high-fidelity mockups of key screens for add-to-homescreen and add-to-wallet for both iOS and Android. While I love sketch as much as the next designer, I decided to try out Adobe XD because of recent product improvements that have been getting more attention lately. Also, coming from a background in print and graphic design, the Adobe interface and keybindings were pretty familiar to me. I also like how XD connects with the rest of the Adobe CC ecosystem, making maintaining style libraries and importing vectors. Again, with this round of higher fidelity designs, I used my tech knowledge of different UX constraints within iOS and Android systems and technical of Apple Wallet and Google Pay. For example, the passes for each platform had to be designed with significant differences since the APIs and infrastructure of the different backend systems are almost entirely different. As you can see in the pass modal below, Android has very specific templates with very specific field layouts that are locked in to the design. I would have rather grouped the 5 card fields closer together, but even the most flexible template enforces limitations on the layout. Since Google has only really started to focus on their mobile wallet/pay platform a few months ago, there are still features being developed and some of the design constraints could change in the future. In situations like this, I think it is of utmost importance that designers are intimately aware of tech trends and developments of this nature so that they can design for the present but also for the future. Again, what good is it to design a beautiful mobile wallet pass or UX flow that cannot be practically implemented by developers?

iOS ATH@2x
iOS Standalone@2x
iOS ATW@2x
iOS Complete ATW@2x
iOS ATW Modal@2x
Android ATH@2x
Android Standalone@2x
Android ATW@2x
Android Complete ATW@2x
Android ATW Modal@2x

For landing page development, I was able to pull from a large amount of design research from the previous project I had done with RefillWise. I was able to draw inspiration from our top insights and help define personas of different users who would be visiting the RefillWise site to sketch out and create about 10 different landing pages. These pages each incorporated different parts of our research and/or user insights gleaned from previous pages and ad campaigns. In addition, we utilized a user engagement analysis tool, FullStory, to observe user sessions, analyze heat maps, and assess page performance statistics. We used this usability information to further inform page creation. Overall, we focused on isolating different user needs and behaviors per page in order to hone in on some of the most effective pages. Below are a few of the sketches from initial ideation, which were used to communicate landing page ideas to RefillWise and gather feedback. 

IMG_0023
IMG_0024
IMG_0025
IMG_0026
Development

After the phase of concepting and initial designs I was able to move into the final stage of design and development. For the product features, I was able take my sketches, mockups, and user flows and develop them into functional code that could be incorporated into the rest of the product. Since I was adding on to an existing product I was constrained by the current tech stack that RefillWise was making use of. I did most of my work using Javascript/JQuery, HTML5, and CSS3 using mustache templates to produce pages more rapidly and webpack to bundle and build all of my source code. In addition, RefillWise uses KSS to maintain a style library composed of various code modules and UI elements that I utilized to quickly build out the user flows. Lastly, I dabbled with a bit of python and shell scripting to connect to the RefillWise backend services for card generation and effective deployment. Through a series of iterations I was able to build out the add-to-homescreen feature for both iOS and Android (results in section below).

The biggest technical challenge I faced with this feature was finding a way to reliably save state between the webpage and the standalone page that a user has added to their homescreen. It is important that users have access to their specific personal card so that their card works when they run it at the pharmacy and so that RefillWise can track that specific user and their card use behaviors. Unfortunately, Apple and Android don't make this possible through their own APIs or have any information on how to persist data during the add to homescreen process, except for heavier-weight Progressive Web Apps which did not match our use case at all. I was able to design and build a unique solution to this data-persistency problem by "saving state" using URL parameters on the standalone webpage. Once a user clicks the "add-to-homescreen" button, I take the card information stored in a browser cookie and append that information into the URL of the page. That unique URL then gets saved to the user's homescreen. Once they open it up again, the standalone page knows to read the URL params to display the appropriate card information for use at the pharmacy!

I am currently working on the implementation phase for add-to-wallet on iOS and will look forward to realeasing that feature soon! Adding a card to wallet requires significant more development and depends on a bevy of 3rd party services and API integrations. 

For landing page development, I was able to take my sketches and use Instapage to create all of the needed tests. Since I was producing these pages using a drag-and-drop editor, I skipped further high-fidelity design since I was, in effect, desiging and developing simultaneously through Instapage. Some of these pages simply drew on research insights and featured some simple copy and layout changes, while others required that I produce significant graphic content and iconography using Illustrator, yet others required heavy custom CSS and javascript development to achieve specific interactivity functionality. While I needed to design for both desktop and mobile, over 95% of traffic browses from mobile devices so I optimized for mobile use. See the results below!

The Outcome

After all of the concepting, design, and development I was glad to finally get to see my features and landing pages go live! See below for more details and analysis of the impact of my work.

Add To Homescreen

Here are the primary parts of the flow I designed and developed for iOS and Android. Both platforms are similar, but certain differences had to be accounted for in terms of UI and underlying functionality. To try the feature out live visit the page here; you can even try using the card next time you visit the pharmacy!

ATH LP
IMG_0028
IMG_0029
IMG_0030
IMG_0032
IMG_0031
Screenshot_1537071571
Screenshot_1537071580
Screenshot_1537071585
Screenshot_1537071616
Screenshot_1537071664
Screenshot_1537071681

Overall, I was satisfied with the results of my work with add-to-homescreen and am proud to have contributed this feature to the RefillWise product. Since this feature was recently released, we are still collecting data to determine the overall effectiveness in increasing the lifetime-value. Since our customers don't really "convert" until they fill a prescription at the pharmacy we need a few months of data to consider this a success. However, using web analytics we can tell that 30% of visitors who are given the option to add their card to homescreen on the completion page chose to save their card this way!

Add To Wallet

Add to wallet is still in development for iOS and Android so check back in the next few weeks for updates on this exciting new feature!

Landing Pages

Lastly, in order to help reduce customer-acquistion-cost, I designed and produced the following collection of landing pages. Since we were looking to put these pages together for a quick test, I used a landing page creation tool, instapage, instead of taking the time to develop each page with custom code. I created each page to work well on both desktop and mobile, but optimized for mobile since the vast majority of RefillWise's web traffic browses from a mobile device. The effectiveness of the pages fluctuates from concept to concept. Some did not perform as well as hoped, but others increased conversion rates by a significant proportion, thereby decreasing customer-acquisition-cost! 

Capture 3
Capture 4
Capture 5
IMG_0033
IMG_0034
IMG_0035
IMG_0036
IMG_0037
IMG_0038
IMG_0039
IMG_0040
IMG_0041
IMG_0042
IMG_0043
IMG_0044
IMG_0045
IMG_0046
IMG_0047
IMG_0048
IMG_0049

I thoroughly enjoyed getting to work with RefillWise on this project. Not only was I able to decrease customer-acquisition-cost and increase customer-lifetime-value (results pending but probable), but I was also able to help uninsured patients better afford their prescription medications. I loved being able to help RefillWise increase profits AND increase their impact. I would LOVE to get to talk with you more about my work on this project and other UX and development work I have done for companies like RefillWise. Why not see how I could add value to your company as a full-time or freelance partner? Give me a call at 512-592-8049 or shoot me an email at calebtrentonkyle@gmail.com!

Selected Works

RefillWise Price Transparency ToolUX Research | HCD | App Development

Where's My Card?UX Design | App Development | Digital Marketing

Dell IoT ApplicationApp Development

Credera Management ConsoleUX Design | App Development

Accenture Innovation StrategyDesign Strategy | UX Research

SPCA Loose Dog ProjectUX Research | Human Centered Design

Titania LampIndustrial Design

Caleb T Kyle
Dallas, TX
512.592.8049
Email // LinkedIn // GitHub