CASE STUDY
Landing Page Blog & Filter Design
Sun&Snow offers a unique service in form of the voucher as an alternative product.
My Role
I was selected to join a small team to drive this redesign. While crafting the end-to-end experience, I primarily focused on designing the home screen & checkout flow, as well as introducing consistency to the design style.
Background
Over the past year, we have observed a significant decline in sales. A notable percentage of users prefer to call directly to purchase a voucher instead of buying it online. To understand the issue, we conducted research to uncover user pain points.
Problem
The landing page does not meet modern UX requirements.
The Goal
Increase sales conversion rate on the landing page.
Opportunity
Not only this project was important because the landing page was the main sales channel for vouchers, but it also offered a unique opportunity for me to demonstrate the critical role of good UX design, especially as the first Web Designer in the company
Tasks
- Redesign of the homepage
- Improve checkout flow
- Architect blog & filter as a compliment
Cooperation: Bringing Design and Development
In this project, effective cooperation between the web designer and development teams played a pivotal role in achieving our goals. As the first web designer in the company, it required dedicated effort to establish productive processes and communication channels.
We held frequent meetings to maintain a seamless project flow. It helped gain insights into the developers' requirements and challenges.
Exploration
At the beginning, I explored different ways the landing page can be architected and information structured. I also explored various approaches to show the most important benefits of the product without overwhelming the user.
Iterations
The structure was rearranged completely and each iteration came with me discovering new possibilities of creating a clearer homepage.
Old design Issues
The previous homepage had numerous elements that resembled call-to-action buttons and multiple disparate fonts detrimental to user experience.
Old design Issues
The old section “Why choose voucher?” was cluttered with visual elements and mixed font weights and colours.
Old design Issues
The last former section had different font weights and small line spacing within bulleted list sentences.
Solutions & Fixes
I structured the homepage into distinct sections. CTA’s were reduced to just two. I redesigned or removed elements that resembled calls to action to avoid confusion.
Solutions & Fixes
I pointed out 3 main advantages in the section “Why choose a voucher?” I also added simple icons with titles and short descriptions of these advantages.
Solutions & Fixes
In the last section, I kept font weights the same within sentences with concise descriptions. Also, I added CTA in case the user wanted to start flow at the bottom of the homepage.
Simplifying old flow
The old user checkout flow contained unnecessary steps that prolonged the checkout process and, at times, required users to backtrack within the flow.
New flow
To enhance simplicity, I have made one task multifunctional. This allows users to select both the type of voucher and the quantity at the same time, eliminating the need to go back to previous steps.
Blog
To enrich the marketing content of the landing page, I created a blog with a filtering feature. This blog serves as a central hub for recent news, essential updates, and other relevant information related to the company's business.
Filter
This feature allows users to search through the blog and select an article that fits the user’s interests. Articles can be filtered by reading time, creation date, or sorted by number of likes and by tag names.
Impact
The marketing department has provided data comparing the sales summary on the landing page for July 2022 vs July 2023. The data indicates that the company’s profit has increased four times.
Learnings
During this project, I went through research, wireframing, and iterations. The primary value was striking a balance between meeting the development team's needs and requirements while emphasizing the importance of UX principles and user-centric design.
