About the Project
Omaze is a fundraising startup, where I was the product design lead for an MVP relaunch and re-platform of their United Kingdom website. The UK website raises money for charities by giving users the opportunity to enter into house sweepstakes and prize draws. The key to making those conversions is the product page, which I was tasked with redesigning.
My role
Design the product page components, templates and define the states
A/B test features to see what is essential to the website
Collect user testing feedback
Help manage other product designers
Provide user experience guidance on headless cms powering product page
Product Page
These are some of the highest traffic pages for all of Omaze, below you can see half of our top 10 most visited pages are UK product pages. This was not a full-scale redesign, it was more an exercise in understanding what is working and what we can cut for the sake of scope to deliver this project on time.
Figuring out what was working
Running user tests we found that users love the page layout and emphasis on large images. Users felt the images were aspirational, a feeling we want them to feel when considering donating, and reminded them of IG.
The layout was working, now we needed to understand what features would stay in that layout or needed work.
Figuring out what did not
Using usertesting feedback and heatmaps from Hotjar to form our hypothesis, a product manager and I broke down the page into components and evaluated their priority score together. Our PM then created a roadmap for A/B testing based on these scores.
The A/B testing allowed us to cut scope from the project including large gallery, location, value and the show more button.
Show more,but really show less
The original page design would hide body text with a “show more” collapse button because stakeholders felt pages were “too wordy.” Heat maps indicated the show more button was getting clicks.
Stakeholders believed the high clicks meant this feature “was working,” I believed it was hiding info users want, leading to a high stakes A/B test. Testing showed removing the button actually increased page conversion, especially with returning users, therefor we got rid of it.
Character Counts
To address the wordiness issue, the product team pushed for character counts. My process for determining character counts was a three-step process:
Audit current character counts on live product pages to get a number range per field type
Stress test those number ranges in Figma using large character counts on design
Suggest character limit - measure success of character counts based on editorial feedback
When the house draw is closed
We had an entire landing page and blog dedicated to past-winner content. These pages were low traffic but the value of showing winners helps make Omaze feel legitimate and aspirational to users.
After user tests, I found that users go directly to a closed house page for winner content, not the winner blog. They do not care about general winner content, they care about the winner for a house they entered in.
These insights allowed us to cut scope by eliminating the blog and winners landing page. It also meant we needed to build out our closed product pages to reflect winner content better.
Based in this feedback and past research, the things users care most about for closed product pages are:
When is a winner announced - because it could be them so they need to know when to check back
Who won if it is not them - this makes it feel real and not a scam
How much money went to charity
The design team addressed these concerns by building a timeline component and total raise component seen below.
For the business, when a house a closed we want to push them to the next open house. I designed a CTA that would only go on the page once a house is closed. I pushed for automation, where it always shows the most recent open house in the specs, this reduces error and workload for our internal editing team.
Outcomes
We were able to reuse the template from closed houses including the amount raised and the next steps CTA on our charity landing pages and other prize landing pages. Creating a cohesive experience for the users and smaller scope for the development team.
This project is set to launch later this year once we have built out the SEO requirements. Learning the importance of constant testing in the name of cutting scope was a good learning experience. What I would like to see moving forward is using the same testing mentality to build out the feature sets that make the page feel more real and transparent to users.
Prototypes of final design can be seen below.
