This presentation marks a significant milestone in the realm of UI/UX design, where I have meticulously conducted user research and embarked on the journey of redesigning the Home and About Us pages of HDFC Mutual Funds' website. Through extensive user research, I've gained valuable insights into the preferences and expectations of HDFC Mutual Funds' website visitors. Building upon this foundation, I've crafted a fresh, engaging, and user-centric design for both the Home and About Us pages. These enhancements not only elevate the visual appeal but also provide a seamless and informative online experience for visitors, reflecting HDFC Mutual Funds' commitment to excellence in the financial sector. Join me in exploring how this redesigned website aligns with the company's mission to deliver accessible and insightful financial solutions to its valued clients.

1. HDFC AMC Website Redesign: Home
and About Us Page.
Transforming Home and About Sections"
Presented By:
Rishabh Tiwari

2. Homepage Redesign: Elevating
User Experience
UI Design
Page 001

3. 1.1 Problem Statement
Enhancing User Engagement and Corporate Identity: Redesigning HDFC AMC Website's Home and About Us
Sections.
The current HDFC Asset Management Company (AMC) website lacks an effective user experience and a cohesive
corporate representation. The homepage fails to communicate the brand effectively, and the "About Us" section lacks
coherence. The redesign goal is to enhance user access to vital information and build trust.
The challenge is to transform these sections into visually appealing, corporate-themed representations using Figma
design concepts. This redesign aims to improve user experience and establish a strong market presence by
showcasing HDFC AMC's professionalism and credibility.
Step 1
Define Goals
Page 002

4. Corporate Identity Emphasis: The redesign must prioritize conveying HDFC AMC's corporate identity through color
schemes, typography, and visual elements. The design should exude professionalism, trustworthiness, and a strong
brand presence.
User-Focused Navigation: The interface should be user-centered, allowing easy access to key information like
investment options, services, and company values. Intuitive navigation and clear organization are essential to guide
users through the website seamlessly.
Homepage Clarity and Engagement: The homepage should present essential services, investment offerings, and
news concisely. It needs to engage visitors while maintaining a clean and uncluttered appearance.
About Us Showcase: The "About Us" section should comprehensively depict HDFC AMC's history, mission, and
accomplishments. It should reflect the company's expertise and commitment to clients, fostering a sense of trust.
Visual Consistency and Responsiveness: Design elements should maintain visual consistency and adapt well
across various devices, ensuring a seamless experience on desktops for this assessement.
Step 1: Define Goals
1.2 Requirements
Page 003

5. 2 Revamped Home Page with
New UI Designs- Layout 1
UI Design
Page 004

6. Step 2: Design
2.1 Home Page Sections 1 & 2
Page 005

7. Step 2: Design
2.2 Home Page Sections 3 & 4
Page 006

8. Step 2: Design
2.3 Home Page Sections 5 & 6
Page 007

9. Step 2: Design
2.4 Home Page Sections 7 & 8
Page 008

10. 3 Revamped Home Page with
New UI Designs- Layout 2
UI Design
Page 009

11. Step 2: Design
3.1 Home Page Sections 1 & 2
Page 010

12. Step 2: Design
3.2 Home Page Sections 3 & 4
Page 011

13. Step 2: Design
3.3 Home Page Sections 5 & 6
Page 012

14. Step 2: Design
3.4 Home Page Sections 7 & 8
Page 013

15. Step 2: Design
3.5 Home Page Sections 9 & 10
Page 014

16. Step 2: Design
3.6 Home Page Sections 10 & 11
Page 015

17. 4 Revamped About Us Page with
New UI Designs
UI Design
Page 016

18. Step 2: Design
4.1 About Us Page Sections 1 & 2
Page 017

19. Step 2: Design
4.2 About Us Page Sections 3 & 4
Page 018

20. Page 019
Unlike its usual function for notifications, clicking the bell icon here unexpectedly reveals helpful links instead of alerts.
Multi-image carousels have become common, replacing static "hero images." However, mature UI choices can sometimes
outperform youthful alternatives. A single powerful image can better capture attention. Static hero images are less distracting,
enhancing global navigation visibility. Important info should appear outside carousels for better user engagement.
Providing fund recommendations is vital, as users lack comprehensive fund knowledge. Most users grasp the "Risk" factor before
investing. To enhance fund suggestions, offer a filter option based on the "Riskometer."
CEO/MD message should be concise. Interested users can expand or open a new page for in-depth reading. This section offers a
pause and builds trust with a brief message, through a concise message with CEO's image.
About us page doesn’t had any specific page. So that has to be redesigned.
Step 3
Home Page UI Pain Points

21. Step 2: Design Process
5.1 Addressing UI Pain Points for Section 1
Page 020
Screen 1
Screen 2
Screen 3
Screen 1

22. Step 2: Design Process
5.2 Addressing UI Pain Points for Section 2
Page 021
Screen 1
Screen 2
Screen 3
Screen 2

23. Step 2: Design Process
5.3 Addressing UI Pain Points for Section 3
Page 022
Screen 1
Screen 2
Screen 3
Screen 3

24. Page 023
Please be informed that the bell icon has been replaced with a
help icon for better clarity and ease of understanding.
We have opted for a single hero image instead of a slider.
I've added a side menu that shows all the different parts of the
page. Since there are more than 5 sections on the page, it's
good to let the user know where they are and what information
each section has. This way, users can easily understand the
page without getting confused.
I included a new "Performance" section on the website, which
wasn't in the original version. This section displays how the
company's funds have grown over the past few years. I did this
to boost user confidence by showcasing our fund's success
before we recommend them to the users.
We took out extra articles and news from this section. Now,
we're focusing on just one main news or article. This change
makes the section less noisy and more focused.
We created a "Knowledge Hub" section to make it easy for
users to find important information.
Step 3
6. Home Page UI Pain Points Resolved

25. Step 2: Design Process
6.1 Pain Points Resolved for Section 3
Page 024
Screen 1
Screen 2
Screen 3
Screen 1

26. Step 2: Design Process
6.2 Pain Points Resolved for Section 2
Page 025
Screen 1
Screen 2
Screen 3
Screen 2

27. Step 2: Design Process
6.3 Pain Points Resolved for Section 3
Page 026
Screen 3
Screen 3
Screen 4
Screen 5

28. Step 2: Design Process
6.4 Pain Points Resolved for Section 4
Page 027
Screen 4
Screen 3
Screen 4
Screen 5

29. Step 2: Design Process
6.5 Pain Points Resolved for Section 5
Page 028
Screen 5
Screen 3
Screen 4
Screen 5