Project Overview
The Product: KnowledgePanel is an online research panel that provides organizations with insights into the public’s opinions, attitudes and behaviors. Panel members are selected to partake in surveys. They can access the surveys via the KnowledgePanel dashboard page.
The Problem: The KnowledgePanel users have trouble locating their aviliable surveys on the current dashboard. Many users have unredeemed points and are unaware of the KnowledgePanel rewards system.
Team: UX designer, developers
Responsibilities: Wireframing, creating a design system, component creation, sketching, mockups, prototypes, client communication, and presenting design ideas to key stakeholders.
Figma Link: https://www.figma.com/design/efiUpS90kP6qAkc5iBFUIW/KnowledgePanel?node-id=19-6249&t=JPPirbOsfAl37sSI-1
Password: Designer0511
Existing Screens & Usability Testing
We performed usability testing with existing Knowledge Panel members. We asked them to complete a serious of tasks and asked for the opinions on the structure and UI of the site. We uncovered a few key takeaways:
Users miss / have a hard time finding their aviliable surveys
Users are unaware or unfamiliar with the “My Points” structure, how to earn points and what to do with them
Many users prefer to take the survey directly from the email link rather than visiting the KnowledgePanel portal
Surveys Page - Desktop
Surveys Page - Mobile
Wireframes: Low Fidelity Wireframes
Based on user feedback, I created different wireframes to address the pain points we learned about while testing. In these wireframes, it was important to figure out a way to ensure the surveys are more visible and noticeable on the page. I played around with the scale and card tile placement. In some wireframes, I added a “Redeem Points” CTA to the surveys page to create more engagement with the rewards system.
Desktop: Hi Fidelity Mockups
Once the layout was finalized I infused the page with branded UI elements. I utilized color, imagery, typography and hierarchy to highlight areas of importance and draw users attention. For example, the 3D coin graphic is eye catching and intriguing, visuals help tell the story to the user. Implementing visuals into the card tiles of the surveys make them easier to spot.
Mobile: Hi Fidelity Mockups
On mobile, the fold line is extremely important. We know users struggle to find their aviliable surveys so ensuring the survey card tile was placed above the fold was critical. To ensure a consistent experience across desktop and mobile I made sure the experiences we alike.
