Problem:WinWinLabs is a complex fundraising gaming service and the existing website was developed with an overload of features. User pain points involved immediate confusion resulting in a lack of trust and 97% high bounce out rates. |
Solution:Narrowed the MVP and designed a clean and intuitive landing page that made complex flows simple. This resulted in 95% of users engaging with the service, interacting further into the site, and spending money to play the game. |
Research:Research focused on: user interviews, competitor analysis, journey mapping, user flows, personas, iterations and A/B testing. |
Tools:Paper, Sketch, InVision, Photoshop, Miro, and Zeplin. |
My role:
UX Designer following the design process: strategy, research, analysis, iteration, design and testing. I developed the style guide, framework, and presented all deliverables in InVision and Zeplin.
Strategy and Scope
Current MVP and strategyThe service provided on the existing site was intended to disrupt fundraising by:
- Providing a platform for sellers to earn income by offering products, cash, experiences, and educational opportunities - Providing opportunities for players to pay to play games in hopes of supporting causes - Providing a new way for various causes to raise funds All of this information is presented to users upon opening the site through icons, scrolling images, gifs, and various colors. When searched, the site's description included: a system for fundraising that utilizes games to enable education, creativity, and innovation. The owner wanted to keep as many features as possible to preserve as much code written. My opinion was that it was overwhelming to users but needed quantitative and qualitative data to determine if I was correct. |
Results of Usability Testing on Existing Site
I conducted interviews, task analysis, and observed a variety of users on the existing site to understand its usability.
I gave 10 users the same tasks: 1. Find a product/experience with a fundraiser attached that interests you. 2. Win that product/experience by playing a game. 3. Describe what you see and how you feel. |
Redefined MVP, Website Optimization, and Determining Users
The data collected from usability testing revealed high bounce out rates and a need to streamline and simplify. Through a visual conversation with owner, we determined the minimum viable product, strategies to improve website optimization, and determined the primary users: the seller, the prize-seeker, and the fundraiser. For this phase of the project, I would determine and design features for the prize-seeker while supporting the tasks of the other users.
The minimum viable product would involve:
1. Provide service for users to sell products or experiences through competition (seller)
2. Provide service for users to pay to compete for products/experiences (prize-seeker)
3. Support causes, from a percentage of revenue earned from the competitions (fundraiser)
Recommendations for Web Optimization:
1. Simplified headlines related to the mission of the business
2. Stronger visuals to support the mission
3. Clear pathways for users with prominent CTA buttons
4. Success stories on landing page with complex information further into site
The minimum viable product would involve:
1. Provide service for users to sell products or experiences through competition (seller)
2. Provide service for users to pay to compete for products/experiences (prize-seeker)
3. Support causes, from a percentage of revenue earned from the competitions (fundraiser)
Recommendations for Web Optimization:
1. Simplified headlines related to the mission of the business
2. Stronger visuals to support the mission
3. Clear pathways for users with prominent CTA buttons
4. Success stories on landing page with complex information further into site
Research
User Interviews for Context of Use
Prize Seekers:
When are they competing for games? During breaks in their day. This could be in their office, while waiting for the train, in the bathroom, or when they are getting ready for bed. Why do they do this? They enjoy mental, competitive games that distracts from what is going on around them. They love winning items for less than their value. What are their needs? Due to competition occurring randomly, the potential for an interruption is high. Players needed time frames on games or at least the ability to pause them and return later. If they could use their love of competing to help others, would they? Overwhelming yes. |
Sellers:
When and why are they offering up products? Some sellers do this full time as a way to generate income, while others see it as an opportunity to do it randomly. They use platforms that are easy and supports various user needs. What are their needs? They need an intuitive system and one that markets for them. Where are they? Users use their phones to take pictures of products, and may be using the site while in storage containers, garages, bedrooms, offices, and basements. What would they need from a service that shares proceeds with various fundraisers? Users stressed an easy set up process and taxes are clearly understood. |
Competitive Analysis
I analyzed features from sites geared towards playing games, supporting causes, and selling products. I learned that clear visuals, short headlines, and the ability to navigate intuitively made these landing pages successful. Users were given enough information to build credibility and understanding, they ventured further into the product being given more complex information.
Analysis
Persona Development
User Journey of Sandra
After synthesis of these competitor products, I designed the journey of Sandra to be greeted on the landing page with large visuals, summarized information, and CTA buttons to accomplish goals. As she travels further into the site, she is given more information to make a decision. Once she decides to play the game, she can do so in four clicks.
Synthesis of Features Offered to Users
I needed to understand what Sandra would want to see as she travels through the site. I synthesized the number of features offered through two strategies:
1. I interviewed prize-seekers and sellers to learn about which features were the most necessary to support their path. I learned on the landing page they wanted to see various prizes, a brief explanation of service provided with a clear path depending on their task, and some credibility. On the prize card, they wanted to see only what they care about: cost, prize, the fundraiser, process to win, and ability to seek out more info.
2. I used Trello and the MosCow method to help narrow down the list of features and included the owner within this research. Why? I wanted his collaboration with this process as he is representing the business constraints. There needs to be a compromise between what the business wants and the users. |
If I don't care about it, I don't want to see it. |
Design
Sketches and Wireframes
Landing page: since 90% of users believed the initial site was fake, I needed to build credibility. The landing page would be a story, with a hero image containing bold visuals of fundraisers supported or products won. As users scrolled down, they would be given more prizes options, learn about the service, the purpose, and success stories of users.
Evaluate
Usability Testing - Did the User Get the Right Information to Make a Decision?
I learned that users understood on the landing page the three purposes but there was minimal direction for the seller. I had given real estate twice to explain purpose so I removed one and added a section just for the seller. Users liked the mini-prize cards but were given too much info. Users preferred just a visual of the prize with the name of the cause. The prize-card needed clearer information on how they win and the tabs needed to be simplified more.
Design
StyleGuide
Focusing on the psychology of color for user behavior, I used blue to evoke comfort and communication contrasted with a warmer yellow that would generate feelings of fun, high energy, and hope.
Typography included Helvetica Neue, Helvetica and Avenir. Spacing is defined on a 8px soft grid. Layouts defined by a 12 column, 1200px grid. Accessibility: I designed states for the buttons, supporting accessibility and clarity for the developers. |
Web Content Accessibility Guidelines - Section 508
I designed states for the buttons, considering normal, hovering, focused, pressed, and disabled. My goal was that all buttons were operable, understandable and robust for future modifications. When considering contrast, I designed interactions, headlines, fonts, and backgrounds that were perceivable. This provided clarity to the developers.
|
A/B Testing on Mid Fidelity Wireframes
All notes from A/B testing can be found here.
-70% drop in confusion for users occurred with the less complex
mini-prize card. Modifications: Mini-prize cards were placed on a carousel of three rotating cards at a time. Content was narrowed down to: - how to win - visual of prize - headline for prize - competition status - fundraiser visual and name |
Outcomes and Results
User feedback and testing concluded positive results when understanding the MVP. Due to design iterations, users were able to independently and intuitively interact with the landing page and travel into the prize card. They were given only the information they desired with the ability to explore further on their own. Due to this project being self funded, I was hired to complete only the landing page and prize card for this project. My recommendations for next steps are here and I look forward to working with this client more.
Follow the pathway of Sandra as she clicks on a 1978 Ford Ranger F-150, learns about the description, the fundraiser and clicks to play the game.
|