Overview
Project Background
With the existing product marketing page built on outdated design patterns, our collaborative effort between the product and marketing teams aimed to revamp it with fresh design patterns and updated copy. Focused on enhancing user engagement and modernizing the platform, our goal was to create a visually captivating and user-friendly experience reflective of contemporary standards.
Role
UX & UI Designer
Tasks
Competitive Research
Content Hierarchy
Ideation
Prototyping
Team
Creative Director
Copywriter
Producer
Product Owner
Marketing
Developers
The Challenge
The challenges encompassed redesigning the product page to align with the latest Citi design patterns, implementing periodic promotional offers, and updating product images. Addressing the low conversion rate from the product page to the account opening flow was crucial, alongside integrating FAQs, cross-selling, and prompts for upgrading to other Citi products.
Outcome
As a team, we revamped the Citi brokerage account product page to prominently showcase its key features, incorporating engaging product screenshots for user interaction. Additionally, we implemented an FAQ section to address customer queries and strategically highlighted other Citi products for cross-selling and upgrades. This resulted in a notable increase in the conversion rate from the product page to the account opening flow.
Elevating essential features such as promotional offer, $0 commissions, no minimums, and trading flexibility as primary design focal points.
Enhancing user engagement through impactful product screenshots that effectively highlight available features.
Strategically incorporating an FAQ section to address customer queries while also showcasing other Citi products for cross-selling and upgrades.
Process
Design Process
Timeline
1 Design Sprint
5 weeks
Tools
Figma
Figjam
Jira
Stakeholders
Product Owners
Marketing
Research
Design System Team
Research
Current Design Analysis &
Competitive Research
I conducted a comprehensive analysis of the existing product page, leveraging data points including conversion rates and user engagement metrics. Examining the content's narrative alignment with our desired customer experience, I investigated dropout reasons and performed competitive analysis across various domains. By synthesizing insights from both Citi's current page and competitor observations, I identified key areas for improvement and outlined strategic focus points.
Through our discovery and research efforts, we gleaned several pivotal insights:
-
Presenting the benefits of opening an account with Citi and services the company offers
-
Highlighting key benefits like low or no commissions and the ability to trade according to user preferences
-
Integrating an "I want to" statement to facilitate user connection with the product
-
Displaying product screenshots showcasing key features to enhance user understanding of the product experience
Personas
During the project, our design process centered around developing a persona brief to guide our decisions. We identified two primary user types: 'Beginner Future Focused' and 'Intermediate Future Focused', aligning their needs with the product features and capabilities.
Design
Wireframes
I narrowed down key design focus areas and proceeded to craft wireframes, developing three distinct layout and content options. Adhering to Citi's existing design philosophy, I innovated where necessary to ensure a superior user experience, pushing boundaries while maintaining alignment with the brand's identity.
UI Design
I engaged stakeholders in discussions to evaluate options, taking into account content, existing Citi design patterns, and user experience. After careful deliberation, we chose Option 2 to progress to high-fidelity UI designs. Throughout the design process, I maintained alignment with Citi's brand philosophy and ensured consistency across all product pages on citi.com by thoughtfully selecting design elements.
Learnings
In this project I was able to enhance my skills as a designer as well as:
-
Collaborating effectively across diverse disciplines, including research, product, and marketing teams.
-
Pushing boundaries to enhance user experience while maintaining alignment with brand guidelines.
-
Demonstrating adept decision-making skills in a lead designer role, navigating complexities with confidence.
-
Presenting thoughtfully crafted ideas and rationale coherently to stakeholders, fostering understanding and alignment.
Related
Citi Wealth Builder
We replicated a similar process for another investment product marketing page featuring Citi Wealth Builder and Citi Wealth Builder Plus. Our objective was to design a comprehensive product marketing page presenting information on both products while facilitating user decision-making through detailed comparisons, empowering them to make informed investment choices.
.png)
