UserZoom is an all in one SaaS solution for UX research. Last year, UserZoom acquired YouEye and rebranded the panel company as IntelliZoom. IntelliZoom serves as an internal panel for UserZoom customers that can be leveraged to provide quick and high quality usability study results. By the end of 2017, UserZoom plans to launch the IntelliZoom Panelist Experience. This dashboard will serve as a platform for panelists to manage their study taking activity.
Currently, all study invitations are sent through email. This is a poor experience because email study invitations are hard to track, easily lost in inboxes, and often go unanswered. This makes panel manager's processes more complex and slows study turn around times.
How do we create a better study taking experience for panelists that encourages them to take more studies?
Create an experience that makes it easy and fun for panelists to take receive study invites and take studies.
The experience should feel part of the UserZoom brand but also target the panelist persona.
A dashboard would provide panelists with a central place to manage their study taking activity, allow panel managers to easily track studies, and create faster study response times.
I am one of two product designers at UserZoom. I am primarily responsible for everything on the panel side of the company including internal panel management tools and any panelist facing products. I also assist the lead product designer with the UserZoom research platform. I am solely responsible for all design work on the Panelist Dashboard.
I partnered with a product manager and a 6 person engineering team on this project. The product manager provided requirement definition and general feedback/direction during my process while the engineering team gave me feedback on the feasibility of my designs. I also reviewed my work with the lead designer throughout my process.
Who is on our panel? I worked with my product manager to define who was on our panel. We concluded that our panel is not very diverse. This new dashboard can be seen as an opportunity to attract a more diverse panel by targeting a new persona. A more diverse panel is better for the business.
Persona 1: Who we have
Persona 2: Who we need
Hypothesis: The new target persona would be attracted to a dashboard that included current design trends widely used by popular digital products.
I looked at examples that featured white space, grids, vibrant colors, bold san-serif typography, and small motions that help guide them through the interface.
Initial requirements were provided by my product manager. I decided to focus on the first 3 requirements because they are at the core of the problem we are trying to solve.
As an IntelliZoom panelist I want to...
- Take sample studies
- Take available screeners
- Take available studies
- View study result status and history
- View payments status and history
Defining what a study should look like: Tables vs. Cards
When I went to start sketching, I quickly realized that I needed to figure out what a study looked like and then build the dashboard around the study UI component. Initially, I explored different table styles because tables are a very powerful way to display information and are used widely throughout UserZoom. Ultimately, I decided to use cards in my dashboard for several reasons:
1. Cards are better for responsive interfaces than tables. This dashboard would eventually have to be available across all device types.
2. Cards widely used by popular digital products like Google, Twitter, and Facebook, making them familiar to an individual user.
3. While tables are powerful, they can be overwhelming. Cards are a visually pleasing and make it easy to consume a lot of data at once.
Early Table Explorations
After deciding to use cards I started to explore dashboard layouts. I blocked out spaces and played with balance and information architecture.
Throughout this process, most of my focus was spent on the main dashboard screen. I decided that I wanted a majority of the functionality accessible from this one screen because I wanted the user to have a simple and lightweight way to compare studies and chose which one to take. The easier the study choosing and taking process, the fast a user could take a study. The faster a user takes a study, the more studies they are able to take, thus making UserZoom's study turn around time faster.
I always start on paper or a white board rapidly sketching ideas as they come to my head. I started simple and played with balance by blocking out different sections of the screen. I iterated on this extensively later on.
After defining some ideas on paper I move my prototyping to Sketch and continue to create fast versions.
I eventually settled on a dashboard layout that featured a large banner area and a carousel of study cards for several reasons:
1. I was looking at streaming video websites like Netflix when I came up with this concept. I hypothesized that maybe copying a pattern generally used by entertainment platforms could make study taking feel more like entertainment than work for the user.
2. The banner could be used to display information and be easily changed out. The banner could provide a space for education, marketing, or display a gamification concept my PM came up with.
Picking a Card
Once I knew what shape of cards the dashboard would support, I did another series of iterations exploring the new shape.
I finally settled on this card:
Why this card?
1. Company logo as visual element
2. Know from user research and past experience that payment is the most important information to a panelist
3. Hypothesized that study type would also be important to the panelist
I chose to show a limited amount of information on the card so it would be easy for a panelist to scan the available studies and select one. Further information would be revealed when a panelist clicked on the card.
After finalizing the dashboard layout and card style I created a high fidelity flow of the dashboard using the gamification concept from my PM. This would be the dashboard flow that I tested with our panelists. Through testing I wanted to learn several things:
1. Did the gamification concept make sense?
2. Did the visual look and feel appeal to the user?
3. Did the user understand the concept of practice studies and paid studies?
4. What kind of study information was important to a user?
I used UserZoom and the IntelliZoom panel to test my designs. I had the panelists answer some survey questions about their past study taking activity, perform a ranking exercise on study information, and to a "think-out-loud" (TOL) session with the an InVision prototype of the dashboard. Below are some quotes from the TOL exercise and the results of the ranking exercise.
“I guess am a little confused by the submarine and the squid and what it has to do with the brand. But its pretty!’
“Everything here is what I really want to know - device, tasks, how much. Generally I don’t really care what kind of study it is, I’m more concerned about what device and how much.”
“I see, this is the list of available studies. These are the practice studies and once you are approved you would unlock the paid studies.”
Important take aways from user testing:
- Gamification concept was not understood
- Great response to visual look and feel
- Fairly good understanding of practice studies vs paid studies. Some panelists thought you only had to complete one practice study instead of all the studies
- Confirmed that incentive is most important study information
- Panelist doesn't actually care about the brand and this could cause bias in study taking
Based on the results of my study I made several changes to the dashboard
- Changed the banner away from the gamification concept. Instead, I used the space for more education about practice studies and paid studies. I made the gamification concept more subtle with "levels".
- Left out seat number off the card although it was ranked highly. I made it more discrete by including it in the info section. Don't want to cause bias between studies.
- Removed company logo as visual element to avoid bias. Instead used industry as visual element because it ranked the same as company logo and wouldn't cause as strong of bias.
Below I explored different industry types and how they could be represented visually
More card explorations
Final Card Set
Decisions behind these cards:
- Industry as a visual element because there it was the only other study value that had many options and could be clearly represented as an icon.
- Made payment more prominent
- Although estimated time for study was ranked highly, I didn't include this for two main reasons:
- It is very hard to estimate a study time and misleading a user with an incorrect time could lead to a poor experience.
- There was feedback during the testing that a user could estimate the time themselves based on the study type and the number of tasks in the study.
I used Framer to make an interactive prototype of the dashboard. I plan to test this dashboard using the Framer prototype rather than an InVision prototype this time around. Play with it here
This project has been slotted to be sent to developement by Q4 of 2017. Before that time I plan to continue to test and iterate on this dashboard. Some things I am considering as I move forward with this project:
- Reconsider the card carousel. The carousel won't translate well to mobile and carousels hide content. I would consider removing the carousel and making this a grid of cards that must be scrolled through instead.
- I have several iterations of the study information display (see below). I plan to test these layouts and their contents with panelists.