Eureka Surveys is a survey app and web application that provides daily surveys to the users. Users can complete surveys and make money. Sweepstake surveys also allow user to enter and win lottery entry. User will also get free money for checking in and completing a quick daily poll. Eureka surveys is #1 Survey App in apple store with 100K+ Reviews, 4.8 Stars.
Responsibilities: I was a part of small team of 3 people and I am the lead UX designer of the project. I collaborated with founders of the company, a developer and another user researcher from concept to final launch (QA). My role includes introducing a new feature - "cash out through gift cards" as a different cash out experience to the users, redesign their current screens, design a responsive web application, and some miscellaneous landing pages / blogs for SEO purposes.
My day to day job includes: competitor study, user interview, user testing, data analysis, rapid wireframe, and hi-fidelity prototyping. This is an agile project with a duration of 3 months , and we have successfully launched the web application, and cash out feature MVPs.
two types of surveys
We added micro Interaction and gamification to both iOS and sweepstake surveys. The intention of quick survey is to get user engagement, fill in their profile, familiarize with survey taking process, and prepare users to take more sweepstake survey which generate revenue.
cash out to gift cards
This is a new feature we want to push to live for our users. Currently users are only able to cash out through PayPal. Gift card shop presented more cash out options to our users, and give users who have low balance incentive to complete more surveys.
a responsive web application
high level project challenge
How do we manage and design survey offer wall and cash out flow to improve existing survey-taking experience, and get a higher user engagement rate?
overall project approach
Overall project goal
We always have the high level goal in mind, to improve Eureka survey user experience, and to ship new features.
Breakdown into key challenges
To be more goal oriented and more efficient, we broke down the goal into smaller challenges.
Put "jigsaw" pieces together
When each jigsaw piece ( small challenge) is put together, we revisit our overall project goal to analyze the impact and achievement.
As a lead UX designer, my job is to focus on ship the new features and improve the existing user experience. During the design process, I was challenged by different tasks. In order to be more goal oriented, we broke down the high level project challenge into smaller tasks, and we see each task as a jigsaw piece. Within each task, we are able to clearly iterate the problem, the obstacle, the challenge and the goal. When the small jigsaw pieces are put together, we are closer to complete our main project challenge and improve Eureka Surveys.
view key challenges
background
When users hit $10 balance, the current option is to cashout to PayPal . We have been receiving user email requests asking for alternative options to cashout. To validate the needs, we did a quick Daily Poll in our own app, and conducted user interviews.
Goal
After collecting user feedbacks and talking with the product manager, we set up amore specific goals and action items for this new gift card cash out feature, and necessary improvement for existing cash-out flow.
Create a gift card shop for all users. The gift card should be accessible to all users as an encouragement to provide more incentive for users to complete surveys.
The current PayPal cash-out will be combined with gift card cash-out. We understand PayPal is still going to be the method most of the users choose to cash-out, we want this method to be easy to find.
We want to improve the current UX and make the whole cash-out feature more obvious to the users.
iterations on gift card shop
unable to cash-out
able to cash-out
01.overall user flow
Structure: most popular (Paypal, etc) and view all (all other gift cards).
Information presented: Gift card name, minimum cash-out, user balance.
Gamification: progress bar to show user balance/ minimum cash out balance.
Comments: 1. The progress bar is redundant as all gift cards have the same $10 minimum threshold to cash out.
unable to cash-out
able to cash-out
02.User balance overview
Structure: User balance overview, most popular (Paypal, etc) and view all (all other gift cards).
Information presented: Gift card name, minimum cash-out, user balance.
Gamification: progress bar to show user balance/ minimum cash out balance.
Comments: Designed user balance overview on top of the page and remove the redundancy on each card.
unable to cash-out
able to cash-out
03.Combined History tab
Structure: User balance overview(could lead to user history), most popular (Paypal, etc) and view all (all other gift cards).
Information presented: Gift card name, minimum cash-out, user balance.
Gamification: progress bar to show user balance/ minimum cash out balance.
Comments: User cash out history needs to be more visible for users since they tend to check history each time they cash out.
current cashout flow
We did some research on what is wrong with current cashout flow, and how could we improve it. We used LogRocket to see the issue with real user screen, conducted user interview to understand their pains and obstacles, and posted quick daily poll to get a general feedback from our current users. We found out there are 3 forms of user obstacles.
1.
User are confused about which button could they checkout
2.
They entered non-paypal email addresses and are not able to receive paypal cashout
3.
They mistype email address and entered an invalid email address
issues on the current flow
On the business side
The change email request puts burden on the customer support team and it is time consuming for customer support team to respond to each individual request.
On the users side
It is hard and usually take more than 2 weeks to reach their first cashout $10 milestone. When their cashout is interrupted by wrong email address and users are not able to receive money, they are frustrated.
On the security side
The event of manually invaliding current Paypal cashout, and to switching to another user email address sometimes expose us under more security risk. We see some fraud related activities related to cashout email change requests.
To improve the cashout flow, We set our goal to 1). make cashout button clear to the users, and 2). improve cashout and enter email flow. We decided to improve the flow with the new feature "giftcard cashout".
analytics facts related to cashout issues
Collecting the customer support emails, we found out majority of users mistype their email address instead of enter the wrong email address. Using Mixpanel as our analytical tool, we found out Cashouts where cashout email MATCHES user email versus Cashouts where cashout email DOES NOT MATCH user email is 22600 :19487.
Cashout email does not match Eureka registration Email
Cashout email match Eureka registration Email
Contact customer support due to a mistyped email address
Contact customer support to change email address
*The number here has been intentionally altered
cashout flow iterations
Initial Iteration
The first thought was to focus on reducing the number of mistyped email addresses as per customer service analytic. The initial solution is is to add a screen with default email address ( Eureka Address), and the cashout will automatically be sent over to the default address. In this way, it will reduce chances for users to mistype their email address. On the screen, user are also able to switch to another email address, where manual typing is required. We provided email validations to make sure user enter a valid email address.
Second Iteration
However, in the later phase of research, we discovered that almost half of our users have different cashout address and Eureka emails address. The above solution might cause users to click on "send now" too quickly, and send the cashout to a non-paypal email address. This will adversely create more customer support issues. To fix this problem, we provide the second iteration where we add another screen for validation, and on cashout screens, we indicate "PayPal" email address with an emphasize of PayPal logos UI.
Cashout through other giftcard Iteration
Different from Paypal Cashout, where users are required to enter their PayPal email to receive cashout, other giftcards does not require specific email address as a recipience. The giftcard could be sent to any email address user has. We adjusted the UI to differ the flow from Paypal cashout.
cash out to gift cards
This is a new feature we want to push to live for our users. Currently users are only able to cash out through PayPal. Gift card shop presented more cash out options to our users, and give users who have low balance incentive to complete more surveys.
how do we discover edge cases?
Common edge cases are thought of and designed for during initial ideation. We went through a set of checklist including: validation, error states, empty pages, etc. However, we did not cover all eventualities. During the user testing, we discovered that most of our web users are using vertical small tablets, where the initial design was not counted for. Moved on to final prototype and product MVP, we continuously monitored user behavior using LogRocket, and discovered more edge cases such as what happened when the survey provider is down? What happened if the survey quantity is low?
edge case 1: unexpected device sizes
Background and the problem
When we monitored user behavior using LogRocket, we discovered that majority of our web users are not using a traditional desktop device to log on Eureka Surveys. Instead, we detected a large number of small, vertical andorid tablet being used. And none of the users rotate the screen from vertical to horizontal. This called out attention as, although we designed and built for a responsive web application, our breakpoint was set to a smaller number.
The problem is, we used a 2-column display for the web application, and the right column offer board was be squeezed in and the CTA buttons are not clearly presented to the users.
How could we present our interface to the users with unconventional devices?
the solution
We re-examined our breakpoint, and designed offer wall as a sliding page when the device ratio <1:2.
.gif)
edge case 2: unexpected states caused by survey vendors
Background and the problem
Eureka Surveys' job is to take surveys from vendors and present them to the users. However, even if we would want to promise to our users on the efficiency of information, we still cannot guarantee that our survey vendor could pass down the survey with 100% accuracy. Surveys quantity and quality fluctuate base on seasons, quarter, weekday, etc.
The problem is: how do we present our screens to the users when survey quantity is low? How could we encourage our users to check back again later? And how could we present our screens when there's a technique interruption from our vendors?
survey terminated
A lot of our surveys are conducted on a third party platform. This is the major reason why the completion rate of sweepstake survey could sometimes be as low as 5%. In order to encourage users to come back and take more surveys, we implemented "terminate for rewards" concept, where we presented the partial rewards to the users after their survey being terminated by the third party platform.
Low survey quantity
Survey supply is seasonal and the quantity and rewards could be affected by multiple factors. When there's no survey on the home page, or when there are days when surveys are paid better, our goal is to be transparent and encourage the users to check back later. We introduced banner for occasional announcements.
empty states: 404 page
During the web design, I designed the empty states of error 404. The goal is to take the user back from the moon to the earth home!
Combat Delayed Loading
We noticed users are rage-clicking on the Sign-Up button on the landing page even thought we presented a loading modal with spinning animation. To prevent rage-clicking, we grayed out the CTA button, and relocated the spinning animation on top of the button. This gives a much clearer direction that the CTA button is not clickable.
"toolbox"
One of the perks of working in a startup is to be exposed to the newest and most exciting products from other startups. I was able to use some innovative products to help me with research, analyze, and design better user experience design. I was challenged to generate a quick understanding of those products, and know how we could make a best use of them in order to help improving Eureka Surveys. Compared to traditional user experience research and design process, these products provide me with new means and methods to conduct user research and design, and further help us to make better decision in product design. They become part of my research methods.
LogRocket, Inc.
What is it? LogRocket is a logging and session replay tool for JavaScript Apps.
How does it impact UX and business? We used live session of LogRocket to track our web user and their performance. We create certain "event" to monitor newly launched feature and to test out specific user flow.
Results? We are able to discover that most of our web users use a non-traditional screen. We used the finding to improve design for smaller portrait devices. Moreover, we tracked down some buttons that are rage clicked and better design these.
mixpanel
What is it? Mixpanel is an analytical tool to help us understand valuable customer behavior.
How does it impact UX and business? We created different funnels in Mixpanel , and used the combination of funnels to analyze customer behavior. We are able to see conversion rate under different filters, and rethink our design strategy.
Results? Utilizing analytics in mixpanel, we validated our guess that the retention rate of sweepstake survey is low. We are also able to track down our user group in different devices, which helps us find the main and secondary personas.
Eureka Surveys
Yup, we used our own product as well. Just because we are a survey app, we are able to get our own user responses the fastest and cheapest.
How does it impact UX and business? We would quickly test our an idea using "daily poll" section in Eureka app.
Results? We are able to hear it from our own active users within a few hours on their opinions on Eureka Survey features. We used it to mainly quickly test our ideals before further research and interview.
Miro
We used it to before and after user interview. I collaborated with user researcher to create highlight of each interview
notion.so
We used it for project management, or any other text oriented tasks.
Figma
We used it for wireframing, mid-fi, high fidelity prototyping, and mockups.
adobe Illustrator
I used it to create more complex graphic assets and diagrams whenever needed during design.
