UI revamp that highlights pricing cards
has a new GoPremium Page that's attracting a significant influx of traffic, the platform perceives this as an opportunity to more effectively reassess the current user experience.
.png)
I conducted a detailed examination of each section on the premium page to identify key user focal points. While minor constraints were linked to suboptimal UI patterns and visual design, the primary challenges revolved around scanning for information on the page.
Above the Fold
The desktop version lacked consistency with the design of the mobile web version. Both versions underwent an redesign, adopting a modern, sleek, and dark theme. Outdated content was replaced with more relevant information, resulting in a practical and cleaner user interface.
Premium Benefits & Iconography
The icons in this section were updated to better align with the mentioned topics, featuring a more modern design.
Pricing Plans (Cards)
The pricing plan cards suffered from outdated design, making it challenging to highlight relevant information, especially when there was text overflow. The copy was difficult to read, making it hard to scan. To enhance conversion optimization, I increased the font weight for prices, restructured the information, and introduced expanders to manage overflow, reducing cognitive overload for Family and Student plans. Bright and contrasted colors were incorporated to emphasize CTAs.
Visual Incoherence
The visual design of the premium page was disjointed from its sister pages, lacking consistency in branding style. Utilizing a mood board, I extracted visual elements from other pages and merged them with latest design trends to create a new layout. The aim was to ensure coherence with Spotify's brand identity.
The information shown on the cards doesn't standout out enough, making users miss key details. The page's layout needs to be refreshed with a more strategic UX approach and updated UI to increase traffic and encourage conversion.
I implemented a focused design thinking approach that rapidly and effectively addressed the primary problem, producing a prompt design solution.
After performing market research and a UX audit, wireframes were structured based on logical information architecture that targeted user engagement and interaction. It was crucial to guide the user to the pricing cards to led to conversion.
Create a user interface that aligns with the brand's voice while providing a more user-friendly way to understand important information about pricing plans with redesigned cards.
• The revamp was much more than aligning the UI with Spotify's branding, but rather how the layout and structure can significantly impact the user's ability to find the information they are seeking.
• Brand consistency plays a crucial role in building visitor loyalty, creating a sense of familiarity and reliability for users.
• The hierarchy of information within the pricing cards significantly influenced conversion rates.
I found this project enjoyable due to its quick completion. Leveraging my UX skills, I rapidly assessed priority areas and applied tested UI principles, expediting the design process. Market research and a UI audit facilitated easy identification of the problem, and transparent communication with the client ensured a holistic approach, avoiding unnecessary delays.
